Doc: move Qt Quick topics to a separate folder

Change-Id: I020cb65cc343f933bea925de368f09c9c4f7b879
Reviewed-on: http://codereview.qt-project.org/5612


Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Eike Ziller <eike.ziller@nokia.com>
Reviewed-by: Casper van Donderen <casper.vandonderen@nokia.com>

doc/src/qtquick/creator-projects-settings-run-qtquick.qdocinc

+    \section1 Specifying Run Settings for Qt Quick UI Projects
+
+    You can specify run settings for the \gui Desktop target:
+
+    \list
+
+        \o  In the \gui {Qt version} field, select a Qt version that has support
+            for QML.
+
+        \o  In the \gui Arguments field, you can specify command line arguments
+            to be passed to the executable.
+
+        \o  In the \gui {Main QML file}, select the file that \QQV will be
+            started with.
+
+        \o  In the \gui Debugger group, select the languages to debug:
+            \gui{C++} and \gui QML. \gui {Debug port} is the port to access
+            \QQV. You can use any free port in the registered port range.
+            For more information, see \l{Debugging Qt Quick Projects}.
+
+    \endlist
+
+    \note Opening a socket at a well-known port presents a security risk. Anyone
+    on the Internet could connect to the application that you are debugging and
+    execute any JavaScript functions. Therefore, you must make sure that the
+    port is properly protected by a firewall.
+
+    \image qmldesigner-run-settings.png "Run settings for Qt Quick UI projects"

doc/src/qtquick/qtquick-app-tutorial.qdoc

