用QML语言开发MeeGo应用程序

移动开发
Qt Declarative UI 传得沸沸扬扬,却很少有中文资料介绍这是一个什么样的技术,以及如何使用它。偶尔能搜到几篇也是掐头去尾的,让人摸不着头脑。这个入门教程来自于Qt官方文档,更多的是语法性的介绍。

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运行效果

横竖屏幕切换
横竖屏幕切换

在模拟器中运行效果
在模拟器中运行效果

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开发所不同之处 :

  1. TEMPLATE = app    
  2. TARGET = ../MeeNotes    
  3. LIBS += -lQtComponents      
  4. HEADERS += models/meenotesmodel.h \    
  5.           models/notemodel.h    
  6. SOURCES += main.cpp \    
  7.           models/meenotesmodel.cpp \    
  8.           models/notemodel.cpp    
  9. QT += declarative  

再看主入口main.cpp:

  1. #include "models/meenotesmodel.h"    
  2. #include <QApplication>    
  3. #include <QDeclarativeContext>      
  4. #include <QDeclarativeComponent>      
  5. #include <QDir>    
  6. #include <QtComponents/qdeclarativewindow.h>     
  7. int main(int argc, char **argv)    
  8. {    
  9.         QApplication app(argc, argv);    
  10.         app.setApplicationName("MeeNotes");   
  11.     
  12.         //MeeNotesModel 是Model类  
  13.         qmlRegisterType<NoteModel>();    
  14.         MeeNotesModel model;    
  15.         model.setSource("notes/");  
  16.         //在哪查找main.qml  
  17. #ifndef MEENOTES_RESOURCE_DIR    
  18.           const QDir dir(QApplication::applicationDirPath());    
  19.           const QUrl qmlPath(dir.absoluteFilePath("resource/default/main.qml"));     
  20. #else    
  21.           const QDir dir(MEENOTES_RESOURCE_DIR);    
  22.           const QUrl qmlPath(dir.absoluteFilePath("main.qml"));     
  23. #endif    
  24.         //创建能够解释qml运行的window  
  25.         QDeclarativeWindow window(qmlPath);     
  26.          window.rootContext()->setContextProperty("meenotes", &model);    
  27.          window.window()->show();    
  28.          return app.exec();    
  29. }  

查看main.qml:

  1. import Qt 4.7    
  2. import com.meego 1.0      
  3. Window {    
  4.    id: window    
  5.    Component.onCompleted: {    
  6.        window.nextPage(Qt.createComponent("NoteList.qml"))      
  7.    }    
  8. }  

查看NoteList.qml:

  1. import Qt 4.7    
  2. import com.meego 1.0    
  3. Page {    
  4.    title: "MeeNotes"    
  5.    actions: [    
  6.        Action {    
  7.            iconId: "icon-m-toolbar-add" //新建note按钮的处理      
  8.            onTriggered: {    
  9.                var note = meenotes.newNote();    
  10.                note.title = (Math.random() > 0.5) ? "Cool title!" : "";    
  11.                viewNote(note);    
  12.            }    
  13.        },    
  14.        Action {    
  15.            iconId: "icon-m-toolbar-favorite-mark" //横竖屏切换的按钮处理  
  16.            onTriggered: {    
  17.                screenscreen.orientation = screen.orientation == Screen.Portrait ? Screen.Landscape : Screen.Portrait;    
  18.            }    
  19.        }    
  20.    ]    
  21.    Component {    
  22.         … … …//省略  
  23.    }    
  24.    Rectangle {    
  25.        color: "white"    
  26.        anchors.fill: parent    
  27.    }    
  28.    GridView {    
  29.        id: grid    
  30.        anchors.fill: parent    
  31.        model: meenotes    
  32.        cellWidth: 250    
  33.        cellHeight: 210    
  34.        delegate: noteDelegate    
  35.    }    
  36.    function viewNote(note) {    
  37.        window.nextPage(Qt.createComponent("Note.qml"));    
  38.        window.currentPage.note = note;    
  39.    }    

鉴于QML类似于web网页css的编写方式,效率已经很高了,但是似乎Qt Designer被我们忽视了,其实2.01版的Desinger已经可以使用meegotouch风格进行预览了,效果如下图:

效果图
效果图

目前Designer并不能直接生成QML文件,下一个版本的Desinger以及在计划之中了,可以叫他Qt Quick Designer,在Qt Roadmap中已经可以体现出来了:

Qt Quick Designer

Qt Quick Designer

 

这便是用QML语言开发MeeGo应用程序的教程。

【编辑推荐】

  1. 在Windows系统上运行MeeGo SDK
  2. 在主流linux系统上运行MeeGo SDK
  3. MeeGo的进度报告:优等生还是差等生
  4. MeeGo 1.1手机版发布 诺基亚期待扭转颓势
  5. MeeGo移动应用程序开发入门
责任编辑:佚名 来源: 米趣网
相关推荐

2010-10-15 09:39:22

MeeGoQt

2010-05-02 14:35:47

Meego开发

2010-02-06 14:19:26

ibmdwGoogleMap

2011-05-03 09:14:45

QtOvi商店Symbian

2014-01-07 10:12:15

Spark

2011-10-13 16:34:30

MeeGoQt插件

2009-09-22 12:22:54

ibmdwLotus

2012-05-29 10:04:08

2012-03-15 15:35:51

iUI框架EclipseiOS Web

2012-02-08 15:06:31

ibmdw

2022-09-19 00:37:13

SaaS云计算开发

2012-03-20 09:20:40

Go语言

2011-04-01 11:01:02

应用程序BlackBerryJava

2013-02-21 14:15:41

开发Tizen

2013-02-21 14:14:40

开发Tizen

2013-11-19 15:35:01

2010-05-12 14:12:44

Meego开发

2009-09-24 17:21:17

加速Hibernate

2013-08-08 09:48:10

Web

2011-05-31 13:34:22

应用开发iPad
点赞
收藏

51CTO技术栈公众号