aboutsummaryrefslogtreecommitdiffstats
path: root/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
diff options
context:
space:
mode:
Diffstat (limited to 'sources/pyside2/doc/tutorials/qmltutorial/step1.rst')
-rw-r--r--sources/pyside2/doc/tutorials/qmltutorial/step1.rst66
1 files changed, 66 insertions, 0 deletions
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
new file mode 100644
index 000000000..02a1095bc
--- /dev/null
+++ b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst
@@ -0,0 +1,66 @@
+.. _qmlbasictypes:
+
+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.
+
+.. figure:: declarative-tutorial1.png
+ :align: center
+
+Here is the QML code for the application:
+
+.. pysideinclude:: helloworld/tutorial1.qml
+ :snippet: 0
+
+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:
+
+.. pysideinclude:: helloworld/tutorial1.qml
+ :snippet: 3
+
+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.
+
+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!'.
+
+The ``y`` property is used to position the text vertically 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.
+
+The ``font.pointSize`` and ``font.bold properties`` are related to fonts and use the dot notation.
+
+
+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:
+
+::
+
+ bin/qmlviewer tutorial1.qml
+
+[Previous :ref:`qmltutorial`][Next :ref:`qmlcomponents`]