Doc: Adapt QML basics tutorial for Qt Quick 2

- Update the helloworld example to use Qt Quick 2 import
- Use second person style consistently in the tutorial set

Task-number: PYSIDE-363
Change-Id: Ia2b6636e850433bd69e5d6b4fb36faa1cb7b0edb
Reviewed-by: Cristian Maureira-Fredes <cristian.maureira-fredes@qt.io>
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>

8 files changed, 57 insertions, 58 deletions

diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml
index a561e34db..a2b346724 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml
+++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 //![0]
-import QtQuick 1.0
+import QtQuick 2.0
 
 //![1]
 Item {
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml
index ef26bb1aa..2cef1500f 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml
+++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml
@@ -50,7 +50,7 @@
 
 //![0]
 //![3]
-import QtQuick 1.0
+import QtQuick 2.0
 //![3]
 
 //![1]
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml
index f86da25b7..2d2000bc6 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml
+++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 //![0]
-import QtQuick 1.0
+import QtQuick 2.0
 
 Rectangle {
     id: page
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml
index 7324c4df9..f1b972cc4 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml
+++ b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 //![0]
-import QtQuick 1.0
+import QtQuick 2.0
 
 Rectangle {
     id: page
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/index.rst b/sources/pyside2/doc/tutorials/qmltutorial/index.rst
index 35cda3170..45a6842bc 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/index.rst
+++ b/sources/pyside2/doc/tutorials/qmltutorial/index.rst
@@ -7,8 +7,8 @@ QML Tutorial
 This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn't cover everything;
 the emphasis is on teaching the key principles, and features are introduced as needed.
 
-Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component
-with properties and signals, and we will create a simple animation with the help of states and transitions.
+Through the different steps of this tutorial you will learn about QML basic types, create our own QML component
+with properties and signals, and create a simple animation with the help of states and transitions.
 
 Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts.
 
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
index 02a1095bc..bca69d9f4 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
+++ b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
@@ -4,7 +4,7 @@ QML Tutorial 1 - Basic Types
 ****************************
 
 This first program is a very simple "Hello world" example that introduces some basic QML concepts.
-The picture below is a screenshot of this program.
+The following image is a screenshot of this program.
 
 .. figure:: declarative-tutorial1.png
     :align: center
@@ -20,8 +20,8 @@ Walkthrough
 Import
 ------
 
-First, we need to import the types that we need for this example. Most QML files will import the built-in QML
-types (like Rectangle, Image, ...) that come with Qt, using:
+First, you need to import the types that are required for this example. Most QML files import the built-in QML
+types (like Rectangle, Image, ...) that come with Qt, using the following statement:
 
 .. pysideinclude:: helloworld/tutorial1.qml
     :snippet: 3
@@ -32,10 +32,9 @@ Rectangle element
 .. pysideinclude:: helloworld/tutorial1.qml
     :snippet: 1
 
-We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in QML.
-We give it an ``id`` to be able to refer to it later. In this case, we call it "page".
-We also set the ``width``, ``height`` and ``color`` properties.
-The Rectangle element contains many other properties (such as ``x`` and ``y``), but these are left at their default values.
+Declare a root element using the Rectangle type, which is one of the basic building blocks to create an application in QML.
+Give it an ``id`` so that you can refer to it later. For example, call it "page", and also set its ``width``,
+``height``, and ``color`` properties.
 
 Text element
 ------------
@@ -43,12 +42,12 @@ Text element
 .. pysideinclude code/tutorial1.qml
     :snippet: 2
 
-We add a Text element as a child of the root Rectangle element that displays the text 'Hello world!'.
+Add a Text element as the child of the Rectangle element to display the text, 'Hello world!'.
 
-The ``y`` property is used to position the text vertically at 30 pixels from the top of its parent.
+Use its ``y`` property to position it at 30 pixels from the top of its parent.
 
 The ``anchors.horizontalCenter`` property refers to the horizontal center of an element.
-In this case, we specify that our text element should be horizontally centered in the *page* element.
+In this case, specify that the text element must be horizontally centered in the *page* element.
 
 The ``font.pointSize`` and ``font.bold properties`` are related to fonts and use the dot notation.
 
@@ -56,11 +55,12 @@ The ``font.pointSize`` and ``font.bold properties`` are related to fonts and use
 Viewing the example
 -------------------
 
-To view what you have created, run the QML Viewer tool (located in the ``bin directory`` of your Qt installation) with your filename as the first argument.
-For example, to run the provided completed Tutorial 1 example from the install location, you would type:
+To view what you have created, run the ``qmlscene`` tool (located in the ``bin directory`` of your Qt installation) with your
+QML filename as the first argument. For example, to run the Tutorial 1 example from the install
+location, you would type:
 
 ::
 
-    bin/qmlviewer tutorial1.qml
+    > [QT_INSTALL_DIR]\bin\qmlscene tutorial1.qml
 
 [Previous :ref:`qmltutorial`][Next :ref:`qmlcomponents`]
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step2.rst b/sources/pyside2/doc/tutorials/qmltutorial/step2.rst
index 4dacd00a9..5b48ca63f 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/step2.rst
+++ b/sources/pyside2/doc/tutorials/qmltutorial/step2.rst
@@ -3,19 +3,19 @@
 QML Tutorial 2 - QML Components
 *******************************
 
-This chapter adds a color picker to change the color of the text.
+In this chapter, you are going to add a color picker to change the color of the text.
 
 .. figure:: declarative-tutorial2.png
     :align: center
 
-Our color picker is made of six cells with different colors.
-To avoid writing the same code multiple times for each cell, we create a new ``Cell`` component.
-A component provides a way of defining a new type that we can re-use in other QML files.
-A QML component is like a black-box and interacts with the outside world through properties, signals and functions and is generally
-defined in its own QML file.
+The color picker is made of six cells with different colors.
+To avoid writing the same code multiple times for each cell, create a new ``Cell`` component.
+A component provides a way of defining a new type that you can re-use in other QML files.
+A QML component is like a black-box that interacts with the outside world through its properties, signals,
+and functions, and is generally defined in its own QML file.
 The component's filename must always start with a capital letter.
 
-Here is the QML code for ``Cell.qml``:
+Here is the QML code for ``Cell``:
 
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 0
@@ -29,53 +29,53 @@ The Cell Component
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 1
 
-The root element of our component is an Item with the ``id`` *container*.
+The root element of the component is an Item with the ``id``, *container*.
 An Item is the most basic visual element in QML and is often used as a container for other elements.
 
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 4
 
-We declare a ``cellColor`` property. This property is accessible from  *outside* our component, this allows us
-to instantiate the cells with different colors.
-This property is just an alias to an existing property - the color of the rectangle that compose the cell.
+Its ``cellColor`` property is accessible from  *outside* the component, allowing you
+to instantiate cells with different colors. It is an alias to the existing color property of the rectangle
+that composes the cell.
 
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 5
 
-We want our component to also have a signal that we call *clicked* with a *cellColor* parameter of type *color*.
-We will use this signal to change the color of the text in the main QML file later.
+The Cell has a signal called *clicked* with the *cellColor* parameter of type *color*.
+You need this signal to change the color of the text in the main QML file later.
 
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 2
 
-Our cell component is basically a colored rectangle with the ``id`` *rectangle*.
+The cell component is basically a colored rectangle with the ``id``, *rectangle*.
 
-The ``anchors.fill`` property is a convenient way to set the size of an element.
+Its ``anchors.fill`` property is a convenient way to set the size of an element.
 In this case the rectangle will have the same size as its parent.
 
 .. pysideinclude:: helloworld/Cell.qml
     :snippet: 3
 
-In order to change the color of the text when clicking on a cell, we create a MouseArea element with
-the same size as its parent.
+In order to change the color of the text when the cell is clicked, a MouseArea element with
+the same size as its parent is used.
 
-A MouseArea defines a signal called *clicked*.
-When this signal is triggered we want to emit our own *clicked* signal with the color as parameter.
+A MouseArea enables you to react to mouse events such as clicked, hover, and so on. In this case, when the MouseArea *clicked*
+signal is reported, the Cell's *clicked* signal is emitted.
 
 The main QML file
 -----------------
 
-In our main QML file, we use our ``Cell`` component to create the color picker:
+In the main QML file, use the ``Cell`` component to create the color picker:
 
 .. pysideinclude:: helloworld/tutorial2.qml
     :snippet: 0
 
-We create the color picker by putting 6 cells with different colors in a grid.
+Create the color picker by putting 6 cells with different colors in a grid.
 
 .. pysideinclude:: helloworld/tutorial2.qml
     :snippet: 1
 
-When the *clicked* signal of our cell is triggered, we want to set the color of the text to the *cellColor* passed as a parameter.
-We can react to any signal of our component through a property of the name *'onSignalName'*.
+When the *clicked* signal of a cell is triggered, set the color of the text to the *cellColor* passed as a parameter.
+You can react to a signal of a component through a handler of the name, *'onSignalName'*.
 
 [Previous :ref:`qmlbasictypes`][Next :ref:`qmlstatesandtransitions`]
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step3.rst b/sources/pyside2/doc/tutorials/qmltutorial/step3.rst
index a72d1eac0..6d5a72f13 100644
--- a/sources/pyside2/doc/tutorials/qmltutorial/step3.rst
+++ b/sources/pyside2/doc/tutorials/qmltutorial/step3.rst
@@ -3,14 +3,14 @@
 QML Tutorial 3 - States and Transitions
 ***************************************
 
-In this chapter, we make this example a little bit more dynamic by introducing states and transitions.
-
-We want our text to move to the bottom of the screen, rotate and become red when clicked.
+In this chapter, you are guided through the steps to make the example a little more dynamic by
+introducing states and transitions. For example, moving the text to the bottom of the screen,
+rotate, and change its color when clicked.
 
 .. figure:: declarative-tutorial3_animation.gif
     :align: center
 
-Here is the QML code:
+Here is the QML code for such a behavior:
 
 .. pysideinclude:: helloworld/tutorial3.qml
     :snippet: 0
@@ -21,27 +21,26 @@ Walkthrough
 .. pysideinclude:: helloworld/tutorial3.qml
     :snippet: 2
 
-First, we create a new *down* state for our text element.
-This state will be activated when the MouseArea is pressed, and deactivated when it is released.
+First, create a new *down* state for the text element.
+Pressing the MouseArea activates this new state and releasing it deactivates the state.
 
-The *down* state includes a set of property changes from our implicit *default state*
+The *down* state includes a set of property changes from the implicit *default state*
 (the items as they were initially defined in the QML).
-Specifically, we set the ``y`` property of the text to ``160``, the rotation to ``180`` and the ``color`` to red.
+Specifically, set the ``y`` property of the text to ``160``, rotation to ``180``, and ``color`` to red.
 
 .. pysideinclude:: helloworld/tutorial3.qml
     :snippet: 3
 
-Because we don't want the text to appear at the bottom instantly but rather move smoothly,
-we add a transition between our two states.
+To make the application even better, add a transiton between the two states so that switching between these
+two states look smooth and nice.
 
-``from`` and ``to`` define the states between which the transition will run.
-In this case, we want a transition from the default state to our *down* state.
+The ``from`` and ``to`` properties of the Transition element define the states between which the transition will run.
+In this case, you want a transition from the default state to the *down* state.
 
-Because we want the same transition to be run in reverse when changing back from the *down* state to the default state,
-we set ``reversible`` to ``true``.
-This is equivalent to writing the two transitions separately.
+To have a similar transition effect when changing back from the *down* state to the default state,
+set the ``reversible`` property to ``true``. This is equivalent to writing two transitions.
 
 The ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
-We could also run them one after the other by using SequentialAnimation instead.
+You could also run them one after the other by using SequentialAnimation instead.
 
 [Previous :ref:`qmlcomponents`]