QML یا کیو ام ال چیست؟

QML یا کیو ام ال ( Qt Meta Language یا Qt Modeling Language) یک زبان نشانه گذاری رابط کاربری است. این زبان یک زبان اعلانی مشابه JSON است که در جهت ساخت رابط کاربری برای نرم افزار های کاربردی به کار می رود. کد JavaScript درون خطی (Inline ) ، جنبه های دستوری را مدیریت می کند.

این زبان بخشی از Qt Quick ( بسته ساخت و طراحی رابط کاربری در چارچوب Qt که توسط شرکت نوکیا توسعه داده شده است) می باشد. QML عمدتا برای اپلیکیشن های تلفن همراه که در آن ها ورودی لمسی، انیمیشن های روان ( 60 فریم بر ثانیه) و تجربه کاربری فوق العاده ضروری هستند به کار می رود. اسناد QML برای توصیف درختی شی از المان ها به کار می رود. المان های QML که همراه Qt عرضه می شوند مجموعه پیچیده ای از بلوک های سازنده، بلوک های گرافیکی(مستطیل، تصویر) و بلوک های رفتاری( حالت، انتقال و انیمیشن) هستند. این المان ها می توانند با یکدیگر ترکیب شوند و اجزایی را بسازند که از نظر پیچیدگی بسیار متنوع هستند. این اجزا می توانند به سادگی چند دکمه و یک لغزنده و یا به پیچیدگی یک برنامه کامل با قابلیت اتصال به اینترنت باشند.

المان های QML را می توان با کمک Javascript استاندارد، چه به صورت درون خطی و چه با کمک فایل های .js موجود، گسترش داد. همچنین این المان ها را می توان به راحتی با کمک چارچوب Qt با اجزا ++C به صورت یکپارچه دراورد و حتی آن ها را گسترش داد.

QML یک زبان است و JavaScript runtime مربوط به آن ، موتور  V4 می باشد و Qt Quick چارچوب رابط کاربری مبتنی بر نمودار صحنه ای (Scene graph) می باشد. همه این ها بخشی از ماژول Qt Declarative به شمار می روند ولی این تکنولوژی دیگر با نام Qt Declarative شناخته نمی شود.

ساختار و معناشناسی در  QML

ساختار اصلی QML یا Basic syntax

مثال:

import QtQuick 2.0

 Rectangle {
     id: canvas
     width: 250
     height: 200
     color: "blue"

     Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5
     }
 }

اشیا با توجه به نوعشان مشخص می شوند و سپس بعد از آن ها دو آکولاد قرار می گیرد. نوع شی (Object) همیشه با حروف بزرگ آغاز می شود. در مثال فوق، دو شی وجود دارد؛ یک مستطیل و فرزندش که یک تصویر(image) است. بین آکولاد ها، کاربر می تواند در مورد هر شی اطلاعاتی( مانند خواص) را برای آن تعیین کند. خواص یک شی به صورت خاصیت: مقدار تعریف می شوند. در مثال بالا، می توان مشاهده کرد که شی تصویر، دارای خاصیتی به نام source می باشد که مقدار  “pics/logo.png” به آن اختصاص داده شده است. خاصیت و مقدار آن به وسیله علامت “:” از یکدیگر جدا می شوند.

خاصیت id در QML

به هر شی می توان یک خاصیت منحصر به فرد به نام id اختصاص داد. اختصاص دادن یک id برای هر شی امکان ارجاع دادن اشیا و کدهای دیگر به آن را فراهم می کند. اولین المان مستطیلی در مثال زیر دارای id به نام “myRect” است. دومین المان مسطیلی عرض خود را با ارجاع دادن به  myRect.width مشخص می کند. این بدان معناست که عرض مستطیل دوم برابر عرضی است که برای مستطیل اول تعریف شده است.

