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:
Leena Miettinen
2011-11-14 15:43:03 +01:00
parent 463c9999bb
commit 58001c4043
20 changed files with 2 additions and 987 deletions

View File

@@ -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

View File

@@ -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}.
*/