diff --git a/doc/images/qmldesigner-helloworld-screen-size.png b/doc/images/qmldesigner-helloworld-screen-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e47b738fb18d30eb3f7a450f0d7c693e73c375b
Binary files /dev/null and b/doc/images/qmldesigner-helloworld-screen-size.png differ
diff --git a/doc/images/qmldesigner-new-project-location.png b/doc/images/qmldesigner-new-project-location.png
index 9becf0fc550b06b2f82b7a6d4384c9e450d7fb6c..6cecd80d46b1b498230a5ebe1662b0323ff19aa4 100644
Binary files a/doc/images/qmldesigner-new-project-location.png and b/doc/images/qmldesigner-new-project-location.png differ
diff --git a/doc/images/qmldesigner-new-project.png b/doc/images/qmldesigner-new-project.png
index 4f60b77cdb4fb1254b8ba972f2422423343074ab..739381cd699a75e6df2a3e6046e85e65ef534633 100644
Binary files a/doc/images/qmldesigner-new-project.png and b/doc/images/qmldesigner-new-project.png differ
diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc
index 08efe8771f1d9bb6237415b2369fafa801d733f1..7a0a96af93c7973056982ce05d22550feb9e9785 100644
--- a/doc/qtcreator.qdoc
+++ b/doc/qtcreator.qdoc
@@ -46,8 +46,8 @@
\o \l{Quick Tour}
\o \l{Getting Started}
\list
- \o \l{Writing a Simple Program}
- \o \l{Creating an Animated Application}
+ \o \l{Creating a Qt C++ Application}
+ \o \l{Creating a Qt Quick Application}
\endlist
\o \l{Using the Editor}
\list
@@ -1742,8 +1742,8 @@
integrated design tools, \QD and \QMLD, to create simple applications:
\list
- \o \l{Writing a Simple Program}
- \o \l{Creating an Animated Application}
+ \o \l{Creating a Qt C++ Application}
+ \o \l{Creating a Qt Quick Application}
\endlist
*/
@@ -1755,13 +1755,13 @@
\page creator-qml-application.html
\nextpage creator-editor-using.html
- \title Creating an Animated Application
+ \title Creating a Qt Quick Application
\note This tutorial assumes that you are familiar with the \l {http://qt.nokia.com/doc/4.7-snapshot/declarativeui.html}
{QML declarative language}.
This tutorial describes how to use Qt Creator to create a small animated
- Qt application, Hello World.
+ Qt Quick application, Hello World.
\image qmldesigner-helloworld.png "Hello World"
@@ -1772,7 +1772,7 @@
\list 1
- \o Select \gui{File > New File or Project > Qt Quick Project > QML Application > OK}.
+ \o Select \gui{File > New File or Project > Qt Quick Project > Qt QML Application > OK}.
\image qmldesigner-new-project.png "New File or Project dialog"
@@ -1811,13 +1811,16 @@
\list
- \o In the \gui{Editor} mode, double-click the HelloWorld.qml file in
- the \gui{Projects} pane to open it in the code editor.
+ \o In the \gui{Edit} mode, double-click the HelloWorld.qml file in
+ the \gui{Projects} pane to open it in the visual \QMLD editor.
- \o To set the screen size to that of some Symbian devices in portrait
- mode, for example, change the \c height to \bold 240 and \c width to \bold 320.
+ \o Click \gui{Edit} to edit the screen size in the code editor.
+ 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.
- \o Click \gui{Design} to design the UI in the visual \QMLD editor.
+ \image qmldesigner-helloworld-screen-size.png "Setting the screen size"
+
+ \o Click \gui{Design} to design the UI in the visual editor.
\o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
scene.
@@ -1935,7 +1938,7 @@
\page creator-writing-program.html
\nextpage creator-qml-application.html
- \title Writing a Simple Program
+ \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
@@ -2935,7 +2938,7 @@
\section1 Walkthrough for the Debugger Frontend
- The \l{Writing a simple program}{TextFinder} example reads a text file into
+ The \l{Creating a Qt C++ Application}{TextFinder} example reads a text file into
QString and then displays it with QTextEdit.
If you want to look at the example's QString, \c{line}, and see the
@@ -3562,7 +3565,7 @@
\section1 Creating Qt Quick Projects
- Select \gui {File > New File or Project > Qt Quick Project > QML Application}.
+ Select \gui {File > New File or Project > Qt Quick Project > Qt QML Application}.
\QMLD creates the following files:
@@ -3600,16 +3603,39 @@
You can import components to screens and applications.
You can use the \gui Library items to create components. Drag and drop
- them to the editor and modify their properties in the \gui Properties pane.
- You can use QML to add properties for a component. The properties are automatically
- displayed in the \gui Properties pane.
+ the following QML elements to the editor and modify their properties in the \gui Properties pane:
+
+ \list
+
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-borderimage.html}{Border Image}
+ uses an image as a border.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-image.html}{Image}
+ adds a bitmap to the scene. You can stretch and tile images.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-item.html}{Item}
+ is the most basic of all visual items in QML. Even though it has no visual appearance,
+ it defines all the properties that are common across visual items, such as the x and
+ y position, width and height, anchoring, and key handling.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-rectangle.html}{Rectangle}
+ adds a rectangle that is painted with a solid fill color and an optional border.
+ You can also use the radius property to create rounded rectangles.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-text.html}{Text}
+ adds formatted read-only text.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-textedit.html}{Text Edit}
+ adds a single line of editable formatted text that can be validated.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-textinput.html}{Text Input}
+ adds a single line of editable plain text that can be validated.
+
+ \endlist
For example, to create a button component:
\list 1
\o Select \gui {File > New File or Project > Qt > Qt QML File} to create a QML file
- called button.qml.
+ called Button.qml.
+
+ \note Components are listed in the \gui Library pane only if the filename begins
+ with a capital letter.
\o Double-click the file to open it in the code editor.
@@ -3658,20 +3684,37 @@
\endlist
+ You can use QML to add properties for a component. The properties are automatically
+ displayed in the \gui Properties pane.
+
\section2 Creating Screens
- You can use the \gui Library items and your own components to create screens. Use states and transitions
+ You can use the \gui Library items and your own components to create screens.
+
+ You can create the following types of views to organize items provided by
+ \l{http://qt.nokia.com/doc/4.7-snapshot/qdeclarativemodels.html}{data models}:
+
+ \list
+
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-gridview.html}{Grid View}
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-listview.html}{List View}
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-pathview.html}{Path View}
+
+ \endlist
+
+ In the code editor, write the code to use the data models.
+
+ Use states and transitions
to navigate between screens.
QML states typically describe user interface configurations, such as the UI elements,
- their properties and behavior and the available actions. For example, you can specify
- different states of a screen to allow users to view and edit the properties of an
- object:
+ their properties and behavior and the available actions. For example, you can use
+ states to create two screens:
\list 1
\o Use the \gui Library items, resources and your own components to create a screen.
- For example, add the button component to the screen.
+ For example, drag and drop the button component from the \gui Library pane to the screen.
\o In the \gui State pane, click the plus sign to add another view, or \e state
to the application.
@@ -3698,6 +3741,22 @@
\section2 Adding User Interaction Methods
+ You can add the following basic interaction methods to scenes:
+
+ \list
+
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-flickable.html}{Flickable}
+ items can be flicked horizontally or vertically.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-flipable.html}{Flipable}
+ items can be flipped between their front and back sides by using rotation,
+ state, and transition.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-focusscope.html}{Focus Scope}
+ assists in keyboard focus handling when building reusable QML components.
+ \o \l{http://qt.nokia.com/doc/4.7-snapshot/qml-mousearea.html}{Mouse Area}
+ enables simple mouse handling.
+
+ \endlist
+
To add interaction methods, drag and drop a \gui {Focus Scope} or \gui {Mouse Area}
to the screen. In the code editor, add signal handlers to execute when users select
the scope or area. Signal handlers allow actions to be taken in response to an event.