کیو-ام-ال

کیو-ام-ال

پارادایم برنامه‌نویسی	پارادایم برنامه‌نویسی: برنامه‌نویسی اعلانی، reactive، زبان اسکریپت‌نویسی
توسعه‌دهنده	Qt Project
ظهوریافته در	۲۰۰۹ (۲۰۰۹-}})
انتشار پایدار	۵٫۱۵٫۰ / ۲۶ آوریل ۲۰۲۰ (۲۰۲۰-26}})
شیوه نوع‌دهی	dynamic، وابستگی زیاد و کم به نوع
وبگاه	qt-project.org/doc/qt-5/qmlapplications.html
متأثر از
XAML، جی‌سان، جاوااسکریپت، کیوت
تأثیر گذاشته بر
کیوت، رینگ

کیو-ام-ال (به انگلیسی: QML:Qt Meta Language, Qt Modeling Language) یک زبان بر پایهٔ جاوااسکریپت و برنامه‌نویسی اعلانی برای ایجاد واسط‌های کاربری برای برنامه‌های کاربردی است. این زبان بخشی از پروژهٔ Qt Quick (کیت UI توسعه یافته به وسیلهٔ شرکت نوکیا) می‌باشد. کیو-ام-ال به‌طور عمده برای نرم‌افزارهای موبایل استفاده می‌شود. کیو-ام-ال بر سه‌پایه استوار است. کیوت به عنوان حامل، اشیاء (مستطیل، دایره، مثلث، عکس و …) و رفتارها (حالت‌ها،انتقال‌ها، انیمیشن‌ها). این المان‌ها می‌توانند برای ساخت قطعات پیچیده از قطعات ساده مانند کلیدها و لغزنده‌ها به منظور استفاده در برنامه‌های کاربردی و قابل دسترس از طریق اینترنت استفاده شود. این المان‌ها همچنین می‌توانند با استفادهٔ درون برنامه‌ای از برنامه‌نویسی جاوا اسکریپت و همچنین فریم ورک کیوت بر پایهٔ زبان برنامه‌نویسی سی پلاس پلاس توسعه پیدا کند.

ساختاری، معنایی

ساختار اصلی

مثال:

import QtQuick 1.0

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

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

اشیاء به وسیله نوعشان (مثلث، مربع…)متمایز می‌شوند که به دنبال آن یک جفت کروشه می‌آید، نام اشیاء با یک حرف بزرگ شروع می‌شود. در مثال بالا، دو شیء وجود دارد، یک مستطیل و فرزند آن که یک عکس می‌باشد. در میان کروشه‌ها، شما می‌توانید اطلاعاتی (مثلاً خصوصیات آن شیء) را به اشیاء نسبت دهید. خصوصیات یک شیء به صورت مقدار:خصوصیت تعریف می‌شود. در مثال بالا می‌توان دید که شیء Image دارای یک خصوصیت به نام source می‌باشد که مقدار "pics/logo.png" به آن نسبت داده شده. خصوصیت و مقدار آن به وسیلهٔ یک علامت دونقطه از هم جدا می‌شود.

خصوصیت id هر شیء می‌تواند یک خصوصیت ویژه و یکتا داشته باشد که به آن id گفته می‌شود. نسبت دادن id به اشیاء این امکان را فراهم می‌آورد که یک شیء به یک شیء دیگر ارجاع پیدا کند. در مثال زیر به مستطیل اول یک id به نام "myRect" نسبت داده شده، و در مستطیل دوم خصوصیت width (عرض) به مستطیل اول ارجاع داده شده، به این صورت که مقدار width در مستطیل اول به پارامتر width در مستطیل دوم نیز نسبت داده می‌شود.

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

نام مقدار نسبت داده شده به خصوصیت id باید با حروف کوچک یا یک علامت شروع شود، و همچنین نمی‌تواند در ادامه به چز حروف انگلیسی کاراکتر دیگری (مثل اعداد یا علائم) را شامل شود.

شیرازهٔ خصوصیت

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

شیرازهٔ خصوصیت به صورت ضمنی در کیو-ام-ال برای زمانهایی ساخته شده‌است که یک خصوصیت به یک عبارت جاوا اسکریپتی نسبت داده می‌شود. کد کیو-ام-ال زیر از دو شیرازهٔ خصوصیت برای ایجاد ارتباط بین اندازهٔ مستطیل و "otherItem" استفاده کرده‌است.

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

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

مثال:

 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" }
 }

حالت‌ها

حالت‌ها یک رویه برای ترکیب تغییرات به منظور اعمال خصوصیت‌ها در یک واحد معنایی می‌باشد. برای مثال یک کلید دارای حالت‌های «کلیک شده» و «کلیک نشده» می‌باشد یا یک دفترچه تلفن باید دارای حالتهای «فقط خواندنی» یا «قابل تغییر» باشد. هر حالت به این صورت تعریف می‌شود که نام خصوصیت نوشته شده و مقداری متفاوت با مقدار آن در حالت اصلی به آن خصوصیت نسبت داده می‌شود.

مثال: در حالت پیش فرض myRect در مکان ۰٬۰ قرار دارد و در حالت "moved" در مکان ۵۰٬۵۰ قرار می‌گیرد؛ و کلیک کردن با ماوس روی آن، حالت پیشفرض (۰٬۰)را به حالت "moved" و مکان(۵۰٬۵۰)تغییر می‌دهد.

 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'
     }
 }

تغییر حالات می‌تواند با نسبت دادن یک انیمیشن به تغییر مکان انجام شود. برای مثال، اضافه کردن کد زیر به کد بالا تغییر مکان به حالت "moved" را با یک انیمیشن همراه می‌کند:

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

انیمیشن

انیمیشن‌ها در کیو-ام-ال به وسیله نسبت دادن انیمیشن به خصوصیات اشیاء انجام می‌شود. به خصوصیاتی مانند type real, int, color, rect, point, size, and vector3d می‌توان انیمیشن نسبت داد.

کیو-ام-ال دارای سه نوع کلی انیمیشن است:انیمیشن‌های پایه‌ای خصوصیت ها(basic property animation) ، انتقال (transitions) و رفتار خصوصیت‌ها (property behaviors).

ساده‌ترین نوع انیمیشن انیمیشن خصوصیت هاست، که می‌تواند به تمام خصوصیت‌های لیست شده در بالا را نسبت داده شود. انیمیشن خصوصیت می‌تواند به عنوان یک مقدار و با کلمه کلیدی Animation به یک خصوصیت نسبت داده شود. این نوع انیمیشن به ویژه برای انیمیشن‌هایی که تکرار در آنها وجود دارد مفید است.

مثال زیر یک انیمیشن حجیم شدن(bouncing) می‌سازد.

 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 }
         }
     }
 }