Meego之QtDeclarative Module

首先附上Meego操作系统概述

QML已经基本了解，接下来开始学QtDeclarative.

Qt Quick (Qt User Interface Creation Kit)是一种高级用户界面技术，开发人员和设计人员可用它协同创建动画触摸式用户界面和应用程序。
Qt Quick 包含 QtDeclarative C++ 模块， QML(Qt Meta-Object Language)，以及它们集成到Qt Creator IDE中的部分。在Qt应用程序中通过使用QtDeclarative C++模块，程序可以方便地和QML文件进行交互.

Qt Quick 包含：
    * QML：像 JavaScript 一样的声明式语言
    * Qt Creator：在 Qt IDE* 中的直观工具
    * Qt Declarative：强大的 C++ 模块

 

Qt Declarative模块提供了一个declarative框架用于创建高动态的用户界面。我们可以用QtDeclarative C++模块加载QML文件到QT应用并与QML交互.

在Qt应用中加入此模块支持,需要在.pro文件中加入
Qt += declarative
在.cpp文件中加入：
#include <QtDeclarative>

 

=========================================================================================

 

1、QDeclarativeComponent类封装了QML组件的定义.Components是重用的，封装了QML元素的接口.
一个DeclarativeComponent 实例能够从QML创建。

//xxxx.pro #------------------------------------------------- # # Project created by QtCreator 2010-12-12T00:48:00 # #------------------------------------------------- QT += core gui QT += declarative TARGET = qtDeclarative TEMPLATE = app SOURCES += main.cpp/ mainwindow.cpp HEADERS += mainwindow.h FORMS += mainwindow.ui OTHER_FILES += / main.qml

//main.qml import Qt 4.7 Item { width: 200 height: 200 }

//main.cpp #include <QtGui/QApplication> #include "mainwindow.h" #include <QDeclarativeEngine> #include <QDeclarativeComponent> #include <QDeclarativeItem> #include <QDebug> int main(int argc, char *argv[]) { QApplication a(argc, argv); QDeclarativeEngine *engine = new QDeclarativeEngine; QDeclarativeComponent component(engine, QUrl::fromLocalFile("main.qml")); QObject *myObject = component.create(); QDeclarativeItem *item = qobject_cast<QDeclarativeItem*>(myObject); qDebug()<<item->width(); item->setProperty("width",200); qDebug()<<item->width(); return a.exec(); }

QDeclarativeComponent有三个构造函数：

QDeclarativeComponent ( QDeclarativeEngine * engine, QObject * parent = 0 )
QDeclarativeComponent ( QDeclarativeEngine * engine, const QString & fileName, QObject * parent = 0 )
QDeclarativeComponent ( QDeclarativeEngine * engine, const QUrl & url, QObject * parent = 0 )

一个枚举类型:

enum QDeclarativeComponent::Status

QDeclarativeComponent::Null    0    This QDeclarativeComponent has no data.  loadUrl() or setData() to add QML content.
QDeclarativeComponent::Ready    1    This QDeclarativeComponent is ready and create() may be called.
QDeclarativeComponent::Loading    2    This QDeclarativeComponent is loading network data.
QDeclarativeComponent::Error    3    An error has occurred. Call errors() to retrieve a list of {QDeclarativeError}{errors}.

 

三个主要属性;

progress : const qreal
status : const Status
url : const QUrl

 

=========================================================================================

2、QDeclarativeEngine提供了一个实例化QML组件的环境。

    每个QML组件被QdeclarativeContext实例化，QDeclarativeContext是传送数据到QML组件必要的类。在QML中，上下文context被放在最高层次其被QDeclarativeEngine管理。

   创建任何QML组件之前，应用程序必须首先创建一个QDeclarativeEngine实例用于访问QML上下文。

   QDeclarativeEngine engine; QDeclarativeComponent component(&engine); component.setData("import Qt 4.7/nText {text: /"Hello world!/"}",QUrl()); QDeclarativeItem *item = qobject_cast<QDeclarativeItem *>(component.create());

 

=========================================================================================

 

3、QDeclarativeContext

     QDeclarativeContext 类用于定义QML的上下文Context。上下文允许数据暴露给被QML engine实例化的QML组件。可以共过QDeclarativeContext::setContextProperty()设置或更新组件的属性.

QDeclarativeEngine engine; QStringListModel modelData; QDeclarativeContext *context = new QDecalrativeContext(engine.rootContext()); context->setProperty("myModel",&modelData); QDeclarativeComponent component(&engine); component.setData("import Qt 4.7/nListView { model: myModel}", QUrl()); component.create(context);

