← Back to branch summary

~bzoltan/kubuntu-packaging/decouple_cmake_plugin

« back to all changes in this revision

Viewing changes to doc/src/android/creator-android-app-tutorial.qdoc

  • Committer: Timo Jyrinki
  • Date: 2013-12-02 09:16:15 UTC
  • mfrom: (1.1.29)
  • Revision ID: timo.jyrinki@canonical.com-20131202091615-xbj1os1f604ber1m
New upstream release candidate.

Show diffs side-by-side

added added

removed removed

Lines of Context:
doc/src/android/creator-android-app-tutorial.qdoc
41
41
 
42
42
    \section1 Creating the Project
43
43
 
44
 
    Let us start with creating an empty Qt project.
45
 
 
46
44
    \list 1
47
45
 
48
 
        \li Select \gui{File > New File or Project > Other Project >
49
 
            Empty Qt Project > Choose}.
 
46
        \li Select \gui File > \gui {New File or Project} > \gui Applications >
 
47
            \gui {Qt Quick Application} > \gui Choose.
50
48
 
51
49
        \li In the \gui{Name} field, type \b{accelbubble}.
52
50
 
53
51
        \li In the \gui {Create in} field, enter the path for the project files.
54
 
            For example, \c {C:\Qt\examples}, and then click \gui{Next} (on
55
 
            Mac OS X, it is \gui Continue).
56
 
 
57
 
        \li Select an Android \l{glossary-buildandrun-kit}{kit} for arm,
 
52
            For example, \c {C:\Qt\examples}, and then click \gui{Next} (or
 
53
            \gui Continue on Mac OS X).
 
54
 
 
55
        \li In the \gui {Qt Quick component set} field, select
 
56
            \gui {Qt Quick Controls 1.0}.
 
57
 
 
58
        \li Select an Android \l{glossary-buildandrun-kit}{kit} for ARM,
58
59
            and click \gui{Next}.
59
60
 
60
61
            \note Kits are listed if they have been specified in \gui Tools >
63
64
        \li Select \gui Next in the following dialogs to use the default
64
65
            settings.
65
66
 
66
 
        \li Review the project settings, and click \gui{Finish} (on Mac OS X,
67
 
            it is \gui Done).
 
67
        \li Review the project settings, and click \gui{Finish} (or \gui Done on
 
68
            Mac OS X).
 
69
 
68
70
    \endlist
69
71
 
70
 
    \QC creates the project and displays its contents under the \gui Projects
71
 
    view on the sidebar. You can only see a .pro file under the project as we
72
 
    created an empty project, but the remaining bits will be added
73
 
    during the course of this tutorial.
 
72
    \QC generates a default QML file that you can modify to create the main view
 
73
    of the application.
74
74
 
75
75
    \section1 Creating the Main View
76
76
 
77
77
    The main view of the application displays an SVG bubble image at the center
78
78
    of the main window.
79
79
 
80
 
    \list 1
81
 
 
82
 
        \li In the \gui Edit mode, right-click on the \b{accelbubble} project
83
 
            and select \gui{Add new} to open the \gui{New File} dialog.
84
 
 
85
 
        \li Select \gui{Qt > QML File (Qt Quick 2)} and click \gui Choose to
86
 
            give a name to the QML file.
87
 
 
88
 
        \li In the \gui Name field, type "accelbubble" and select \gui Next.
89
 
 
90
 
        \li Select \gui Finish to add accelbubble.qml to the project.
91
 
    \endlist
92
 
 
93
 
    \QC adds a default QML file containing a Rectangle. Here is how the QML
94
 
    file looks:
95
 
 
96
 
    \snippet qml/tutorial_initialqml.qml initialcode
97
 
 
98
 
    Now let us edit accelbubble.qml to add the bits required for our
99
 
    application.
100
 
 
101
 
    \list 1
102
 
 
103
 
        \li Replace the existing import statement with the following:
104
 
 
105
 
            \snippet qml/tutorial_updatedmainview.qml imports
106
 
 
107
 
        \li Replace the Rectangle type with ApplicationWindow, which
108
 
            will be the top-level window for our application.
109
 
 
110
 
        \li Set the \a id, \a title, \a visible, and the window dimension
111
 
            properties (width and height) with the values given in the
112
 
            following snippet:
113
 
 
114
 
            \quotefromfile qml/tutorial_updatedmainview.qml
 
80
    To use the Bluebubble.svg used by the Qt Sensors example, Accel Bubble, in
 
81
    your project, you must copy it to the project directory (same subdirectory
 
82
    as the QML file) from the examples directory in the Qt installation
 
83
    directory. For example:
 
84
    \c {C:\Qt\Qt5.2.0\5.2.0\msvc2010\examples\sensors\accelbubble\content}.
 
85
    The image appears in the \gui Resources pane. You can also use any other
 
86
    image or a QML type, instead.
 
87
 
 
88
    \list 1
 
89
 
 
90
        \li In the \gui Projects view, double-click the main.qml file
 
91
            to open it in the code editor.
 
