Doc: Added a section about the controls in the First Steps with QML page.

-added near the top to imply that the controls is a starting point.

Task-number: QTBUG-33595
Change-Id: I31290629dd9bca3c1e477140bc530b8b4b565dba
Reviewed-by: Venugopal Shivashankar <venugopal.shivashankar@digia.com>

2 files changed, 71 insertions, 9 deletions

diff --git a/doc/src/images/applicationwindow.png b/doc/src/images/applicationwindow.png
new file mode 100644
index 00000000..90111f72
--- /dev/null
+++ b/doc/src/images/applicationwindow.png
diff --git a/doc/src/qmlapp/firststepsqml.qdoc b/doc/src/qmlapp/firststepsqml.qdoc
index a69d0292..7403f076 100644
--- a/doc/src/qmlapp/firststepsqml.qdoc
+++ b/doc/src/qmlapp/firststepsqml.qdoc
@@ -100,7 +100,7 @@ Rectangle {
 
 If we save that document as "HelloWorld.qml", we can load and display it.
 
-\section1 Loading and Displaying the QML Document
+\section1 Creating and Running QML Projects
 
 To display the graphical scene defined by the QML document, it may be loaded
 with \l{Qt Creator Manual}{Qt Creator}. For simple UI files such as this one,
@@ -117,6 +117,74 @@ the following pages:
 \li \l{Qt Creator: Building and Running an Example}{Building and Running an Example}
 \endlist
 
+\section1 Creating QML Applications with Controls
+
+While Qt Quick provides basic graphical elements, \l{Qt Quick Controls} provides
+ready-made QML types for use within an application.
+
+Inserting the \l ApplicationWindow type is a good starting point for creating
+applications. An application UI has this basic layout:
+
+\image applicationwindow.png
+
+Within each area, different \e controls may be added and connected to form
+an application. For example, the following snippet is a basic application that
+uses the previous layout:
+
+\qml
+//import related modules
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Window 2.2
+
+//window containing the application
+ApplicationWindow {
+
+    //title of the application
+    title: qsTr("Hello World")
+    width: 640
+    height: 480
+
+    //menu containing two menu items
+    menuBar: MenuBar {
+        Menu {
+            title: qsTr("File")
+            MenuItem {
+                text: qsTr("&Open")
+                onTriggered: console.log("Open action triggered");
+            }
+            MenuItem {
+                text: qsTr("Exit")
+                onTriggered: Qt.quit();
+            }
+        }
+    }
+
+    //Content Area
+
+    //a button in the middle of the content area
+    Button {
+        text: qsTr("Hello World")
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
+\endqml
+The application has two menu items and a button in the middle. Clicking on the
+\uicontrol Exit menu item closes the application.
+
+There are also different navigation methods and different controls such as
+buttons and sliders available. The following examples are available from
+Qt Creator and demonstrate different controls and layouts.
+
+\list
+\li \l{Qt Quick Controls - Basic Layouts Example}{Basic Layouts}
+\li \l{Qt Quick Controls - Touch Gallery}{Touch Gallery}
+\endlist
+
+Feel free to copy and paste the snippets onto this simple Hellow World
+application to see how QML works.
+
 \section1 Handling User Input
 
 One of the great advantages of using QML to define a user interface is that it
@@ -127,8 +195,6 @@ as \l{Signal and Handler Event System}{signals} and these signals are handled by
 
 For example, consider the following example:
 \qml
-import QtQuick 2.3
-
 Rectangle {
     width: 200
     height: 100
@@ -154,8 +220,6 @@ 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:
 
 \qml
-import QtQuick 2.3
-
 Rectangle {
     width: 200
     height: 100
@@ -191,8 +255,6 @@ were to change, the geometry of each child \l Rectangle would automatically
 update due to the property bindings.
 
 \qml
-import QtQuick 2.3
-
 Rectangle {
     width: 400
     height: 200
@@ -218,8 +280,6 @@ to a property's value. In the following example, a property is animated which
 then gets displayed in a \l Text area:
 
 \qml
-import QtQuick 2.3
-
 Rectangle {
     color: "lightgray"
     width: 200
@@ -241,6 +301,7 @@ Rectangle {
 
 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
@@ -276,6 +337,7 @@ The follow page will lead you in your journey with QML.
 
 \list
 \li \l{QML Applications}
+\li \l{Qt Examples and Tutorials}
 \endlist
 
 */