diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index d34caefe1f48e80c64278ff6851fa7e346900b48..2082a077e7787de22656d9369822d45b2497cbcb 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -96,11 +96,13 @@
\o \l{Developing Application UI}
\list
\o \l{Optimizing Applications for Mobile Devices}
+ \o \l{Using Qt Designer}
\o \l{Adding Qt Designer Plugins}
\if defined(qtquick)
\o \l{Developing Qt Quick Applications}
\list
\o \l {Creating Qt Quick Projects}
+ \o \l {Using Qt Quick Designer}
\o \l {Creating Components}
\o \l {Creating Screens}
\o \l {Animating Screens}
@@ -941,12 +943,32 @@
You can easily develop animations by using a declarative programming
language called \l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML}.
In QML, a user interface is specified as a tree of objects with properties.
- You can edit QML code in the code editor. You
+ You can edit QML code in the code editor or in the integrated \QMLD. You
can use Qt or JavaScript to implement the application logic.
The integration includes project management and code completion.
- \section1 Using Qt Designer
+ The following sections describe how to develop application UI:
+
+ \list
+
+ \o \l{Optimizing Applications for Mobile Devices}
+ \o \l{Using Qt Designer}
+ \o \l{Adding Qt Designer Plugins}
+ \o \l{Developing Qt Quick Applications}
+
+ \endlist
+
+*/
+
+
+/*!
+ \contentspage index.html
+ \previouspage creator-usability.html
+ \page creator-using-qt-designer.html
+ \nextpage adding-plugins.html
+
+ \title Using Qt Designer
Qt Creator automatically opens all .ui files in \QD.
@@ -985,7 +1007,16 @@
For more information on \QD, see
\l{http://doc.qt.nokia.com/4.7/designer-manual.html}{Qt Designer Manual}.
- \section1 Using Qt Quick Designer
+*/
+
+
+/*!
+ \contentspage index.html
+ \previouspage quick-projects.html
+ \page creator-using-qt-quick-designer.html
+ \nextpage quick-components.html
+
+ \title Using Qt Quick Designer
You can edit .qml files in the visual \QMLD editor or in the
code editor.
@@ -1140,6 +1171,29 @@
\key{Ctrl+E, 0}. To remove all but the currently selected split view,
select \gui Window > \gui{Remove All Splits} or press \key{Ctrl+E, 1}.
+ \section1 Semantic Highlighting
+
+ Qt Creator understands the C++ and QML languages as code, not as plain text.
+ It reads the source code, analyzes it, and highlights it based on the
+ semantic checks that it does for the following code elements:
+
+ \list
+
+ \o Types (such as classes, structs, and type definitions)
+
+ \o Local variables
+
+ \o Class fields
+
+ \o Virtual methods
+
+ \endlist
+
+ To specify the color scheme to use for semantic highlighting, select
+ \gui {Tools > Options... > Text Editor > Fonts & Color}.
+
+ Qt Creator supports syntax highlighting also for other types of files than
+ C++ or QML. For more information, see \l{Generic Highlighting}.
\section1 Highlighting and Folding Blocks
@@ -1189,14 +1243,8 @@
\section1 Completing Code
- Qt Creator understands the code as code, not just as plain text. This
- allows it to help you to write well formatted code and to anticipate
- what you are going to write and complete the code.
- The code completion differs somewhat depending on whether you write Qt code or QML code.
-
- \section2 Completing Qt Code
-
- As you write code, Qt Creator provides a list of context-sensitive
+ As you write code, Qt Creator suggests properties, IDs, and code
+ snippets to complete the code. It provides a list of context-sensitive
suggestions to the statement currently under your cursor.
\image qtcreator-codecompletion.png
@@ -1214,6 +1262,8 @@
To apply full or no case-sensitivity, select the option in the
\gui {Case-sensitivity} field.
+ \section2 Summary of Available Types
+
The following table lists available types for code completion and icon
used for each.
@@ -1262,7 +1312,16 @@
\i A protected slot
\row
\i \inlineimage completion/keyword.png
- \i A keyword
+ \i A C++ keyword
+ \row
+ \i \inlineimage completion/snippet.png
+ \i A C++ code snippet
+ \row
+ \i \inlineimage completion/element.png
+ \i A QML element
+ \row
+ \i \inlineimage completion/qmlsnippet.png
+ \i A QML code snippet
\row
\i \inlineimage completion/macro.png
\i A macro
@@ -1271,10 +1330,9 @@
\i A namespace
\endtable
- \section2 Completing QML Code
+ \section2 Completing Code Snippets
- As you write QML code, Qt Creator suggests properties, IDs, and code
- snippets to complete the code. The snippets can consist of multiple
+ Code snippets can consist of multiple
fields that you specify values for. Select an item in the list and press
\key Tab or \key Enter to complete the code. Press \key Tab to
move between the fields and specify values for them.
@@ -1726,6 +1784,10 @@
\o To go to an occurrence, double-click it.
\endlist
\endlist
+
+ \note You can use \gui{Advanced Find} also to search for symbols. For more
+ information, see \l{Finding Symbols}.
+
*/
@@ -1762,6 +1824,14 @@
files)
\o Header files of used frameworks and libraries
\endlist
+
+ \note You can also select \gui{Edit > Find/Replace > Advanced Find >
+ C++ Symbols} to search for classes, methods, enums, and declarations
+ either from files listed as part of the project or from all files that
+ are used by the code, such as include files.
+
+ \image qtcreator-search-cpp-symbols.png
+
\o The \gui{Search Results} pane opens and shows the location and
number of instances of the symbol in the current project.
@@ -1822,6 +1892,57 @@
\o In the \gui {Rename id} field, enter the new ID.
+ \endlist
+
+ \section1 Applying Refactoring Actions
+
+ Qt Creator allows you to quickly and conveniently apply actions to refactor
+ your code by selecting them in a context menu. The actions available depend on
+ the position of the cursor in the code editor and on whether you are writing
+ C++ or QML code.
+
+ To apply refactoring actions to C++ code, right-click an operand, conditional
+ statement, string, or name to open a context menu. In QML code, click an element
+ ID or name.
+
+ In the context menu, select \gui {Refactoring} and then select a refactoring action.
+
+ You can also press \gui {Alt+Enter} to open a context menu that contains refactoring
+ actions.
+
+ \section2 Refactoring C++ Code
+
+ You can apply the following types of refactoring actions to C++ code:
+
+ \list
+
+ \o Change binary operands
+
+ \o Simplify if and when conditions (for example, move declarations out of
+ if conditions)
+
+ \o Modify strings (for example, set the encoding for a string to Latin-1, mark
+ strings translatable, and convert strings to camel case)
+
+ \o Create variable declarations
+
+ \o Create method declarations and definitions
+
+ \endlist
+
+ \section2 Refactoring QML Code
+
+ You can apply the following types of refactoring actions to QML code:
+
+ \list
+
+ \o Rename IDs
+
+ \o Split initializers
+
+ \o Move a QML element into a separate file to reuse it in other
+ .qml files
+
\endlist
*/
@@ -1889,10 +2010,9 @@
Follow the instructions of the wizard.
This example uses \gui {Qt Gui Application}.
- \o Name the project and set its path. To select the path from a
- directory tree, click \gui Browse.
+ \o Name the project and set its path, and then click \gui Next.
- Avoid using spaces and special characters in the project name and
+ Do not use spaces and special characters in the project name and
path.
\image qtcreator-intro-and-location.png
@@ -1900,7 +2020,7 @@
\o Select the Qt versions to use as build targets for your project, and click
\gui{Next}.
- \image qtcreator-new-project-qt-versions.png "Target setting dialog"
+ \image qtcreator-new-project-qt-versions.png "Qt Versions dialog"
\note If you have only one Qt version installed, this dialog is skipped.
@@ -3517,28 +3637,28 @@
\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.
+ The \gui{Qt Versions} dialog opens.
- \image qtcreator-mobile-project-qt-versions.png "Select Required Qt Versions dialog"
+ \image qtcreator-mobile-project-qt-versions.png "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.
+ environment, for example, as part of the Nokia Qt SDK. You can add targets
+ later in the \gui Projects mode.
- The \gui{Class Information} dialog opens.
-
- \image qtcreator-mobile-class-info.png "Class Information dialog"
+ The \gui {Application Options} dialog opens.
- \o In the \gui{Class Name} field, type \bold {BatteryIndicator} as the class name.
+ \image qtcreator-mobile-project-app-options.png "Application Options dialog"
- \o In the \gui{Base Class} list, select \bold {QDialog} as the base class type.
+ \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 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}.
+ \note Qt Creator contains a default program icon and generates a UID for testing
+ the application on a device. You only need to specify the \gui {Symbian Specific}
+ and \gui {Maemo Specific} settings if you deliver the application for public use.
The \gui{Project Management} dialog opens.
@@ -3552,26 +3672,29 @@
\list
- \o batteryindicator.h
- \o batteryindicator.cpp
- \o main.cpp
- \o batteryindicator.ui
\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. You do not need
- to change the main.cpp file.
+ modify, as described in the following sections.
\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.
+ 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:
@@ -3588,28 +3711,11 @@
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
+ \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})
@@ -3620,22 +3726,15 @@
\o In the \gui Properties pane, change the \gui objectName to
\bold batteryLevelBar.
- \o Right-click the \gui BatteryIndicator object and select
+ \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.
- To adjust widget size correctly on Qt Simulator, remove the condition
- from the main.cpp file (displayed in the following code snippet) and just
- leave the \c {w.showMaximized();} line:
-
- \snippet examples/batteryindicator/main.cpp 0
-
-
\endlist
\section1 Completing the Header File
- The batteryindicator.h file contains some of the necessary #includes, a
+ 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
@@ -3643,48 +3742,48 @@
\list 1
- \o In the \gui{Projects} view, double-click the \c{batteryindicator.h} file
+ \o In the \gui{Projects} view, double-click the \c{mainwindow.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
+ \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/batteryindicator.h 2
+ \snippet examples/batteryindicator/mainwindow.h 2
\o Declare a private function in the \c{private} section, after the
- \c{Ui::BatteryIndicator} function, as illustrated by the following code
+ \c{Ui::MainWindow} function, as illustrated by the following code
snippet:
- \snippet examples/batteryindicator/batteryindicator.h 3
+ \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,
- batteryindicator.cpp.
+ mainwindow.cpp.
\list 1
- \o In the \gui{Projects} view, double-click the batteryindicator.cpp file
+ \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/batteryindicator.cpp 1
+ \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/batteryindicator.cpp 2
+ \snippet examples/batteryindicator/mainwindow.cpp 2
\endlist
@@ -3709,7 +3808,7 @@
\list 1
- \o Install Qt 4.6.2 libraries, the Qt mobile libraries, and the TRK
+ \o Install Qt libraries, Qt mobile libraries, and the TRK
debugging application on the device. For more information,
see \l{Setting Up Development Environment for Symbian}.
@@ -3780,7 +3879,7 @@
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
+ \o To test the application on a Symbian device install Qt libraries
and the TRK debugging application on the device. For more information,
see \l{Setting Up Development Environment for Symbian}.
@@ -4100,17 +4199,7 @@
\o Press \key {Ctrl+R} to run the application in the QML Viewer.
- Rectangle {
- width: 200
- height: 200
- color: "lightsteelblue"
- Text {
- x: 66
- y: 93
- text: "Hello World"
- color: "white"
- }
- }
+ \endlist
Click the rectangles to view the animated transitions.
@@ -4161,9 +4250,9 @@
\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 target setting dialog opens.
+ The \gui {Qt Versions} dialog opens.
- \image qtcreator-new-project-qt-versions.png "Target setting dialog"
+ \image qtcreator-new-project-qt-versions.png "Qt Versions dialog"
\o Select the Qt versions to use as build targets for your project, and click
\gui{Next}.
@@ -4174,12 +4263,12 @@
\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{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.
+ \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
+ \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}.
@@ -6404,10 +6493,8 @@
\title Developing Qt Quick Applications
- You can either create Qt Quick projects from scratch or import them to
- Qt Creator. For example, you can import and run the
- \l {http://doc.qt.nokia.com/4.7/qdeclarativeexamples.html} {QML examples and demos}
- to learn how to use various aspects of QML.
+ You can either create Qt Quick projects from scratch or import existing projects to
+ Qt Creator.
You can use the code editor (\l{Using the Editor}{Edit mode}) or the visual editor
(\l{Using Qt Quick Designer}{Design mode}) to develop Qt Quick applications.
@@ -6416,6 +6503,7 @@
\list
\o \l {Creating Qt Quick Projects}
+ \o \l {Using Qt Quick Designer}
\o \l {Creating Components}
\o \l {Creating Screens}
\o \l {Animating Screens}
@@ -6432,13 +6520,62 @@
\contentspage index.html
\previouspage creator-visual-editor.html
\page quick-projects.html
- \nextpage quick-components.html
+ \nextpage creator-using-qt-quick-designer.html
\title Creating Qt Quick Projects
- Select \gui {File > New File or Project > Qt Quick Project > Qt QML Application}.
+ \image qmldesigner-new-project.png "New File or Project dialog"
+
+ When you create a new Qt Quick project from scratch, you have the following options:
+
+ \list
+
+ \o \gui {Qt Quick UI} creates a Qt Quick UI project with a single QML file that
+ contains the main view. You can review Qt Quick UI projects in the QML Viewer and you
+ need not build them. You do not need to have the development environment installed on your
+ computer to create and run this type of projects.
+
+ \o \gui {Qt Quick Application} creates a Qt Quick application project that can
+ contain both QML and C++ code. The project includes a QDeclarativeView. You can build
+ the application and deploy it on desktop and mobile target platforms. For example, you
+ can create signed Symbian Installation System (SIS) packages for this type of projects.
+
+ \o \gui {Custom QML Extension Plugin} creates a C++ plugin that makes it possible
+ to offer extensions that can be loaded dynamically into applications by using the
+ QDeclarativeEngine class.
+
+ \endlist
+
+ If you have existing QML applications that you want to run in Qt Creator or deploy
+ to mobile devices, use the \gui {Qt Quick Application} wizard to convert them
+ to Qt Quick applications.
+
+ \section1 Creating Qt Quick UI Projects
+
+ \list 1
+
+ \o Select \gui {File > New File or Project > Qt Quick Project > Qt Quick UI
+ > Choose...}.
+
+ 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, give a name to the project.
+
+ Do not use spaces and special characters in the project name and path.
+
+ \o In the \gui {Create in} field, enter the path for the project files. For example,
+ \c {C:\Qt\examples}. To select the path from a directory tree, click \gui Browse.
+
+ \o Click \gui{Next}.
+
+ \image qmldesigner-new-ui-project-summary.png "Project Management dialog"
+
+ \o Review the project settings, and click \gui{Finish} to create the project.
- \image qmldesigner-new-project.png "New File or Project dialog"
+
+ \endlist
Qt Creator creates the following files:
@@ -6461,8 +6598,122 @@
To use JavaScript and image files in the application, copy them to the
project folder.
- To import a QML project to Qt Creator, select
- \gui {File > New File or Project > Qt Quick Project > Import Existing Qt QML Directory}.
+ \section1 Creating Qt Quick Applications
+
+ \list 1
+
+ \o Select \gui {File > New File or Project > Qt Quick Project > Qt Quick Application
+ > Choose...}.
+
+ 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, give a name to the project.
+
+ Do not use spaces and special characters in the project name and path.
+
+ \o In the \gui {Create in} field, enter the path for the project files. For example,
+ \c {C:\Qt\examples}. To select the path from a directory tree, click \gui Browse.
+
+ \o Click \gui{Next}.
+
+ The \gui {Qt Versions} dialog opens.
+
+ \image qmldesigner-new-project-qt-versions.png "Qt Versions dialog"
+
+ \o Select the Qt versions to use as build targets for your project,
+ and then click \gui{Next}.
+
+ \note Qt Quick is supported since Qt 4.7, and therefore, only Qt 4.7 and later
+ versions are displayed. Further, if you have only one supported Qt version installed,
+ this dialog is skipped.
+
+ The \gui{Application Options} dialog opens.
+
+ \image qtcreator-mobile-project-app-options.png "Application 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.
+
+ \o In the \gui {Application icon} field, select an application icon.
+
+ \o In the \gui {Target UID3} field, specify the \l{Application UID}.
+
+ \note Qt Creator generates a UID for testing the application on a device.
+ You need to change the UID when you deliver the application for public
+ use.
+
+ \o If the application needs network connectivity, select the
+ \gui {Enable network access} check box, and then click \gui{Next}.
+
+ The \gui {QML Sources} dialog opens.
+
+ \image qmldesigner-new-project-qml-sources.png "QML Sources" dialog
+
+ \o In the \gui {QML Main File} group, select \gui {Generate a .qml file},
+ and then click \gui{Next}.
+
+ The \gui {Project Management} dialog opens.
+
+ \image qmldesigner-new-project-summary.png "Project Management" dialog
+
+ \o In the \gui {Add to project} field, you can add this project to another
+ project as a subproject.
+
+ \o In the \gui {Add to version control} field, you can add the project to
+ a version control system.
+
+ \o Click \gui Finish to create the project.
+
+ \endlist
+
+ Qt Creator creates the necessary boilerplate files. Some of the files are
+ specific to the Symbian or Maemo platform.
+
+ \section1 Importing QML Applications
+
+ If you have existing QML applications that you want to run in Qt Creator or deploy
+ to mobile devices, use the \gui {Qt Quick Application} wizard and select the main
+ .qml file in your project. All the other files in the project are automatically added
+ to the application project.
+
+ For example, you can open and run the
+ \l {http://doc.qt.nokia.com/4.7/qdeclarativeexamples.html} {QML examples and demos}
+ to learn how to use various aspects of QML. To run the examples in the QML Viewer
+ on the desktop, open them in the \gui Welcome mode. To view the examples on
+ mobile devices, use the \gui {Qt Quick Application} wizard to convert them into
+ Qt Quick Applications.
+
+ To import QML applications:
+
+ \list 1
+
+ \o Select \gui {File > New File or Project > Qt Quick Project > Qt Quick Application
+ > Choose...}.
+
+ \o Name the project and set its path, and then click \gui Next.
+
+ \o Select the Qt versions to use as build targets for your project, and click
+ \gui{Next}.
+
+ \o Specify options for deploying the application to mobile device targets, and
+ click \gui{Next}.
+
+ \o In the \gui {QML Sources} dialog, select the \gui {Import an existing .qml file}
+ option and specify the main .qml file of the project you want to import.
+
+ \image qmldesigner-import-project.png "QML Sources" dialog
+
+ \o Click \gui Next.
+
+ \o Review the project settings, and click \gui{Finish} to create the project.
+
+ \endlist
+
+ Qt Creator adds references to the QML files to a project and creates the additional files
+ necessary for deploying applications on mobile devices.
*/
@@ -7133,7 +7384,7 @@
/*!
\contentspage index.html
- \previouspage creator-usability.html
+ \previouspage creator-using-qt-designer.html
\page adding-plugins.html
\nextpage creator-visual-editor.html
@@ -7249,7 +7500,7 @@
\contentspage index.html
\previouspage creator-design-mode.html
\page creator-usability.html
- \nextpage adding-plugins.html
+ \nextpage creator-using-qt-designer.html
\title Optimizing Applications for Mobile Devices