92
 
 
93
        \li Modify the properties of the ApplicationWindow type to specify the
 
94
            application name, give the ApplicationWindow an id, and to set it
 
95
            visible, as illustrated by the following code snippet:
 
96
 
 
97
            \quotefromfile accelbubble/main.qml
115
98
            \skipto ApplicationWindow
116
 
            \printuntil true
 
99
            \printuntil visible
117
100
            \skipto /^\}/
118
101
            \printuntil }
119
 
    \endlist
120
 
 
121
 
    \section1 Adding an SVG Image
122
 
 
123
 
    SVG is an XML-based image format that enables you to combine vector
124
 
    graphics, raster graphics, and text into one image. It is based on
125
 
    an open standard developed and maintained by \l{http://www.w3.org/}{W3C}.
126
 
 
127
 
    Qt supports the \l{http://www.w3.org/TR/SVGTiny12/}{SVGT} v1.2, which is a
128
 
    trimmed version of the \l{http://www.w3.org/TR/SVG12/}{SVG Full v1.2}
129
 
    specification, for mobile devices.
130
 
 
131
 
    You can copy the Bluebubble.svg used by the Qt Sensors example, Accel
132
 
    Bubble, to your project directory or find an SVG image that uses SVGT v1.2.
133
 
 
134
 
    \note If you choose to create a new SVG image, ensure that the \a svg root
135
 
    element has the \a version attribute with the value 1.1 or 1.2, and baseProfile
136
 
    with \c tiny.
137
 
 
138
 
    \list 1
139
 
        \li Open accelbubble.qml in \gui Edit mode and add an Image type
140
 
            within the ApplicationWindow.
141
 
        \li Set the image \a id, \a source, and \a smooth properties as shown
142
 
            in the following code block:
143
 
 
144
 
            \quotefromfile qml/tutorial_updatedmainview.qml
 
102
 
 
103
        \li Click \gui Design to open the file in \QMLD.
 
104
 
 
105
        \li In the \gui Navigator pane, select \gui Button and press \key Delete
 
106
            to delete it.
 
107
 
 
108
        \li In the \gui Library view, \gui Resources tab, select Bluebubble.svg
 
109
            and drag and drop it to the canvas.
 
110
 
 
111
        \li In the \gui Properties pane, \gui Id field, enter \e bubble to be
 
112
            able to reference the image from other places.
 
113
 
 
114
        \li In the code editor, add the following new properties to the image to
 
115
            position the image at the center of ApplicationWindow when the
 
116
            application starts:
 
117
 
 
118
            \quotefromfile accelbubble/main.qml
145
119
            \skipto Image
146
 
            \printuntil true
147
 
 
148
 
        \li Add the following new properties to the image:
149
 
 
150
 
            \dots
151
 
            \printuntil bubbleCenter:
152
 
 
153
 
            \note These properties are used to position the image
154
 
             at the center of ApplicationWindow when the application starts.
155
 
        \li Set the x and y position of the image based on the new
156
 
            properties.
157
 
 
158
 
            \dots
 
120
            \printuntil bubble.width
 
121
 
 
122
         \li Set the x and y position of the image based on the new
 
123
            properties:
 
124
 
 
125
            \dots
 
126
            \printuntil centerY
 
127
            \skipto /^\}/
159
128
            \printuntil }
160
129
    \endlist
161
130
 
162
 
    Here is how the accelbubble.qml file looks after making the changes
163
 
    mentioned earlier in this section:
 
131
    Here is how the accelbubble.qml file looks after you made the changes:
164
132
 
165
 
    \quotefromfile qml/tutorial_updatedmainview.qml
 
133
    \quotefromfile accelbubble/main.qml
166
134
    \skipto import QtQuick
167
135
    \printuntil 1.0
168
136
    \codeline
170
138
    \printuntil true
171
139
 
172
140
    \skipto Image
173
 
    \printuntil /^\}\
 
141
    \printuntil y:
 
142
    \skipto /^\}/
 
143
    \printuntil }
174
144
 
175
145
 
176
146
    \section1 Moving the Bubble
179
149
    Accelerometer sensor values.
180
150
 
181
151
    \list 1
182
 
        \li Add the following import statement to accelbubble.qml:
183
 
 
184
 
            \snippet qml/tutorial_finalmainqml.qml sensorimport
185
 
 
186
 
        \li Add the Accelerometer type with the necessary properties as shown
187
 
            in the following code block:
188
 
 
189
 
            \quotefromfile qml/tutorial_finalmainqml.qml
 
152
        \li Add the following import statement to main.qml:
 
153
 
 
154
            \code
 
155
            import QtSensors 5.0
 
156
            \endcode
 
157
 
 
158
        \li Add the \l{Accelerometer} type with the necessary properties:
 
159
 
 
160
            \quotefromfile accelbubble/main.qml
190
161
            \skipto Accelerometer
191
162
            \printuntil true
192
163
            \skipto }
196
167
            x and y position of the bubble based on the current Accelerometer
197
168
            values:
198
169
 
