qtcreator.qdoc

        \l{Setting Up Development Environment for Symbian}.

        \o Connect the device to the development PC through a USB cable.
        Qt Creator shows the current connection state
        of a device in its main toolbar, showing a red cross when no device is
        connected, or a green check mark when a device is connected.

        \image qtcreator-qt4-symbian-device-notconnected.png
        \image qtcreator-qt4-symbian-device-connected.png

        The tool tip of the target button shows more details about the actual
        device that will be used when you run your application.

        \o Start the \gui{App TRK} application on your device.

        \o Click the \gui Run button.

    \endlist

    You can connect several devices to your development PC simultaneously.
    In the details of the run configuration for the \gui{Symbian Device} target,
    select the device to run your application on.

    \section3 Creating Installation Packages

    When you build the application for the \gui{Symbian Device} target, Qt
    Creator automatically generates a Symbian installation system (SIS) file
    in the project folder. You can deliver the installation file to users for
    installation on Symbian devices.

    Only installation files signed with a certificate and private key are
    allowed to be installed onto Symbian devices. By default, Qt Creator
    self-signs the installation file. This self-signing allows you to install
    the application on a mobile  device but places limits on what you can do
    with the installation file, including:
    \list
       \o  Self-signed applications cannot access the more sensitive
           \l{Capabilities and Signing}{capabilities} of the mobile device.
       \o  Security warnings will be displayed when you install the self-signed
           application on a mobile device.
       \o  Self-signed applications cannot be distributed commercially on Ovi
           Store.
    \endlist

    To get around these limitations, you need to go through the Symbian Signed
    process. The Symbian Signed organisation manages a public key
    infrastructure to provide public authentication of the information in the
    application signing certificates. Their security partner can validate your
    certificate and give you a Publisher ID. Then, when you sign an
    application, other people can be confident that the information in your
    certificate is correct and that the application does actually come from you.

    There are also options that do not require you to get a Publisher ID. For
    more detail about how the Symbian Signed process works, see
    \l{http://developer.symbian.org/wiki/index.php/Complete_Guide_To_Symbian_Signed}
    {Complete Guide to Symbian Signed}.

    When you have your own certificate and private key, you can specify them in
    the \gui{Create SIS Package} step in your build configuration.

    \image qtcreator-qt4-symbian-signing.png

    \section3 Capabilities and Signing

    Capabilities allow the Symbian platform to control access by applications to
    the functionality provided by the platform APIs. Access to capabilities is
    determined by the device configuration and how the application has been signed.

    Symbian Signed offers the following signing options depending on the
    capabilities that the application accesses:

    \list

        \o \bold{Express signed} for applications that access only user and system
        capabilities.

        \o \bold{Certified signed} for applications that access also restricted or
        device manufacturer capabilities.

        \note You need to request the rights to access device manufacturer
        capabilities from the manufacturer.

    \endlist

    For more information about how to choose the appropriate signing option, see
    \l{http://developer.symbian.org/wiki/index.php/Symbian_Signed_For_Distributing_Your_Application}{Symbian Signed For Distributing Your Application}.

    If you select a signing option that does not allow the application to access
    the defined capabilities, installing the application on mobile devices
    fails. To avoid problems, only define capabilities and link libraries to a project
    if you really need them.

    For more information about capabilities and how you can check which ones you
    need, see
    \l{http://developer.symbian.org/wiki/index.php/Capabilities_(Symbian_Signed)}{Capabilities (Symbian Signed)}
    and
    \l{http://doc.qt.nokia.com/4.7-snapshot/platform-notes-symbian.html#required-capabilities}{Required Capabilities for Qt Applications}.

    For more information on how to define capabilities for a project, see
    \l{http://doc.qt.nokia.com/4.7-snapshot/qmake-platform-notes.html#capabilities}{Capabilities}.

    \section3 Application UID

    A UID is a globally unique identifier that is used to
    uniquely identify, for example, an object or file type. In Symbian development,
    objects are identified by compound identifiers that are constructed from three
    UIDs, namely UID1, UID2, and UID3. UID1 and UID2 specify the category of an
    object, whereas UID3 identifies a particular object, such as an application.

    When you create a \gui {Mobile Qt Application}, Qt Creator adds a UID3 suitable for
    development and debugging automatically to the application .pro file. However, to
    distribute your application and get it Symbian signed, you must apply for a UID
    from Symbian, who manages the allocation of UIDs. You can request UIDs either one
    at a time or as preallocated blocks on the \l{https://www.symbiansigned.com/app/page}{Symbian Signed}
    web site.

    Replace the testing UID with the distribution UID in the .pro file before you
    build the final installation package. For more information, see
    \l{http://doc.qt.nokia.com/4.7-snapshot/qmake-platform-notes.html#unique-identifiers}{Unique Identifiers}.

    \section2 Building and Running for Symbian Emulator

    Select
    the \gui{Symbian Emulator} target as the active one, and build and run your
    project.

    \section2 Troubleshooting

    If you cannot build the application, check if:
     \list
        \o You selected the Symbian Device target for building the application.
        \o The settings for the Qt version you use to build your project are
           correct. The path to the S60 SDK must point to the S60 SDK
           installation directory.  Select \gui Tools > \gui Options...
           > \gui Debugger > \gui{Symbian TRK} and check if it points to the
           debugger toolchain.
     \endlist
    If you cannot run the application on a device, check if:
     \list
        \o The device is connected through the USB cable in \e{PC Suite} mode.
        \o \gui{App TRK} is running on the device, using the USB connection,
           with the status \e connected.
        \o The device is detected and selected in the run configuration
           details.
     \endlist

    If you cannot run the application in the emulator, check if:
     \list
        \o You selected the \gui{Symbian Emulator} target for your application.
        \o If the emulator process cannot be started, try closing Qt Creator and
           starting the application directly from your file manager. Having
           done this, Qt Creator should be able to run your projects in the
           emulator.
     \endlist

    If this does not help to solve your problem, search the qt-creator@trolltech.com
    mailing list archives or provide feedback to us via the methods described on the
    \l{http://qt.gitorious.org/qt-creator/pages/Home}{Qt Creator Development Wiki}.

*/


/*!
    \contentspage index.html
    \previouspage creator-building-targets.html
    \page creator-build-settings.html
    \nextpage creator-run-settings.html

    \title Specifying Build Settings

    You specify build settings in the \gui Projects mode.

    \image qtcreator-projectpane.png

    To add a new build configuration, click \gui Add and select the type of
    configuration you would like to add. You can add as many build
    configurations as you need.

    To delete the build configuration currently selected, click \gui Remove.

    \section1 Editing Build Configurations

    To edit a build configuration:
    \list 1
        \o Select the build configuration you want to edit in
           \gui{Edit Build Configuration}.
        \o In section \gui General, you can specify:
        \list
            \o The \l{glossary-project-qt}{Qt version} you want to use to
               build your project. For more information, see
               \l{Selecting the Qt version}.
            \o The tool chain required to build the project.
            \o By default, projects are built in a separate directory
               from the source directory, as \l{glossary-shadow-build}{shadow builds}.
               This keeps the files generated for each target platform separate.

               \note Shadow building is not supported by the Symbian build system.
               Also, shadow building on Windows is not supported for Maemo.
               If you only build for one target platform, you can deselect
               the \gui{Shadow Build} checkbox.
        \endlist
    \endlist

    \section1 Build Steps

    The build system of Qt Creator is built on qmake and make. In
    \gui{Build Steps} you can change the settings for qmake and make. Qt
    Creator runs the make command using the Qt version defined for the current
    build configuration.

    \image qtcreator-build-steps.png "Build steps"

    \section1 Clean Steps

    You can use the cleaning process to remove intermediate files. This process
    might help you to fix obscure issues during the process of building a
    project.

    \image qtcreator-clean-steps.png "Clean steps"

    You can define the cleaning steps for your builds in the \gui{Clean Steps}:
    \list
        \o To add a clean step using make or a custom process, click
           \gui{Add clean step} and select the type of step you want to add.

           By default, custom steps are disabled. Activate custom steps by
           checking the \gui{Enable custom process step} check-box.
        \o To remove a clean step, click \gui{Remove Item}.
        \o To change the order of steps, click
           \inlineimage qtcreator-movestep.png
           .
    \endlist

    \section1 Build Environment

    You can specify the environment you want to use for building in the
    \bold{Build Environment} section. By default, the environment in which Qt
    Creator was started is used and modified to include the Qt version.
    Depending on the selected Qt version, Qt Creator automatically sets the
    necessary environment variables. You can edit existing environment
    variables or add, reset and unset new variables based on your project
    requirements.

*/


/*!
    \contentspage index.html
    \previouspage creator-build-settings.html
    \page creator-run-settings.html
    \nextpage creator-editor-settings.html

    \title Specifying Run Settings

    Qt Creator automatically creates run configurations for your project.
    To view and modify the settings, select \gui {Projects > Run}.
    The settings to specify depend on the type of the project: qmake project
    or Qt Quick project.

    Click \gui Add to add run settings for a project and \gui Remove to remove
    the current settings.

    \section1 Specifying Run Settings for qmake Projects

    The run configurations for qmake projects derive their executable from the parsed .pro
    files.

    \section2 Specifying Run Settings for Desktop Targets

    You can specify command line arguments to be passed to the executable
    and the working directory to use. The working directory defaults to
    the directory of the build result.

    For console applications, check the \gui{Run in Terminal} check box.
    If you need to run with special environment variables set up, you
    also do it in the run configuration settings.

    \image qtcreator-pprunsettings.png

    You can also create custom executable run configurations where you
    can set the executable to be run. For more information, see
    \l{Specifying a Custom Executable to Run}.

    \section2 Specifying Run Settings for Symbian Devices

    Qt Creator automatically detects Symbian devices that are connected to
    the development PC with an USB cable.
    If only one device is detected, the application is deployed
    and run on it. If multiple devices are connected to the PC,
    make sure that the correct device is selected in the
    \gui {Symbian Device} run settings for your project.

    You can also pass command line arguments to your application on the device.
    Press the \gui{Device info button} to get more information about the selected
    device, such as the CPU type and the running TRK version.

    \image qtcreator-symbian-run-settings.png "Run settings for Symbian devices"

    \section2 Specifying Run Settings for Maemo Devices

    To run an application on a Maemo device, create and select
    a device configuration in the Maemo run settings for your project.
    You can also pass command line arguments to your application.

    \image qtcreator-screenshot-run-settings.png "Run settings for Maemo devices"

    \section1 Specifying a Custom Executable to Run

    If you use cmake or the generic project type in Qt Creator, or want
    to run a custom desktop executable, create a \gui {Custom Executable}
    run configuration for your project.

    Specify the executable to run, command line arguments, working directory,
    and environment variables to use.

    \image qmldesigner-run-custom-exe.png "Run settings for custom executables"

    \section1 Specifying Run Settings for Qt Quick Projects

    Select run settings in the \gui {Run configuration} field. The settings
    are specified automatically and, usually, you do not need to change them:

    \list

        \o \gui {QML Viewer} is the path to the \QQV executable.

        \o \gui {QML Viewer arguments} sets arguments for running \QQV.
        The \c{-I <directory>} argument searches for C++ or QML plugins from
        the project folder. For a list of available arguments, enter \c {qml --help}
        on the command line.

        \o \gui {Main QML file} is the Qt Quick project file.

        \o \gui {Debugging address} is the IP address to access \QQV.

        \o \gui {Debugging port} is the port to access \QQV. You can use any
        free port in the registered port range.

    \endlist

    \image qmldesigner-run-settings.png "Run settings for Qt Quick projects"

*/


/*!
    \contentspage index.html
    \previouspage creator-run-settings.html
    \page creator-editor-settings.html
    \nextpage creator-build-dependencies.html

    \title Specifying Editor Settings

    To define the default file encoding, select the desired encoding in \gui Projects >
    \gui{Editor Settings}. By default, the Qt Creator uses the file encoding
    used by your system.

    \image qtcreator-editor-settings.png "Editor Settings view"

*/


/*!
    \contentspage index.html
    \previouspage creator-editor-settings.html
    \page creator-build-dependencies.html
    \nextpage creator-visual-editor.html

    \title Specifying Dependencies

    If you have multiple projects loaded in your session, you can define the
    dependencies between them. Inter-project dependencies affect the build
    order of your projects.

    \note Inter-project dependencies are unrelated inside a qmake
    project.

    \image qtcreator-build-dependencies.png "Dependencies view"

    To define the dependencies between projects:
    \list 1
        \o In \gui Projects, select a project.
        \o Click \gui Dependencies.
        \o Select projects as dependencies.
    \endlist

*/


/*!
    \contentspage index.html
    \previouspage creator-quick-tour.html
    \page creator-getting-started.html
    \nextpage creator-build-example-application.html

    \title Getting Started

    This section contains examples that illustrate how to use Qt Creator and the
    integrated design tools, \QD and \QMLD, to create, build, and run simple
    applications:

    \list
        \o \l{Building and Running an Example Application}
        \o \l{Creating a Qt C++ Application}
        \o \l{Creating a Mobile Application}
        \o \l{Creating a Qt Quick Application}
    \endlist

*/


/*!
    \contentspage index.html
    \previouspage creator-writing-program.html
    \page creator-mobile-example.html
    \nextpage creator-qml-application.html

    \title Creating a Mobile Application

    \note This tutorial assumes that you have experience in writing basic Qt
    applications, using \QD to design user interfaces and using the Qt
    Resource System.

    This tutorial describes how to use Qt Creator to create a small Qt
    application, Battery Indicator, that uses the System Information
    Mobility API to fetch battery information from the device.

    \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 Application 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{Select Required Qt Versions} dialog opens.

        \image qtcreator-mobile-project-qt-versions.png "Select Required Qt Versions dialog"

        \o Select \gui Maemo, \gui {Qt Simulator}, and \gui {Symbian Device} targets,
        and click \gui{Next}.

        \note Targets are listed if you installed the appropriate development
        environment, for example, as part of the Nokia Qt SDK.

        The \gui{Class Information} dialog opens.

        \image qtcreator-mobile-class-info.png "Class Information dialog"

        \o In the \gui{Class Name} field, type \bold {BatteryIndicator} as the class name.

        \o In the \gui{Base Class} list, select \bold {QDialog} as the base class type.

        \note The \gui{Header File}, \gui{Source File} and \gui{Form File} fields are
        automatically updated to match the name of the class.

        \o Click \gui{Next}.

        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.h
        \o batteryindicator.cpp
        \o main.cpp
        \o batteryindicator.ui
        \o BatteryIndicator.pro

    \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. You do not need
    to change the main.cpp file.

    \section1 Declaring the Qt Mobility API

    The \gui New wizard automatically adds information to the .pro file
    that you need when you use the Qt Mobility APIs or develop applications
    for Symbian devices. You must modify the information 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-1.0/quickstart.html}{Quickstart Example}.

    The following code snippet shows information that is needed for
    applications developed for Symbian device. Qt Creator generated
    the UID for testing the application on a device. You only need
    to change the UID and capabilities if you deliver the application
    for public use and need to have it Symbian Signed.

    \code

    symbian {
        TARGET.UID3 = 0xecbd72d7
        # TARGET.CAPABILITY +=
        TARGET.EPOCSTACKSIZE = 0x14000
        TARGET.EPOCHEAPSIZE = 0x020000 0x800000
    }

    \endcode

    \section1 Designing the User Interface

    \list 1

        \o In the \gui{Editor} mode, double-click the batteryindicator.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-snapshot/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.

    \endlist

    \section1 Completing the Header File

    The batteryindicator.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{batteryindicator.h} file
        to open it for editing.

        \o Include the System Info header file, as illustrated by the following
        code snippet:

        \snippet examples/batteryindicator/batteryindicator.h 1

        \o Add a shortcut to the mobility name space, as illustrated by the
        following code snippet:

        \snippet examples/batteryindicator/batteryindicator.h 2

        \o Declare a private function in the \c{private} section, after the
        \c{Ui::BatteryIndicator} function, as illustrated by the following code
        snippet:

        \snippet examples/batteryindicator/batteryindicator.h 3

    \endlist

    \section1 Completing the Source File

    Now that the header file is complete, move on to the source file,
    batteryindicator.cpp.

    \list 1

        \o In the \gui{Projects} view, double-click the batteryindicator.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/batteryindicator.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/batteryindicator.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"

*/

/*!
    \contentspage index.html
    \previouspage creator-getting-started.html
    \page creator-build-example-application.html
    \nextpage creator-writing-program.html

    \title Building and Running an Example Application

    You can test that your installation is successful by opening an existing
    example application project.

    \list 1

        \o On the \gui Welcome page, select \gui {Choose an example... >
        Animation Framework > Animated Tiles}.

        \image qtcreator-gs-build-example-open.png "Selecting an example"

        \o Select targets for the project. Select at least Qt Simulator
        and one of the mobile targets, Maemo or Symbian Device, depending on
        the device you develop for.

        \image qtcreator-gs-build-example-targets.png "Selecting targets"

        \note You can add targets later in the \gui Projects mode.

        \o To test the application in Qt Simulator, click the \gui {Target
        Selector} and select \gui {Qt Simulator}.

        \image {qtcreator-gs-build-example-select-qs.png} "Selecting Qt Simulator as target"

        \o Click
        \inlineimage{qtcreator-run.png}
        to build the application for Qt Simulator.

        \o To see the compilation progress, press \key{Alt+4} to open the
        \gui Compile Output pane.

        The gui Build progress bar on the toolbar turns green when the project
        is successfully built. The application opens in Qt Simulator.

        \image {qt-simulator.png} "Qt Simulator"

        \o Change the settings in the
        \gui View pane, for example, to toggle the orientation by clicking
        \gui {Rotate Device}, or choose from the various Symbian and Maemo
        configurations by clicking \gui {Device}. You can also simulate various
        mobile functions and create your own scripts.

        \o To test the application on a Symbian device install Qt 4.6.2
        and the TRK debugging application on the device. For more information,
        see \l{Setting Up Development Environment for Symbian}.

        \o Click the \gui {Target Selector} and select \gui {Symbian Device}.

        \o Click \gui Run to build the application for the Symbian device.

    \endlist

*/


/*!
    \contentspage index.html
    \previouspage creator-mobile-example.html
    \page creator-qml-application.html
    \nextpage creator-editor-using.html

    \title Creating a Qt Quick Application

    \note This tutorial assumes that you are familiar with the \l {http://doc.qt.nokia.com/4.7-snapshot/declarativeui.html}
    {QML declarative language}.

    This tutorial describes how to use Qt Creator to create a small animated
    Qt Quick application, Hello World.

    \image qmldesigner-helloworld.png "Hello World"

    \section1 Creating the Hello World 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 Quick Project > Qt QML Application > Choose}.

        \image qmldesigner-new-project.png "New File or Project dialog"

        The \gui{Introduction and Project Location} dialog opens.

        \image qmldesigner-new-project-location.png "Introduction and Project Location dialog"

        \o In the \gui{Name} field, type \bold {Hello World}.

        \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{Project Management} dialog opens.

        \image qmldesigner-new-project-summary.png "Project Management dialog"

        \o Review the project settings, and click \gui{Finish} to create the project.

    \endlist

    The HelloWorld project now contains the following files:

    \list
        \o HelloWorld.qmlproject
        \o HelloWorld.qml
    \endlist

    \image qmldesigner-new-project-contents.png "HelloWorld project contents"

    The .qmlproject file defines that all QML, JavaScript, and image files in
    the project folder belong to the project. The .qml file contains some example
    code that specifies the screen size (200x200) and a label that contains
    the text \bold {Hello World}.

    \section1 Designing the User Interface

    \list 1

        \o In the \gui{Edit} mode, double-click the HelloWorld.qml file in
         the \gui{Projects} pane to open it in the code editor.

        \o To set the screen size to that of some Symbian devices in portrait
        mode, for example, change the \c width to \bold 240 and \c height to \bold 320.

        \image qmldesigner-helloworld-screen-size.png "Setting the screen size"

        \o Click \gui{Design} to design the UI in the visual editor.

        \note The visual \QMLD editor is provided as an experimental plugin that you must
        enable to be able to edit QML files in the \gui Design mode. Enabling the
        visual editor can negatively affect the overall stability of Qt Creator.

        \o Restart Qt Creator to enable the visual editor.

        \o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
        scene.

        \image qmldesigner-helloworld-widget-add.png "Add component to Hello World"

        \o Edit the \gui {Properties} of the component to turn it into a red ball:

        \list a

            \o In the \gui {Colors} section, click the color picker to select a red
            color.

            \o In the \gui {Radius} field, use the slider to set the radius value
            to \bold 50.

            \image qmldesigner-helloworld-widget-edit.png "Edit the component"

        \endlist

        \o To create a blue ball, press \key {Ctrl+C} and \key {Ctrl+V} to copy
        and paste the red one, and then change its color to blue.

        \image qmldesigner-helloworld-base-state.png "Hello World first view"

        The first view of your application is now ready.

        \note You can use graphical design tools to create nice images and
        copy them to the projects folder to display them in the \gui {Library}
        pane in \gui {Resources}.

        \o In the \gui State pane, click the plus sign to add another view, or \e state
        to the application.

        \o Modify the state by dragging and dropping the widgets to switch their
        places.

        \image qmldesigner-helloworld-state1.png "Hello World second view"

    \endlist

    \section1 Animating the Scene

    Animate the scene so that the widgets appear to switch places
    on the screen.

    \list 1

        \o Click \gui {Edit} to open HelloWorld.qml in the code editor.

        \o Add the following code to create a transition:

        \code
            transitions: [
            Transition {
                NumberAnimation { properties: "x, y"; duration: 500 }
            }
        \endcode

        \note The code editor completes the code for you as you type.

        \o  Click the \inlineimage qtcreator-run.png
        button to check that the application can be built and run.

    \endlist

    \section1 Adding Interaction

    Add interaction to the scene to allow users to click on the screen to start
    the animation.

    \list 1

        \o Click \gui{Design} to open HelloWorld.qml in the visual editor.

        \o Drag and drop a \gui {Mouse Area} from the \gui {Library} to the scene.

        \o In the \gui {Properties} pane, \gui {Geometry} tab, click the
        \inlineimage qmldesigner-anchor-fill-screen.png
        button to make the mouse region cover the whole screen.

        \o In the code editor, use data binding to add a \c when statement to
        the states sections, as illustrated by the following code:

        \code

        states: [
            State {
                name: "State1"
                when: mousearea1.pressed
        \endcode

    \endlist

    \section1 Building and Running the Application

    \list 1

        \o Press \key {Ctrl+R} to build and run the application.

        \o Click the screen and keep the mouse button pressed down to run the
        animation.

    \endlist

    \note In the \gui {QML Viewer}, select \gui {Skin} and select a mobile device
    type to view the application as on a mobile device.

*/


/*!
    \contentspage index.html
    \previouspage creator-build-example-application.html
    \page creator-writing-program.html
    \nextpage creator-mobile-example.html

    \title Creating a Qt C++ Application

    \note This tutorial assumes that you have experience in writing basic Qt
    applications, using \QD to design user interfaces and using the Qt
    Resource System.

    This tutorial describes how to use Qt Creator
    to create a small Qt application, Text Finder. It is a simplified version of the
    QtUiTools \l{http://doc.qt.nokia.com/4.7-snapshot/uitools-textfinder.html}{Text Finder}
    example.

    \image qtcreator-textfinder-screenshot.png

    \section1 Setting Up Your Environment

    Qt Creator automatically detects whether the location of Qt is in your \c PATH variable.
    If you have installed several Qt versions, follow the
    instructions in \l{Selecting the Qt version} to set the Qt path.

    \section1 Creating the Text Finder 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 Application Project > Qt Gui
        Application > Choose}.

           \image qtcreator-new-project.png "New File or Project dialog"

        The \gui{Introduction and Project Location} dialog opens.

        \image qtcreator-intro-and-location.png "Introduction and Project Location dialog"

        \o In the \gui{Name} field, type \bold {TextFinder}.


        \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{Select Required Qt Versions} dialog opens.

        \image qtcreator-new-project-qt-versions.png "Select Required Qt Versions dialog"

        \o Click \gui{Next} to use the Qt version set in the path in your project.

        The \gui{Class Information} dialog opens.

        \image qtcreator-class-info.png "Class Information dialog"

        \o In the \gui{Class Name} field, type \bold {TextFinder} as the class name.

        \o In the \gui{Base Class} list, select \bold {QWidget} as the base class type.

           \note The \gui{Header File}, \gui{Source File} and
           \gui{Form File} fields are automatically updated to match the name of the
           class.

        \o Click \gui{Next}.

        The \gui{Project Management} dialog opens.

        \image qtcreator-new-project-summary.png "Project Management dialog"

        \o Review the project settings, and click \gui{Finish} to create the project.


    \endlist



    The TextFinder project now contains the following files:

    \list
        \o textfinder.h
        \o textfinder.cpp
        \o main.cpp
        \o textfinder.ui
        \o textfinder.pro
    \endlist

    \image qtcreator-textfinder-contents.png "TextFinder project contents"

    The .h and .cpp files come with the necessary boiler plate code.
    The .pro file is complete.

    \section1 Filling in the Missing Pieces

    Begin by designing the user interface and then move on to filling
    in the missing code. Finally, add the find functionality.

    \section2 Designing the User Interface

    \image qtcreator-textfinder-ui.png "Text Finder UI"

    \list 1

    \o In the \gui{Editor} mode, double-click the textfinder.ui file in the \gui{Projects}
    view to launch the integrated \QD.

    \o Drag and drop the following widgets to the form:

    \list
    \o \gui{Label} (\l{http://doc.qt.nokia.com/4.7-snapshot/qlabel.html}{QLabel})
    \o \gui{Line Edit} (\l{http://doc.qt.nokia.com/4.7-snapshot/qlineedit.html}{QLineEdit})
    \o \gui{Push Button} (\l{http://doc.qt.nokia.com/4.7-snapshot/qpushbutton.html}{QPushButton})

    \endlist

    \image qtcreator-textfinder-ui-widgets.png "Adding widgets to Text Finder UI"

    \o Double-click the \gui{Label} widget and enter the text \bold{Keyword}.

    \o Double-click the \gui{Push Button} widget and enter the text \bold{Find}.

    \o In the \gui Properties pane, change the \gui objectName to \bold findButton.

    \image qtcreator-textfinder-objectname.png "Changing object names"