From 7f6b91c1bceba7e3cb2d590bb43884ff548045dc Mon Sep 17 00:00:00 2001
From: Jerome Pasion <jerome.pasion@digia.com>
Date: Wed, 22 Oct 2014 19:26:37 +0200
Subject: [PATCH] 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>
---
 doc/src/images/applicationwindow.png | Bin 0 -> 4576 bytes
 doc/src/qmlapp/firststepsqml.qdoc    |  80 ++++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 doc/src/images/applicationwindow.png

diff --git a/doc/src/images/applicationwindow.png b/doc/src/images/applicationwindow.png
new file mode 100644
index 0000000000000000000000000000000000000000..90111f724128cd7a6cf728fcfa90c236aff68403
GIT binary patch
literal 4576
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

literal 0
HcmV?d00001

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
 
 */
-- 
GitLab