199
 
            \snippet qml/tutorial_finalmainqml.qml jsfunctions
 
170
            \quotefromfile accelbubble/main.qml
 
171
            \skipto function
 
172
            \printuntil Math.atan(x
 
173
            \printuntil }
200
174
 
201
175
        \li Add the following JavaScript code for \a onReadingChanged signal of
202
176
            Accelerometer type to make the bubble move when the Accelerometer
203
177
            values change:
204
178
 
205
 
            \snippet qml/tutorial_finalmainqml.qml readingchanged
 
179
            \quotefromfile accelbubble/main.qml
 
180
            \skipto onReadingChanged
 
181
            \printuntil }
206
182
 
207
183
        \li Add SmoothedAnimation behavior on the \a x and \a y properties of
208
184
            the bubble to make its movement look smoother.
209
185
 
210
 
            \snippet qml/tutorial_finalmainqml.qml smoothedanim
 
186
            \quotefromfile accelbubble/main.qml
 
187
            \skipto Behavior
 
188
            \printuntil x
 
189
            \printuntil }
 
190
            \printuntil }
211
191
     \endlist
212
192
 
 
193
    \section1 Adding Dependencies
 
194
 
 
195
    Update the accelbubble.pro file with the following library dependency
 
196
    information:
 
197
 
 
198
    \code
 
199
    QT += quick sensors svg xml
 
200
    \endcode
213
201
 
214
202
    \section1 Running the Application
215
203
 
216
 
    The main view is complete but the application is not ready yet. This
217
 
    section provides instructions to add a few lines of C++ code that loads the
218
 
    QML file when you try to run the application on an Android device.
 
204
    The application is complete and ready to be deployed to an Android device:
219
205
 
220
206
    \list 1
221
 
        \li Right-click on the project in \gui Edit mode and select
222
 
            \gui{Add New > Qt > Qt Resource File}.
223
 
 
224
 
        \li Name the resource file as \a accelbubble.qrc and click \gui Next.
225
 
 
226
 
        \li Select \gui Finish in the following dialog to add the resource file
227
 
            to the project and open it in \gui Edit mode.
228
 
 
229
 
        \li Select \gui {Add > Add Prefix} and add \c / as the prefix.
230
 
 
231
 
            \note The prefix is used every time you refer to the .qrc file
232
 
                  contents from the C++ code.
233
 
 
234
 
        \li Select \gui {Add > Add Files} and add accelbubble.qml and Bluebubble.svg
235
 
            to the resource file.
236
 
 
237
 
        \li Right-click on the project in \gui Edit mode and select
238
 
            \gui {Add New} to open the \gui {New File} dialog.
239
 
 
240
 
        \li Select \gui {C++ > C++ Source File > Choose}
241
 
 
242
 
        \li Name the file as \a main.cpp and click \gui Next.
243
 
 
244
 
        \li Select \gui Finish to add main.cpp to the project and open it in
245
 
            edit mode.
246
 
 
247
 
        \li Add the following lines of C++ code to main.cpp to load the
248
 
            accelbubble.qml file from accelbubble.qrc:
249
 
 
250
 
            \quotefromfile tutorial_main.cpp
251
 
            \skipto #include
252
 
            \printuntil }
253
 
 
254
 
        \li Update the accelbubble.pro file with the following library
255
 
            dependency information:
256
 
 
257
 
            \code
258
 
              QT += quick sensors svg xml
259
 
            \endcode
260
 
    \endlist
261
 
 
262
 
    The application is complete and ready to be deployed to the device.
263
 
    Enable "USB Debugging" on your Android device and connect it to your PC.
 
207
 
 
208
        \li Enable \e{USB Debugging} on the device.
 
209
 
 
210
        \li Connect the device to the development PC.
 
211
 
264
212
    If you are using a device running Android v4.2.2, it should prompt you to
265
213
    verify the connection to allow USB debugging from the PC it is connected
266
214
    to. To avoid such prompts every time you connect the device, check
267
215
    "Always allow from the computer" and select \gui OK.
268
216
 
269
 
    To run the application on the device, press CTRL + R keys in \QC
270
 
    \gui Edit mode.
 
217
        \li To run the application on the device, press \key {Ctrl+R}.
 
218
 
 
219
    \endlist
271
220
 
272
221
    \section1 Example Code
273
222
 
274
 
    When you have completed the steps mentioned in the earlier sections, the
275
 
    accelbubble.qml, main.cpp, and accelbubble.pro files look as follows:
276
 
 
277
 
    \section2 accelbubble.qml
278
 
 
279
 
    \quotefile qml/tutorial_finalmainqml.qml
280
 
 
281
 
    \section2 main.cpp
282
 
 
283
 
    \quotefile tutorial_main.cpp
284
 
 
285
 
    \section2 accelbubble.pro
286
 
 
287
 
    \quotefile tutorial_accelbubble.pro
 
223
    When you have completed the steps, the main.qml file should look as follows:
 
224
 
 
225
    \quotefile accelbubble/main.qml
 
226
 
288
227
*/