Developing Meego applications with QML

What is QML.

QML is a declarative language that describes the application's UI, including the appearance of the application (menus, buttons, layouts, and so on) and the description of the behavior (click event). In Qml, the UI interface is described as a tree-like structure with a Property object (similar to DOM)

JavaScript javascript:the Definitive Guide). It can be helpful, but not necessary, to understand web technologies such as HTML and CSS.

Above is the first two sections of the official introduction, the specific Chinese tutorials can look at the QT Technology Sharing blog series of tutorials, QML is actually QT quick (new features in Qt4.7.0) one of the core components: QT Quick is a group designed to help developers create in mobile phones, media players, A collection of more intuitive, modern, fluent UI tools used on set-top boxes and other portable devices. Qt quick includes a rich set of user interface elements, a declarative language for describing the user interface (QML) and Run-time, a set of C + + APIs that integrate these high-level features into classic QT applications.

As can be seen from the official introduction, Qt Quick is tailored for the rapid development of mobile platforms, first look at a practical example: Meenotes running on Meego, in addition to business logic, interface UI is implemented using QML

Meenotes Operation effect

Screen Toggle (click on the asterisk ~)

Running effects in the emulator

Meenotes can be found here: Use git & lt;font color= "#ff0000" >qt-components and Meenotes clone down, and then compile qt-components, This relies on qt4.7, is the key to the rapid development of the Meego application using QML, it implements a set of Meego qml Module, then you can compile and run the next meenotes, if not run, please check the QT installation directory for Com.nokia.meego This module (my location in/usr/local/trolltech/qt-4.7.0/imports/com/meego) will need to be in qt-components decompression directory src/ MeeGo manually perform Qmake/make/make install for compilation and installation.

Simply look at the actual code under Meenotes

The src.pro in the SRC directory, the red part is different from the use of Libmeegotouch development:

TEMPLATE = App
TARGET =.. /meenotes
LIBS + +-lqtcomponents
HEADERS + = models/meenotesmodel.h/
Models/notemodel.h
SOURCES + = main.cpp/
Models/meenotesmodel.cpp/
Models/notemodel.cpp
QT + + Declarative

then look at the main entrance 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 is model class

Qmlregistertype<notemodel> ();
Meenotesmodel model;
Model.setsource ("notes/");

Where to find 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  
       //Create windows that can explain QML running

Qdeclarativewindow window (Qmlpath);
Window.rootcontext ()->setcontextproperty ("Meenotes", &model);
Window.window ()->show ();
return App.exec ();
}

View MAIN.QML:
Import Qt 4.7
Import Com.meego 1.0
Window {
Id:window
Component.oncompleted: {
Window.nextpage (Qt.createcomponent ("NOTELIST.QML"))
}
}

View NOTELIST.QML:
Import Qt 4.7
Import Com.meego 1.0
Page {
Title: "Meenotes"
Actions: [
Action {
iconID: "Icon-m-toolbar-add"//New Note button processing
Ontriggered: {
var note = Meenotes.newnote ();
Note.title = (Math.random () > 0.5)? "Cool title!": "";
Viewnote (note);
}
},
Action {
iconID: "Icon-m-toolbar-favorite-mark"//Screen toggle button handling
Ontriggered: {
Screen.orientation = Screen.orientation = = screen.portrait? Screen.Landscape:Screen.Portrait;
}
}
]
Component {
..../omitted

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

Since QML is similar to Web page CSS writing way, the efficiency is very high, but it seems that QT designer is neglected by us, in fact, version 2.01 Desinger already can use Meegotouch style preview, the effect of the following figure:

At present, Designer can not directly generate QML files, the next version of the Desinger and in the plan, can call him Qt Quick Designer, in the QT Roadmap can be reflected in the: