diff --git a/doc/images/qmldesigner-helloworld-edited.png b/doc/images/qmldesigner-helloworld-edited.png
index 1af779dbb0beffd8b97ff8b517501e86ffb8c8e4..177efac186604a8d058da5478187148f1e06e938 100644
Binary files a/doc/images/qmldesigner-helloworld-edited.png and b/doc/images/qmldesigner-helloworld-edited.png differ
diff --git a/doc/images/qmldesigner-helloworld.png b/doc/images/qmldesigner-helloworld.png
index 7cd4a607ac764b74d6ebd11ccd804453693a9ba6..db8f23aaa4ee453a6f68ae8ba3afdd3f4972d8d7 100644
Binary files a/doc/images/qmldesigner-helloworld.png and b/doc/images/qmldesigner-helloworld.png differ
diff --git a/doc/images/qmldesigner-new-project-contents.png b/doc/images/qmldesigner-new-project-contents.png
index d2bd3cc6f1c5f8d49da23c0fb9b7aa85a8814bc4..c52cdd6b486d06cf1bd9cdd5879181ea9ef2f203 100644
Binary files a/doc/images/qmldesigner-new-project-contents.png and b/doc/images/qmldesigner-new-project-contents.png differ
diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index db7f780629edc1f3433a3b46ec10999dfbad6b63..dd89a48677cb32c611e964f1c92f10f557fe14e1 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -3850,7 +3850,9 @@
\title Creating a Qt Quick Application
- \note This tutorial assumes that you are familiar with the \l {http://doc.qt.nokia.com/4.7/qtquick.html}
+ \note To complete this tutorial, you must have Qt 4.7 or later installed.
+
+ This tutorial assumes that you are familiar with the \l {http://doc.qt.nokia.com/4.7/qtquick.html}
{QML declarative language}.
This tutorial describes how to use Qt Creator to create a small
@@ -3862,7 +3864,7 @@
\list 1
- \o Select \gui{File > New File or Project > Qt Quick Project > Qt QML Application > Choose}.
+ \o Select \gui{File > New File or Project > Qt Quick Project > Qt Quick Application > Choose}.
\image qmldesigner-new-project.png "New File or Project dialog"
@@ -3875,6 +3877,34 @@
\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 {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 If you have only one 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, and then 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 publish the application.
+
+ 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"
@@ -3883,21 +3913,12 @@
\endlist
- The HelloWorld project now contains the following files:
-
- \list
- \o HelloWorld.qmlproject
- \o HelloWorld.qml
- \endlist
-
+ The HelloWorld project now contains the necessary files.
The \gui Projects pane in the \gui Sidebar displays the project files:
\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 the following example code that specifies a rectangle
+ The main.qml file contains the following example code that specifies a rectangle
and a label that contains
the text \bold {Hello World}.
@@ -3907,11 +3928,10 @@
Rectangle {
width: 200
- height: 200
+ height: 323
Text {
- x: 66
- y: 93
text: "Hello World"
+ anchors.centerIn: parent
}
}
@@ -3919,49 +3939,46 @@
Your application is now ready.
- \section1 Running the Application
-
- Press \key {Ctrl+R} to run the application in the QML Viewer.
-
+ \section1 Building and Running the Application
+ Press \key {Ctrl+R} to run the application on the desktop.
\image qmldesigner-helloworld.png "Hello World"
\section1 Changing Hello World Properties
To experiment with QML and to try some of the code editor features, change the
- properties of the rectangle and text. Move the cursor on \gui Rectangle and
- press \key F1 to get help on the available properties. Try adding a \gui color
- property to the \gui Rectangle. When you start to type,
- the code completion feature of the code editor suggests properties, IDs, and
- code snippets to complete the code. Select an item in the list and press
- \key Tab or \key Enter to complete the code.
+ properties of the rectangle and text.
- The code editor checks the code syntax and underlines syntax errors.
- Move the cursor over an error to display detailed information about it.
+ \list 1
- The following code illustrates how to set the backround color
- to light steel blue and the text color to white:
+ \o Move the cursor on \gui Rectangle and click
+ \inlineimage qml-toolbar-indicator.png
+ to open the Qt Quick toolbar for rectangles:
- \code
+ \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles"
- import Qt 4.7
+ \o Click the \gui Color box to select a color in the color picker, and click
+ \gui Apply.
- Rectangle {
- width: 200
- height: 200
- color: "lightsteelblue"
- Text {
- x: 66
- y: 93
- text: "Hello World"
- color: "white"
- }
- }
+ \o Move the cursor on \gui Text and and click
+ \inlineimage qml-toolbar-indicator.png
+ to open the Qt Quick toolbar for text:
- \endcode
+ \image qml-toolbar-text.png "Qt Quick Toolbar for text"
+
+ \o Click the \gui Color box to select a color in the color picker, and click
+ \gui Apply.
+
+ \endlist
- \image qmldesigner-helloworld-edited.png "Hello World in blue and white"
+ Try adding another rectangle to the \gui Rectangle. When you start to type,
+ the code completion feature of the code editor suggests properties, IDs, and
+ code snippets to complete the code. Select an item in the list and press
+ \key Tab or \key Enter to complete the code.
+
+ The code editor checks the code syntax and underlines syntax errors.
+ Move the cursor over an error to display detailed information about it.
*/