diff options
Diffstat (limited to 'sources/pyside2/doc/tutorials/qmltutorial/step2.rst')
| -rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/step2.rst | 46 |
1 files changed, 23 insertions, 23 deletions
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`] |