QML

📅 آخر تحديث: ٢٩ يوليو ٢٠٢٦
✍️ نُشر في: ٢٩ يوليو ٢٠٢٦
الموسوعة الحرة

لغة QML ( لغة كائنات Qt الوصفية [ 3 ] ) هي لغة ترميز لواجهات المستخدم . وهي لغة تصريحية (شبيهة بلغة CSS و JSON ) لتصميم تطبيقات تتمحور حول واجهة المستخدم . تُعالج الجوانب الإجرائية باستخدام كود JavaScript مضمن . ترتبط QML بـ Qt Quick ، وهي مجموعة أدوات إنشاء واجهات المستخدم التي طورتها نوكيا في الأصل ضمن إطار عمل Qt . يُستخدم Qt Quick في تطبيقات الجوال حيث يُعد إدخال اللمس والرسوم المتحركة السلسة وتجربة المستخدم عناصر أساسية. تُستخدم QML أيضًا مع Qt3D [ 4 ] لوصف مشهد ثلاثي الأبعاد ومنهجية عرض "مخطط الإطار". يصف مستند QML شجرة كائنات هرمية. تتضمن وحدات QML [ 5 ] المرفقة مع Qt لبنات بناء رسومية أساسية (مثل المستطيل والصورة)، ومكونات نمذجة (مثل FolderListModel وXmlListModel)، ومكونات سلوكية (مثل TapHandler وDragHandler وState وTransition وAnimation)، وعناصر تحكم أكثر تعقيدًا (مثل الزر والمنزلق والدرج والقائمة). يمكن دمج هذه العناصر لبناء مكونات تتفاوت في تعقيدها، بدءًا من الأزرار والمنزلقات البسيطة، وصولًا إلى برامج كاملة متصلة بالإنترنت.

يمكن تعزيز عناصر QML باستخدام جافا سكريبت القياسية ، سواءً بشكل مباشر أو عبر ملفات .js المضمنة. كما يمكن دمج العناصر وتوسيعها بسلاسة باستخدام مكونات C++ عبر إطار عمل Qt.

لغة QML هي لغة البرمجة؛ وبيئة تشغيلها بلغة JavaScript هي محرك V4 المُخصص، [ 6 ] منذ إصدار Qt 5.2؛ [ 7 ] أما Qt Quick فهي مخطط المشهد ثنائي الأبعاد وإطار عمل واجهة المستخدم المبني عليه. كل هذه العناصر جزء من وحدة Qt Declarative، مع العلم أن هذه التقنية لم تعد تُسمى Qt Declarative.

يمكن تجميع أكواد QML وJavaScript إلى ملفات ثنائية أصلية بلغة C++ باستخدام مُجمِّع Qt Quick. [ 8 ] كما يوجد تنسيق ملف ذاكرة تخزين مؤقتة لـ QML [ 9 ] يقوم بتخزين نسخة مُجمَّعة من QML ديناميكيًا لتسريع بدء التشغيل في المرة القادمة.

التبني

بناء الجملة، الدلالات

فيما يلي بعض الأمثلة على بناء الجملة :

بناء الجملة الأساسي

استيراد QtQuickمستطيل { المعرف: canvas العرض: 250 الارتفاع: 200 اللون: "أزرق"صورة { المعرف: الشعار المصدر: " pics /logo.png" توسيط في: الأصل x: ارتفاع اللوحة / 5 } }

تُحدد الكائنات بنوعها، متبوعًا بقوسين معقوفين. تبدأ أنواع الكائنات دائمًا بحرف كبير. في المثال أعلاه، يوجد كائنان: مستطيل (Rectangle) وكائن تابع له (Image). بين القوسين المعقوفين، يمكن تحديد معلومات حول الكائن، مثل خصائصه. تُحدد الخصائص على النحو التالي: الخاصية: القيمة. في المثال أعلاه، تحتوي الصورة (Image) على خاصية باسم source، وقد تم تعيين القيمة لها pics/logo.png. يفصل بين الخاصية وقيمتها نقطتان رأسيتان (:).

خاصية المعرف