Item {
     Rectangle {
         id: myRect
         width: 120
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

توجه داشته باشید که یک id باید با حروف کوچک یا با علامت”_”شروع شود و نمی تواند حاوی کاراکتر هایی به غیر از حروف، اعداد و علائم باشد.

انتساب یا مقدار دهی خصوصیت ها در QML یا Property bindings

یک انتاسب خصوصیت، مقدار یک خاصیت را به شکل اعلانی مشخص می کند. مقدار این خاصیت در صورت تغییر مقدار سایر خواص یا داده ها به صورت خودکار بروزرسانی می شود که از الگوی برنامه نویسی واکنشی تبعیت می کند.

انتساب خصوصیت ها در QML به صورت ضمنی زمانی ساخته می شود که به یک خاصیت، یک عبارت Javascript اختصاص داده شود. در کد QML زیر، از دو اتصال خصوصیت استفاده شده تا ابعاد مستطیل را به ابعاد otherItem متصل کند.

Rectangle {
     width: otherItem.width
     height: otherItem.height
 }

QML به عبارتی شامل یک موتور یا کامپایلر استاندارد Javascript  می شود ، در نتیجه هر عبارت صحیح Javascript را می توان به عنوان یک انتساب خاصیت به کار برد. انتساب ها می توانند به خواص اشیا دسترسی داشته باشند، فراخوانی توابع را انجام دهند و حتی از اشیا موجود Javascript مانند  Date یا  Math استفاده کنند.

مثال:

Rectangle {
     function calculateMyHeight() {
         return Math.max(otherItem.height, thirdItem.height);
     }
     anchors.centerIn: parent
     width: Math.min(otherItem.width, 10)
     height: calculateMyHeight()
     color: { if (width > 10) "blue"; else "red" }
 }

حالت ها در QML

حالت ها در واقع مکانیزمی برای ترکیب تغییرات ایجاد شده بر روی خصوصیات در داخل یک واحد معنایی به شمار می روند. برای مثال یک دکمه، دو حالت فشرده شده و فشرده نشده دارد یا یک برنامه دفترچه مخاطب، می تواند دو حالت فقط خواندنی یا ویرایش مخاطبین داشته باشد. هر المان، یک حالت پایه ضمنی دارد. هر حالت دیگر را می توان با تهیه لیستی از خواص و مقادیری از المان که با حالت پایه متفاوت هستند توصیف نمود.

مثال: در حالت پیش فرض، myRect در نقطه (0،0) قرار گرفته است. در حالت”جابجا شده” در نقطه (50،50) قرار می گیرد. کلیک کردن در داخل محدوده ماوس، حالت را از پیش فرض به جابجا شده تغییر می دهد و در نتیجه مستطیل جابجا می شود.

 import QtQuick 1.0

 Item {
     id: myItem
     width: 200; height: 200

     Rectangle {
         id: myRect
         width: 100; height: 100
         color: "red"
     }
     states: [
         State {
             name: "moved"
             PropertyChanges {
                 target: myRect
                 x: 50
                 y: 50
             }
         }
     ]
     MouseArea {
         anchors.fill: parent
         onClicked: myItem.state = 'moved'
     }
 }

تغییر حالت ها را می توان با استفاده از Transition به صورت متحرک در آورد.

برای مثال اضافه کردن کد زیر به المان بالا تغییر حالت به “جابجا شده” را به صورت انیمیشن دار انجام می دهد.

transitions: [
     Transition {
         from: "*"
         to: "moved"
         NumberAnimation { properties: "x,y"; duration: 500 }
     }
  ]

انیمیشن در QML

انیمیشن ها در QML با به حرکت درآوردن خواص اشیا انجام می شوند. خواصی از نوع real, int, color, rect, point, size, و vector3d می توانند به صورت متحرک در بیایند. QML از سه نوع اصلی انیمیشن پشتیبانی می کند.: انیمیشن پایه ای خواص، انتقال ها و رفتار خواص.

ساده ترین نوع انیمیشن انیمیشن خواص است که می تواند همه انواع خواصی که در بالا ذکر شد را به حرکت دربیاورد. یک انیمشین خاصیت را می توان با استفاده از یک مقدار با استفاده از دستور Animation در ساختار خاصیت، به آن نسبت داد. این کار به خصوص برای انیمیشن هایی که قرار است تکرار شوند بسیار کاربردی است.

مثال زیر باعث ایجاد یک نوع انیمیشن رفت و برگشتی می شود.

Rectangle {
     id: rect
     width: 120; height: 200

     Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

یکپارچه سازی C++ / QML

برای استفاده از QML به دانش Qt یا C++ نیاز ندارید اما می توان به راحتی آن را با کمک Qt گسترش داد.

مفاهیم آشنا:

QML امکان دسترسی مستقیم به مفاهیم زیر که در Qt موجود هستند را فراهم می کند:

• Qaction – نوع اکشن
•  Qobject سیگنال ها و شکاف ها – به عنوان توابعی برای فراخوانی در Javascript
• خواص Qobject – به عنوان متغیرهایی در Javascript
•  Qwidget – QdeclarativeView یک ویجت نمایشگر QML است.
•  Q*Model – به طور مستقیم در اتصال داده ها به کار می رود

مدیریت کننده های سیگنال در Qt

مدیریت کننده های سیگنال اجازه می دهند تا اقداماتی برای پاسخ به یک رویداد رخ دهد. برای مثال، المان MouseArea دارای مدیریت کننده های سیگنالی است که فشار، رها کردن و کلیک بر روی دکمه های موس را مدیریت می کنند.

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

نام همه مدیریت کننده های سیگنال با on شروع می شود.

ابزار توسعه QML

به دلیل این که QML و Javascript بسیار شبیه هستند تقریبا تمامی ویرایشگر های کدی که برای Javascript استفاده می شوند مناسب هستند. با این وجود پشتیبانی کامل از برجسته سازی نحو( Syntax Highlighting) ، کامل کردن کد ها، راهنمایی های یکپارچه سازی شده و ویرایشگر  WYSIWYG در IDE رایگان و چند پلتفرمه Qt Creatorاز نسخه 2.1 به بعد در دسترس هستند. نسخه از Creator که با نسخه های تجاری Qt عرضه می شود امکانات بیشتری در ویرایشگر  WYSIWYG دارد.

فایل اجرایی qml می تواند برای اجرای یک فایل QML به عنوان یک اسکریپت به کار رود. با این وجود بسته بندی یک نرم افزار کاربردی برای نصب و اجرا، عمدتا شامل نوشتن یک اجراکننده ساده C++ و بسته بندی فایل های QML ضروری به عنوان منابع لازم برای آن، می باشد.

برای آشنایی بیشتر با QML و همچنین فریم کیوت به شما پیشنهاد میکنیم به مقاله زیر مراجعه نمایید: