Added installation section and fixed some whitespace.

Reviewed-by: David Boddie

1 files changed, 46 insertions, 36 deletions

diff --git a/doc/src/getting-started/gettingstartedqml.qdoc b/doc/src/getting-started/gettingstartedqml.qdoc
index c7c73e9..0da8f53 100644
--- a/doc/src/getting-started/gettingstartedqml.qdoc
+++ b/doc/src/getting-started/gettingstartedqml.qdoc
@@ -35,6 +35,16 @@
     After reading this guide, you should be ready to develop your own applications
     using QML and Qt C++.
 
+    \section1 Installation
+
+    First, we would need to install the latest version of Qt that includes \l{Qt
+    Quick}, which is Qt 4.7. The \l{Installation} {installation} guide contains
+    installation instructions and requirements for different platforms.
+
+    Qt Quick includes a declarative language called
+    \l{Introduction to the QML language}{QML}, the \l{QtDeclarative Module}, and
+    \l{QML Viewer}.
+
     \section1 QML to Build User Interfaces
 
     The application we are building is a simple text editor that will load, save,
@@ -68,8 +78,8 @@
     We start our text editor by building a button. Functionally, a button has a mouse
     sensitive area and a label. Buttons perform actions when a user presses the button.
 
-    In QML, the basic visual item is the \l {Rectangle}{Rectangle} element. The 
-    \c Rectangle element has properties to control the element's appearance and location. 
+    In QML, the basic visual item is the \l {Rectangle}{Rectangle} element. The
+    \c Rectangle element has properties to control the element's appearance and location.
 
     \snippet examples/tutorials/gettingStarted/gsQml/part0/Button.qml document
 
@@ -88,7 +98,7 @@
     \c text property. The label is contained within the Rectangle and in order to center
     it in the middle, we assign the \c anchors of the Text element to its parent, which
     is called \c simplebutton. Anchors may bind to other items' anchors, allowing layout
-    assignments simpler. 
+    assignments simpler.
 
     We shall save this code as \c SimpleButton.qml. Running qmlviewer with the file as the
     argument will display the grey rectangle with a text label.
@@ -104,7 +114,7 @@
             id:simplebutton
             ...
 
-            MouseArea{ 
+            MouseArea{
                 id: buttonMouseArea
 
                 anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors
@@ -126,7 +136,7 @@
     whenever the acceptable mouse button is clicked, the left click being the default. We
     can bind actions to the onClicked handler. In our example, \c console.log() outputs text
     whenever the mouse area is clicked. The function \c console.log() is a useful tool for
-    debugging purposes and for outputting text. 
+    debugging purposes and for outputting text.
 
     The code in \c SimpleButton.qml is sufficient to display a button on the screen and
     output text whenever it is clicked with a mouse.
@@ -136,7 +146,7 @@
             id:Button
             ...
 
-            property color buttonColor: "lightblue"    
+            property color buttonColor: "lightblue"
             property color onHoverColor: "gold"
             property color borderColor: "white"
 
@@ -145,8 +155,8 @@
                 console.log(buttonLabel.text + " clicked" )
             }
 
-            MouseArea{ 
-                onClicked: buttonClick()    
+            MouseArea{
+                onClicked: buttonClick()
                 hoverEnabled: true
                 onEntered: parent.border.color = onHoverColor
                 onExited:  parent.border.color = borderColor
@@ -210,12 +220,12 @@
 
     \code
         import QtQuick 1.0                \\import the main Qt QML module
-        import "folderName"            \\import the contents of the folder    
+        import "folderName"            \\import the contents of the folder
         import "script.js" as Script        \\import a Javascript file and name it as Script
     \endcode
 
     The syntax shown above shows how to use the \c import keyword. This is required to
-    use JavaScript files, or QML files that are not within the same directory. Since 
+    use JavaScript files, or QML files that are not within the same directory. Since
     \c Button.qml is in the same directory as \c FileMenu.qml, we do not need to import
     the \c Button.qml file to use it. We can directly create a \c Button element by declaring
     \c Button{}, similar to a \c Rectangle{} declaration.
@@ -242,7 +252,7 @@
                 label: "Exit"
                 buttonColor: "darkgrey"
 
-                onButtonClick: Qt.quit() 
+                onButtonClick: Qt.quit()
             }
         }
     \endcode
@@ -266,7 +276,7 @@
     The declaration of the edit menu is very similar at this stage. The menu has
     buttons that have the labels: \c Copy, \c Paste, and \c {Select All}.
 
-    \image qml-texteditor1_editmenu.png      
+    \image qml-texteditor1_editmenu.png
 
     Armed with our knowledge of importing and customizing previously made
     components, we may now combine these menu pages to create a menu bar,
@@ -333,7 +343,7 @@
             //control the movement of the menu switching
             snapMode: ListView.SnapOneItem
             orientation: ListView.Horizontal
-            boundsBehavior: Flickable.StopAtBounds 
+            boundsBehavior: Flickable.StopAtBounds
             flickDeceleration: 5000
             highlightFollowsCurrentItem: true
             highlightMoveDuration:240
@@ -346,7 +356,7 @@
     code above sets \c Flickable properties to create the desired flicking movement
     to our view. In particular,the property \c highlightMoveDuration changes the
     duration of the flick transition. A higher \c highlightMoveDuration value
-    results in slower menu switching. 
+    results in slower menu switching.
 
     The \c ListView maintains the model items through an \c index and each visual
     item in the model is accessible through the \c index, in the order of the
@@ -380,7 +390,7 @@
                     id: editButton
                     label: "Edit"
                     ...
-                    onButtonClick:    menuListView.currentIndex = 1    
+                    onButtonClick:    menuListView.currentIndex = 1
                 }
             }
         }
@@ -389,7 +399,7 @@
     The menu bar we just created can be flicked to access the menus or by clicking
     on the menu names at the top. Switching menu screens feel intuitive and responsive.
 
-    \image qml-texteditor2_menubar.png 
+    \image qml-texteditor2_menubar.png
 
     \section1 Building a Text Editor
 
@@ -402,7 +412,7 @@
 
     \code
         TextEdit{
-            id: textEditor 
+            id: textEditor
             anchors.fill:parent
             width:parent.width; height:parent.height
             color:"midnightblue"
@@ -475,14 +485,14 @@
     that already have defined behaviors. Using this approach, application layouts
     and UI components can be created easily.
 
-    \image qml-texteditor3_texteditor.png 
+    \image qml-texteditor3_texteditor.png
 
     \section1 Decorating the Text Editor
     \section2 Implementing a Drawer Interface
 
     Our text editor looks simple and we need to decorate it. Using QML, we can declare
     transitions and animate our text editor. Our menu bar is occupying one-third of the
-    screen and it would be nice to have it only appear when we want it. 
+    screen and it would be nice to have it only appear when we want it.
 
     We can add a drawer interface, that will contract or expand the menu bar when clicked.
     In our implementation, we have a thin rectangle that responds to mouse clicks. The
@@ -537,7 +547,7 @@
     the item's \c transitions property. Our text editor has a state transition whenever
     the state changes to either \c DRAWER_OPEN or \c DRAWER_CLOSED. Importantly, the
     transition needs a \c from and a \c to state but for our transitions, we can use
-    the wild card \c * symbol to denote that the transition applies to all state changes. 
+    the wild card \c * symbol to denote that the transition applies to all state changes.
 
     During transitions, we can assign animations to the property changes. Our
     \c menuBar switches position from \c {y:0} to \c {y:-partition} and we can animate
@@ -561,7 +571,7 @@
 
         Behavior{
             NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }
-        }    
+        }
     \endcode
 
     Going back to our components with knowledge of states and animations, we can improve
@@ -607,9 +617,9 @@
         We are finished building the user interface of a very simple text editor.
         Going forward, the user interface is complete, and we can implement the
         application logic using regular Qt and C++. QML works nicely as a prototyping
-        tool, separating the application logic away from the UI design. 
+        tool, separating the application logic away from the UI design.
 
-    \image qml-texteditor4_texteditor.png  
+    \image qml-texteditor4_texteditor.png
 
     \section2 Extending QML using Qt C++
 
@@ -622,7 +632,7 @@
     we shall implement the load and save functions in C++ and export it as a plugin.
     This way, we only need to load the QML file directly instead of running an executable.
 
-    \section3 Exposing C++ Classes to QML 
+    \section3 Exposing C++ Classes to QML
 
     We will be implementing file loading and saving using Qt and C++. C++ classes
     and functions can be used in QML by registering them. The class also needs to be
@@ -762,7 +772,7 @@
     Similarly, we have the other properties declared according to their uses. The
     \c filesCount property indicates the number of files in a directory. The filename
     property is set to the currently selected file's name and the loaded/saved file
-    content is stored in \c fileContent property. 
+    content is stored in \c fileContent property.
 
     \code
         Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
@@ -811,10 +821,10 @@
     Regular C++ functions are also accessible from QML. The file loading and saving
     functions are implemented in C++ and declared using the
     \l {Q_INVOKABLE}{Q_INVOKABLE} macro. Alternatively, we can declare the functions
-    as a \c slot and the functions will be accessible from QML. 
+    as a \c slot and the functions will be accessible from QML.
 
     \code
-    In Directory.h: 
+    In Directory.h:
 
         Q_INVOKABLE void saveFile();
         Q_INVOKABLE void loadFile();
@@ -848,9 +858,9 @@
     The constructor passes pointers to functions that will append the list, count
     the list, retrieve the item using an index, and empty the list. Only the append
     function is mandatory. Note that the function pointers must match the definition
-    of \l {QDeclarativeListProperty::AppendFunction}{AppendFunction}, 
-    \l {QDeclarativeListProperty::CountFunction}{CountFunction}, 
-    \l {QDeclarativeListProperty::AtFunction}{AtFunction}, or 
+    of \l {QDeclarativeListProperty::AppendFunction}{AppendFunction},
+    \l {QDeclarativeListProperty::CountFunction}{CountFunction},
+    \l {QDeclarativeListProperty::AtFunction}{AtFunction}, or
     \l {QDeclarativeListProperty::ClearFunction}{ClearFunction}.
 
     \code
@@ -883,7 +893,7 @@
         plugins and other resources.
 
     \code
-    In qmldir: 
+    In qmldir:
 
         Button ./Button.qml
         FileDialog ./FileDialog.qml
@@ -895,7 +905,7 @@
     \endcode
 
     The plugin we just created is called \c FileDialog, as indicated by the
-    \c TARGET field in the project file. The compiled plugin is in the \c plugins directory. 
+    \c TARGET field in the project file. The compiled plugin is in the \c plugins directory.
 
 
     \section3 Integrating a File Dialog into the File Menu
@@ -910,7 +920,7 @@
     \c FileDialog element that the directory refreshed its contents. This notification
     is performed in the signal handler, \c onDirectoryChanged.
 
-    \code 
+    \code
     In FileMenu.qml:
 
         Directory{
@@ -922,7 +932,7 @@
 
     Keeping with the simplicity of our application, the file dialog will always be
     visible and will not display invalid text files, which do not have a \c .txt
-    extension to their filenames. 
+    extension to their filenames.
 
     \code
     In FileDialog.qml:
@@ -981,10 +991,10 @@
     will transfer the text from the \c TextEdit onto the directory's \c fileContent
     property, then copy its file name from the editable text input. Finally, the button
     calls the \c saveFile() function, saving the file. The \c loadButton has a similar
-    execution. Also, the \c New action will empty the contents of the \c TextEdit. 
+    execution. Also, the \c New action will empty the contents of the \c TextEdit.
 
     Further, the \c EditMenu buttons are connected to the \c TextEdit functions to copy,
-    paste, and select all the text in the text editor. 
+    paste, and select all the text in the text editor.
 
     \image qml-texteditor5_filemenu.png