+/****************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Free Documentation License
+**
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of this
+** file.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+****************************************************************************/
+
+// **********************************************************************
+// NOTE: the sections are not ordered by their logical order to avoid
+// reshuffling the file each time the index order changes (i.e., often).
+// Run the fixnavi.pl script to adjust the links to the index order.
+// **********************************************************************
+
+/*!
+    \contentspage index.html
+    \previouspage creator-build-example-application.html
+    \page creator-qml-application.html
+    \nextpage creator-qml-components-example.html
+
+    \title Creating a Qt Quick Application
+
+    \note To complete this tutorial, you must have Qt 4.7 or later installed.
+
+    This tutorial uses basic elements and illustrates basic concepts of
+    \l {http://doc.qt.nokia.com/4.7/qtquick.html}{Qt Quick}.
+
+    This tutorial describes how to use the \QC to implement the
+    \l{http://doc.qt.nokia.com/4.7/declarative-animation-states.html}
+    {states and transitions example application}. The example application
+     displays a Qt logo that moves between three rectangles on the page when you
+    click them.
+
+    \image qmldesigner-tutorial.png "States and transitions example"
+
+    For more information about using \QMLD, see
+    \l{Developing Qt Quick Applications}.
+
+    \section1 Creating the Project
+
+    \list 1
+
+        \o  Select \gui{File > New File or Project > Qt Quick Project > Qt Quick
+            Application > Choose}.
+
+        \o  Follow the instructions of the wizard to create a project called
+            Transitions.
+
+        \o  Press \key {Ctrl+R} to run the application.
+
+    \endlist
+
+    \QC generates a default QML file that you can modify to create the main view
+    of the application.
+
+    \image qmldesigner-tutorial-project.png "Transitions project in Edit mode"
+
+    \section1 Creating the Main View
+
+    The main view of the application displays a Qt logo in the top left corner
+    of the screen and two empty rectangles.
+
+    To use the states.png image in your application, you must copy it to the
+    project directory (same subdirectory as the QML file) from the examples
+    directory in the Qt installation directory. For example:
+    \c {C:\QtSDK\Examples\4.7\declarative\animation\states}. The image appears
+    in the \gui Resources pane. You can also use any other image or a QML
+    element, instead.
+
+    \list 1
+
+        \o  In the \gui Projects view, double-click the main.qml file
+            to open it in the code editor.
+
+        \o  Click \gui Design to open the file in \QMLD.
+
+            \image qmldesigner-tutorial-desing-mode.png "Transitions project in Design Mode"
+
+        \o  In the \gui Navigator pane, select \gui Text and press \key Delete to
+            delete it.
+
+        \o  Select \gui Rectangle to edit its properties.
+
+            \image qmldesigner-tutorial-page.png "Page properties"
+
+        \list a
+
+            \o  In the \gui Id field, enter \e page, to be able to reference the
+                rectangle from other places.
+
+            \o  In the \gui Colors group, \gui Rectangle field, set the color to
+                #343434.
+
+        \endlist
+
+        \o  In the \gui Library view, \gui Resources tab, select states.png and
+            drag and drop it to the canvas.
+
+            \image qmldesigner-tutorial-user-icon.png "Image properties"
+
+        \list a
+
+            \o  In the \gui Id field, enter \e icon.
+
+            \o  In the \gui Position field, set \gui X to 10 and \gui Y to 20.
+
+        \endlist
+
+        \o  In the \gui Library view, \gui Items tab, select \gui Rectangle,
+            drag and drop it to the canvas, and edit its properties.
+
+            \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
+
+        \list a
+
+            \o  In the \gui Id field, enter \e topLeftRect.
+
+            \o  In the \gui Size field, set \gui W and \gui H to 64, for the
+                rectangle size to match the image size.
+
+            \o  In the \gui Colors group, \gui Rectangle field, click the
+                \inlineimage qmldesigner-transparent-button.png
+                button to make the rectangle transparent.
+
+            \o  In the \gui Border field, set the border color to #808080.
+
+            \o  In the \gui Rectangle group, \gui Border field, set the border
+                width to 1.
+
+                \note If the \gui Border field does not appear after you set the
+                border color, try setting the border color to solid by clicking
+                the
+                \inlineimage qmldesigner-solid-color-button.png
+                button.
+
+            \o  In the \gui Radius field, select 6 to create rounded corners for
+                the rectangle.
+
+            \o  Click \gui {Layout}, and then click the top and left anchor
+                buttons to anchor the rectangle to the top left corner of the
+                page.
+
+                \image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
+
+            \o  In the \gui Margin field, select 20 for the top anchor and 10
+                for the left anchor.
+
+        \endlist
+
+        \o  In the \gui Navigator pane, drag and drop the \gui {Mouse Area}
+            element from \e page to \e topLeftRect to make it apply only to the
+            rectangle and not to the whole page.
+
+        \o Edit \gui {Mouse Area} properties:
+
+        \list a
+
+            \o  Click \gui {Layout}, and then click the
+                \inlineimage qmldesigner-anchor-fill-screen.png
+                button to anchor the mouse area to the rectangle.
+
+            \o  In the code editor, edit the pointer to the clicked expression
+                in the mouse area element, as illustrated by the following code
+                snippet:
+
+                \qml
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: page.state = ''
+                }
+                \endqml
+
+                The expression sets the state to the base state and returns the
+                image to its initial position.
+
+        \endlist
+
+        \o  In the \gui Navigator pane, copy topLeftRect (by pressing
+            \key {Ctrl+C}) and paste it to the canvas twice (by pressing
+            \key {Ctrl+V}). \QC renames the new instances of the element
+            topLeftRect1 and topLeftRect2.
+
+        \o Select topLeftRect1 and edit its properties:
+
+        \list a
+
+            \o  In the \gui Id field, enter \e middleRightRect.
+
+            \o  In \gui {Layout}, select the vertical center anchor button and
+                then the right anchor button to
+                anchor the rectangle to the middle right margin of the screen.
+
+            \o  In the \gui Margin field, select 10 for the right anchor and 0
+                for the vertical center anchor.
+
+            \o  In the code editor,add a pointer to a clicked expression to the
+                mouse area element. The following expression sets the state to
+                \e State1:
+
+                \c {onClicked: page.state = 'State1'}
+
+                You will create State1 later.
+
+        \endlist
+
+        \o  Select topLeftRect2 and edit its properties:
+
+        \list a
+
+            \o  In the \gui Id field, enter \e bottomLeftRect.
+
+            \o  In \gui {Layout}, select the bottom and left anchor buttons to
+                anchor the rectangle to the bottom left margin of the screen.
+
+            \o  In the \gui Margin field, select 20 for the bottom anchor and 10
+                for the left anchor.
+
+            \o  In the code editor, add a pointer to a clicked expression to the
+                mouse area element. The following expression sets the state to
+                \e State2:
+
+                \c {onClicked: page.state = 'State2'}
+
+                You will create State2 later.
+
+        \endlist
+
+        \o  Press \key {Ctrl+S} to save the changes.
+
+        \o  Press \key {Ctrl+R} to run the application.
+
+    \endlist
+
+    \image qmldesigner-tutorial.png "States and transitions example"
+
+    You should see the Qt logo in the top left rectangle, and two additional
+    rectangles in the center right and bottom left of the screen.
+
+    You can now create additional states to add views to the application.
+
+    \section1 Adding Views
+
+    In the .qml file, you already created pointers to two additional states:
+    State1 and State2. To create the states:
+
+    \list 1
+
+        \o  Click the empty slot in the \gui States pane to create State1.
+
+        \o  Click the empty slot in the \gui States pane to create State2.
+
+        \o  In the code editor, bind the position of the Qt logo to the
+            rectangle to make sure that the logo is displayed within the
+            rectangle when the view is scaled on different sizes of screens. Set
+            expressions for the x and y properties, as illustrated by the
+            following code snippet:
+
+            \snippet snippets/qml/states-properties.qml states
+
+            \image qmldesigner-tutorial-state1.png "States"
+
+            \note When you set the expressions, drag and drop is disabled for
+            the icon in \QMLD.
+
+        \o  Press \key {Ctrl+R} to run the application.
+
+    \endlist
+
+    Click the rectangles to move the Qt logo from one rectangle to another.
+
+    \section1 Adding Animation to the View
+
+    Add transitions to define how the properties change when the Qt logo moves
+    between states. The transitions apply animations to the Qt logo. For example,
+    the Qt logo bounces back when it moves to the middleRightRect and eases into
+    bottomLeftRect. Add the transitions in the code editor.
+
+    \list 1
+
+        \o  In the code editor, add the following code to specify that when
+            moving to State1, the x and y coordinates of the Qt logo change
+            linearly over a duration of 1 second:
+
+            \snippet snippets/qml/list-of-transitions.qml first transition
+
+        \o  You can use the Qt Quick toolbar for animation to change the easing
+            curve type from linear to OutBounce:
+
+        \list a
+
+            \o  Click \gui NumberAnimation in the code editor to display the
+                \inlineimage qml-toolbar-indicator.png
+                icon, and then click the icon to open the toolbar:
+
+                \image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"
+
+            \o  In the \gui Easing field, select \gui Bounce.
+
+            \o  In the \gui Subtype field, select \gui Out.
+
+        \endlist
+
+        \o  Add the following code to specify that when moving to State2, the x
+            and y coordinates of the Qt logo change over a duration of 2
+            seconds, and an InOutQuad easing function is used:
+
+            \snippet snippets/qml/list-of-transitions.qml second transition
+
+        \o  Add the following code to specify that for any other state changes,
+            the x and y coordinates of the Qt logo change linearly over a
+            duration of 200 milliseconds:
+
+            \snippet snippets/qml/list-of-transitions.qml default transition
+
+        \o  Press \key {Ctrl+R} to run the application.
+
+    \endlist
+
+    Click the rectangles to view the animated transitions.
+
+*/

