Update information about Qt Quick Designer to reflect the changes made to the...

Update information about Qt Quick Designer to reflect the changes made to the UI. Add information about QML elements and links to docs. Add and update images.

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.