يمكن إعطاء كل عنصر خاصية فريدة تُسمى مُعرّفًا (id). يُمكّن تعيين مُعرّف العنصر من الإشارة إليه من قِبل عناصر أخرى وبرامج نصية. عنصر المستطيل الأول أدناه له مُعرّف (id) myRect. يُحدد عنصر المستطيل الثاني عرضه بالإشارة إلى (id) myRect.width، مما يعني أن له نفس قيمة عرض عنصر المستطيل الأول.

عنصر { مستطيل { المعرف : myRect العرض: 120 الارتفاع: 100 } مستطيل { العرض: myRect.width الارتفاع : 200 } }

يجب أن يبدأ المعرف بحرف صغير أو شرطة سفلية، ولا يمكن أن يحتوي على أي أحرف أخرى غير الأحرف والأرقام والشرطات السفلية.

ربط الملكية

يُحدد ربط الخاصية قيمة خاصية ما بطريقة تصريحية. ويتم تحديث قيمة الخاصية تلقائيًا إذا تغيرت الخصائص الأخرى أو قيم البيانات، وفقًا لنموذج البرمجة التفاعلية .

يتم إنشاء روابط الخصائص ضمنيًا في QML عند إسناد تعبير JavaScript إلى خاصية ما. يستخدم QML التالي رابطين للخصائص لربط حجم المستطيل بحجم العنصر الآخر (otherItem).

مستطيل { العرض: عرض العنصر الآخر الارتفاع : ارتفاع العنصر الآخر }

تُوسّع QML محرك JavaScript المتوافق مع المعايير، لذا يُمكن استخدام أي تعبير JavaScript صالح كربط للخصائص. يُمكن للروابط الوصول إلى خصائص الكائنات، واستدعاء الدوال، وحتى استخدام كائنات JavaScript المُدمجة مثل Date و Math.

مستطيل { دالة حساب ارتفاعي ( ) { إرجاع Math.max ( otherItem.height , thirdItem.height ) ; } anchors.centerIn : parent العرض: Math.min ( otherItem.width , 10 ) الارتفاع : حساب ارتفاعي ( ) اللون : العرض > 10 ؟ "أزرق " : " أحمر " }

الولايات

تُعدّ الحالات آليةً لدمج التغييرات التي تطرأ على الخصائص في وحدة دلالية. فعلى سبيل المثال، يمتلك الزر حالة ضغط وحالة عدم ضغط، وقد يمتلك تطبيق دفتر العناوين حالة قراءة فقط وحالة تعديل لجهات الاتصال. لكل عنصر حالة أساسية "ضمنية". ويتم وصف كل حالة أخرى من خلال سرد خصائص وقيم العناصر التي تختلف عن الحالة الأساسية.

مثال: في الحالة الافتراضية، يكون موضع المستطيل myRect عند الإحداثيات 0,0. في حالة "التحريك"، يكون موضعه عند الإحداثيات 50,50. يؤدي النقر داخل منطقة الماوس إلى تغيير الحالة من الحالة الافتراضية إلى حالة "التحريك"، وبالتالي تحريك المستطيل.

استيراد QtQuickالعنصر { المعرف: myItem العرض: 200 ؛ الارتفاع: 200مستطيل { المعرف: myRect العرض: 100 ؛ الارتفاع: 100 اللون: "أحمر" } الحالات: [ الحالة { الاسم: "تم النقل" تغييرات الخصائص { الهدف: myRect س: 50 ص: 50 } } ] منطقة الماوس { anchors.fill: الأصل onClicked: myItem.state = ' تم النقل ' } }

يمكن تحريك تغييرات الحالة باستخدام الانتقالات.

على سبيل المثال، إضافة هذا الكود إلى عنصر Item أعلاه يؤدي إلى تحريك الانتقال إلى حالة "تم النقل":

الانتقالات: [ الانتقال { من: "*" إلى: "تم النقل" تحريك الأرقام { الخصائص: "x، y" ؛ المدة: 500 } } ]

الرسوم المتحركة

