aboutsummaryrefslogtreecommitdiffstats
path: root/sources/pyside6/doc/tutorials/basictutorial/qml.rst
diff options
context:
space:
mode:
Diffstat (limited to 'sources/pyside6/doc/tutorials/basictutorial/qml.rst')
-rw-r--r--sources/pyside6/doc/tutorials/basictutorial/qml.rst67
1 files changed, 67 insertions, 0 deletions
diff --git a/sources/pyside6/doc/tutorials/basictutorial/qml.rst b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
new file mode 100644
index 000000000..c972daa00
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
@@ -0,0 +1,67 @@
+Your First Application Using PySide6 and QtQuick/QML
+*****************************************************
+
+QML is a declarative language that lets you develop applications
+faster than with traditional languages. It is ideal for designing the
+UI of your application because of its declarative nature. In QML, a
+user interface is specified as a tree of objects with properties. In
+this tutorial, we will show how to make a simple "Hello World"
+application with PySide6 and QML.
+
+A PySide6/QML application consists, at least, of two different files -
+a file with the QML description of the user interface, and a python file
+that loads the QML file. To make things easier, let's save both files in
+the same directory.
+
+Here is a simple QML file called `view.qml`:
+
+.. code-block:: javascript
+
+ import QtQuick 2.0
+
+ Rectangle {
+ width: 200
+ height: 200
+ color: "green"
+
+ Text {
+ text: "Hello World"
+ anchors.centerIn: parent
+ }
+ }
+
+We start by importing `QtQuick 2.0`, which is a QML module.
+
+The rest of the QML code is pretty straightforward for those who
+have previously used HTML or XML files. Basically, we are creating
+a green rectangle with the size `200*200`, and adding a Text element
+that reads "Hello World". The code `anchors.centerIn: parent` makes
+the text appear centered in relation to its immediate parent, which
+is the Rectangle in this case.
+
+Now, let's see how the code looks on the PySide6.
+Let's call it `main.py`:
+
+.. code-block:: python
+
+ from PySide6.QtWidgets import QApplication
+ from PySide6.QtQuick import QQuickView
+ from PySide6.QtCore import QUrl
+
+ app = QApplication([])
+ view = QQuickView()
+ url = QUrl("view.qml")
+
+ view.setSource(url)
+ view.show()
+ app.exec_()
+
+If you are already familiar with PySide6 and have followed our
+tutorials, you have already seen much of this code.
+The only novelties are that you must `import QtQuick` and set the
+source of the `QQuickView` object to the URL of your QML file.
+Then, as any Qt widget, you call `QQuickView.show()`.
+
+.. note:: If you are programming for desktop, you should consider
+ adding `view.setResizeMode(QQuickView.SizeRootObjectToView)`
+ before showing the view.