首页
登录 | 注册

用 QML 开发 MeeGo 应用程序

什么是QML?

QML是一种描述应用程序UI的声明式语言,包括应用程序的外观(菜单、按钮、布局等)以及行为(点击事件)的描述。在QML中,UI界面被描述成一种树状的带属性对象的结构(类似于DOM)

JavaScript是QML中使用的脚本语言, 所以你最好是对它有一定程度了解再深入进行QML的学习(可以参考JavaScript: The Definitive Guide)。如果对HTML和CSS等Web技术有所理解是会有帮助的,但不是必需的。

上面是官方介绍的前两段,具体中文教程可以看看Qt技术分享博客的系列教程,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
#include
#include
#include
#include
int main(int argc, char **argv)
{
QApplication app(argc, argv);
app.setApplicationName("MeeNotes");

//MeeNotesModel 是Model类

qmlRegisterType();
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: {
screen.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中已经可以体现出来了:

 


相关文章

  • 概述 IBM Toolbox for Java 是一个类的集合,用于开发与 IBM i 相关的 Java 应用程序.它包含的各类工具,提供了对于 IFS.IBM i 系统信息.客户端 / 服务器等各类应用场景的的支持,用户可以在其他平台诸如 ...
  • 作者: itzealot  随着 Microsoft 的 .NET 框架的逐渐流行,许多开发人员迫切想了解关于将 .NET 应用程序与 Oracle 集成的最好的方式的信息 -- 不仅在基本的连通性方面,还包括与使用 Visual Stud ...
  • 全能小将再次出发,Java助力物联网技术的发展。
    物联网的发展离不开背后数据的支持,同时它也需要一项技术赋予一种设备新的生命,而Java当之无愧可以接手了这项任务,将载体与信息通信串联在一起,向设备赋予新的动力,为人类提供更便捷的服务. 物联网的含义: 物联网是新一代信息技术的重要组成部分 ...
  • NET Framework 是微软的几个开发团队一起努力发展的成果,最主要用来产生一个可以用来快速开发.部署网站服务及应用程序的开发平台.这个架构是两个项目的结果:第一个项目的目的是用来改善Windows 作业平台上的程序开发,特别是改善C ...
  • .net 基本架构及CLR
     图1 .net架构 一..NET Framework 具有两个主要组件:公共语言运行库和 .NET Framework 类库.   1.公共语言运行库是 .NET Framework 的基础.     您可以将运行库看作一个在执行时管理代 ...
  • Skr!纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中的更易用
    近日,WijmoJS 2018V2 正式发布,提供基于VSCode/在线Web设计器,可动态设计Web页面并生成代码,提供 SASS 支持,大幅提升控件集的稳定性和速度. WijmoJS设计器 – 无代码配置时代全面来临 l VSCode设 ...

2020 unjeep.com webmaster#unjeep.com
12 q. 0.012 s.
苏ICP备12049786号-20