تُنفذ الرسوم المتحركة في QML عن طريق تحريك خصائص الكائنات. ويمكن تحريك جميع الخصائص من النوع real، وint، وcolor، وrect، وpoint، وsize، وvector3d.

يدعم QML ثلاثة أشكال رئيسية من الرسوم المتحركة: الرسوم المتحركة الأساسية للخصائص، والانتقالات، وسلوكيات الخصائص.

أبسط أشكال الرسوم المتحركة هي PropertyAnimation، والتي يمكنها تحريك جميع أنواع الخصائص المذكورة أعلاه. يمكن تحديد رسوم متحركة للخاصية كمصدر قيمة باستخدام صيغة Animation on property. وهذا مفيد بشكل خاص للرسوم المتحركة المتكررة.

يُنشئ المثال التالي تأثير ارتدادي:

مستطيل { المعرف: مستطيل العرض: 120 ؛ الارتفاع: 200صورة { المعرّف: img المصدر: "pics/qt.png" س: 60 - عرض الصورة / 2 ص : 0SequentialAnimation 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 } } } }

تكامل Qt/C++

لا يتطلب استخدام QML معرفة بـ Qt/C++، ولكن يمكن توسيعه بسهولة عبر Qt. [ 27 ] [ 28 ] يمكن تسجيل أي فئة C++ مشتقة من QObject بسهولة كنوع يمكن بعد ذلك إنشاء مثيل له في QML.

مفاهيم مألوفة

توفر لغة QML إمكانية الوصول المباشر إلى المفاهيم التالية من Qt:

  • إشارات QObject – يمكنها تشغيل عمليات الاستدعاء في جافا سكريبت
  • فتحات QObject - متاحة كدوال يمكن استدعاؤها في جافا سكريبت
  • خصائص QObject – متوفرة كمتغيرات في جافا سكريبت، وللربط
  • QWindow – نافذة تُنشئ مشهد QML في نافذة
  • Q*Model – يستخدم مباشرة في ربط البيانات (على سبيل المثال، QAbstractItemModel) [ 29 ] [ 30 ] [ 31 ]

معالجو الإشارات

معالجات الإشارات هي دوال رد نداء في جافا سكريبت تسمح بتنفيذ إجراءات إلزامية استجابةً لحدث ما. على سبيل المثال، يحتوي عنصر MouseArea على معالجات إشارات للتعامل مع ضغط الماوس وإفلاته والنقر عليه.

MouseArea { onPressed : console.log ( "تم الضغط على زر الماوس " ) }

جميع أسماء معالجات الإشارات تبدأ بـ "on".

أدوات التطوير

نظرًا للتشابه الكبير بين لغتي QML وJavaScript، فإن معظم محررات الأكواد التي تدعم JavaScript ستعمل. يتوفر دعم كامل لتمييز الصيغة ، وإكمال الأكواد، والمساعدة المدمجة، ومحرر WYSIWYG في بيئة التطوير المتكاملة (IDE) المجانية متعددة المنصات Qt Creator منذ الإصدار 2.1، وفي العديد من بيئات التطوير المتكاملة الأخرى.

يمكن استخدام ملف qml التنفيذي لتشغيل ملف QML كبرنامج نصي. إذا بدأ ملف QML بسطر shebang، فيمكن جعله قابلاً للتنفيذ مباشرةً. مع ذلك، فإن تجهيز تطبيق للنشر (خاصةً على منصات الأجهزة المحمولة) يتضمن عادةً كتابة برنامج تشغيل بسيط بلغة C++ وتغليف ملفات QML المطلوبة كموارد.

