diff options
Diffstat (limited to 'sources/pyside6/doc/tutorials/qmlapp')
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/logo.png | bin | 0 -> 6208 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/main.py | 46 | ||||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/newpyproject.png | bin | 0 -> 16091 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/projectsmode.png | bin | 0 -> 8848 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/pyprojname.png | bin | 0 -> 8068 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/pyprojxplor.png | bin | 0 -> 10062 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/qmlapplication.png | bin | 0 -> 10950 bytes | |||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst | 132 | ||||
-rw-r--r-- | sources/pyside6/doc/tutorials/qmlapp/view.qml | 56 |
9 files changed, 234 insertions, 0 deletions
diff --git a/sources/pyside6/doc/tutorials/qmlapp/logo.png b/sources/pyside6/doc/tutorials/qmlapp/logo.png Binary files differnew file mode 100644 index 000000000..30c621c9c --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/logo.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/main.py b/sources/pyside6/doc/tutorials/qmlapp/main.py new file mode 100644 index 000000000..8b1b25440 --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/main.py @@ -0,0 +1,46 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import sys +import urllib.request +import json +from pathlib import Path + +from PySide6.QtQuick import QQuickView +from PySide6.QtCore import QStringListModel, QUrl +from PySide6.QtGui import QGuiApplication + + +if __name__ == '__main__': + + #get our data + url = "http://country.io/names.json" + response = urllib.request.urlopen(url) + data = json.loads(response.read().decode('utf-8')) + + #Format and sort the data + data_list = list(data.values()) + data_list.sort() + + #Set up the application window + app = QGuiApplication(sys.argv) + view = QQuickView() + view.setResizeMode(QQuickView.SizeRootObjectToView) + + #Expose the list to the Qml code + my_model = QStringListModel() + my_model.setStringList(data_list) + view.setInitialProperties({"myModel": my_model}) + + #Load the QML file + qml_file = Path(__file__).parent / "view.qml" + view.setSource(QUrl.fromLocalFile(qml_file.resolve())) + + #Show the window + if view.status() == QQuickView.Error: + sys.exit(-1) + view.show() + + #execute and cleanup + app.exec() + del view diff --git a/sources/pyside6/doc/tutorials/qmlapp/newpyproject.png b/sources/pyside6/doc/tutorials/qmlapp/newpyproject.png Binary files differnew file mode 100644 index 000000000..93968a52d --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/newpyproject.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/projectsmode.png b/sources/pyside6/doc/tutorials/qmlapp/projectsmode.png Binary files differnew file mode 100644 index 000000000..c66d88723 --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/projectsmode.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/pyprojname.png b/sources/pyside6/doc/tutorials/qmlapp/pyprojname.png Binary files differnew file mode 100644 index 000000000..98328074d --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/pyprojname.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/pyprojxplor.png b/sources/pyside6/doc/tutorials/qmlapp/pyprojxplor.png Binary files differnew file mode 100644 index 000000000..e01e2ebeb --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/pyprojxplor.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.png b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.png Binary files differnew file mode 100644 index 000000000..ec0ad3dea --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.png diff --git a/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst new file mode 100644 index 000000000..c6d72e742 --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst @@ -0,0 +1,132 @@ +######################### +QML Application Tutorial +######################### + +This tutorial provides a quick walk-through of a python application +that loads a QML file. QML is a declarative language that lets you +design UIs faster than a traditional language, such as C++. The +QtQml and QtQuick modules provides the necessary infrastructure for +QML-based UIs. + +In this tutorial, you'll also learn how to provide data from Python +as a QML initial property, which is then consumed by the ListView +defined in the QML file. + +Before you begin, install the following prerequisites: + +* The `PySide6 <https://pypi.org/project/PySide6/>`_ Python packages. +* *Qt Creator* from + `https://download.qt.io + <https://download.qt.io/snapshots/qtcreator/>`_. + + +The following step-by-step instructions guide you through application +development process using *Qt Creator*: + +#. Open *Qt Creator* and select **File > New File or Project..** menu item + to open following dialog: + + .. image:: newpyproject.png + +#. Select **Qt for Python - Empty** from the list of application templates + and select **Choose**. + + .. image:: pyprojname.png + +#. Give a **Name** to your project, choose its location in the + filesystem, and select **Finish** to create an empty ``main.py`` + and ``main.pyproject``. + + .. image:: pyprojxplor.png + + This should create a ``main.py`` and ```main.pyproject`` files + for the project. + +#. Download :download:`view.qml<view.qml>` and :download:`logo.png <logo.png>` + and move them to your project folder. + +#. Double-click on ``main.pyproject`` to open it in edit mode, and append + ``view.qml`` and ``logo.png`` to the **files** list. This is how your + project file should look after this change: + + .. code:: + + { + "files": ["main.py", "view.qml", "logo.png"] + } + +#. Now that you have the necessary bits for the application, import the + Python modules in your ``main.py``, and download country data and + format it: + + .. literalinclude:: main.py + :linenos: + :lines: 3-23 + :emphasize-lines: 7-9,14-17 + +#. Now, set up the application window using + :ref:`PySide6.QtGui.QGuiApplication<qguiapplication>`, which manages the application-wide + settings. + + .. literalinclude:: main.py + :linenos: + :lines: 3-28 + :emphasize-lines: 23-25 + + .. note:: Setting the resize policy is important if you want the + root item to resize itself to fit the window or vice-a-versa. + Otherwise, the root item will retain its original size on + resizing the window. + +#. You can now expose the ``data_list`` variable as a QML initial + property, which will be consumed by the QML ListView item in ``view.qml``. + + .. literalinclude:: main.py + :linenos: + :lines: 3-33 + :emphasize-lines: 28-31 + +#. Load the ``view.qml`` to the ``QQuickView`` and call ``show()`` to + display the application window. + + .. literalinclude:: main.py + :linenos: + :lines: 3-42 + :emphasize-lines: 33-40 + +#. Finally, execute the application to start the event loop and clean up. + + .. literalinclude:: main.py + :linenos: + :lines: 3- + :emphasize-lines: 42-44 + +#. Your application is ready to be run now. Select **Projects** mode to + choose the Python version to run it. + + .. image:: projectsmode.png + +Run the application by using the ``CTRL+R`` keyboard shortcut to see if it +looks like this: + +.. image:: qmlapplication.png + +You could also watch the following video tutorial for guidance to develop +this application: + +.. raw:: html + + <div style="position: relative; padding-bottom: 56.25%; height: 0; + overflow: hidden; max-width: 100%; height: auto;"> + <iframe src="https://www.youtube.com/embed/JxfiUx60Mbg" frameborder="0" + allowfullscreen style="position: absolute; top: 0; left: 0; + width: 100%; height: 100%;"> + </iframe> + </div> + +******************** +Related information +******************** + +* `QML Reference <https://doc.qt.io/qt-5/qmlreference.html>`_ +* :doc:`../qmlintegration/qmlintegration` diff --git a/sources/pyside6/doc/tutorials/qmlapp/view.qml b/sources/pyside6/doc/tutorials/qmlapp/view.qml new file mode 100644 index 000000000..7f9b1d777 --- /dev/null +++ b/sources/pyside6/doc/tutorials/qmlapp/view.qml @@ -0,0 +1,56 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +Page { + width: 640 + height: 480 + required property var myModel + + header: Label { + color: "#15af15" + text: qsTr("Where do people use Qt?") + font.pointSize: 17 + font.bold: true + font.family: "Arial" + renderType: Text.NativeRendering + horizontalAlignment: Text.AlignHCenter + padding: 10 + } + Rectangle { + id: root + width: parent.width + height: parent.height + + Image { + id: image + fillMode: Image.PreserveAspectFit + anchors.centerIn: root + source: "./logo.png" + opacity: 0.5 + + } + + ListView { + id: view + anchors.fill: root + anchors.margins: 25 + model: myModel + delegate: Text { + anchors.leftMargin: 50 + font.pointSize: 15 + horizontalAlignment: Text.AlignHCenter + text: display + } + } + } + NumberAnimation { + id: anim + running: true + target: view + property: "contentY" + duration: 500 + } +} |