1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
..
---------------------------------------------------------------------------
Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
All rights reserved.
This work, unless otherwise expressly stated, is licensed under a
Creative Commons Attribution-ShareAlike 2.5.
The full license document is available from
http://creativecommons.org/licenses/by-sa/2.5/legalcode .
---------------------------------------------------------------------------
.. _inspecting-generated-code:
Inspecting the Generated Code
=============================
In this step, let's take a closer look at the generated files. This will help us understand how the project is built and give us an overview of the basic Qt Quick Components used in a Symbian^3 application.
If you have a look at the source code, you will see that Qt Creator has generated a basic application skeleton for us as shown in the following screenshot:
.. image:: img/project-structure.png
:scale: 75%
:align: center
In general, Qt Quick for Symbian^3 applications consists of a declarative (QML) and a native part (C++). The native code initializes the runtime of the declarative part. The declarative part is where we will add our application user interface and the required functionality. If you're interested in knowing more about C++ and QML integration, please refer to :qt:`Using QML in C++ Applications <qtbinding.html>`.
Native Code
-----------
The native part is initialized in `main.cpp` and starts a debug-enabled QML viewer which loads our declarative part, the `main.qml` file.
.. code-block:: cpp
// main.cpp
#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
int main(int argc, char argv[])
{
QApplication app(argc, argv);
QmlApplicationViewer viewer;
viewer.setMainQmlFile(QLatin1String("qml/TodoList/main.qml"));
viewer.showExpanded();
return app.exec();
}
.. Note:: QmlApplicationViewer* is our :qt:`QML Runtime <qmlruntime.html>` and its main purpose is to load qml documents and execute them.
.. Warning:: The code in the qmlapplicationviewer* folder is generated automatically and contains some code for a few additional features if you use the debug-enabled version. Don't modify the code because it will be automatically updated in newer SDK versions.
Declarative Code
----------------
The folder ``<projectname>/qml/<projectname>/`` contains the declarative part of our project. In our example, Qt Creator generates two qml files (`main.qml` and `MainPage.qml`) that build a small running ``Hello World!`` application.
The `main.qml` file is the root file of the application :
.. code-block:: js
// main.qml
import QtQuick 1.0
import com.nokia.symbian 1.1
// com.nokia.symbian 1.0 with older SDK versions
Window {
id: window
StatusBar {
id: statusBar
anchors.top: window.top
}
PageStack {
id: pageStack
anchors {
left: parent.left; right: parent.right
top: statusBar.bottom; bottom: toolBar.top
}
}
ToolBar {
id: toolBar
anchors.bottom: window.bottom
tools: ToolBarLayout {
id: toolBarLayout
ToolButton {
flat: true
iconSource: "toolbar-back"
onClicked: {
pageStack.depth <= 1 ? Qt.quit(): pageStack.pop();
}
}
}
}
Component.onCompleted: {
pageStack.push(Qt.resolvedUrl("MainPage.qml"));
}
}
The code above consists of a :component:`Window<qml-window.html>` component which will act as our top level window and contains currently the following elements:
A :component:`StatusBar <qml-statusbar.html>` on the top (`anchors.top: window.top`), which shows information of the device state such as network type, signal strength and battery level.
.. code-block:: js
// main.qml
StatusBar {
id: statusBar
anchors.top: window.top
}
A :component:`PageStack <qml-pagestack.html>` component from the `Qt Component <http://qt.gitorious.org/qt-components>`_ project, which defines a container of pages and provides a stack-based navigation model. We can push a page to the stack using `pageStack.push( qmlfile )` and pop the top page off the stack with `pageStack.pop()`. The pages could also be dynamically loaded to preserve memory via `Qt.resolvedUrl( qmlfile )`. We will cover the use of :component:`PageStack<qml-pagestack.html>` in the next chapter when introducing the concept of our `TodoList` application.
.. code-block:: js
// main.qml
PageStack {
id: pageStack
anchors {
left: parent.left; right: parent.right;
top: statusBar.bottom; bottom: toolBar.top
}
}
A :component:`Toolbar <qml-toolbar.html>` at the bottom (`anchors.bottom: window.bottom`) that contains a :component:`ToolBarLayout <qml-toolbarlayout.html>` with one :component:`ToolButton <qml-toolbutton.html>` to close the application.
.. code-block:: js
// main.qml
ToolBar {
id: toolBar
anchors.bottom: window.bottom
tools: ToolBarLayout {
id: toolBarLayout
ToolButton {
flat: true
iconSource: "toolbar-back"
// if no page is left on the stack,
// quit the application.
// Otherwise pop the current page off the stack.
onClicked: {
pageStack.depth <= 1
? Qt.quit()
: pageStack.pop();
}
}
}
}
The `Component::onCompeleted` signal handler is called after a component has been completely loaded. It enables us to execute script code at startup. We use it to dynamically load the `MainPage` defined in `MainPage.qml` and push it to the page stack. This will make it the active page.
.. code-block:: js
// main.qml
Component.onCompleted: {
pageStack.push(Qt.resolvedUrl("MainPage.qml"));
}
The Main Page
-------------
`MainPage` is a :component:`Page<qml-page.html>` component which defines a screen for the user interface for mobile devices. The page contains a placeholder :qt:`Text <qml-text.html>` element to display a Hello world!* text in the center of the page (`anchors.centerIn: parent`).
.. code-block:: js
// MainPage.qml
import QtQuick 1.0
import com.nokia.symbian 1.1
Page {
id: mainPage
Text {
anchors.centerIn: parent
text: qsTr("Hello world!")
color: platformStyle.colorNormalLight
font.pixelSize: 20
}
}
The following figure shows the elements position on a mobile screen:
.. image:: img/app-001.png
:scale: 50%
:align: center
.. rubric:: What's next?
The next step shows you what is required to run the application on your Symbian^3 device.
|
