Doc: divide file into several files

Mostly, place one topic into one file.

Change-Id: I8fdf43f14179816c0a57883068acd15b13a3761a
Reviewed-by: Kai Koehne <[email protected]>

1 files changed, 257 insertions, 0 deletions

diff --git a/doc/src/qtquick/qtquick-screens.qdoc b/doc/src/qtquick/qtquick-screens.qdoc
new file mode 100644
index 00000000000..113f4bb43a5
--- /dev/null
+++ b/doc/src/qtquick/qtquick-screens.qdoc
@@ -0,0 +1,257 @@
+/****************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation ([email protected])
+**
+**
+** 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 [email protected].
+**
+****************************************************************************/
+
+// **********************************************************************
+// 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 quick-scalable-image.html
+    \page quick-screens.html
+    \nextpage quick-animations.html
+
+    \title Creating Screens
+
+    You can use predefined QML elements and your own components to create
+    screens. Typically, the main qml file in a Qt Quick project specifies the
+    main window of an application.
+
+    \if defined(qcmanual)
+    The QML files in the project folder are displayed in \gui {QML Components}
+    in the \gui Library pane.
+    \endif
+
+    You can also use ready-made Qt Quick Components that allow you to create
+    screens with a native look and feel for a particular target platform. You
+    can install the components as part of \QSDK.
+
+    \if defined(qcmanual)
+    \section1 Adding Components to Screens
+
+    \list 1
+
+        \o  Drag and drop components from the \gui Library pane to the editor.
+
+        \o  Select components in the \gui Navigator pane to edit their
+            properties in the \gui Properties pane.
+
+            For example, you can anchor components to a position on the screen.
+
+    \endlist
+    \endif
+
+
+    \section1 Using Data Models
+
+    You can create the following types of views to organize items provided by
+    \l{http://doc.qt.nokia.com/4.7/qdeclarativemodels.html}{data models}:
+
+    \list
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-gridview.html}{Grid View}
+            provides a grid vizualization of a model.
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-listview.html}{List View}
+            provides a list vizualization of a model.
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-pathview.html}{Path View}
+            visualizes the contents of a model along a path.
+
+    \endlist
+
+    When you add a Grid View, List View, or Path View element, the
+    \l{http://doc.qt.nokia.com/4.7/qml-listmodel.html}{ListModel} and the
+    delegate component that creates an instance for each item in the model are
+    added automatically. You can edit element properties
+    \if defined(qcmanual)
+    in the \gui Properties pane or
+    \endif
+    in the code editor. You can also replace the default model and
+    delegate with other, more complex models and delegates in the code editor.
+
+    \section1 Positioning Items on Screens
+
+    You can use the following items to arrange items on screens:
+
+    \list
+
+        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-column.html}{Column}
+            arranges its child items vertically.
+
+        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-row.html}{Row}
+            arranges its child items horizontally.
+
+        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-grid.html}{Grid}
+            arranges its child items so that they are aligned in a grid and
+            are not overlapping.
+
+        \o  \l{http://doc.qt.nokia.com/4.7-snapshot/qml-flow.html}{Flow}
+            arranges its child items side by side, wrapping as necessary.
+
+    \endlist
+
+    \if defined(qcmanual)
+    To lay out several items in a Column, Row, Grid, or Flow element, select
+    the elements on the canvas, and then select \gui Layout in the context
+    menu.
+    \endif
+
+
+    \section1 Using States
+
+    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 use states to create two screens.
+
+    \if defined(qcmanual)
+    To add states, click the empty slot in the \gui States pane. Then modify the
+    new state in the visual editor.
+
+    \image qmldesigner-states.png "States pane"
+
+    The properties that you change in a state are highlighted with blue color.
+    In the code editor, you can see the changes recorded as changes to the base
+    state.
+    \endif
+
+
+    To keep the QML code clean, you should create a base state that contains all
+    the elements you will need in the application. You can then create states,
+    in which you hide and show a set of items and modify their properties.
+    This allows you to:
+
+    \list
+
+        \o  Align items on different screens with each other.
+
+        \o  Avoid excessive property changes. If an item is invisible in the
+            base state, you must define all changes to its child elements as
+            property changes, which leads to complicated QML code.
+
+        \o  Minimize the differences between the base state and the other states
+            to keep the QML code short and readable and to improve performance.
+
+        \o  Avoid problems when using transitions and animation when changing
+            states.
+
+    \endlist
+
+    \if defined(qcmanual)
+    To create screens for an application by using states:
+
+    \list 1
+
+        \o  In the base state, add all elements you will need in the application.
+            While you work on one screen, you can click the
+            \inlineimage qmldesigner-show-hide-icon.png
+            icon to hide elements on the canvas that are not part of a screen.
+
+        \o  In the \gui States pane, click the empty slot to create a new state
+            and give it a name. For example, \c Normal.
+
+        \o  In the \gui Properties pane, deselect the \gui Visibility check box
+            or set \gui Opacity to 0 for each element that is not needed in this
+            view. If you specify the setting for the parent element, all child
+            elements inherit it and are also hidden.
+
+            \image qmldesigner-screen-design.png "Designing screens"
+
+        \o  Create additional states for each screen and set the visibility
+            or opacity of the elements in the screen.
+
+        \o  To determine which view opens when the application starts, use the
+            code editor to set the state of the root item of the .qml file, as
+            specified by the following code snippet:
+
+            \qml
+            Item {
+                state: "Normal"
+            }
+            \endqml
+
+        \endlist
+    \endif
+
+*/
+
+
+/*!
+
+    \contentspage index.html
+    \previouspage quick-screens.html
+    \page quick-animations.html
+    \nextpage quick-user-interaction.html
+
+    \title Animating Screens
+
+    To make movement between states smooth, you can specify transitions. You can
+    use different types of animated transitions. For example, you can animate
+    changes to property values and colors. You can use rotation animation to
+    control the direction of rotation. For more information, see
+    \l{http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html}{QML Animation}.
+
+    You can use the \c ParallelAnimation element to start several animations at
+    the same time. Or use the \c SequentialAnimation element to run them one
+    after another.
+
+    You can use the code editor to specify transitions. For more information,
+    see \l{http://doc.qt.nokia.com/4.7/qml-transition.html}
+    {QML Transition Element}.
+
+*/
+
+
+/*!
+
+    \contentspage index.html
+    \previouspage quick-animations.html
+    \page quick-user-interaction.html
+    \nextpage quick-export-to-qml.html
+
+    \title Adding User Interaction Methods
+
+    You can add the following basic interaction methods to scenes:
+
+    \list
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-flickable.html}{Flickable}
+            items can be flicked horizontally or vertically.
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-flipable.html}{Flipable}
+            items can be flipped between their front and back sides by using
+            rotation, state, and transition.
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-focusscope.html}{Focus Scope}
+            assists in keyboard focus handling when building reusable QML
+            components.
+
+        \o  \l{http://doc.qt.nokia.com/4.7/qml-mousearea.html}{Mouse Area}
+            enables simple mouse handling.
+
+    \endlist
+
+*/