From 39236c01ae6c9bc99ee3a02d8294679e12d9b734 Mon Sep 17 00:00:00 2001 From: Oswald Buddenhagen Date: Mon, 22 May 2017 16:44:51 +0200 Subject: move everying into sources/pyside2 in preparation for a subtree merge. this should not be necessary to do in a separate commit, but git is a tad stupid about following history correctly without it. --- .../pyside2/doc/tutorials/qmltutorial/step1.rst | 66 ++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 sources/pyside2/doc/tutorials/qmltutorial/step1.rst (limited to 'sources/pyside2/doc/tutorials/qmltutorial/step1.rst') 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`] -- cgit v1.2.3