QDeclarativeContext ( QDeclarativeEngine * engine, QObject * parent = 0 )
QDeclarativeContext ( QDeclarativeContext * parentContext, QObject * parent = 0 )
void    setContextObject ( QObject * object )
void    setContextProperty ( const QString & name, QObject * value )
void    setContextProperty ( const QString & name, const QVariant & value )

 

=========================================================================================

 

4、QDeclarativeView

     QDeclarativeView提供了一个显示 Qt Declarative用户界面的widget。使QDeclaraitem能够标准的QGraphicsScene和QGraphicsView显示。QDeclarativeView是QGraphicsView的子类能更便捷的显示QML界面，并且连接着QML和Qt对象。

QDeclarativeView *view = new QDeclarativeView; view->setSource(QUrl::fromLocalFile("main.qml")); view->show(); return a.exec();

注意需要将main.qml拷贝到编译目录下，或可以使用资源文件(程序可以帮你拷贝qml文件)：

view.setSource(QUrl("qrc:/ui/qml/MyRect.qml"));

当使用QDeclarative加载QML时，可以使用statusChanged()信号获取加载状态

QDeclarativeView::Null        0    source没有指定
QDeclarativeView::Ready        1    QML已经被加载并且创建QML组件
QDeclarativeView::Loading    2    正在加载数据
QDeclarativeView::Error        3    发生了错误，可以调用errorDescription()获取错误描述信息

 

=========================================================================================

5、QDeclarativeItem

     QDeclarativeItem提供了QML中最基本的可视化组件。Qt Declarative中所有的组件都继承自QDeclarativeItem,虽然QDeclarativeItem没有可视化界面，但是它定义了所有组件的基本属性。在QML中表示为Item组件.我们可以通过继承此类自定义可视化组件。

查找QML中的组件

//main.qml import Qt 4.7 Rectangle { width: 100 height: 62 Rectangle { Text { color: "blue" text: "Hello World!" objectName: "txt" } } }

注意在C++代码中是使用objectName进行查找而不是id

//main.cpp #include <QtGui/QApplication> #include "mainwindow.h" #include <QDeclarativeItem> #include <QDeclarativeView> #include <QDebug> int main(int argc, char *argv[]) { QApplication a(argc, argv); QDeclarativeView *view = new QDeclarativeView; view->setSource(QUrl("qrc:/ui/qml/main.qml")); view->show(); QDeclarativeItem *item = view->rootObject()->findChild<QDeclarativeItem *>("txt"); if(item) { if(item->property("text") != "") { qDebug()<<item->property("text").toString(); item->setProperty("text","Hello Meego!"); qDebug()<<item->property("text").toString(); } } return a.exec(); 

 

=========================================================================================

 

6、QtDeclarativePropertyMap

      QtDeclarativePropertyMap类让你能通过键值对方便的在C++中组件绑定QML属性。

      它包含一个Signal:

       void    valueChanged ( const QString & key, const QVariant & value )

       //main.qml import Qt 4.7 Rectangle { width: 100 height: 62 Rectangle { Text { color: prop.color text: prop.text objectName: "txt" } } }

      //main.cpp #include <QtGui/QApplication> #include "mainwindow.h" #include <QDeclarativeView> #include <QDeclarativeContext> #include <QDeclarativePropertyMap> int main(int argc, char *argv[]) { QApplication a(argc, argv); QDeclarativeView *view = new QDeclarativeView(); QDeclarativeContext *context = view->rootContext(); QDeclarativePropertyMap propertyMap; propertyMap.insert("text",QVariant(QString("Hello Meego!"))); propertyMap.insert("color",QVariant(QColor("blue"))); context->setContextProperty("prop",&propertyMap); view->setSource(QUrl("qrc:/ui/qml/main.qml")); view->show(); return a.exec(); }

 

=========================================================================================

 

7、QDeclarativeExpression

      QDeclarativeExpression 类用于封装javascript代码在QML 上下文中

import Qt 4.7 Item { width: 200; height: 200 }

 

QDeclarativeEngine *engine = new QDeclarativeEngine; QDeclarativeComponent component(engine, QUrl("qrc:/ui/qml/main.qml")); QObject *myObject = component.create(); QDeclarativeExpression *expr = new QDeclarativeExpression(engine->rootContext(), myObject, "width * 2"); int result = expr->evaluate().toInt(); // result = 400

 

QML与C++交互我在前面已经详细写了 ：http://blog.csdn.net/liuhongwei123888/archive/2010/12/05/6056338.aspx

一直在等待N9，希望Nokia能尽快。