Integrating QML and C++‎

[حمید رضا رحیمیان]

سلام خدمت همه ی دوستان و سروران برنامه نویسان
چند وقتی بود که درگیر ارتباط یا یکپارچگی بین qml و C++‎‎ بودم خوش بختانه به نتایج خوبی رسیدم گفتم بد نیست در دسترس دوستان هم باشد.
فقط لطف کنید در ادامه مطلب پستی نذارید تا به مرور زمان این قسمت تکمیل شود.
خوب اول از همه چند تا سوال فرعی پیش میاد

۱-اصلا qml چی هست و چرا باید من برنامه نویسی به این زبان را یاد بگیرم؟
qml یک زبان بر پایه ی JavaScript هست. برنامه نویسی به این زبان بسیار راحت و دل نشین هست. توصیه میکنم یک بار امتحان کنید به طور کل میتوانید یوزر اینترفیس بهتری و زیباتری ایجاد کنید.
برای اطلاعات بیشتر درباره‌ی QML می‌توانید به این صفحه‌ی ویکی‌پدیا (http://en.wikipedia.org/wiki/QML) مراجه کنید. حما کسی که میخواهد برنامه نوشته شده اش در همه ی سیستم عامل ها با C++‎‎ اجا شود باید از qml استفاده کند.

۲-من با Qt اشنایی دارم ولی اصلا به qml اشنا نیستم چطور باید شروع به یادگیری کنم؟
یادگیری QML کار زیاد سختی نیست شما میتوانید به راحتی Component های مورد نیاز خودتان را طراحی کنید.مثلا Window در QML از کلاس QQuickWindow ساخته شده که زیر مجموعه ای است از کلاس QWindow در Qt . میتوانید از Qt Quick QML Types (http://qt-project.org/doc/qt-5/qtquick-qmltypereference.html) برای یاد گیری شروع کنید.

من بیشر سعی میکنم ارتباط بین این دو موضوع را یاداشت کنم.

[حمید رضا رحیمیان]

اجرای یک صفحه ی qml توسط کدنویسی در C++‎‎

اول از همه دقت کنید برای کار با کلاس های QtQml and QtQuick باید به فایل pro برنامه این خط را اضافه کنید QT += qml quick
همین طور برای کار با qml در main بهتر است با QGuiApplication مقادیر ورودی و خروجی(argv,argc) را مقدار دهی کنید.
از فایل resource برای ادرس دهی بهتر استفاده کنید.

برای انجام این کار دو راه حل وجود دارد یکی راحت یکی سخت تر

راه حل اول: استفاده از QQmlApplicationEngine
این راه حل وقتی پروژه جدیدی ایجاد میکنید هم به صورت خودکار اضافه میشود.


QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));


راه حل دوم:
ایجاد یک QQmlEngine و استفاده از ان در QQmlComponent و نمایش فرم با استفاده از QQuickWindow


QQmlEngine* engine= new QQmlEngine;
QQuickWindow* window= new QQuickWindow;
QQmlComponent component(engine, QUrl(QStringLiteral("qrc:///main.qml")));
window= qobject_cast<QQuickWindow*>(component.create());
window->show();
123818

[حمید رضا رحیمیان]

دسترسی به ابجکت های QML در C++

چطور میشود به ابجکت های داخل qml دسترسی داشت؟ مثال QML زیر را ببینید:


import QtQuick 2.3
import QtQuick.Window 2.1
import QtQuick.Controls 1.2

ApplicationWindow {
id: myWindow
objectName: "myWindow"
visible: true
width: 600
height: 360

Button{
id: myBtn
objectName: "myBtn"
text: qsTr("btnTest")
}
}




در بالا یک صفحه ی اصلی ساختیم که یک باتن هم در ان قرار دادیم حالا اگر بخواهیم در کد سی به این ابجکتها دسترسی داشته باشیم نیاز به پر کردن پروپرتی objectName داریم. اگر بخواهیم به این ایتمها دسترسی داشه باشیم باید مثل زیر عمل کنیم:



QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));

QObject *myWindow= engine.rootObjects().at(0);
qDebug() << myWindow;


با کد بالا میتوانیم به ابجکت ریشه فرم دست پیدا کنیم ولی اگر بخواهیم یک فرزند را پیدا کنیم باید به چه صورت عمل شود؟



QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));

QObject *myBtn= engine.rootObjects().at(0)->findChild<QObject*>("myBtn");
qDebug() << myBtn;


همین طور که میبینید به راحتی میشود هر ابجکتی در QML را بوسیله کد C++ پیدا کرد و روی ان تاثیر گذاشت در ادامه مقادیر را تغییر میدهیم.

تغییر مقدار property در QML به وسیله کد C++

property ها در QML : مثلا در شی باتن: width , height , text , ........
همین طور خودتان میتوانید در QML پروپرتی جدید تعریف کنید ex: property type name: value

همین طور که در بالا دیدید ما توانستیم شی باتن به اسم myBtn را پیدا کنیم ولی چطور میشود مثلا سایز یا text یا ... ان را تغییر داد؟



QObject *myBtn= engine.rootObjects().at(0)->findChild<QObject*>("myBtn");
myBtn->setProperty("width",QVariant::fromValue(200));
myBtn->setProperty("height",QVariant::fromValue(40));
myBtn->setProperty("text", "change");


با استفاده از متد QObject::setProperty میتونید مقدار property ها را تغغیر دهید همین طور با QObect::property میتوانید مقادیر را دریافت کنید. با انجام کدهای بالا سایز و نوشته ی شی تغییر میکند شما میتوانید روی هر شی همین طور تاثیر گذار باشید.