مراجع

  1. ↑ "تم إصدار Qt 6.8" .
  2. ↑ "ما هي واجهة المستخدم المناسبة لتطبيق حديث؟" . scriptol .
  3. ↑ "دليل استخدام Qt Quick" . 7 أغسطس 2020. تم الاطلاع عليه في 9 مارس 2025 .
  4. ↑ "نظرة عامة على Qt 3D: Qt 3D 5.13.1" . doc.qt.io .
  5. ↑ "جميع أنواع QML: Qt 5.13" . doc.qt.io. تم ​​الاطلاع عليه في 7 سبتمبر 2019 .
  6. ↑ كنول، لارس (15 أبريل 2013). "تطور محرك QML، الجزء 1" . تم الاطلاع عليه بتاريخ 11 مايو 2018 .
  7. ↑ "ما الجديد في Qt 5.2" . تم الاطلاع عليه بتاريخ 11-05-2018 .
  8. ↑ "مترجم Qt Quick" . تم الاطلاع عليه في 7 سبتمبر 2019 .
  9. ↑ "نشر تطبيقات QML: Qt 5.13" . doc.qt.io. تم ​​الاطلاع عليه في 7 سبتمبر 2019 .
  10. ^ "التطوير/البرامج التعليمية/Plasma4/QML/البدء" . قاعدة تقنية كيدي . كيدي.
  11. ↑ دراغلي، سفين-آرني (ديسمبر 2017). "التطوير لجهاز ريماركابل اللوحي" . دراغلي . مؤرشف من الأصل بتاريخ 14 سبتمبر 2018. تم الاطلاع عليه بتاريخ 3 يناير 2018 .
  12. ↑ "عرض توضيحي لـ QML لجهاز reMarkable Paper Tablet" . GitHub . 9 مارس 2022.
  13. ↑ "Unity الخاصة بنظام Ubuntu مكتوبة بلغة Qt/QML لـ "Unity Next""" . مايكل لارابيل.
  14. ↑ "دمج لغة C++ مع QML في تطبيقات نظام التشغيل Sailfish" .
  15. ↑ "برنامج تعليمي - البرمجة المباشرة باستخدام QML مع Qt QmlLive" .
  16. ↑ "تحويل QML إلى C++ وتحويل C++ إلى QML" . Jolla. مؤرشف من الأصل بتاريخ 24-03-2023 . تم الاطلاع عليه بتاريخ 03-01-2018 .
  17. ↑ "أساسيات لغة QML" . بلاك بيري.
  18. ↑ "مقدمة إلى لغة QML لنظام Meego" . نوكيا. مؤرشف من الأصل بتاريخ 4 يناير 2018. تم الاطلاع عليه بتاريخ 3 يناير 2018 .
  19. ↑ "عروض توضيحية لـ MeeGo و Qt-QML تهاجم مؤتمر MWC" . أدوات إنترنت الأشياء. 23 فبراير 2011.
  20. ↑ "QML على N900" . maemo.org . مجتمع Maemo. مؤرشف من الأصل بتاريخ 24-03-2023 . تم الاطلاع عليه بتاريخ 03-01-2018 .
  21. ↑ "إطلاق Qt على نظام Tizen بمظهر وإحساس قياسيين" . 20 مايو 2013.
  22. ↑ "مير" .
  23. ↑ "مير ويكي" .
  24. ↑ "واجهة مستخدم QML لأحمر الشفاه على MeeGo CE / Mer" . أدوات إنترنت الأشياء. 6 أكتوبر 2011.
  25. ↑ "QML - أفضل أداة لإطلاق العنان لإبداعك" . أوبونتو.
  26. ↑ "نظرة على سطح مكتب لومينا 2.0" . TrueOS. 19 أغسطس 2020.
  27. ↑ ألبرت، آلان. "قصة مستخدم Qt/QML" . تخيلات لا تُصلح . مؤرشف من الأصل بتاريخ 17-06-2019 . تم الاسترجاع بتاريخ 17-06-2019 .
  28. ↑ ألبرت، آلان. "الطرق العديدة لتوحيد QML وC++" . أيام مطوري Qt . بلاك بيري. مؤرشف من الأصل بتاريخ 17-06-2019 . تم الاسترجاع بتاريخ 17-06-2019 .
  29. ↑ دالبوم، ج. (22 أبريل 2010). "نماذج العناصر المجردة في طرق عرض QML" . الأجزاء المفقودة .
  30. ↑ "فرز وتصفية جدول البيانات" . شركة Qt.
  31. ↑ فان دير لان، براد (11 يوليو 2014). "كيفية استخدام QSortFilterProxyModel في Qt" . التفكير الإبداعي .

إرشادات