Commit b9b1f89e authored by Leena Miettinen's avatar Leena Miettinen

Doc: update the mobile application tutorial

Update text to match the template and UI.

Use the \example command instead of \page to have qdoc
generate HTML files from the example files. This requires
also adding the .pro file.

Add an SVG image to the sources and link to it from the
text.

Change-Id: Ib90798386ee082c9ea2a405b33a4f2a5996a9d2a
Reviewed-by: default avatarTim Jenssen <tim.jenssen@theqtcompany.com>
parent ccb930e2
...@@ -7,7 +7,7 @@ sourcedirs = $SRCDIR/src ...@@ -7,7 +7,7 @@ sourcedirs = $SRCDIR/src
imagedirs = $SRCDIR/images $SRCDIR/templates/images imagedirs = $SRCDIR/images $SRCDIR/templates/images
outputdir = $OUTDIR outputdir = $OUTDIR
exampledirs = $SRCDIR/examples exampledirs = $SRCDIR/examples
examples.fileextensions += *.qml examples.fileextensions += *.qml *.svg
HTML.extraimages = images/commercial.png HTML.extraimages = images/commercial.png
qhp.QtCreator.extraFiles = images/commercial.png qhp.QtCreator.extraFiles = images/commercial.png
......
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
<defs>
<radialGradient id="grad1" cx="0.5" cy="0.7" r="0.7" fx="0.5" fy="0.4">
<stop offset="0" style="stop-color:rgb(255,255,255)" />
<stop offset="1.5" style="stop-color:rgb(0,102,153)" />
</radialGradient>
</defs>
<circle cx="100" cy="80" r="42" fill="url(#grad1)"/>
</svg>
TEMPLATE = app
QT += qml quick widgets
SOURCES += main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Default rules for deployment.
include(deployment.pri)
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
** **
**************************************************************************/ **************************************************************************/
import QtQuick 2.2 import QtQuick 2.5
import QtQuick.Controls 1.1 import QtQuick.Controls 1.4
import QtSensors 5.0 import QtSensors 5.0
...@@ -47,6 +47,20 @@ ApplicationWindow { ...@@ -47,6 +47,20 @@ ApplicationWindow {
height: 480 height: 480
visible: true visible: true
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
Image { Image {
id: bubble id: bubble
source: "Bluebubble.svg" source: "Bluebubble.svg"
...@@ -105,18 +119,4 @@ ApplicationWindow { ...@@ -105,18 +119,4 @@ ApplicationWindow {
function calcRoll(x, y, z) { function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795); return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
} }
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
} }
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
/*! /*!
\contentspage {Qt Creator Manual} \contentspage {Qt Creator Manual}
\previouspage creator-writing-program.html \previouspage creator-writing-program.html
\page creator-mobile-app-tutorial.html \example accelbubble
\nextpage {Using Qt Quick UI Forms} \nextpage {Using Qt Quick UI Forms}
\title Creating a Mobile Application \title Creating a Mobile Application
...@@ -61,17 +61,23 @@ ...@@ -61,17 +61,23 @@
\list 1 \list 1
\li Select \uicontrol File > \uicontrol {New File or Project} > \uicontrol Application > \li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Qt Quick Application} > \uicontrol Choose. \uicontrol Application > \uicontrol {Qt Quick Controls Application}
> \uicontrol Choose.
\li In the \uicontrol{Name} field, type \b{accelbubble}. \li In the \uicontrol Name field, type \e {accelbubble}.
\li In the \uicontrol {Create in} field, enter the path for the project files. \li In the \uicontrol {Create in} field, enter the path for the project
For example, \c {C:\Qt\examples}, and then click \uicontrol{Next} (or files, and then click \uicontrol Next (or \uicontrol Continue on
\uicontrol Continue on OS X). OS X).
\li In the \uicontrol {Minimal required Qt version} field, select the Qt
version to develop with.
\li In the \uicontrol {Qt Quick component set} field, select \note This page determines the set of files that the wizard
\uicontrol {Qt Quick Controls 1.1}. generates and their contents. The instructions in this tutorial
might not apply if you select the \uicontrol {With .ui.qml file}
check box.
\li Select \l{glossary-buildandrun-kit}{kits} for Android ARM and iPhone \li Select \l{glossary-buildandrun-kit}{kits} for Android ARM and iPhone
OS, and click \uicontrol{Next}. OS, and click \uicontrol{Next}.
...@@ -97,11 +103,8 @@ ...@@ -97,11 +103,8 @@
The main view of the application displays an SVG bubble image at the center The main view of the application displays an SVG bubble image at the center
of the main window. of the main window.
To use the Bluebubble.svg used by the Qt Sensors example, Accel Bubble, in To use \l{accelbubble/Bluebubble.svg}{Bluebubble.svg} in your project,
your project, you must copy it to the project directory (same subdirectory copy it to the project directory (same subdirectory as the QML file).
as the QML file) from the examples directory in the Qt installation
directory. For example:
\c {C:\Qt\Qt5.2.0\5.2.0\msvc2010\examples\sensors\accelbubble\content}.
The image appears in \uicontrol Resources. You can also use any other The image appears in \uicontrol Resources. You can also use any other
image or a QML type, instead. image or a QML type, instead.
...@@ -110,20 +113,21 @@ ...@@ -110,20 +113,21 @@
\li In the \uicontrol Projects view, double-click the main.qml file \li In the \uicontrol Projects view, double-click the main.qml file
to open it in the code editor. to open it in the code editor.
\li Modify the properties of the ApplicationWindow type to specify the \li Click \uicontrol Design to open the file in \QMLD.
application name, give the ApplicationWindow an id, and to set it
visible, as illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml \li In the \uicontrol Navigator, select \uicontrol Label and press
\skipto ApplicationWindow \key Delete to delete it.
\printuntil visible
\skipto /^\}/
\printuntil }
\li Click \uicontrol Design to open the file in \QMLD. \li Select \uicontrol ApplicationWindow to edit its properties.
\list a
\li In the \uicontrol Navigator, select \uicontrol Label and press \key Delete \li In the \uicontrol Id field, enter \e mainWindow, to be able to
to delete it. reference the window from other places.
\li In the \uicontrol Title field, type \e {Accelerate Bubble}.
\endlist
\li In \uicontrol Library > \uicontrol Resources, select Bluebubble.svg \li In \uicontrol Library > \uicontrol Resources, select Bluebubble.svg
and drag and drop it to the canvas. and drag and drop it to the canvas.
...@@ -132,34 +136,23 @@ ...@@ -132,34 +136,23 @@
able to reference the image from other places. able to reference the image from other places.
\li In the code editor, add the following new properties to the image to \li In the code editor, add the following new properties to the image to
position the image at the center of ApplicationWindow when the position the image at the center of the application window when the
application starts: application starts:
\quotefromfile accelbubble/main.qml \quotefromfile accelbubble/main.qml
\skipto Image \skipto Image
\printuntil bubble.width \printuntil bubble.width
\li Set the x and y position of the image based on the new \li Set the x and y position of the image based on the new properties:
properties:
\dots \dots
\printuntil centerY \printuntil centerY
\skipto /^\}/ \skipto /^\}/
\printuntil } \printuntil }
\endlist
Here is how the accelbubble.qml file looks after you made the changes: \endlist
\quotefromfile accelbubble/main.qml For an example, see \l{accelbubble/main.qml}{main.qml}.
\skipto import QtQuick
\printuntil 1.1
\codeline
\skipto ApplicationWindow
\printuntil true
\skipto Image
\printuntil y:
\skipto /^\}/
\printuntil }
\section1 Moving the Bubble \section1 Moving the Bubble
...@@ -275,19 +268,11 @@ ...@@ -275,19 +268,11 @@
If you are using a device running Android v4.2.2, it should prompt you to If you are using a device running Android v4.2.2, it should prompt you to
verify the connection to allow USB debugging from the PC it is connected verify the connection to allow USB debugging from the PC it is connected
to. To avoid such prompts every time you connect the device, check to. To avoid such prompts every time you connect the device, select the
"Always allow from the computer" and select \uicontrol OK. \uicontrol {Always allow from the computer} check box, and then select
\uicontrol OK.
\li To run the application on the device, press \key {Ctrl+R}. \li To run the application on the device, press \key {Ctrl+R}.
\endlist \endlist
\section1 Example Code
When you have completed the steps, the main.qml file should look as follows:
\quotefromfile accelbubble/main.qml
\skipto import
\printuntil /^\}/
*/ */
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
****************************************************************************/ ****************************************************************************/
/*! /*!
\contentspage {Qt Creator Manual} \contentspage {Qt Creator Manual}
\previouspage creator-mobile-app-tutorial.html \previouspage {Creating a Mobile Application}
\example uiforms \example uiforms
\nextpage creator-project-managing.html \nextpage creator-project-managing.html
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
\contentspage {Qt Creator Manual} \contentspage {Qt Creator Manual}
\previouspage {Creating a Qt Quick Application} \previouspage {Creating a Qt Quick Application}
\page creator-writing-program.html \page creator-writing-program.html
\nextpage creator-mobile-app-tutorial.html \nextpage {Creating a Mobile Application}
\title Creating a Qt Widget Based Application \title Creating a Qt Widget Based Application
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment