Commit bc8c5525 authored by Leena Miettinen's avatar Leena Miettinen

Doc - update Qt Quick example

Reviewed-by: Kai Koehne
parent a987e1da
doc/images/qmldesigner-helloworld.png

9.73 KB | W: | H:

doc/images/qmldesigner-helloworld.png

8.92 KB | W: | H:

doc/images/qmldesigner-helloworld.png
doc/images/qmldesigner-helloworld.png
doc/images/qmldesigner-helloworld.png
doc/images/qmldesigner-helloworld.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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.
*/
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment