Doc: Cleaned up QML introduction.

-Combined QML "Quick Start" pages into "First Steps with QML" so that
we only have 1 piece of QML introduction
-Placed the QML links to QML in the "What is QML?" section.

We have too many information in too many places and this patch means
we have a better documentation focus and we can direct readers depending
on their familiarity with QML.
A)first step
B)qml reference
C)qml application

Change-Id: I0256f81fea95a55a447776f1cd11764cda656f4d
Reviewed-by: Alan Alpert <aalpert@blackberry.com>
Reviewed-by: Venugopal Shivashankar <venugopal.shivashankar@digia.com>
Reviewed-by: Geir Vattekar <geir.vattekar@digia.com>

doc/src/qmlapp/applicationdevelopers.qdoc

@@ -51,6 +51,14 @@ The QML language and engine infrastructure is provided by the \l {Qt QML} module
 For in-depth information about the QML language, please see the
 \l{Qt QML} module documentation.
 
+The following pages contain more information about QML:
+\list
+\li \l{First Steps with QML} - begin using QML with these examples
+\li \l{The QML Reference} - reference about the QML constructs and features
+\li \l{qml-codingconventions.html}{QML Coding Conventions}
+\li \l{qtquick-glossary.html}{Glossary of Terms}
+\endlist
+
 \section2 What is Qt Quick?
 
 Qt Quick is the standard library of types and functionality for QML.  It
@@ -62,25 +70,6 @@ The \c QtQuick QML library is provided by the \l{Qt Quick} module.
 For in-depth information about the various QML types and other functionality
 provided by Qt Quick, please see the \l{Qt Quick} module documentation.
 
-\section1 Quick Start
-
-\list
-\li \l{qtquick-quickstart-basics.html}{QML Basics}
-    \list
-    \li \l{qtquick-quickstart-basics.html#creating-a-qml-document}{Creating a QML Document}
-    \li \l{qtquick-quickstart-basics.html#loading-and-displaying-the-qml-document}{Loading and Displaying the QML Document}
-    \endlist
-\li \l{qtquick-quickstart-essentials.html}{QML Essentials}
-    \list
-    \li \l{qtquick-quickstart-essentials.html#handling-user-input}{Handling User Input}
-    \li \l{qtquick-quickstart-essentials.html#property-bindings}{Property Bindings}
-    \li \l{qtquick-quickstart-essentials.html#animations}{Animations}
-    \li \l{qtquick-quickstart-essentials.html#defining-custom-qml-types-for-re-use}{Defining Custom QML Types for Re-use}
-    \li \l{qml-codingconventions.html}{QML Coding Conventions}
-    \li \l{qtquick-glossary.html}{Glossary of Terms}
-    \endlist
-\endlist
-
 \section1 QML User Interfaces
 
 For creating or customizing graphical user interfaces, Qt Quick adds visual

doc/src/qmlapp/quickstart/essentials.qdoc → doc/src/qmlapp/firststepsqml.qdoc

@@ -25,17 +25,103 @@
 **
 ****************************************************************************/
 /*!
-\page qtquick-quickstart-essentials.html
-\title Quick Start Guide - QML Essentials
-\brief Essential QML application development examples
+\page qmlfirststeps.html
+\title First Steps with QML
+\brief Basic QML application development examples
+
+\section1 Creating a QML Document
+
+A QML document defines a hierarchy of objects with a highly-readable,
+structured layout. Every QML document consists of two parts: an imports
+section and an object declaration section. The types and functionality most
+common to user interfaces are provided in the \c{QtQuick}
+import.
+
+\section2 Importing and Using the QtQuick Module
+
+To use the \l{Qt Quick} module, a QML document needs to
+import it. The import syntax looks like this:
+
+\qml
+import QtQuick 2.0
+\endqml
+
+The types and functionality that \l{Qt Quick} provides can now
+be used in the QML document!
+
+\section2 Defining an Object Hierarchy
+
+The object declaration in a QML document defines what will be displayed in the
+visual scene. \l{Qt Quick} provides the basic building blocks
+for all user interfaces, such as the objects for displaying images and text and
+for handling user input.
+
+A simple object declaration might be a colored rectangle with some text centered
+in it:
+
+\qml
+Rectangle {
+    width: 200
+    height: 100
+    color: "red"
+
+    Text {
+        anchors.centerIn: parent
+        text: "Hello, World!"
+    }
+}
+\endqml
+
+This defines an object hierarchy with a root \l Rectangle object
+which has a child \l Text object. The \c parent of the \l Text object is
+automatically set to the \l Rectangle, and similarly, the \l Text object is
+added to the \c children property of the \l Rectangle object, by QML.
+
+\section2 Putting it All Together
+
+The \l Rectangle and \l Text types used in the above example are both provided
+by the \c{QtQuick} import. Putting the import and object declaration
+together, we get a complete QML document:
+
+\qml
+import QtQuick 2.0
+
+Rectangle {
+    width: 200
+    height: 100
+    color: "red"
+
+    Text {
+        anchors.centerIn: parent
+        text: "Hello, World!"
+    }
+}
+\endqml
+
+If we save that document as "HelloWorld.qml", we can load and display it.
+
+\section1 Loading and Displaying the QML Document
+
+To display the graphical scene defined by the QML document, it may be loaded
+with the \l{Prototyping with qmlscene}{qmlscene} tool. The
+\l{Prototyping with qmlscene}{qmlscene} tool should be installed into the
+Qt installation directory. Assuming that the Qt binaries are installed into
+or are available in the system executable path, you can display the QML
+document with the following command:
+
+\code
+qmlscene HelloWorld.qml
+\endcode
+
+You should see the text "Hello, World!" in the center of a red rectangle.
 
 \section1 Handling User Input
 
 One of the great advantages of using QML to define a user interface is that it
 allows the user interface designer to define how the application should react
-to events with simple JavaScript expressions.  In QML, we refer to those events
-as \l{Signal and Handler Event System}{signals} and such signals can be handled
-with \l{qml-signals-and-handlers}{signal handlers}.
+to events with simple JavaScript expressions. In QML, we refer to those events
+as \l{Signal and Handler Event System}{signals} and these signals are handled by
+\l{qml-signals-and-handlers}{signal handlers}.
 
 For example, consider the following example:
 \qml
@@ -60,7 +146,7 @@ Rectangle {
 
 This example can be saved as "ClickableHelloWorld.qml" and run with qmlscene.
 Whenever the user clicks anywhere in the window, the rectangle will change
-from red to blue.  Note that the \l MouseArea type also emits the clicked
+from red to blue. Note that the \l MouseArea type also emits the clicked
 signal for touch events, so this code will also work on a mobile device.
 
 Keyboard user input can be similarly handled with a simple expression:
@@ -94,11 +180,11 @@ is pressed.
 \section1 Property Bindings
 
 Objects and their properties form the basis of a graphical interface defined
-in a QML document.  The QML language allows properties to be bound to each
+in a QML document. The QML language allows properties to be bound to each
 other in various ways, enabling highly dynamic user interfaces.
 
 In the following example, the geometry of each child \l Rectangle is bound to
-that of the parent \l Rectangle.  If the geometry of the parent \l Rectangle
+that of the parent \l Rectangle. If the geometry of the parent \l Rectangle
 were to change, the geometry of each child \l Rectangle would automatically
 update due to the property bindings.
 
@@ -124,9 +210,9 @@ Rectangle {
 
 \section1 Animations
 
-Properties can also be dynamically updated via animations.  The \c QtQuick
+Properties can also be dynamically updated via animations. The \c QtQuick
 import provides various animation types which can be used to animate changes
-to a property's value.  In the following example, a property is animated which
+to a property's value. In the following example, a property is animated which
 then gets displayed in a \l Text area:
 
 \qml
@@ -155,7 +241,7 @@ The value being displayed will vary from 0 to 150 periodically.
 
 \section1 Defining Custom QML Types for Re-use
 
-One of the most important concepts in QML is that of type re-use.  An
+One of the most important concepts in QML is that of type re-use. An
 application will probably have multiple visual types which are all similar
 (for example, multiple push buttons), and QML allows these sort of things to
 be defined as re-usable, custom types, to minimize code duplication and
@@ -175,10 +261,19 @@ That type may now be re-used multiple times in the application, as follows:
 \endtable
 
 
-In this way, modular user interface types can be built up and re-used within
+In this way, modular user interface types are assembled and reused within
 an application.
 
 See \l {QML Object Attributes}
 for more details on how to develop your own reusable components.
 
+\section1 Where to Go from Here
+
+Now that you have seen QML in action, you are ready to take your next step.
+The follow page will lead you in your journey with QML.
+
+\list
+\li \l{QML Application Developer Resources}
+\endlist
+
 */

doc/src/qmlapp/quickstart/basics.qdoc

-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:FDL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and Digia.  For licensing terms and
-** conditions see http://qt.digia.com/licensing.  For further information
-** use the contact form at http://qt.digia.com/contact-us.
-**
-** GNU Free Documentation License Usage
-** 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.  Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: http://www.gnu.org/copyleft/fdl.html.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-/*!
-\page qtquick-quickstart-basics.html
-\title Quick Start Guide - QML Basics
-\brief Basic QML application development examples
-
-\section1 Creating a QML Document
-
-A QML document defines a hierarchy of objects with a highly-readable,
-structured layout.  Every QML document consists of two parts: an imports
-section and an object declaration section.  The types and functionality most
-common to user interfaces are provided in the \c{QtQuick}
-import.
-
-\section2 Importing and Using the QtQuick Module
-
-To use the \l{Qt Quick} module, a QML document needs to
-import it.  The import syntax looks like this:
-
-\qml
-import QtQuick 2.0
-\endqml
-
-The types and functionality that \l{Qt Quick} provides can now
-be used in the QML document!
-
-\section2 Defining an Object Hierarchy
-
-The object declaration in a QML document defines what will be displayed in the
-visual scene.  \l{Qt Quick} provides the basic building blocks
-for all user interfaces, including objects to display images and text, and to
-handle user input.
-
-A simple object declaration might be a colored rectangle with some text centered
-in it:
-
-\qml
-Rectangle {
-    width: 200
-    height: 100
-    color: "red"
-
-    Text {
-        anchors.centerIn: parent
-        text: "Hello, World!"
-    }
-}
-\endqml
-
-This defines an object hierarchy with a root \l Rectangle object
-which has a child \l Text object.  The \c parent of the \l Text object is
-automatically set to the \l Rectangle, and similarly, the \l Text object is
-added to the \c children property of the \l Rectangle object, by QML.
-
-\section2 Putting it Together
-
-The \l Rectangle and \l Text types used in the above example are both provided
-by the \c{QtQuick} import.  Putting the import and object declaration
-together, we get a complete QML document:
-
-\qml
-import QtQuick 2.0
-
-Rectangle {
-    width: 200
-    height: 100
-    color: "red"
-
-    Text {
-        anchors.centerIn: parent
-        text: "Hello, World!"
-    }
-}
-\endqml
-
-If we save that document as "HelloWorld.qml" we can load and display it.
-
-\section1 Loading and Displaying the QML Document
-
-To display the graphical scene defined by the QML document, it may be loaded
-with the \l{Prototyping with qmlscene}{qmlscene} tool.  The
-\l{Prototyping with qmlscene}{qmlscene} tool should be installed into the
-Qt installation directory.  Assuming that the Qt binaries are installed into
-or are available in the system executable path, you can display the QML
-document with the following command:
-
-\code
-qmlscene HelloWorld.qml
-\endcode
-
-You should see the text "Hello, World!" in the center of a red rectangle.
-
-*/