/**************************************************************************** ** ** Copyright (C) 2015 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing ** ** This file is part of Qt Creator ** ** ** GNU Free Documentation License ** ** Alternatively, this file may be used under the terms of the GNU Free ** Documentation License version 1.3 as published by the Free Software ** Foundation and appearing in the file included in the packaging of this ** file. ** ** ****************************************************************************/ // ********************************************************************** // NOTE: the sections are not ordered by their logical order to avoid // reshuffling the file each time the index order changes (i.e., often). // Run the fixnavi.pl script to adjust the links to the index order. // ********************************************************************** /*! \contentspage {Qt Creator Manual} \previouspage creator-writing-program.html \example accelbubble \nextpage {Using Qt Quick UI Forms} \title Creating a Mobile Application This tutorial describes developing Qt Quick applications for Android and iOS devices using Qt Quick Controls. We use \QC to implement a Qt Quick application that accelerates an SVG (Scalable Vector Graphics) image based on the changing accelerometer values. \image creator_android_tutorial_ex_app.png \section1 Setting up the Development Environment To be able to build and run the application on a mobile device, you must set up the development environment for the device platform and configure a connection between \QC and the mobile device. To develop for Android devices, you must download and install the latest Android NDK and SDK, and update the SDK to get the API and tools needed for development. In addition, you must install the Java SE Development Kit (JDK) and Apache Ant. After you have installed all these tools, you must specify the paths to them in \QC. For detailed instructions, see \l{Qt for Android} and \l{Connecting Android Devices}. To develop for iOS devices, you must install Xcode and use it to configure a device. For this, you need an Apple developer account and iOS Developer Program certificate that you receive from Apple. For more information, see \l{Connecting iOS Devices}. \section1 Creating the Project \list 1 \li Select \uicontrol File > \uicontrol {New File or Project} > \uicontrol Application > \uicontrol {Qt Quick Controls Application} > \uicontrol Choose. \li In the \uicontrol Name field, type \e {accelbubble}. \li In the \uicontrol {Create in} field, enter the path for the project files, and then click \uicontrol Next (or \uicontrol Continue on OS X). \li In the \uicontrol {Minimal required Qt version} field, select the Qt version to develop with. \note This page determines the set of files that the wizard 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 OS, and click \uicontrol{Next}. \note Kits are listed if they have been specified in \uicontrol Tools > \uicontrol Options > \uicontrol {Build & Run} > \uicontrol Kits (on Windows and Linux) or in \uicontrol {Qt Creator} > \uicontrol Preferences \uicontrol {Build & Run} > \uicontrol Kits (on OS X). \li Select \uicontrol Next in the following dialogs to use the default settings. \li Review the project settings, and click \uicontrol{Finish} (or \uicontrol Done on OS X). \endlist \QC generates a default QML file that you can modify to create the main view of the application. \section1 Creating the Main View The main view of the application displays an SVG bubble image at the center of the main window. To use \l{accelbubble/Bluebubble.svg}{Bluebubble.svg} in your project, copy it to the project directory (same subdirectory as the QML file). The image appears in \uicontrol Resources. You can also use any other image or a QML type, instead. \list 1 \li In the \uicontrol Projects view, double-click the main.qml file to open it in the code editor. \li Click \uicontrol Design to open the file in \QMLD. \li In the \uicontrol Navigator, select \uicontrol Label and press \key Delete to delete it. \li Select \uicontrol ApplicationWindow to edit its properties. \list a \li In the \uicontrol Id field, enter \e mainWindow, to be able to 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 and drag and drop it to the canvas. \li In the \uicontrol Properties pane, \uicontrol Id field, enter \e bubble to be able to reference the image from other places. \li In the code editor, add the following new properties to the image to position the image at the center of the application window when the application starts: \quotefromfile accelbubble/main.qml \skipto Image \printuntil bubble.width \li Set the x and y position of the image based on the new properties: \dots \printuntil centerY \skipto /^\}/ \printuntil } \endlist For an example, see \l{accelbubble/main.qml}{main.qml}. \section1 Moving the Bubble Now that the visual elements are in place, let us move the bubble based on Accelerometer sensor values. \list 1 \li Add the following import statement to main.qml: \code import QtSensors 5.0 \endcode \li Add the \l{Accelerometer} type with the necessary properties: \quotefromfile accelbubble/main.qml \skipto Accelerometer \printuntil true \skipto } \printuntil } \li Add the following JavaScript functions that calculate the x and y position of the bubble based on the current Accelerometer values: \quotefromfile accelbubble/main.qml \skipto function \printuntil Math.atan(x \printuntil } \li Add the following JavaScript code for \a onReadingChanged signal of Accelerometer type to make the bubble move when the Accelerometer values change: \quotefromfile accelbubble/main.qml \skipto onReadingChanged \printuntil } We want to ensure that the position of the bubble is always within the bounds of the screen. If the Accelerometer returns not a number (NaN), the value is ignored and the bubble position is not updated. \li Add SmoothedAnimation behavior on the \a x and \a y properties of the bubble to make its movement look smoother. \quotefromfile accelbubble/main.qml \skipto Behavior \printuntil x \printuntil } \printuntil } \endlist \section1 Locking Device Orientation The device display is rotated by default when the device orientation changes between portrait and landscape. For this example, it would be better for the screen orientation to be fixed. To lock the orientation to portrait or landscape on Android, specify it in an AndroidManifest.xml that you can generate in \QC. For more information, see \l{Editing Manifest Files}. On iOS, you can lock the device orientation in a Info.plist file that you specify in the .pro file as the value of the QMAKE_INFO_PLIST variable. \section1 Adding Dependencies Update the accelbubble.pro file with the following library dependency information: \code QT += quick sensors svg xml \endcode On iOS, you must link to the above libraries statically, by adding the plugin names explicitly as values of the QTPLUGIN variable. Specify a qmake scope for iOS builds (which can also contain the QMAKE_INFO_PLIST variable): \code ios { QTPLUGIN += qsvg qsvgicon qtsensors_ios QMAKE_INFO_PLIST = Info.plist } \endcode After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply the changes to the Makefile of the project. \section1 Adding Resources You need to add the Bluebubble.svg image file to the application resources for deployment to mobile devices: \list 1 \li In the \uicontrol Projects view, double-click the qml.qrc file to open it in the resource editor. \li Select \uicontrol Add to add Bluebubble.svg. \endlist \section1 Running the Application The application is complete and ready to be deployed to a device: \list 1 \li Enable \e{USB Debugging} on the Android device or \e{developer mode} on the iOS device. \li Connect the device to the development PC. 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 to. To avoid such prompts every time you connect the device, select the \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}. \endlist */