Use QML to develop MeeGo applications

Qt Declarative UI is gaining popularity, but there is little Chinese information about what kind of technology it is and how to use it. A few articles can be searched occasionally, which is confusing. This getting started tutorial is from the official Qt documentation and is more about syntax.

What is QML?

QML is a declarative and scripting language that describes the application UI. the end of qml includes the application appearance menu, buttons, layout, and so on) and the Action click event. In QML, the UI interface is described as a tree structure with attribute objects. Understanding HTML, CSS, and other Web technologies is helpful, but not necessary. The syntax format is very similar to CSS (refer to the example of stationery), but it also supports Programming Control in the javacript format.

In the first two paragraphs officially introduced above, QML is actually a new feature in Qt QuickQt4.7.0) one of the core components: Qt Quick is a group designed to help developers create on mobile phones, media players, set-top boxes and other portable devices use more and more intuitive, modern, and smooth UI tools. Qt Quick includes a rich set of user interface elements, a declarative language QML used to describe the user interface) and runtime, A group of C ++ APIs used to integrate these high-level features into classic Qt applications.

From the official introduction, we can see that Qt Quick is tailored for the rapid development of mobile platforms. Let's take a look at a practical example: Running MeeNotes on MeeGo, in addition to the business logic, the UI is implemented using QML.

MeeNotes Running Effect

Screen Switching

Running effects in simulators

MeeNotes can be found here: Use git to clone qt-components and meenotes, and then compile qt-components first. This depends on qt4.7, which is the key to rapid development of meego applications using QML, it implements a set of meego QML modules and can compile and run MeeNotes. If it cannot run, check whether the Qt installation directory contains com. nokia. meego this module my located at/usr/local/Trolltech/Qt-4.7.0/imports/com/meego) if not, you need to manually execute qmake/make install in src/MeeGo under the decompressed directory of qt-components for compilation and installation.

Let's take a look at the actual code in MeeNotes.

The red part of src. pro under the src directory is different from the development using 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  
 
 

Let's look at main. cpp at the main entry:

 
 

  
  
# 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 a Model class
  
  
QmlRegisterType <NoteModel> ();
  
  
MeeNotesModel model;
  
  
Model. setSource ("notes /");
  
  
// Where can I 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 a window that can explain qml running
  
  
QDeclarativeWindow window (qmlPath );
  
  
Window. rootContext ()-> setContextProperty ("meenotes", & model );
  
  
Window. window ()-> show ();
  
  
Return app.exe c ();
  
  
}
 
 

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" // handle the new note button
  
  
OnTriggered :{
  
  
Var note = meenotes. newNote ();
  
  
Note. title = (Math. random ()> 0.5 )? "Cool title! ":"";
  
  
ViewNote (note );
  
  
}
  
  
},
  
  
Action {
  
  
IconId: "icon-m-toolbar-favorite-mark" // button processing for horizontal and vertical screen Switching
  
  
OnTriggered :{
  
  
Screenscreen. 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;
  
  
}
  
  
}
 
 

Given that QML is very efficient in writing css similar to web pages, it seems that Qt Designer has been ignored. In fact, Desinger of Version 2.01 can be previewed using the meegotouch style, the effect is as follows:

Currently, the Designer cannot directly generate the QML file. The Desinger of the next version is included in the plan. You can call it Qt Quick Designer, which can already be reflected in Qt Roadmap:

Qt Quick Designer

This is a tutorial on developing the MeeGo application using the QML language.