用QML語(yǔ)言開(kāi)發(fā)MeeGo應(yīng)用程序
Qt Declarative UI 傳得沸沸揚(yáng)揚(yáng)，卻很少有中文資料介紹這是一個(gè)什么樣的技術(shù)，以及如何使用它。偶爾能搜到幾篇也是掐頭去尾的，讓人摸不著頭腦。這個(gè)入門教程來(lái)自于Qt官方文檔，更多的是語(yǔ)法性的介紹。
什么是QML？
QML是一種描述應(yīng)用程序UI的聲明式語(yǔ)言、腳本語(yǔ)言，文件格式以.qml結(jié)尾包括應(yīng)用程序的外觀（菜單、按鈕、布局等）以及行為（點(diǎn)擊事件）的描述。在QML中，UI界面被描述成一種樹狀的帶屬性對(duì)象的結(jié)構(gòu)。如果對(duì)HTML和CSS等Web技術(shù)有所理解是會(huì)有幫助的，但不是必需的。語(yǔ)法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。
上面是官方介紹的前兩段，QML實(shí)際上是Qt Quick（Qt4.7.0中的新特性）核心組件之一：Qt Quick是一組旨在幫助開(kāi)發(fā)者創(chuàng)建在移動(dòng)電話，媒體播放器，機(jī)頂盒和其他便攜設(shè)備上使用越來(lái)越多的直觀、現(xiàn)代、流暢UI的工具集合。Qt Quick包括一組豐富的用戶界面元素，一種用于描述用戶界面的聲明性語(yǔ)言（QML）及運(yùn)行時(shí)，一組用于將這些高層次特性集成到經(jīng)典的Qt應(yīng)用程序的 C++ API。
從官方的介紹可以看出，Qt Quick是為移動(dòng)平臺(tái)快速開(kāi)發(fā)所量身打造的，先看一個(gè)實(shí)際例子：在MeeGo上運(yùn)行的MeeNotes，除了業(yè)務(wù)邏輯，界面UI都是使用QML實(shí)現(xiàn)的
MeeNotes運(yùn)行效果
橫豎屏幕切換
在模擬器中運(yùn)行效果
MeeNotes可以在這里找到：使用git把qt-components和meenotes clone下來(lái)，然后先編譯qt-components，這個(gè)依賴于qt4.7，是使用QML快速開(kāi)發(fā)meego應(yīng)用程序的關(guān)鍵，它實(shí)現(xiàn)了一套meego的QML Module，之后可以編譯運(yùn)行下MeeNotes，如果運(yùn)行不了，請(qǐng)檢查Qt安裝目錄里是否有 com.nokia.meego這個(gè)module（我的位于/usr/local/Trolltech/Qt-4.7.0/imports/com /meego）如果沒(méi)有，則需要在qt-components解壓目錄下的 src/MeeGo 手動(dòng)執(zhí)行qmake/make/make install，進(jìn)行編譯安裝。
簡(jiǎn)單看看MeeNotes下的實(shí)際代碼
src目錄下的src.pro，紅色部分即是與使用libmeegotouch開(kāi)發(fā)所不同之處 ：
- TEMPLATE = app
- TARGET = ../MeeNotes
- LIBS += -lQtComponents
- HEADERS += models/meenotesmodel.h \
- models/notemodel.h
- SOURCES += main.cpp \
- models/meenotesmodel.cpp \
- models/notemodel.cpp
- QT += declarative
再看主入口main.cpp：
- #include "models/meenotesmodel.h"
- #include <QApplication>
- #include <QDeclarativeContext>
- #include <QDeclarativeComponent>
- #include <QDir>
- #include <QtComponents/qdeclarativewindow.h>
- int main(int argc, char **argv)
- {
- QApplication app(argc, argv);
- app.setApplicationName("MeeNotes");
- //MeeNotesModel 是Model類
- qmlRegisterType<NoteModel>();
- MeeNotesModel model;
- model.setSource("notes/");
- //在哪查找main.qml
- #ifndef MEENOTES_RESOURCE_DIR
- const QDir dir(QApplication::applicationDirPath());
- const QUrl qmlPath(dir.absoluteFilePath("resource/default/main.qml"));
- #else
- const QDir dir(MEENOTES_RESOURCE_DIR);
- const QUrl qmlPath(dir.absoluteFilePath("main.qml"));
- #endif
- //創(chuàng)建能夠解釋qml運(yùn)行的window
- QDeclarativeWindow window(qmlPath);
- window.rootContext()->setContextProperty("meenotes", &model);
- window.window()->show();
- return app.exec();
- }
查看main.qml：
- import Qt 4.7
- import com.meego 1.0
- Window {
- id: window
- Component.onCompleted: {
- window.nextPage(Qt.createComponent("NoteList.qml"))
- }
- }
查看NoteList.qml：
- import Qt 4.7
- import com.meego 1.0
- Page {
- title: "MeeNotes"
- actions: [
- Action {
- iconId: "icon-m-toolbar-add" //新建note按鈕的處理
- onTriggered: {
- var note = meenotes.newNote();
- note.title = (Math.random() > 0.5) ? "Cool title!" : "";
- viewNote(note);
- }
- },
- Action {
- iconId: "icon-m-toolbar-favorite-mark" //橫豎屏切換的按鈕處理
- onTriggered: {
- screenscreen.orientation = screen.orientation == Screen.Portrait ? Screen.Landscape : Screen.Portrait;
- }
- }
- ]
- Component {
- … … …//省略
- }
- Rectangle {
- color: "white"
- anchors.fill: parent
- }
- GridView {
- id: grid
- anchors.fill: parent
- model: meenotes
- cellWidth: 250
- cellHeight: 210
- delegate: noteDelegate
- }
- function viewNote(note) {
- window.nextPage(Qt.createComponent("Note.qml"));
- window.currentPage.note = note;
- }
- }
鑒于QML類似于web網(wǎng)頁(yè)css的編寫方式，效率已經(jīng)很高了，但是似乎Qt Designer被我們忽視了，其實(shí)2.01版的Desinger已經(jīng)可以使用meegotouch風(fēng)格進(jìn)行預(yù)覽了，效果如下圖：
效果圖
目前Designer并不能直接生成QML文件，下一個(gè)版本的Desinger以及在計(jì)劃之中了，可以叫他Qt Quick Designer，在Qt Roadmap中已經(jīng)可以體現(xiàn)出來(lái)了：
Qt Quick Designer
這便是用QML語(yǔ)言開(kāi)發(fā)MeeGo應(yīng)用程序的教程。
【編輯推薦】
