用QML語言開發MeeGo應用程序
Qt Declarative UI 傳得沸沸揚揚，卻很少有中文資料介紹這是一個什么樣的技術，以及如何使用它。偶爾能搜到幾篇也是掐頭去尾的，讓人摸不著頭腦。這個入門教程來自于Qt官方文檔，更多的是語法性的介紹。
什么是QML？
QML是一種描述應用程序UI的聲明式語言、腳本語言，文件格式以.qml結尾包括應用程序的外觀（菜單、按鈕、布局等）以及行為（點擊事件）的描述。在QML中，UI界面被描述成一種樹狀的帶屬性對象的結構。如果對HTML和CSS等Web技術有所理解是會有幫助的，但不是必需的。語法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。
上面是官方介紹的前兩段，QML實際上是Qt Quick（Qt4.7.0中的新特性）核心組件之一：Qt Quick是一組旨在幫助開發者創建在移動電話，媒體播放器，機頂盒和其他便攜設備上使用越來越多的直觀、現代、流暢UI的工具集合。Qt Quick包括一組豐富的用戶界面元素，一種用于描述用戶界面的聲明性語言（QML）及運行時，一組用于將這些高層次特性集成到經典的Qt應用程序的 C++ API。
從官方的介紹可以看出，Qt Quick是為移動平臺快速開發所量身打造的，先看一個實際例子：在MeeGo上運行的MeeNotes，除了業務邏輯，界面UI都是使用QML實現的
MeeNotes運行效果
橫豎屏幕切換
在模擬器中運行效果
MeeNotes可以在這里找到：使用git把qt-components和meenotes clone下來，然后先編譯qt-components，這個依賴于qt4.7，是使用QML快速開發meego應用程序的關鍵，它實現了一套meego的QML Module，之后可以編譯運行下MeeNotes，如果運行不了，請檢查Qt安裝目錄里是否有 com.nokia.meego這個module（我的位于/usr/local/Trolltech/Qt-4.7.0/imports/com /meego）如果沒有，則需要在qt-components解壓目錄下的 src/MeeGo 手動執行qmake/make/make install，進行編譯安裝。
簡單看看MeeNotes下的實際代碼
src目錄下的src.pro，紅色部分即是與使用libmeegotouch開發所不同之處 ：
- 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
- //創建能夠解釋qml運行的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網頁css的編寫方式，效率已經很高了，但是似乎Qt Designer被我們忽視了，其實2.01版的Desinger已經可以使用meegotouch風格進行預覽了，效果如下圖：
效果圖
目前Designer并不能直接生成QML文件，下一個版本的Desinger以及在計劃之中了，可以叫他Qt Quick Designer，在Qt Roadmap中已經可以體現出來了：
Qt Quick Designer
這便是用QML語言開發MeeGo應用程序的教程。
【編輯推薦】
