تطوير تطبيقات لأوبونتو [QML]

تثبيت Ubuntu SDK

أوبونتو SDK هو IDE الذي يزودنا بالأدوات التي نحتاجها لتطوير تطبيق بناءً على QTCreator.

sudo apt-get install ubuntu-sdk

إذا تم تثبيته مرة واحدة ، فإننا نفتحه وسيظهر هذا:

توثيق

يمكننا العثور على الكثير من المعلومات في الويب من مطوري Ubuntu والبرامج التعليمية وواجهة برمجة التطبيقات ...

ضمن نفس Ubuntu SDK ، يمكننا العثور على أقسام يمكننا التعلم منها ، راجع التعليمات البرمجية ... الفئات هي Help و Wiki و Core Apps و API.

في API ، يمكننا العثور على جميع Ubuntu api.Components 0.1 وهي المكونات التي سنستخدمها لإنشاء التطبيق.

في Core Apps يظهر لنا الويب تطبيقات الهاتف ubuntu من لوحة التشغيل حيث يمكننا العثور على رمز العديد من التطبيقات. في Help ، يمكننا الاطلاع على بعض الكتيبات التي ستساعدنا على البدء.

شبكة حيث يمكننا العثور على برنامج تعليمي لتحليل json باستخدام qml و javascript.

إنشاء تطبيق (عميل)

لرؤية مثال ، سننشئ عميلًا تحدثت عنه قليلاً بالفعل هنا.

نقوم بإنشاء مشروع جديد: ملف -> ملف جديد أو مشروع

ونختار Simple Touch UI. في الوقت الذي أنشأنا فيه مشروعنا ، سيظهر منظمًا ، مع بعض الملفات وبعض المجلدات ، إذا قمنا بتشغيله الآن ، فسنحصل على مثال للتطبيق ، والذي لن نستخدمه أو سنستخدمه جزئيًا كنقطة أساسية لإنشاء مشروعنا .

 

إذا أضفنا الآن listView بنموذج يأخذ بيانات Json من الرسوم الهزلية ، مثل العنوان ، فسنحصل على:

نقوم بإنشاء ملف يسمى data.js ، لإنشاء هذا الملف ، انقر بزر الماوس الأيمن فوق المشروع إضافة جديد -> Qt -> ملف JS:

يمكننا أن نرى كيف نقوم بتحليل json من خلال أخذ مصفوفة النتائج فقط حيث سنحصل على عنوان كل نتيجة.

console.log يشبه القيام بطباعة لوحدة التحكم.

أخيرًا وضعنا marvel.qml أعلاه حيث توجد الواردات

import "data.js" as Data

النتيجة:

لنتخيل أننا نريد أن نعطي تطبيقنا مظهرًا أفضل ، على سبيل المثال بدلاً من إظهار العنوان الذي يعرض صورة فقط. وتكون قادرًا على تحريكها أفقيًا ، حسنًا ، لنفعل ذلك:

نضيف خاصية التوجه في listview

orientation: ListView.Horizontal

نقوم أيضًا بتغيير نص الصورة:

Image {
width: 200; height: 150
fillMode: Image.PreserveAspectFit
source: thumbnail+".jpg"
}

وفي data.js نضيف الصورة المصغرة

marvelModel.append({id: i.id, title: i.title, thumbnail: i.thumbnail.path});

يمكننا أن نرى النتيجة:

حسنًا ، يمكننا الآن القيام بالعديد من الوظائف ليقوم بها تطبيقنا ، مثل النقر على الصورة سيظهر لنا معلومات ، محرك بحث عن الشخصيات ... لكننا سنترك المثال هنا.

التعبئة والتغليف

أخيرًا ، علينا فقط إنشاء الحزمة الخاصة بنا ، نذهب إلى التغليف:

يمكننا أن نرى أنه يتعين علينا ملء بعض الحقول. على سبيل المثال ، إذا كنت تستخدم الإنترنت ... ، عندما يكتمل كل شيء ، فإننا نعطي حزمة إنشاء والتي ستنشئ ملف .click حتى نتمكن من تثبيت التطبيق.

الخلاصة (GTK3 أو QML)

من حيث المظهر ، أنا شخصياً أحب gtk ولكن درجة "التعديل" تترك الكثير مما هو مرغوب فيه ، من ناحية أخرى باستخدام qml يمكنك تخصيص واجهة المستخدم كثيرًا للآخرين ، فهي تحتوي أيضًا على مكونات (مكونات سطح المكتب) التي اترك المظهر كما لو كان gtk.