用QML語言開發MeeGo應用程序

作者：Jerry_Chen 2010-11-18 15:52:32

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;    
   }    
}