forked from qt-creator/qt-creator
Doc: remove tutorial and example
Using Qt widgets to create UI for mobile applications is not recommended. Task-number: QTCREATORBUG-6484 Change-Id: I6d1f267bcf8da5864d8df73ca03bd48f4f7581ad Reviewed-by: Aleksi Uotila <aleksi.uotila@nokia.com> Reviewed-by: Eike Ziller <eike.ziller@nokia.com>
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
\contentspage index.html
|
||||
\previouspage creator-qml-components-example.html
|
||||
\page creator-writing-program.html
|
||||
\nextpage creator-mobile-example.html
|
||||
\nextpage creator-project-managing.html
|
||||
|
||||
\title Creating a Qt Widget Based Application
|
||||
|
||||
|
||||
@@ -1,291 +0,0 @@
|
||||
/****************************************************************************
|
||||
**
|
||||
** This file is part of Qt Creator
|
||||
**
|
||||
** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
||||
**
|
||||
** Contact: Nokia Corporation (qt-info@nokia.com)
|
||||
**
|
||||
**
|
||||
** 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.
|
||||
**
|
||||
** If you have questions regarding the use of this file, please contact
|
||||
** Nokia at qt-info@nokia.com.
|
||||
**
|
||||
****************************************************************************/
|
||||
|
||||
// **********************************************************************
|
||||
// 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 index.html
|
||||
\previouspage creator-writing-program.html
|
||||
\page creator-mobile-example.html
|
||||
\nextpage creator-project-managing.html
|
||||
|
||||
\title Creating a Qt Widget Based Mobile Application
|
||||
|
||||
\note To complete this tutorial, you must install \QSDK.
|
||||
The installation program installs and configures the necessary tool chains
|
||||
for mobile application development.
|
||||
|
||||
This tutorial describes how to use \QC to create a small Qt
|
||||
application, Battery Indicator, that uses the System Information
|
||||
Mobility API to fetch battery information from the device.
|
||||
|
||||
The user interface for the application is designed using Qt widgets. This
|
||||
enforces a platform look and feel for Symbian devices and Maemo 5 devices.
|
||||
However, to achieve a platform look and feel for MeeGo Harmattan devices,
|
||||
\l{Creating Qt Quick Applications}{create a Qt Quick Application} and use
|
||||
the Qt Quick components for MeeGo.
|
||||
|
||||
\image qtcreator-batteryindicator-screenshot.png
|
||||
|
||||
\section1 Creating the Battery Indicator Project
|
||||
|
||||
\note Create the project with the \gui{Help} mode active so that you can
|
||||
follow these instructions while you work.
|
||||
|
||||
\list 1
|
||||
|
||||
\o Select \gui{File > New File or Project > Qt Widget Project > Mobile
|
||||
Qt Application > Choose}.
|
||||
|
||||
\image qtcreator-new-mobile-project.png "New File or Project dialog"
|
||||
|
||||
The \gui{Introduction and Project Location} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-intro-and-location.png "Introduction and Project Location dialog"
|
||||
|
||||
\o In the \gui{Name} field, type \bold {BatteryIndicator}.
|
||||
|
||||
\o In the \gui {Create in} field, enter the path for the project files.
|
||||
For example, \c {C:\Qt\examples}, and then click \gui{Next}.
|
||||
|
||||
The \gui{Target Setup} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-project-qt-versions.png "Target Setup dialog"
|
||||
|
||||
\o Select \gui {Symbian Device}, \gui {Maemo5}, \gui Harmattan, and
|
||||
\gui {Qt Simulator} targets, and click \gui{Next}.
|
||||
|
||||
\note Targets are listed if you installed the appropriate
|
||||
development environment, for example, as part of the \QSDK. You can
|
||||
add targets later in the \gui Projects mode.
|
||||
|
||||
The \gui {Mobile Options} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-project-app-options.png "Mobile Options dialog"
|
||||
|
||||
\o In the \gui {Orientation behavior} field, determine how the
|
||||
application behaves when the orientation of the device display
|
||||
rotates between portrait and landscape, and then click \gui{Next}.
|
||||
|
||||
\note This dialog opens only if you select \gui Maemo5 or
|
||||
\gui {Symbian Device} target in the \gui {Target Setup} dialog. On
|
||||
Harmattan, the Qt Quick Components for MeeGo provide native-looking
|
||||
rotation.
|
||||
|
||||
The \gui {Symbian Specific} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-project-symbian-options.png "Symbian Specific dialog"
|
||||
|
||||
\note \QC contains a default program icon and generates an
|
||||
\l{Application UID}, for testing the application on a device. You
|
||||
only need to change the icon and UID if you deliver the application
|
||||
for public use.
|
||||
|
||||
\o Click \gui Next.
|
||||
|
||||
The \gui {Maemo Specific} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-project-maemo-options.png "Maemo Specific dialog"
|
||||
|
||||
\o In the \gui {Application icon} field, select the application
|
||||
icon to use on Maemo 5 or Harmattan targets, or click \gui Next to
|
||||
use the default icon.
|
||||
|
||||
The \gui{Project Management} dialog opens.
|
||||
|
||||
\image qtcreator-mobile-project-summary.png "Project Management dialog"
|
||||
|
||||
\o Review the project settings, and click \gui{Finish} to create the
|
||||
project.
|
||||
|
||||
\endlist
|
||||
|
||||
The BatteryIndicator project now contains the following files:
|
||||
|
||||
\list
|
||||
|
||||
\o BatteryIndicator.pro
|
||||
\o main.cpp
|
||||
\o BatteryIndicator.svg
|
||||
\o BatteryIndicator.png
|
||||
\o BatteryIndicator.desktop
|
||||
\o deployment.pri
|
||||
\o mainwindow.cpp
|
||||
\o mainwindow.ui
|
||||
\o mainwindow.h
|
||||
\o templates for Debian deployment files
|
||||
|
||||
\endlist
|
||||
|
||||
\image qtcreator-mobile-project-contents.png "Project contents"
|
||||
|
||||
The files come with the necessary boiler plate code that you must
|
||||
modify, as described in the following sections.
|
||||
|
||||
\section1 Declaring the Qt Mobility API
|
||||
|
||||
To use the Qt Mobility APIs or develop applications for Symbian
|
||||
devices, you must modify the .pro file to declare the Qt Mobility APIs
|
||||
that you use.
|
||||
|
||||
This example uses the System Info API, so you must declare it, as
|
||||
illustrated by the following code snippet:
|
||||
|
||||
\code
|
||||
|
||||
CONFIG += mobility
|
||||
MOBILITY = systeminfo
|
||||
|
||||
\endcode
|
||||
|
||||
Each Mobility API has its corresponding value that you have to add
|
||||
as a value of MOBILITY to use the API. For a list of the APIs and the
|
||||
corresponding values that you can assign to MOBILITY, see the
|
||||
\l {http://doc.qt.nokia.com/qtmobility/quickstart.html}{Quickstart Example}.
|
||||
|
||||
\section1 Designing the User Interface
|
||||
|
||||
\list 1
|
||||
|
||||
\o In the \gui{Editor} mode, double-click the mainwindow.ui
|
||||
file in the \gui{Projects} view to launch the integrated \QD.
|
||||
|
||||
\o Drag and drop a \gui{Progress Bar}
|
||||
(\l{http://doc.qt.nokia.com/4.7/qprogressbar.html}{QProgressBar})
|
||||
widget to the form.
|
||||
|
||||
\image qtcreator-mobile-project-widgets.png "Adding widgets to the UI"
|
||||
|
||||
\o In the \gui Properties pane, change the \gui objectName to
|
||||
\bold batteryLevelBar.
|
||||
|
||||
\o Right-click the \gui MainWindow object and select
|
||||
\gui {Lay Out > Lay Out Horizontally} to ensure that the battery
|
||||
indicator widget size is adjusted correctly on Maemo devices.
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Completing the Header File
|
||||
|
||||
The mainwindow.h file contains some of the necessary #includes, a
|
||||
constructor, a destructor, and the \c{Ui} object. You must include
|
||||
the System Info header file, add a shortcut to the mobility name
|
||||
space, and add a private function to update the battery level value in
|
||||
the indicator when the battery power level changes.
|
||||
|
||||
\list 1
|
||||
|
||||
\o In the \gui{Projects} view, double-click the \c{mainwindow.h} file
|
||||
to open it for editing.
|
||||
|
||||
\o Include the System Device Info header file, as illustrated by the
|
||||
following code snippet:
|
||||
|
||||
\snippet examples/batteryindicator/mainwindow.h 1
|
||||
|
||||
\o Add a shortcut to the mobility name space, as illustrated by the
|
||||
following code snippet:
|
||||
|
||||
\snippet examples/batteryindicator/mainwindow.h 2
|
||||
|
||||
\o Declare a private function in the \c{private} section, after the
|
||||
\c{Ui::MainWindow} function, as illustrated by the following code
|
||||
snippet:
|
||||
|
||||
\snippet examples/batteryindicator/mainwindow.h 3
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Completing the Source File
|
||||
|
||||
Now that the header file is complete, move on to the source file,
|
||||
mainwindow.cpp.
|
||||
|
||||
\list 1
|
||||
|
||||
\o In the \gui{Projects} view, double-click the mainwindow.cpp file
|
||||
to open it for editing.
|
||||
|
||||
\o Create a QSystemDeviceInfo object and set its value. Then connect
|
||||
the signal that indicates that battery level changed to the
|
||||
\c setValue slot of the progress bar. This is illustrated by the
|
||||
following code snippet:
|
||||
|
||||
\snippet examples/batteryindicator/mainwindow.cpp 1
|
||||
|
||||
\o Use the constructor to set initial values and make sure that the
|
||||
created object is in a defined state, as illustrated by the
|
||||
following code snippet:
|
||||
|
||||
\snippet examples/batteryindicator/mainwindow.cpp 2
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Compiling and Running Your Program
|
||||
|
||||
Now that you have all the necessary code, select \gui {Qt Simulator}
|
||||
as the target and click the
|
||||
\inlineimage qtcreator-run.png
|
||||
button to build your program and run it in the Qt Simulator.
|
||||
|
||||
In Qt Simulator, run the runOutOfBattery.qs example script
|
||||
to see the value change in the Battery Indicator application.
|
||||
Select \gui {Scripting > examples > runOutOfBattery.qs > Run}.
|
||||
|
||||
\image qtcreator-mobile-simulated.png "Mobile example in Qt Simulator"
|
||||
|
||||
\section1 Testing on a Symbian Device
|
||||
|
||||
You also need to test the application on real devices. Before you can
|
||||
start testing on Symbian devices, you must connect them to the development
|
||||
PC by using a USB cable and install an on-device debugging agent on them.
|
||||
|
||||
\list 1
|
||||
|
||||
\o Install the necessary software on the device. For more information,
|
||||
see \l{Connecting Symbian Devices}.
|
||||
|
||||
\o Start the CODA debugging agent on the device.
|
||||
|
||||
\o Click the \gui {Target Selector} and select \gui {Symbian Device}.
|
||||
|
||||
\o Click \gui Run to build the application for the Symbian device.
|
||||
|
||||
\endlist
|
||||
|
||||
\section1 Testing on the Maemo or MeeGo Harmattan Emulator
|
||||
|
||||
The Maemo 5 (Fremantle) and MeeGo Harmattan emulator are installed as part
|
||||
of the \QSDK. After they are installed, you can start them from \QC.
|
||||
|
||||
The Maemo emulator emulates the Nokia N900 device environment. You can test
|
||||
applications in conditions practically identical to running the application
|
||||
on a Nokia N900 device with the software update release 1.3 (V20.2010.36-2).
|
||||
|
||||
The MeeGo Harmattan emulator emulates the Nokia N9 device environment.
|
||||
|
||||
For more information, see \l{Using Maemo or MeeGo Harmattan Emulator}.
|
||||
|
||||
*/
|
||||
Reference in New Issue
Block a user