doc/src/qtquick/qtquick-toolbars.qdoc

+/****************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Free Documentation License
+**
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of this
+** file.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+****************************************************************************/
+
+// **********************************************************************
+// NOTE: the sections are not ordered by their logical order to avoid
+// reshuffling the file each time the index order changes (i.e., often).
+// Run the fixnavi.pl script to adjust the links to the index order.
+// **********************************************************************
+
+/*!
+    \contentspage index.html
+    \previouspage creator-editor-refactoring.html
+    \page qt-quick-toolbars.html
+    \nextpage creator-editor-locator.html
+
+    \title Using Qt Quick Toolbars
+
+    When you edit QML code in the code editor, you specify the properties
+    of QML components. For some properties, such as colors and font names,
+    this is not a trivial task. For example, few people can visualize the
+    color #18793f.
+
+    To easily edit these properties, you can use the Qt Quick Toolbars.
+    When you select a component in the code and a toolbar is available,
+     a light bulb icon appears:
+    \inlineimage qml-toolbar-indicator.png
+    . Select the icon to open the toolbar.
+
+    To open toolbars immediately when you select a component, select
+    \gui{Tools > Options > Qt Quick > Qt Quick Toolbar > Always show Quick
+    Toolbar}.
+
+    Drag the toolbar to pin it to another location. Select
+    \inlineimage qml-toolbar-pin.png
+    to unpin the toolbar and move it to its default location. To pin toolbars
+    by default, select \gui{Tools > Options > Qt Quick > Qt Quick Toolbar
+    > Pin Quick Toolbar}.
+
+    \section1 Previewing Images
+
+    The Qt Quick Toolbar for images allows you to edit the properties of
+    \l{http://doc.qt.nokia.com/latest/qml-borderimage.html}{Border Image}
+    and \l{http://doc.qt.nokia.com/latest/qml-image.html}{Image} components.
+    You can scale and tile the images, replace them with other images,
+    preview them, and change the image margins.
+
+    \image qml-toolbar-image.png "Qt Quick Toolbar for images"
+
+    To preview an image, double-click it on the toolbar. In the preview
+    dialog, you can zoom the image. Drag the image margins to change them.
+
+    \image qml-toolbar-image-preview.png "Image preview dialog"
+
+    \section1 Formatting Text
+
+    The Qt Quick Toolbar for text allows you to edit the properties of
+    \l{http://doc.qt.nokia.com/latest/qml-text.html}{Text} components.
+    You can change the font family and size as well as text formatting, style,
+    alignment, and color.
+
+    If a property is assigned an expression instead of a value, you
+    cannot use the toolbar to edit it. The button for editing the property
+    is disabled.
+
+    \image qml-toolbar-text.png "Qt Quick Toolbar for text"
+
+    By default, font size is specified as pixels. To use points, instead,
+    change \gui px to \gui pt in the size field.
+
+    \section1 Previewing Animation
+
+    The Qt Quick Toolbar for animation allows you to edit the properties of
+    \l{http://doc.qt.nokia.com/4.7/qml-propertyanimation.html}
+    {PropertyAnimation} components and the components that inherit it. You can
+    change the easing curve type and duration. For some curves, you can also
+    specify amplitude, period, and overshoot values.
+
+    \image qml-toolbar-animation.png "Qt Quick Toolbar for animation"
+
+    Select the play button to preview your changes.
+
+    \section1 Editing Rectangles
+
+    The Qt Quick Toolbar for rectangles allows you to edit the properties of
+    \l{http://doc.qt.nokia.com/4.7/qml-rectangle.html}{Rectangle}
+    components. You can change the fill and border colors and add
+    gradients.
+
+    \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles"
+
+    To add gradient stop points, click above the gradient bar. To remove
+    stop points, drag them upwards.
+
+*/