diff options
Diffstat (limited to 'sources/pyside6/doc/tutorials')
83 files changed, 3264 insertions, 1577 deletions
diff --git a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst index 2221858bc..c5464640b 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst @@ -60,7 +60,8 @@ signal to the `say_hello()` function: button.clicked.connect(say_hello) Finally, we show the button and start the Qt main loop: -:: + +.. code-block:: python # Show the button button.show() @@ -68,9 +69,8 @@ Finally, we show the button and start the Qt main loop: app.exec() Here is the complete code for this example: -:: - #!/usr/bin/python +.. code-block:: python import sys from PySide6.QtWidgets import QApplication, QPushButton diff --git a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst index bc06d6d9b..b7712672b 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst @@ -3,8 +3,8 @@ Creating a Dialog Application This tutorial shows how to build a simple dialog with some basic widgets. The idea is to let users provide their name -in a `QLineEdit`, and the dialog greets them on click of a -`QPushButton`. +in a ``QLineEdit``, and the dialog greets them on click of a +``QPushButton``. Let us just start with a simple stub that creates and shows a dialog. This stub is updated during the course of this @@ -31,24 +31,24 @@ tutorial, but you can use this stub as is if you need to: sys.exit(app.exec()) The imports aren't new to you, the same for the creation of the -`QApplication` and the execution of the Qt main loop. +``QApplication`` and the execution of the Qt main loop. The only novelty here is the **class definition**. You can create any class that subclasses PySide6 widgets. -In this case, we are subclassing `QDialog` to define a custom +In this case, we are subclassing ``QDialog`` to define a custom dialog, which we name as **Form**. We have also implemented the -`init()` method that calls the `QDialog`'s init method with the -parent widget, if any. Also, the new `setWindowTitle()` method -just sets the title of the dialog window. In `main()`, you can see +``init()`` method that calls the ``QDialog``'s init method with the +parent widget, if any. Also, the new ``setWindowTitle()`` method +just sets the title of the dialog window. In ``main()``, you can see that we are creating a *Form object* and showing it to the world. Create the Widgets ------------------ -We are going to create two widgets: a `QLineEdit` where users can -enter their name, and a `QPushButton` that prints the contents of -the `QLineEdit`. -So, let's add the following code to the `init()` method of our Form: +We are going to create two widgets: a ``QLineEdit`` where users can +enter their name, and a ``QPushButton`` that prints the contents of +the ``QLineEdit``. +So, let's add the following code to the ``init()`` method of our Form: :: # Create widgets @@ -62,8 +62,8 @@ Create a layout to organize the Widgets --------------------------------------- Qt comes with layout-support that helps you organize the widgets -in your application. In this case, let's use `QVBoxLayout` to lay out -the widgets vertically. Add the following code to the `init()` method, +in your application. In this case, let's use ``QVBoxLayout`` to lay out +the widgets vertically. Add the following code to the ``init()`` method, after creating the widgets: :: @@ -72,40 +72,41 @@ after creating the widgets: layout.addWidget(self.edit) layout.addWidget(self.button) -So, we create the layout, add the widgets with `addWidget()`. +So, we create the layout, add the widgets with ``addWidget()``. Create the function to greet and connect the Button --------------------------------------------------- Finally, we just have to add a function to our custom **Form** and *connect* our button to it. Our function will be a part of -the Form, so you have to add it after the `init()` function: +the Form, so you have to add it after the ``init()`` function: :: # Greets the user def greetings(self): print(f"Hello {self.edit.text()}") -Our function just prints the contents of the `QLineEdit` to the +Our function just prints the contents of the ``QLineEdit`` to the python console. We have access to the text by means of the -`QLineEdit.text()` method. +``QLineEdit.text()`` method. Now that we have everything, we just need to *connect* the -`QPushButton` to the `Form.greetings()` method. To do so, add the -following line to the `init()` method: +``QPushButton`` to the ``Form.greetings()`` method. To do so, add the +following line to the ``init()`` method: :: # Add button signal to greetings slot self.button.clicked.connect(self.greetings) -Once executed, you can enter your name in the `QLineEdit` and watch +Once executed, you can enter your name in the ``QLineEdit`` and watch the console for greetings. Complete code ------------- Here is the complete code for this tutorial: -:: + +.. code-block:: python import sys from PySide6.QtWidgets import (QLineEdit, QPushButton, QApplication, diff --git a/sources/pyside6/doc/tutorials/basictutorial/icons.zip b/sources/pyside6/doc/tutorials/basictutorial/icons.zip Binary files differnew file mode 100644 index 000000000..e279e37b8 --- /dev/null +++ b/sources/pyside6/doc/tutorials/basictutorial/icons.zip diff --git a/sources/pyside6/doc/tutorials/basictutorial/qrcfiles.rst b/sources/pyside6/doc/tutorials/basictutorial/qrcfiles.rst index 477c5b738..858293beb 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/qrcfiles.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/qrcfiles.rst @@ -1,7 +1,7 @@ .. _using_qrc_files: -Using `.qrc` Files (`pyside6-rcc`) -********************************** +Using ``.qrc`` Files (``pyside6-rcc``) +************************************** The `Qt Resource System`_ is a mechanism for storing binary files in an application. @@ -17,7 +17,7 @@ In this tutorial you will learn how to load custom images as button icons. For inspiration, we will try to adapt the multimedia player example from Qt. -As you can see on the following image, the `QPushButton` that are used +As you can see on the following image, the ``QPushButton`` that are used for the media actions (play, pause, stop, and so on) are using the default icons meant for such actions. @@ -25,29 +25,27 @@ default icons meant for such actions. :alt: Multimedia Player Qt Example You could make the application more attractive by designing the icons, -but in case you don't want to design them, `download the following set`_ -and use them. +but in case you don't want to design them, you can download and use them. + +:download:`Download icons <icons.zip>` .. image:: icons.png :alt: New Multimedia icons -You can find more information about the `rcc` command, and `.qrc` file +You can find more information about the ``rcc`` command, and ``.qrc`` file format, and the resource system in general in the `Qt Resource System`_ site. -.. _`download the following set`: icons/ - -The `.qrc` file -================ +The ``.qrc`` file +================= -Before running any command, add information about the resources to a `.qrc` +Before running any command, add information about the resources to a ``.qrc`` file. -In the following example, notice how the resources are listed in `icons.qrc` +In the following example, notice how the resources are listed in ``icons.qrc`` :: - </ui> <!DOCTYPE RCC><RCC version="1.0"> <qresource> <file>icons/play.png</file> @@ -62,15 +60,15 @@ In the following example, notice how the resources are listed in `icons.qrc` Generating a Python file ========================= -Now that the `icons.qrc` file is ready, use the `pyside6-rcc` tool to generate +Now that the ``icons.qrc`` file is ready, use the ``pyside6-rcc`` tool to generate a Python class containing the binary information about the resources To do this, we need to run:: - pyside6-rcc icons.rc -o rc_icons.py + pyside6-rcc icons.qrc -o rc_icons.py -The `-o` option lets you specify the output filename, -which is `rc_icons.py` in this case. +The ``-o`` option lets you specify the output filename, +which is ``rc_icons.py`` in this case. To use the generated file, add the following import at the top of your main Python file:: @@ -167,7 +165,7 @@ Now, the constructor of your class should look like this: Executing the example ===================== -Run the application by calling `python main.py` to checkout the new icon-set: +Run the application by calling ``python main.py`` to checkout the new icon-set: .. image:: player-new.png :alt: New Multimedia Player Qt Example diff --git a/sources/pyside6/doc/tutorials/basictutorial/signals_and_slots.rst b/sources/pyside6/doc/tutorials/basictutorial/signals_and_slots.rst index 470b4ab70..0bfd9e276 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/signals_and_slots.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/signals_and_slots.rst @@ -43,101 +43,104 @@ a signal directly to another signal. (This will emit the second signal immediately whenever the first is emitted.) Qt's widgets have many predefined signals and slots. For example, -`QAbstractButton` (base class of buttons in Qt) has a `clicked()` -signal and `QLineEdit` (single line input field) has a slot named -'clear()`. So, a text input field with a button to clear the text -could be implemented by placing a `QToolButton` to the right of the -`QLineEdit` and connecting its `clicked()` signal to the slot -'clear()`. This is done using the `connect()` method of the signal: +``QAbstractButton`` (base class of buttons in Qt) has a ``clicked()`` +signal and ``QLineEdit`` (single line input field) has a slot named +``clear()``. So, a text input field with a button to clear the text +could be implemented by placing a ``QToolButton`` to the right of the +``QLineEdit`` and connecting its ``clicked()`` signal to the slot +``clear()``. This is done using the ``connect()`` method of the signal: - .. code-block:: python +.. code-block:: python - button = QToolButton() - line_edit = QLineEdit() - button.clicked.connect(line_edit.clear) + button = QToolButton() + line_edit = QLineEdit() + button.clicked.connect(line_edit.clear) -`connect()` returns a `QMetaObject.Connection` object, which can be -used with the `disconnect()` method to sever the connection. +``connect()`` returns a ``QMetaObject.Connection`` object, which can be +used with the ``disconnect()`` method to sever the connection. Signals can also be connected to free functions: - .. code-block:: python +.. code-block:: python - import sys - from PySide6.QtWidgets import QApplication, QPushButton + import sys + from PySide6.QtWidgets import QApplication, QPushButton - def function(): - print("The 'function' has been called!") + def function(): + print("The 'function' has been called!") - app = QApplication() - button = QPushButton("Call function") - button.clicked.connect(func) - button.show() - sys.exit(app.exec()) + app = QApplication() + button = QPushButton("Call function") + button.clicked.connect(function) + button.show() + sys.exit(app.exec()) Connections can be spelled out in code or, for widget forms, designed in the `Signal-Slot Editor <https://doc.qt.io/qt-6/designer-connection-mode.html>`_ -of Qt Designer. +of *Qt Widgets Designer*. The Signal Class ---------------- When writing classes in Python, signals are declared as class level variables of the class ``QtCore.Signal()``. A QWidget-based button -that emits a `clicked()` signal could look as +that emits a ``clicked()`` signal could look as follows: - .. code-block:: python +.. code-block:: python - from PySide6.QtCore import Qt, Signal - from PySide6.QtWidgets import QWidget + from PySide6.QtCore import Qt, Signal + from PySide6.QtWidgets import QWidget - class Button(QWidget): + class Button(QWidget): - clicked = Signal(Qt.MouseButton) + clicked = Signal(Qt.MouseButton) - ... + ... - def mousePressEvent(self, event): - self.clicked.emit(event.button()) + def mousePressEvent(self, event): + self.clicked.emit(event.button()) The constructor of ``Signal`` takes a tuple or a list of Python types and C types: - .. code-block:: python +.. code-block:: python - signal1 = Signal(int) # Python types - signal2 = Signal(QUrl) # Qt Types - signal3 = Signal(int, str, int) # more than one type - signal4 = Signal((float,), (QDate,)) # optional types + signal1 = Signal(int) # Python types + signal2 = Signal(QUrl) # Qt Types + signal3 = Signal(int, str, int) # more than one type + signal4 = Signal((float,), (QDate,)) # optional types In addition to that, it can receive also a named argument ``name`` that defines the signal name. If nothing is passed, the new signal will have the same name as the variable that it is being assigned to. - .. code-block:: python +.. code-block:: python - # TODO - signal5 = Signal(int, name='rangeChanged') - # ... - rangeChanged.emit(...) + # TODO + signal5 = Signal(int, name='rangeChanged') + # ... + rangeChanged.emit(...) Another useful option of ``Signal`` is the arguments name, useful for QML applications to refer to the emitted values by name: - .. code-block:: python +.. code-block:: python - sumResult = Signal(int, arguments=['sum']) + sumResult = Signal(int, arguments=['sum']) - .. code-block:: javascript +.. code-block:: javascript - Connections { - target: ... - function onSumResult(sum) { - // do something with 'sum' - } + Connections { + target: ... + function onSumResult(sum) { + // do something with 'sum' + } + + +.. _slot-decorator: The Slot Class -------------- @@ -146,11 +149,11 @@ Slots in QObject-derived classes should be indicated by the decorator ``@QtCore.Slot()``. Again, to define a signature just pass the types similar to the ``QtCore.Signal()`` class. - .. code-block:: python +.. code-block:: python - @Slot(str) - def slot_function(self, s): - ... + @Slot(str) + def slot_function(self, s): + ... ``Slot()`` also accepts a ``name`` and a ``result`` keyword. @@ -159,6 +162,19 @@ Python type. The ``name`` keyword behaves the same way as in ``Signal()``. If nothing is passed as name then the new slot will have the same name as the function that is being decorated. +We recommend marking all methods used by signal connections with a +``@QtCore.Slot()`` decorator. Not doing causes run-time overhead due to the +method being added to the ``QMetaObject`` when creating the connection. This is +particularly important for ``QObject`` classes registered with QML, where +missing decorators can introduce bugs. + +Missing decorators can be diagnosed by setting activating warnings of the +logging category ``qt.pyside.libpyside``; for example by setting the +environment variable: + +.. code-block:: bash + + export QT_LOGGING_RULES="qt.pyside.libpyside.warning=true" .. _overloading-signals-and-slots: @@ -172,62 +188,76 @@ In Qt 6, signals have distinct names for different types. The following example uses two handlers for a Signal and a Slot to showcase the different functionality. - .. code-block:: python +.. code-block:: python - import sys - from PySide6.QtWidgets import QApplication, QPushButton - from PySide6.QtCore import QObject, Signal, Slot + import sys + from PySide6.QtWidgets import QApplication, QPushButton + from PySide6.QtCore import QObject, Signal, Slot - class Communicate(QObject): - # create two new signals on the fly: one will handle - # int type, the other will handle strings - speak = Signal((int,), (str,)) + class Communicate(QObject): + # create two new signals on the fly: one will handle + # int type, the other will handle strings + speak = Signal((int,), (str,)) - def __init__(self, parent=None): - super().__init__(self, parent) + def __init__(self, parent=None): + super().__init__(parent) - self.speak[int].connect(self.say_something) - self.speak[str].connect(self.say_something) + self.speak[int].connect(self.say_something) + self.speak[str].connect(self.say_something) - # define a new slot that receives a C 'int' or a 'str' - # and has 'say_something' as its name - @Slot(int) - @Slot(str) - def say_something(self, arg): - if isinstance(arg, int): - print("This is a number:", arg) - elif isinstance(arg, str): - print("This is a string:", arg) + # define a new slot that receives a C 'int' or a 'str' + # and has 'say_something' as its name + @Slot(int) + @Slot(str) + def say_something(self, arg): + if isinstance(arg, int): + print("This is a number:", arg) + elif isinstance(arg, str): + print("This is a string:", arg) + + if __name__ == "__main__": + app = QApplication(sys.argv) + someone = Communicate() - if __name__ == "__main__": - app = QApplication(sys.argv) - someone = Communicate() + # emit 'speak' signal with different arguments. + # we have to specify the str as int is the default + someone.speak.emit(10) + someone.speak[str].emit("Hello everybody!") - # emit 'speak' signal with different arguments. - # we have to specify the str as int is the default - someone.speak.emit(10) - someone.speak[str].emit("Hello everybody!") +.. _signals-and-slots-strings: Specifying Signals and Slots by Method Signature Strings -------------------------------------------------------- Signals and slots can also be specified as C++ method signature -strings passed through the `SIGNAL()` and/or `SLOT()` functions: +strings passed through the ``SIGNAL()`` and/or ``SLOT()`` functions: + +.. code-block:: python + + from PySide6.QtCore import SIGNAL, SLOT + + button.connect(SIGNAL("clicked(Qt::MouseButton)"), + action_handler, SLOT("action1(Qt::MouseButton)")) + +This is not normally recommended; it is only needed +for a few cases where signals are only accessible via ``QMetaObject`` +(``QAxObject``, ``QAxWidget``, ``QDBusInterface`` or ``QWizardPage::registerField()``): - .. code-block:: python +.. code-block:: python - from PySide6.QtCore import SIGNAL, SLOT + wizard.registerField("text", line_edit, "text", + SIGNAL("textChanged(QString)")) - button.connect(SIGNAL("clicked(Qt::MouseButton)"), - action_handler, SLOT("action1(Qt::MouseButton)")) +The signature strings can be found by querying ``QMetaMethod.methodSignature()`` +when introspecting ``QMetaObject``: -This is not recommended for connecting signals, it is mostly -used to specify signals for methods like `QWizardPage::registerField()`: +.. code-block:: python - .. code-block:: python + mo = widget.metaObject() + for m in range(mo.methodOffset(), mo.methodCount()): + print(mo.method(m).methodSignature()) - wizard.registerField("text", line_edit, "text", - SIGNAL("textChanged(QString)")) +Slots should be decorated using :ref:`@Slot <slot-decorator>`. diff --git a/sources/pyside6/doc/tutorials/basictutorial/translations.rst b/sources/pyside6/doc/tutorials/basictutorial/translations.rst index 31cd004a3..21c16cdcd 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/translations.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/translations.rst @@ -9,10 +9,10 @@ Translating Applications Qt Linguist ----------- -`Qt Linguist <https://doc.qt.io/qt-6/qtlinguist-index.html>`_ and +`Qt Linguist`_ and its related tools can be used to provide translations for applications. -The ``examples/widgets/linguist`` example illustrates this. The example is +The :ref:`qt-linguist-example` example illustrates this. The example is very simple, it has a menu and shows a list of programming languages with multiselection. @@ -28,18 +28,18 @@ The linguist example has a number of messages enclosed in ``self.tr()``. The status bar message shown in response to a selection change uses a plural form depending on a count: - .. code-block:: python +.. code-block:: python - count = len(self._list_widget.selectionModel().selectedRows()) - message = self.tr("%n language(s) selected", "", count) + count = len(self._list_widget.selectionModel().selectedRows()) + message = self.tr("%n language(s) selected", "", count) The translation workflow for the example is as follows: The translated messages are extracted using the ``lupdate`` tool, producing XML-based ``.ts`` files: - .. code-block:: bash +.. code-block:: bash - pyside6-lupdate main.py -ts example_de.ts + pyside6-lupdate main.py -ts example_de.ts If ``example_de.ts`` already exists, it will be updated with the new messages added to the code in-between. @@ -52,15 +52,29 @@ they should be passed to the ``pyside6-lupdate`` tool as well: pyside6-lupdate main.py main.qml form.ui -ts example_de.ts The source files generated by ``pyside6-uic`` from the form files -should `not` be passed. +should **not** be passed. + +The ``lupdate`` mode of ``pyside6-project`` can also be used for this. It +collects all source files and runs ``pyside6-lupdate`` when ``.ts`` file(s) +are given in the ``.pyproject`` file: + +.. code-block:: bash + + pyside6-project lupdate . ``.ts`` files are translated using *Qt Linguist*. Once this is complete, the files are converted to a binary form (``.qm`` files): - .. code-block:: bash +.. code-block:: bash + + pyside6-lrelease example_de.ts -qm example_de.qm + +``pyside6-project`` will build the ``.qm`` file automatically when +``.ts`` file(s) are given in the ``.pyproject`` file: - mkdir translations - pyside6-lrelease example_de.ts -qm translations/example_de.qm +.. code-block:: bash + + pyside6-project build . To avoid having to ship the ``.qm`` files, it is recommend to put them into a Qt resource file along with icons and other @@ -68,43 +82,45 @@ applications resources (see :ref:`using_qrc_files`). The resource file ``linguist.qrc`` provides the ``example_de.qm`` under ``:/translations``: - .. code-block:: xml +.. code-block:: xml - <!DOCTYPE RCC><RCC version="1.0"> - <qresource> - <file>translations/example_de.qm</file> - </qresource> - </RCC> + <!DOCTYPE RCC><RCC version="1.0"> + <qresource prefix="translations"> + <file>example_de.qm</file> + </qresource> + </RCC> At runtime, the translations need to be loaded using the ``QTranslator`` class: - .. code-block:: python +.. code-block:: python - path = QLibraryInfo.location(QLibraryInfo.TranslationsPath) - translator = QTranslator(app) - if translator.load(QLocale.system(), 'qtbase', '_', path): - app.installTranslator(translator) - translator = QTranslator(app) - path = ':/translations' - if translator.load(QLocale.system(), 'example', '_', path): - app.installTranslator(translator) + path = QLibraryInfo.location(QLibraryInfo.TranslationsPath) + translator = QTranslator(app) + if translator.load(QLocale.system(), 'qtbase', '_', path): + app.installTranslator(translator) + translator = QTranslator(app) + path = ':/translations' + if translator.load(QLocale.system(), 'example', '_', path): + app.installTranslator(translator) The code first loads the translations shipped for Qt and then the translations of the applications loaded from resources. The example can then be run in German: - .. code-block:: bash +.. code-block:: bash + + LANG=de python main.py - LANG=de python main.py +.. _Qt Linguist: https://doc.qt.io/qt-6/qtlinguist-index.html GNU gettext ----------- -The `GNU gettext <https://docs.python.org/3/library/gettext.html>`_ module +The `GNU gettext`_ module can be used to provide translations for applications. -The ``examples/widgets/gettext`` example illustrates this. The example is +The :ref:`gettext-example` example illustrates this. The example is very simple, it has a menu and shows a list of programming languages with multiselection. @@ -116,29 +132,29 @@ aliased to ``ngettext``. Those functions are defined at the top: - .. code-block:: python +.. code-block:: python - import gettext - ... - _ = None - ngettext = None + import gettext + # ... + _ = None + ngettext = None and later assigned as follows: - .. code-block:: python - - src_dir = Path(__file__).resolve().parent - try: - translation = gettext.translation('example', localedir=src_dir / 'locales') - if translation: - translation.install() - _ = translation.gettext - ngettext = translation.ngettext - except FileNotFoundError: - pass - if not _: - _ = gettext.gettext - ngettext = gettext.ngettext +.. code-block:: python + + src_dir = Path(__file__).resolve().parent + try: + translation = gettext.translation('example', localedir=src_dir / 'locales') + if translation: + translation.install() + _ = translation.gettext + ngettext = translation.ngettext + except FileNotFoundError: + pass + if not _: + _ = gettext.gettext + ngettext = gettext.ngettext This specifies that our translation file has the base name ``example`` and will be found in the source tree under ``locales``. The code will try @@ -146,18 +162,18 @@ to load a translation matching the current language. Messages to be translated look like: - .. code-block:: python +.. code-block:: python - file_menu = self.menuBar().addMenu(_("&File")) + file_menu = self.menuBar().addMenu(_("&File")) The status bar message shown in response to a selection change uses a plural form depending on a count: - .. code-block:: python +.. code-block:: python - count = len(self._list_widget.selectionModel().selectedRows()) - message = ngettext("{0} language selected", - "{0} languages selected", count).format(count) + count = len(self._list_widget.selectionModel().selectedRows()) + message = ngettext("{0} language selected", + "{0} languages selected", count).format(count) The ``ngettext()`` function takes the singular form, plural form and the count. The returned string still contains the formatting placeholder, so it needs @@ -172,43 +188,45 @@ is first created: xgettext -L Python -o locales/example.pot main.py This file has a few generic placeholders which can be replaced by the -appropriate values. It is then copied to the ``de_DE/LC_MESSAGES`` directory. +appropriate values. It is then copied to the ``de_DE/LC_MESSAGES`` directory. - .. code-block:: bash +.. code-block:: bash - cd locales/de_DE/LC_MESSAGES/ - cp ../../example.pot . + cd locales/de_DE/LC_MESSAGES/ + cp ../../example.pot . Further adaptions need to be made to account for the German plural form and encoding: - .. code-block:: +.. code-block:: - "Project-Id-Version: PySide6 gettext example\n" - "POT-Creation-Date: 2021-07-05 14:16+0200\n" - "Language: de_DE\n" - "MIME-Version: 1.0\n" - "Content-Type: text/plain; charset=UTF-8\n" - "Content-Transfer-Encoding: 8bit\n" - "Plural-Forms: nplurals=2; plural=n != 1;\n" + "Project-Id-Version: PySide6 gettext example\n" + "POT-Creation-Date: 2021-07-05 14:16+0200\n" + "Language: de_DE\n" + "MIME-Version: 1.0\n" + "Content-Type: text/plain; charset=UTF-8\n" + "Content-Transfer-Encoding: 8bit\n" + "Plural-Forms: nplurals=2; plural=n != 1;\n" Below, the translated messages can be given: - .. code-block:: +.. code-block:: - #: main.py:57 - msgid "&File" - msgstr "&Datei" + #: main.py:57 + msgid "&File" + msgstr "&Datei" Finally, the ``.pot`` is converted to its binary form (machine object file, ``.mo``), which needs to be deployed: - .. code-block:: bash +.. code-block:: bash - msgfmt -o example.mo example.pot + msgfmt -o example.mo example.pot The example can then be run in German: - .. code-block:: bash +.. code-block:: bash + + LANG=de python main.py - LANG=de python main.py +.. _GNU gettext: https://docs.python.org/3/library/gettext.html diff --git a/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst index b286de507..f431cb5c4 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst @@ -11,14 +11,14 @@ information in trees. You can also create a data model and display it using a further on. To know more about the Model/View architecture in Qt, refer to its `official documentation <https://doc.qt.io/qt-6/model-view-programming.html>`_. -1. Import ``QTreeWidget`` and ``QTreeWidgetItem`` for this application: +#. Import ``QTreeWidget`` and ``QTreeWidgetItem`` for this application: .. code-block:: python import sys from PySide6.QtWidgets import QApplication, QTreeWidget, QTreeWidgetItem -2. Define a dictionary with project structures to display the information as a +#. Define a dictionary with project structures to display the information as a tree, with files belonging to each project: .. code-block:: python @@ -27,13 +27,13 @@ information in trees. You can also create a data model and display it using a "Project B": ["file_b.csv", "photo.jpg"], "Project C": []} -3. Initialize the ``QApplication`` singleton: +#. Initialize the ``QApplication`` singleton: .. code-block:: python app = QApplication() -4. Configure the ``QTreeWidget`` to have two columns, one for the item name, +#. Configure the ``QTreeWidget`` to have two columns, one for the item name, and the other for item type information of the files in the project directories. You can set the column name with the ``setHeaderLabels`` as described below: @@ -44,7 +44,7 @@ information in trees. You can also create a data model and display it using a tree.setColumnCount(2) tree.setHeaderLabels(["Name", "Type"]) -5. Iterate the data structure, create the ``QTreeWidgetItem`` elements, and add +#. Iterate the data structure, create the ``QTreeWidgetItem`` elements, and add the corresponding children to each parent. We also extract the extension name for only the files and add them into the second column. @@ -64,7 +64,7 @@ information in trees. You can also create a data model and display it using a tree.insertTopLevelItems(0, items) -7. Show the tree and execute the ``QApplication``. +#. Show the tree and execute the ``QApplication``. .. code-block:: python diff --git a/sources/pyside6/doc/tutorials/basictutorial/uifiles.rst b/sources/pyside6/doc/tutorials/basictutorial/uifiles.rst index cd1057c97..cb945908d 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/uifiles.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/uifiles.rst @@ -1,27 +1,27 @@ .. _using_ui_files: -Using `.ui` files from Designer or QtCreator with `QUiLoader` and `pyside6-uic` -******************************************************************************* +Using ``.ui`` files from Designer or QtCreator with ``QUiLoader`` and ``pyside6-uic`` +************************************************************************************* This page describes the use of -`Qt Designer <https://doc.qt.io/qt-6/qtdesigner-manual.html>`_ to create +`Qt Widgets Designer <https://doc.qt.io/qt-6/qtdesigner-manual.html>`_ to create graphical interfaces based on Qt Widgets for your Qt for Python project. -**Qt Designer** is a graphical UI design tool which is available as a +*Qt Widgets Designer* is a graphical UI design tool which is available as a standalone binary (``pyside6-designer``) or embedded into the -`Qt Creator IDE <https://doc.qt.io/qtcreator>`_. Its use within **Qt Creator** +`Qt Creator IDE <https://doc.qt.io/qtcreator>`_. Its use within *Qt Creator* is described at -`Using Qt Designer <https://doc.qt.io/qtcreator/creator-using-qt-designer.html>`_. +`Using Qt Widgets Designer <https://doc.qt.io/qtcreator/creator-using-qt-designer.html>`_. .. image:: uifiles.png :alt: Designer and the equivalent code -The designs are stored in `.ui` files, which is an XML-based format. It will +The designs are stored in ``.ui`` files, which is an XML-based format. It will be converted to Python or C++ code populating a widget instance at project build time by the `pyside6-uic <https://doc.qt.io/qt-6/uic.html>`_ tool. -To create a new Qt Design Form in **Qt Creator**, choose -`File/New File Or Project` and "Main Window" for template. Save it as -`mainwindow.ui`. Add a `QPushButton` to the center of the centralwidget. +To create a new Qt Design Form in *Qt Creator*, choose +``File/New File Or Project`` and "Main Window" for template. Save it as +``mainwindow.ui``. Add a ``QPushButton`` to the center of the centralwidget. Your file ``mainwindow.ui`` should look something like this: @@ -88,12 +88,12 @@ Option A: Generating a Python class =================================== The standard way to interact with a **UI file** is to generate a Python -class from it. This is possible thanks to the `pyside6-uic` tool. +class from it. This is possible thanks to the ``pyside6-uic`` tool. To use this tool, you need to run the following command on a console:: - pyside6-uic mainwindow.ui > ui_mainwindow.py + pyside6-uic mainwindow.ui -o ui_mainwindow.py -We redirect all the output of the command to a file called `ui_mainwindow.py`, +We redirect all the output of the command to a file called ``ui_mainwindow.py``, which will be imported directly:: from ui_mainwindow import Ui_MainWindow @@ -136,7 +136,7 @@ file: .. note:: - You must run `pyside6-uic` again every time you make changes + You must run ``pyside6-uic`` again every time you make changes to the **UI file**. Option B: Loading it directly @@ -149,7 +149,7 @@ module: from PySide6.QtUiTools import QUiLoader -The `QUiLoader` lets us load the **ui file** dynamically +The ``QUiLoader`` lets us load the **ui file** dynamically and use it right away: .. code-block:: python @@ -192,40 +192,41 @@ The complete code of this example looks like this: Then to execute it we just need to run the following on a command prompt: -.. code-block:: python +.. code-block:: bash python main.py .. note:: - `QUiLoader` uses connect() calls taking the function signatures as string + ``QUiLoader`` uses ``connect()`` calls taking the function signatures as string arguments for signal/slot connections. - It is thus unable to handle Python types like `str` or `list` from + It is thus unable to handle Python types like ``str`` or ``list`` from custom widgets written in Python since these types are internally mapped to different C++ types. .. _designer_custom_widgets: -Custom Widgets in Qt Designer -============================= +Custom Widgets in Qt Widgets Designer +===================================== -**Qt Designer** is able to use user-provided (custom) widgets. They are shown -in the widget box and can be dragged onto the form just like Qt's widgets (see -`Using Custom Widgets with Qt Designer <https://doc.qt.io/qt-6/designer-using-custom-widgets.html>`_ -). Normally, this requires implementing the widget as a plugin to Qt Designer -written in C++ implementing its -`QDesignerCustomWidgetInterface <https://doc.qt.io/qt-6/qdesignercustomwidgetinterface.html>`_ . +*Qt Widgets Designer* is able to use user-provided (custom) widgets. +They are shown in the widget box and can be dragged onto the form just like +Qt's widgets (see +`Using Custom Widgets with Qt Widgets Designer <https://doc.qt.io/qt-6/designer-using-custom-widgets.html>`_ +). Normally, this requires implementing the widget as a plugin to +*Qt Widgets Designer* written in C++ implementing its +`QDesignerCustomWidgetInterface`_ . Qt for Python provides a simple interface for this which is similar to :meth:`registerCustomWidget()<PySide6.QtUiTools.QUiLoader.registerCustomWidget>`. The widget needs to be provided as a Python module, as shown by -the widgetbinding example (file ``wigglywidget.py``) or -the taskmenuextension example (file ``tictactoe.py``). +the :ref:`widgetbinding-example` (file ``wigglywidget.py``) or +the :ref:`task-menu-extension-example` (file ``tictactoe.py``). -Registering this with Qt Designer is done by providing +Registering this with *Qt Widgets Designer* is done by providing a registration script named ``register*.py`` and pointing -the path-type environment variable ``PYSIDE_DESIGNER_PLUGINS`` +the path-type environment variable ``PYSIDE_DESIGNER_PLUGINS`` to the directory. The code of the registration script looks as follows: @@ -262,20 +263,20 @@ The code of the registration script looks as follows: QPyDesignerCustomWidgetCollection provides an implementation of -`QDesignerCustomWidgetCollectionInterface <https://doc.qt.io/qt-6/qdesignercustomwidgetcollectioninterface.html>`_ -exposing custom widgets to **Qt Designer** with static convenience functions -for registering types or adding instances of -`QDesignerCustomWidgetInterface <https://doc.qt.io/qt-6/qdesignercustomwidgetinterface.html>`_ . +`QDesignerCustomWidgetCollectionInterface`_ +exposing custom widgets to *Qt Widgets Designer* with static convenience +functions for registering types or adding instances of +`QDesignerCustomWidgetInterface`_ . The function :meth:`registerCustomWidget()<PySide6.QtDesigner.QPyDesignerCustomWidgetCollection.registerCustomWidget>` -is used to register a widget type with **Qt Designer**. In the simple case, it -can be used like `QUiLoader.registerCustomWidget()`. It takes the custom widget +is used to register a widget type with *Qt Widgets Designer*. In the simple case, it +can be used like ``QUiLoader.registerCustomWidget()``. It takes the custom widget type and some optional keyword arguments passing values that correspond to the getters of -`QDesignerCustomWidgetInterface <https://doc.qt.io/qt-6/qdesignercustomwidgetinterface.html>`_ : +`QDesignerCustomWidgetInterface`_ : -When launching **Qt Designer** via its launcher ``pyside6-designer``, +When launching *Qt Widgets Designer* via its launcher ``pyside6-designer``, the custom widget should be visible in the widget box. For advanced usage, it is also possible to pass the function an implementation @@ -286,15 +287,18 @@ is registered for the custom widget. The example is a port of the corresponding C++ `Task Menu Extension Example <https://doc.qt.io/qt-6/qtdesigner-taskmenuextension-example.html>`_ . -Troubleshooting the Qt Designer Plugin -++++++++++++++++++++++++++++++++++++++ +.. _QDesignerCustomWidgetCollectionInterface: https://doc.qt.io/qt-6/qdesignercustomwidgetcollectioninterface.html +.. _QDesignerCustomWidgetInterface: https://doc.qt.io/qt-6/qdesignercustomwidgetinterface.html + +Troubleshooting the Qt Widgets Designer Plugin +++++++++++++++++++++++++++++++++++++++++++++++ - The launcher ``pyside6-designer`` must be used. The standalone - **Qt Designer** will not load the plugin. + *Qt Widgets Designer* will not load the plugin. - The menu item **Help/About Plugin** brings up a dialog showing the plugins found and potential load error messages. - Check the console or Windows Debug view for further error messages. - Due to the buffering of output by Python, error messages may appear - only after **Qt Designer** has terminated. + only after *Qt Widgets Designer* has terminated. - When building Qt for Python, be sure to set the ``--standalone`` option for the plugin to be properly installed. diff --git a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst index e1af8b8a9..2fa51c0a8 100644 --- a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst +++ b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst @@ -23,7 +23,7 @@ to each component. As an example, look at the following simple snippet: w.show() sys.exit(app.exec()) -When you execute this code, you will see a simple `QLabel` aligned at the +When you execute this code, you will see a simple ``QLabel`` aligned at the center, and with a placeholder text. .. image:: widgetstyling-simple-no.png @@ -32,8 +32,8 @@ center, and with a placeholder text. You can style your application using the CSS-like syntax. For more information, see `Qt Style Sheets Reference`_. -A `QLabel` can be styled differently by setting some of its CSS -properties, such as `background-color` and `font-family`, +A ``QLabel`` can be styled differently by setting some of its CSS +properties, such as ``background-color`` and ``font-family``, so let's see how does the code look like with these changes: .. code-block:: python @@ -55,7 +55,7 @@ so let's see how does the code look like with these changes: w.show() sys.exit(app.exec()) -Now when you run the code, notice that the `QLabel` looks different with your +Now when you run the code, notice that the ``QLabel`` looks different with your custom style: .. image:: widgetstyling-simple-yes.png @@ -64,15 +64,15 @@ custom style: .. note:: - If you don't have the font `Titillium` installed, you can try with any + If you don't have the font ``Titillium`` installed, you can try with any other you prefer. - Remember you can list your installed fonts using `QFontDatabase`, - specifically the `families()` method. + Remember you can list your installed fonts using ``QFontDatabase``, + specifically the ``families()`` method. Styling each UI element separately like you did in the previous snippet is a lot of work. The easier alternative for this is to use Qt Style Sheets, -which is one or more `.qss` files defining the style for the UI elements in +which is one or more ``.qss`` files defining the style for the UI elements in your application. More examples can be found in the `Qt Style Sheet Examples`_ documentation @@ -94,7 +94,7 @@ Qt Style Sheets It's recommended to create a full new Qt style to cover all the possible corner cases. -A `qss` file is quite similar to a CSS file, but you need to specify the Widget +A ``qss`` file is quite similar to a CSS file, but you need to specify the Widget component and optionally the name of the object:: QLabel { @@ -105,8 +105,8 @@ component and optionally the name of the object:: font-size: 20px; } -The first style defines a `background-color` for all `QLabel` objects in your -application, whereas the later one styles the `title` object only. +The first style defines a ``background-color`` for all ``QLabel`` objects in your +application, whereas the later one styles the ``title`` object only. .. note:: @@ -115,8 +115,8 @@ application, whereas the later one styles the `title` object only. `label.setObjectName("title")` -Once you have a `qss` file for your application, you can apply it by reading -the file and using the `QApplication.setStyleSheet(str)` function: +Once you have a ``qss`` file for your application, you can apply it by reading +the file and using the ``QApplication.setStyleSheet(str)`` function: .. code-block:: python @@ -132,7 +132,7 @@ the file and using the `QApplication.setStyleSheet(str)` function: sys.exit(app.exec()) -Having a general `qss` file allows you to decouple the styling aspects of +Having a general ``qss`` file allows you to decouple the styling aspects of the code, without mixing it in the middle of the general functionality, and you can simply enable it or disable it. @@ -142,14 +142,14 @@ Look at this new example, with more widgets components: :linenos: :lines: 22-44 -This displays a two column widget, with a `QListWidget` on the left and a -`QLabel` and a `QPushButton` on the right. It looks like this when you run the +This displays a two column widget, with a ``QListWidget`` on the left and a +``QLabel`` and a ``QPushButton`` on the right. It looks like this when you run the code: .. image:: widgetstyling-no.png :alt: Widget with no style -If you add content to the previously described `style.qss` file, you can modify +If you add content to the previously described ``style.qss`` file, you can modify the look-n-feel of the previous example: .. literalinclude:: style.qss @@ -161,7 +161,7 @@ You can also use state-based styling on the QListWidget *items* for example, to style them differently depending on whether they are *selected* or not. After applying all the styling alternatives you explored in this topic, notice -that the `QLabel` example looks a lot different now. +that the ``QLabel`` example looks a lot different now. Try running the code to check its new look: .. image:: widgetstyling-yes.png diff --git a/sources/pyside6/doc/tutorials/datavisualize/index.rst b/sources/pyside6/doc/tutorials/datavisualize/index.rst index 44226e779..35b56706a 100644 --- a/sources/pyside6/doc/tutorials/datavisualize/index.rst +++ b/sources/pyside6/doc/tutorials/datavisualize/index.rst @@ -26,5 +26,6 @@ visualize data from a CSV in a line chart. add_chart* plot* -You can download the sources from :download:`here <datavisualize.tar.bz2>`. +You can download the sources from `here`_. +.. _here: https://code.qt.io/cgit/pyside/pyside-setup.git/tree/sources/pyside6/doc/tutorials/datavisualize diff --git a/sources/pyside6/doc/tutorials/debugging/mixed_debugging.rst b/sources/pyside6/doc/tutorials/debugging/mixed_debugging.rst index 82b34d919..85c326347 100644 --- a/sources/pyside6/doc/tutorials/debugging/mixed_debugging.rst +++ b/sources/pyside6/doc/tutorials/debugging/mixed_debugging.rst @@ -5,10 +5,10 @@ When debugging PySide code, very often you would also like to debug the corresponding C++ extension of the PySide module. This is done by attaching your debugger to the Python interpreter. In this tutorial, we are going to take you through a comprehensive guide in building Qt 6, using the built Qt 6 to build -PySide6, and then starting a debugging process in either Qt Creator or VSCode. +PySide6, and then starting a debugging process in either *Qt Creator* or VSCode. With VSCode, you should be able to see the combined call stacks for both C++ and -Python together. With Qt Creator, unfortunately you would only be able to +Python together. With *Qt Creator*, unfortunately you would only be able to debug the native C++ code of the PySide module; that is you won't be able to set breakpoints inside the Python code. @@ -74,7 +74,7 @@ Find the build system information `Qt 6 Build System .. code-block:: bash - cmake -GNinja -DMCAKE_BUILD_TYPE=Debug \ + cmake -GNinja -DCMAKE_BUILD_TYPE=Debug \ -DCMAKE_INSTALL_PREFIX=/path/to/install/Qt -DBUILD_qtwebengine=OFF .. cmake --build . --parallel cmake --install . @@ -101,7 +101,7 @@ Build PySide6 using the Qt 6 that you built earlier ---------------------------------------------------- Follow the steps mentioned `Getting Started - Qt for Python -<https://doc.qt.io/qtforpython/gettingstarted.html>`_ +<https://doc.qt.io/qtforpython/gettingstarted/index.html>`_ You may manually select the modules to install using the ``--module-subset`` cli argument for `setup.py`. This was my installation script @@ -116,7 +116,7 @@ It is recommended to use a Python virtual environment rather than installing in Debugging the process using your preferred IDE ---------------------------------------------- -The following sections guide you through the setup for Qt Creator or VSCode. +The following sections guide you through the setup for *Qt Creator* or VSCode. .. toctree:: :glob: diff --git a/sources/pyside6/doc/tutorials/debugging/qml_debugging.rst b/sources/pyside6/doc/tutorials/debugging/qml_debugging.rst new file mode 100644 index 000000000..223e608fc --- /dev/null +++ b/sources/pyside6/doc/tutorials/debugging/qml_debugging.rst @@ -0,0 +1,32 @@ +Using Qt Creator's QML Debugger for a PySide6 QML Application +************************************************************* + +Besides the C++ debugger, *Qt Creator* provides a `QML debugger`_ which lets you +inspect JavaScript code. It works by connecting to a socket server run by the +``QmlEngine`` instance. The port is passed on the command line. To enable it, +add the below code to your QML application: + +.. code-block:: python + + from argparse import ArgumentParser, RawTextHelpFormatter + + ... + + if __name__ == "__main__": + argument_parser = ArgumentParser(...) + argument_parser.add_argument("-qmljsdebugger", action="store", + help="Enable QML debugging") + options = argument_parser.parse_args() + if options.qmljsdebugger: + QQmlDebuggingEnabler.enableDebugging(True) + app = QApplication(sys.argv) + + +For instructions on how to use the QML debugger, see +`Debugging a Qt Quick Example Application`_. + +.. note:: The code should be removed or disabled when shipping the application + as it poses a security risk. + +.. _`QML debugger`: https://doc.qt.io/qtcreator/creator-debugging-qml.html +.. _`Debugging a Qt Quick Example Application`: https://doc.qt.io/qtcreator/creator-qml-debugging-example.html diff --git a/sources/pyside6/doc/tutorials/debugging/qtcreator/qtcreator.rst b/sources/pyside6/doc/tutorials/debugging/qtcreator/qtcreator.rst index c8c9fb8ae..a78a67fad 100644 --- a/sources/pyside6/doc/tutorials/debugging/qtcreator/qtcreator.rst +++ b/sources/pyside6/doc/tutorials/debugging/qtcreator/qtcreator.rst @@ -1,9 +1,9 @@ Debugging PySide with Qt Creator (Linux) **************************************** -As opposed to VSCode, presently Qt Creator does not support mixed mode debugging. +As opposed to VSCode, presently *Qt Creator* does not support mixed mode debugging. However, we can debug the C++ implementation of the corresponding Python PySide -code. Unlike VSCode, Qt Creator provides a very easy interface to attach GDB to +code. Unlike VSCode, *Qt Creator* provides a very easy interface to attach GDB to the Python interpreter. It saves you from doing all the extra configuration steps, that have to be done with VSCode. @@ -14,26 +14,26 @@ Here are the steps: 2. Go to Projects -> Run -> Run Configuration -> Add. This is going to open a new window shown below. - .. image:: custom_executable_create.png - :alt: creation of custom executable - :align: center + .. image:: custom_executable_create.png + :alt: creation of custom executable + :align: center 3. Click on Custom Executable and `Create` a new configuration. Feed in the -details like shown below. + details like shown below. - .. image:: custom_executable_run_config.png - :alt: run configuration of custom executable - :align: center + .. image:: custom_executable_run_config.png + :alt: run configuration of custom executable + :align: center 4. Debug -> Start Debugging -> Start Debugging Without Deployment. - .. image:: start_debugging_without_deployment.png - :alt: start debugging without deployment - :align: center + .. image:: start_debugging_without_deployment.png + :alt: start debugging without deployment + :align: center You will now hit you breakpoint and can start debugging your code. - .. image:: breakpoint_cpp.png - :alt: breakpoint cpp - :align: center +.. image:: breakpoint_cpp.png + :alt: breakpoint cpp + :align: center diff --git a/sources/pyside6/doc/tutorials/debugging/vscode/python_set_interpreter.png b/sources/pyside6/doc/tutorials/debugging/vscode/python_set_interpreter.png Binary files differnew file mode 100644 index 000000000..1a26c9d9c --- /dev/null +++ b/sources/pyside6/doc/tutorials/debugging/vscode/python_set_interpreter.png diff --git a/sources/pyside6/doc/tutorials/debugging/vscode/vscode.rst b/sources/pyside6/doc/tutorials/debugging/vscode/vscode.rst index 2563b4377..b2a527b0e 100644 --- a/sources/pyside6/doc/tutorials/debugging/vscode/vscode.rst +++ b/sources/pyside6/doc/tutorials/debugging/vscode/vscode.rst @@ -1,20 +1,42 @@ -Debugging PySide with VSCode (Linux) -************************************ +Debugging PySide with VSCode (Linux + Windows) +********************************************** VSCode enables you to use more than one debugger in a single debugging session. -This means that we can use GDB and Python PDB in a single session. With VSCode -you would be able to do the following: +This means that we can use Python PDB and GDB (or the MSVC debugger for Windows) +in a single session. With VSCode you would be able to do the following: * See the call stacks for both Python and C++ together. * Put breakpoints in both the Python and the C++ code. * Step from Python to C++ code and vice versa. +For Windows, see :ref:`creating_windows_debug_builds`. + Let's get started with setting up everything and debugging a Python process. +Setting the Python interpreter +------------------------------ + +In order to debug Python code, it is necessary to set the correct Python +interpreter in VSCode - this will ensure that all Python integrations of VSCode +use the same interpreter. However, this does not affect C++ debugging, and the +Python executable path must be set for the corresponding launch target +separately (see the section below). + +To set the Python interpreter, open a Python file and click the corresponding +option on the right side of the VSCode status bar, which should look similar to +this: + +.. image:: python_set_interpreter.png + :alt: set Python interpreter + :align: center + +Alternatively, open the VSCode command palette (F1 or Ctrl + Shift + P) and +search for "Python: Select Interpreter". + Creating Configurations in launch.json -------------------------------------- -Run -> Add Configuration -> Python -> Python File +``Run -> Add Configuration -> Python -> Python File`` This should create a launch.json file which looks like this: @@ -36,13 +58,22 @@ This should create a launch.json file which looks like this: ] } -It should already consist of a configuration named "Python: Current File", which -allows us to debug the current open Python file. With a Python virtual -environment, make sure to change the value of "program" to refer to the path of the Python -interpreter inside the virtual environment. +It should already consist of a configuration named "Python: Current File", +which allows us to debug the current open Python file. + +Now, we need to add a configuration to attach the C++ debugger to the Python +process that is already running in debug mode. If you have the C/C++ extension +installed and the appropriate debugger for your system, VSCode should be able +to automatically offer to add a configuration. On Linux, this is suggested with +the name + +* "C/C++: (gdb) Attach" + +and on Windows with the name + +* "C/C++: (Windows) Attach" -Now, we need to add a configuration to attach the GDB debugger to the Python -process that is already running in debug mode. Let's call it "(gdb) Attach" +Your launch.json should now look like this on Linux: .. code-block:: javascript @@ -58,7 +89,8 @@ process that is already running in debug mode. Let's call it "(gdb) Attach" "request": "launch", "program": "${file}", "console": "integratedTerminal" - }, { + }, + { "name": "(gdb) Attach", "type": "cppdbg", "request": "attach", @@ -75,8 +107,35 @@ process that is already running in debug mode. Let's call it "(gdb) Attach" ] } -Here also make sure that the value of "program" refers to your Python interpreter. We need the -processId to attach the gdb debugger to the process. With +And like this on Windows: + +.. code-block:: javascript + + { + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Python: Current File", + "type": "python", + "request": "launch", + "program": "${file}", + "console": "integratedTerminal" + }, + { + "name": "(Windows) Attach", + "type": "cppvsdbg", + "request": "attach", + "processId": "${command:pickProcess}", + } + ] + } + +For Linux, also make sure that the value of "program" refers to your Python +interpreter inside your virtual environment (for Windows this is not needed). +We need the processId to attach the gdb debugger to the process. With "${command:pickProcess}", we find the processId on the go, as we will see later. Now, we are ready to debug. @@ -86,51 +145,48 @@ Debug The Process 1. Set a breakpoint in the Python code. -2. Go to `Run And Debug` (Ctrl + Shift + D) and run the "python: Current File" - by clicking the run symbol (green right-arrow). This will hit the breakpoint and - will halt the Python debugger. +2. Go to ``Run And Debug`` (Ctrl + Shift + D) and run the "Python: Current File" + by clicking the run symbol (green right-arrow). This will hit the breakpoint + and will halt the Python debugger. -3. Using the drop-down menu change from "python: - Current File" to "(gdb) Attach". Your setup should now look like this. +3. Using the drop-down menu change from "Python: + Current File" to "(gdb) Attach" or "(Windows) Attach". Your setup should now + look like this. - .. image:: breakpoint_gdb.png - :alt: breakpoint before attach gdb - :align: center + .. image:: breakpoint_gdb.png + :alt: breakpoint before attach gdb + :align: center -4. Run "(gdb) Attach" and this should ask you for the processId of the Python - process to which you want to attach gdb. VSCode also lets you to search for the - process by its name. .. tip:: You can find the processId by running `ps aux | - grep python` +4. Run "(gdb) Attach" or "(Windows) Attach" and this should ask you for the + processId of the Python process to which you want to attach the C++ debugger. + VSCode also lets you search for the process by its name. - .. image:: find_process_gdb.png - :alt: find process vscode - :align: center + .. tip:: You can find the processId by running ``ps aux | grep python`` -5. VSCode will now ask you for superuser permissions. Type 'y' and enter your - password. + .. image:: find_process_gdb.png + :alt: find process vscode + :align: center - .. code-block:: bash +5. VSCode might now ask you for superuser permissions. In that case, type 'y' + and enter your password. - Superuser access is required to attach to a process. Attaching as - superuser can potentially harm your computer. Do you want to continue? - [y/N]_ + .. code-block:: bash + + Superuser access is required to attach to a process. Attaching as + superuser can potentially harm your computer. Do you want to continue? + [y/N]_ 6. That is it. You should now be able to hit the breakpoints that you have set on the C++ counterparts. - .. figure:: audioformat_wrapper.png - :alt: Breakpoint set on the shiboken wrapper class - :align: left - - Breakpoint set on the shiboken wrapper class - - .. figure:: audioformat_cpp.png - :alt: Breakpoint set on C++ implementation - :align: left - - Breakpoint set on C++ implementation - - + .. figure:: audioformat_wrapper.png + :alt: Breakpoint set on the shiboken wrapper class + :align: left + Breakpoint set on the shiboken wrapper class + .. figure:: audioformat_cpp.png + :alt: Breakpoint set on C++ implementation + :align: left + Breakpoint set on C++ implementation diff --git a/sources/pyside6/doc/tutorials/expenses/expenses.rst b/sources/pyside6/doc/tutorials/expenses/expenses.rst index c8ae5c034..2064488ae 100644 --- a/sources/pyside6/doc/tutorials/expenses/expenses.rst +++ b/sources/pyside6/doc/tutorials/expenses/expenses.rst @@ -20,9 +20,9 @@ The requirements: (`QPushButton <https://doc.qt.io/qtforpython/PySide6/QtWidgets/QPushButton.html>`_). * A verification step to avoid invalid data entry. * A chart to visualize the expense data - (`QChart <https://doc.qt.io/qtforpython/PySide6/QtCharts/QtCharts.QChart.html>`_) that will + (`QChart <https://doc.qt.io/qtforpython/PySide6/QtCharts/QChart.html>`_) that will be embedded in a chart view - (`QChartView <https://doc.qt.io/qtforpython/PySide6/QtCharts/QtCharts.QChartView.html>`_). + (`QChartView <https://doc.qt.io/qtforpython/PySide6/QtCharts/QChartView.html>`_). Empty window ------------ @@ -33,10 +33,10 @@ code block. .. code-block:: python :linenos: - if __name__ == "__main__": - app = QApplication([]) - # ... - sys.exit(app.exec()) + if __name__ == "__main__": + app = QApplication([]) + # ... + sys.exit(app.exec()) Now, to start the development, create an empty window called `MainWindow`. You could do that by defining a class that inherits from `QMainWindow`. @@ -56,45 +56,18 @@ Now that our class is defined, create an instance of it and call `show()`. Menu bar -------- -Using a `QMainWindow` gives some features for free, among them a *menu bar*. To use it, you need +Using a `QMainWindow` gives some features for free, among them a *menu bar*. To use it, you need to call the method `menuBar()` and populate it inside the `MainWindow` class. .. literalinclude:: steps/02-expenses.py :linenos: - :lines: 9-21 - :emphasize-lines: 6 + :lines: 9-19 + :emphasize-lines: 10 Notice that the code snippet adds a *File* menu with the *Exit* option only. -First signal/slot connection ----------------------------- - -The *Exit* option must be connected to a slot that triggers the application to exit. The main -idea to achieve this, is the following: - -.. code-block:: python - - element.signal_name.connect(slot_name) - -All the interface's elements could be connected through signals to certain slots, -in the case of a `QAction`, the signal `triggered` can be used: - -.. code-block:: python - - exit_action.triggered.connect(slot_name) - -.. note:: Now a *slot* needs to be defined to exit the application, which can be done using - `QApplication.quit()`. If we put all these concepts together you will end up with the - following code: - -.. literalinclude:: steps/03-expenses.py - :linenos: - :lines: 19-28 - :emphasize-lines: 4, 8-10 - -Notice that the decorator `@Slot()` is required for each slot you declare to properly -register them. Slots are normal functions, but the main difference is that they -will be invokable from `Signals` of QObjects when connected. +The *Exit* option must be connected to a slot that triggers the application to exit. We pass +``QWidget.close()`` here. After the last window has been closed, the application exits. Empty widget and data --------------------- @@ -107,13 +80,13 @@ Additionally, you will define example data to visualize later. .. literalinclude:: steps/04-expenses.py :linenos: - :lines: 9-16 + :lines: 8-15 With the `Widget` class in place, modify `MainWindow`'s initialization code .. literalinclude:: steps/04-expenses.py :linenos: - :lines: 43-47 + :lines: 37-40 Window layout ------------- @@ -121,7 +94,7 @@ Window layout Now that the main empty window is in place, you need to start adding widgets to achieve the main goal of creating an expenses application. -After declaring the example data, you can visualize it on a simple `QTableWidget`. To do so, you +After declaring the example data, you can visualize it on a simple `QTableWidget`. To do so, you will add this procedure to the `Widget` constructor. .. warning:: Only for the example purpose a QTableWidget will be used, @@ -130,7 +103,7 @@ will add this procedure to the `Widget` constructor. .. literalinclude:: steps/05-expenses.py :linenos: - :lines: 11-36 + :lines: 11-31 As you can see, the code also includes a `QHBoxLayout` that provides the container to place widgets horizontally. @@ -143,7 +116,7 @@ displayed below. .. literalinclude:: steps/05-expenses.py :linenos: - :lines: 38-44 + :lines: 33-39 Having this process on a separate method is a good practice to leave the constructor more readable, and to split the main functions of the class in independent processes. @@ -156,8 +129,8 @@ Because the data that is being used is just an example, you are required to incl input items to the table, and extra buttons to clear the table's content, and also quit the application. -To distribute these input lines and buttons, you will use a `QVBoxLayout` that allows you to place -elements vertically inside a layout. +For input lines along with descriptive labels, you will use a `QFormLayout`. Then, +you will nest the form layout into a `QVBoxLayout` along with the buttons. .. literalinclude:: steps/06-expenses.py :linenos: @@ -169,7 +142,7 @@ example: .. literalinclude:: steps/06-expenses.py :linenos: - :lines: 5-10 + :lines: 45-48 The next step will be connecting those new buttons to slots. @@ -183,17 +156,19 @@ documentation <https://doc.qt.io/qtforpython/PySide6/QtWidgets/QAbstractButton.h .. literalinclude:: steps/07-expenses.py :linenos: - :lines: 55-58 + :lines: 50-52 As you can see on the previous lines, we are connecting each *clicked* signal to different slots. In this example slots are normal class methods in charge of perform a determined task associated -with our buttons. It is really important to decorate each method declaration with a `@Slot()`, in -that way PySide6 knows internally how to register them into Qt. +with our buttons. It is really important to decorate each method declaration with a `@Slot()`, +that way, PySide6 knows internally how to register them into Qt and they +will be invokable from `Signals` of QObjects when connected. + .. literalinclude:: steps/07-expenses.py :linenos: - :lines: 63-92 - :emphasize-lines: 2,16,28 + :lines: 57-82 + :emphasize-lines: 1, 23 Since these slots are methods, we can access the class variables, like our `QTableWidget` to interact with it. @@ -216,24 +191,21 @@ Verification step Adding information to the table needs to be a critical action that require a verification step to avoid adding invalid information, for example, empty information. -You can use a signal from `QLineEdit` called *textChanged[str]* which will be emitted every +You can use a signal from `QLineEdit` called *textChanged* which will be emitted every time something inside changes, i.e.: each key stroke. -Notice that this time, there is a *[str]* section on the signal, this means that the signal -will also emit the value of the text that was changed, which will be really useful to verify -the current content of the `QLineEdit`. You can connect two different object's signal to the same slot, and this will be the case for your current application: .. literalinclude:: steps/08-expenses.py :linenos: - :lines: 62-63 + :lines: 57-58 The content of the *check_disable* slot will be really simple: .. literalinclude:: steps/08-expenses.py :linenos: - :lines: 82-87 + :lines: 77-80 You have two options, write a verification based on the current value of the string you retrieve, or manually get the whole content of both @@ -255,15 +227,15 @@ side of your application. .. literalinclude:: steps/09-expenses.py :linenos: - :lines: 29-31 + :lines: 30-32 Additionally the order of how you include widgets to the right `QVBoxLayout` will also change. .. literalinclude:: steps/09-expenses.py :linenos: - :lines: 44-54 - :emphasize-lines: 9 + :lines: 46-54 + :emphasize-lines: 8 Notice that before we had a line with `self.right.addStretch()` to fill up the vertical space between the *Add* and the *Clear* buttons, @@ -279,8 +251,8 @@ to a slot that creates a chart and includes it into your `QChartView`. .. literalinclude:: steps/10-expenses.py :linenos: - :lines: 66-72 - :emphasize-lines: 6 + :lines: 62-67 + :emphasize-lines: 3 That is nothing new, since you already did it for the other buttons, but now take a look at how to create a chart and include it into @@ -288,7 +260,7 @@ your `QChartView`. .. literalinclude:: steps/10-expenses.py :linenos: - :lines: 102-114 + :lines: 95-107 The following steps show how to fill a `QPieSeries`: diff --git a/sources/pyside6/doc/tutorials/expenses/main.py b/sources/pyside6/doc/tutorials/expenses/main.py index 3c22eff34..a3a998470 100644 --- a/sources/pyside6/doc/tutorials/expenses/main.py +++ b/sources/pyside6/doc/tutorials/expenses/main.py @@ -3,16 +3,17 @@ import sys from PySide6.QtCore import Qt, Slot -from PySide6.QtGui import QAction, QPainter -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, +from PySide6.QtGui import QPainter +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, + QPushButton, QTableWidget, QTableWidgetItem, QVBoxLayout, QWidget) from PySide6.QtCharts import QChartView, QPieSeries, QChart class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -32,43 +33,38 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) + self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") self.plot = QPushButton("Plot") # Disabling 'Add' button self.add.setEnabled(False) + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addWidget(self.plot) self.right.addWidget(self.chart_view) self.right.addWidget(self.clear) - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Signals and Slots self.add.clicked.connect(self.add_element) - self.quit.clicked.connect(self.quit_application) self.plot.clicked.connect(self.plot_data) self.clear.clicked.connect(self.clear_table) - self.description.textChanged[str].connect(self.check_disable) - self.price.textChanged[str].connect(self.check_disable) + self.description.textChanged.connect(self.check_disable) + self.price.textChanged.connect(self.check_disable) # Fill example data self.fill_table() @@ -76,32 +72,25 @@ class Widget(QWidget): @Slot() def add_element(self): des = self.description.text() - price = self.price.text() - - try: - price_item = QTableWidgetItem(f"{float(price):.2f}") - price_item.setTextAlignment(Qt.AlignRight) - - self.table.insertRow(self.items) - description_item = QTableWidgetItem(des) + price = float(self.price.text()) - self.table.setItem(self.items, 0, description_item) - self.table.setItem(self.items, 1, price_item) + self.table.insertRow(self.items) + description_item = QTableWidgetItem(des) + price_item = QTableWidgetItem(f"{price:.2f}") + price_item.setTextAlignment(Qt.AlignRight) - self.description.setText("") - self.price.setText("") + self.table.setItem(self.items, 0, description_item) + self.table.setItem(self.items, 1, price_item) - self.items += 1 - except ValueError: - print("Wrong price", price) + self.description.clear() + self.price.clear() + self.items += 1 @Slot() def check_disable(self, s): - if not self.description.text() or not self.price.text(): - self.add.setEnabled(False) - else: - self.add.setEnabled(True) + enabled = bool(self.description.text() and self.price.text()) + self.add.setEnabled(enabled) @Slot() def plot_data(self): @@ -117,10 +106,6 @@ class Widget(QWidget): chart.legend().setAlignment(Qt.AlignLeft) self.chart_view.setChart(chart) - @Slot() - def quit_application(self): - QApplication.quit() - def fill_table(self, data=None): data = self._data if not data else data for desc, price in data.items(): @@ -140,7 +125,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -148,17 +133,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/main_snake_prop.py b/sources/pyside6/doc/tutorials/expenses/main_snake_prop.py index 3f8f6f061..055544409 100644 --- a/sources/pyside6/doc/tutorials/expenses/main_snake_prop.py +++ b/sources/pyside6/doc/tutorials/expenses/main_snake_prop.py @@ -61,7 +61,7 @@ class Widget(QWidget): #self.table_view.setSizePolicy(size) self.layout.add_widget(self.table) - self.layout.add_layout(self.right) + self.layout.form_layout(self.right) # Set the layout to the QWidget self.set_layout(self.layout) diff --git a/sources/pyside6/doc/tutorials/expenses/steps/01-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/01-expenses.py index 0db8c60e7..27f2aef65 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/01-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/01-expenses.py @@ -7,7 +7,7 @@ from PySide6.QtWidgets import QApplication, QMainWindow class MainWindow(QMainWindow): def __init__(self): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") if __name__ == "__main__": diff --git a/sources/pyside6/doc/tutorials/expenses/steps/02-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/02-expenses.py index 142aff4c8..039b818df 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/02-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/02-expenses.py @@ -2,13 +2,12 @@ # SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import sys -from PySide6.QtGui import QAction from PySide6.QtWidgets import QApplication, QMainWindow class MainWindow(QMainWindow): def __init__(self): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -16,11 +15,9 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - self.file_menu.addAction(exit_action) - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/03-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/03-expenses.py index 7fd6f5014..039b818df 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/03-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/03-expenses.py @@ -2,14 +2,12 @@ # SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import sys -from PySide6.QtCore import Slot -from PySide6.QtGui import QAction from PySide6.QtWidgets import QApplication, QMainWindow class MainWindow(QMainWindow): def __init__(self): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -17,15 +15,8 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - - self.file_menu.addAction(exit_action) - - @Slot() - def exit_app(self, checked): - QApplication.quit() if __name__ == "__main__": diff --git a/sources/pyside6/doc/tutorials/expenses/steps/04-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/04-expenses.py index f907d31cf..6723690a8 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/04-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/04-expenses.py @@ -2,14 +2,12 @@ # SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import sys -from PySide6.QtCore import Slot -from PySide6.QtGui import QAction from PySide6.QtWidgets import QApplication, QMainWindow, QWidget class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() # Example data self._data = {"Water": 24.5, "Electricity": 55.1, "Rent": 850.0, @@ -19,7 +17,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -27,17 +25,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/05-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/05-expenses.py index 753bc89d5..df0362fde 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/05-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/05-expenses.py @@ -2,15 +2,14 @@ # SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import sys -from PySide6.QtCore import Slot -from PySide6.QtGui import QAction -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QMainWindow, - QTableWidget, QTableWidgetItem, QWidget) +from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, + QMainWindow, QTableWidget, QTableWidgetItem, + QWidget) class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -25,14 +24,9 @@ class Widget(QWidget): self.table.horizontalHeader().setSectionResizeMode(QHeaderView.Stretch) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Fill example data self.fill_table() @@ -47,7 +41,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -55,17 +49,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/06-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/06-expenses.py index e9abf6a28..d19a6220f 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/06-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/06-expenses.py @@ -2,16 +2,15 @@ # SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause import sys -from PySide6.QtCore import Slot -from PySide6.QtGui import QAction -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, - QVBoxLayout, QWidget) +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, QPushButton, + QTableWidget, QTableWidgetItem, QVBoxLayout, + QWidget) class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -27,31 +26,27 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) + self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addStretch() self.right.addWidget(self.clear) - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Fill example data self.fill_table() @@ -66,7 +61,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -74,17 +69,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/07-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/07-expenses.py index 10b83f2f6..b1ed3fecc 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/07-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/07-expenses.py @@ -3,15 +3,15 @@ import sys from PySide6.QtCore import Slot -from PySide6.QtGui import QAction -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, - QVBoxLayout, QWidget) +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, QPushButton, + QTableWidget, QTableWidgetItem, QVBoxLayout, + QWidget) class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -27,33 +27,28 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) + self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addStretch() - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Signals and Slots self.add.clicked.connect(self.add_element) - self.quit.clicked.connect(self.quit_application) self.clear.clicked.connect(self.clear_table) # Fill example data @@ -68,15 +63,11 @@ class Widget(QWidget): self.table.setItem(self.items, 0, QTableWidgetItem(des)) self.table.setItem(self.items, 1, QTableWidgetItem(price)) - self.description.setText("") - self.price.setText("") + self.description.clear() + self.price.clear() self.items += 1 - @Slot() - def quit_application(self): - QApplication.quit() - def fill_table(self, data=None): data = self._data if not data else data for desc, price in data.items(): @@ -93,7 +84,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -101,17 +92,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/08-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/08-expenses.py index 1979bd6b8..0e7e21a32 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/08-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/08-expenses.py @@ -3,15 +3,15 @@ import sys from PySide6.QtCore import Slot -from PySide6.QtGui import QAction -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, - QVBoxLayout, QWidget) +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, QPushButton, + QTableWidget, QTableWidgetItem, QVBoxLayout, + QWidget) class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -27,40 +27,35 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) + self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") # Disabling 'Add' button self.add.setEnabled(False) + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addStretch() self.right.addWidget(self.clear) - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Signals and Slots self.add.clicked.connect(self.add_element) - self.quit.clicked.connect(self.quit_application) self.clear.clicked.connect(self.clear_table) - self.description.textChanged[str].connect(self.check_disable) - self.price.textChanged[str].connect(self.check_disable) + self.description.textChanged.connect(self.check_disable) + self.price.textChanged.connect(self.check_disable) # Fill example data self.fill_table() @@ -74,21 +69,15 @@ class Widget(QWidget): self.table.setItem(self.items, 0, QTableWidgetItem(des)) self.table.setItem(self.items, 1, QTableWidgetItem(price)) - self.description.setText("") - self.price.setText("") + self.description.clear() + self.price.clear() self.items += 1 @Slot() def check_disable(self, s): - if not self.description.text() or not self.price.text(): - self.add.setEnabled(False) - else: - self.add.setEnabled(True) - - @Slot() - def quit_application(self): - QApplication.quit() + enabled = bool(self.description.text() and self.price.text()) + self.add.setEnabled(enabled) def fill_table(self, data=None): data = self._data if not data else data @@ -106,7 +95,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -114,17 +103,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/09-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/09-expenses.py index d06f96135..279a46512 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/09-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/09-expenses.py @@ -3,16 +3,17 @@ import sys from PySide6.QtCore import Slot -from PySide6.QtGui import QAction, QPainter -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, +from PySide6.QtGui import QPainter +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, + QPushButton, QTableWidget, QTableWidgetItem, QVBoxLayout, QWidget) from PySide6.QtCharts import QChartView class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -32,42 +33,37 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") self.plot = QPushButton("Plot") # Disabling 'Add' button self.add.setEnabled(False) + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addWidget(self.plot) self.right.addWidget(self.chart_view) self.right.addWidget(self.clear) - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() + self.layout = QHBoxLayout(self) - #self.table_view.setSizePolicy(size) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Signals and Slots self.add.clicked.connect(self.add_element) - self.quit.clicked.connect(self.quit_application) self.clear.clicked.connect(self.clear_table) - self.description.textChanged[str].connect(self.check_disable) - self.price.textChanged[str].connect(self.check_disable) + self.description.textChanged.connect(self.check_disable) + self.price.textChanged.connect(self.check_disable) # Fill example data self.fill_table() @@ -81,21 +77,15 @@ class Widget(QWidget): self.table.setItem(self.items, 0, QTableWidgetItem(des)) self.table.setItem(self.items, 1, QTableWidgetItem(price)) - self.description.setText("") - self.price.setText("") + self.description.clear() + self.price.clear() self.items += 1 @Slot() def check_disable(self, s): - if not self.description.text() or not self.price.text(): - self.add.setEnabled(False) - else: - self.add.setEnabled(True) - - @Slot() - def quit_application(self): - QApplication.quit() + enabled = bool(self.description.text() and self.price.text()) + self.add.setEnabled(enabled) def fill_table(self, data=None): data = self._data if not data else data @@ -113,7 +103,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -121,17 +111,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/expenses/steps/10-expenses.py b/sources/pyside6/doc/tutorials/expenses/steps/10-expenses.py index bbed5c389..a3a998470 100644 --- a/sources/pyside6/doc/tutorials/expenses/steps/10-expenses.py +++ b/sources/pyside6/doc/tutorials/expenses/steps/10-expenses.py @@ -3,16 +3,17 @@ import sys from PySide6.QtCore import Qt, Slot -from PySide6.QtGui import QAction, QPainter -from PySide6.QtWidgets import (QApplication, QHeaderView, QHBoxLayout, QLabel, QLineEdit, - QMainWindow, QPushButton, QTableWidget, QTableWidgetItem, +from PySide6.QtGui import QPainter +from PySide6.QtWidgets import (QApplication, QFormLayout, QHeaderView, + QHBoxLayout, QLineEdit, QMainWindow, + QPushButton, QTableWidget, QTableWidgetItem, QVBoxLayout, QWidget) from PySide6.QtCharts import QChartView, QPieSeries, QChart class Widget(QWidget): def __init__(self): - QWidget.__init__(self) + super().__init__() self.items = 0 # Example data @@ -32,43 +33,38 @@ class Widget(QWidget): # Right self.description = QLineEdit() + self.description.setClearButtonEnabled(True) self.price = QLineEdit() + self.price.setClearButtonEnabled(True) + self.add = QPushButton("Add") self.clear = QPushButton("Clear") - self.quit = QPushButton("Quit") self.plot = QPushButton("Plot") # Disabling 'Add' button self.add.setEnabled(False) + form_layout = QFormLayout() + form_layout.addRow("Description", self.description) + form_layout.addRow("Price", self.price) self.right = QVBoxLayout() - self.right.addWidget(QLabel("Description")) - self.right.addWidget(self.description) - self.right.addWidget(QLabel("Price")) - self.right.addWidget(self.price) + self.right.addLayout(form_layout) self.right.addWidget(self.add) self.right.addWidget(self.plot) self.right.addWidget(self.chart_view) self.right.addWidget(self.clear) - self.right.addWidget(self.quit) # QWidget Layout - self.layout = QHBoxLayout() - - #self.table_view.setSizePolicy(size) + self.layout = QHBoxLayout(self) self.layout.addWidget(self.table) self.layout.addLayout(self.right) - # Set the layout to the QWidget - self.setLayout(self.layout) - # Signals and Slots self.add.clicked.connect(self.add_element) - self.quit.clicked.connect(self.quit_application) self.plot.clicked.connect(self.plot_data) self.clear.clicked.connect(self.clear_table) - self.description.textChanged[str].connect(self.check_disable) - self.price.textChanged[str].connect(self.check_disable) + self.description.textChanged.connect(self.check_disable) + self.price.textChanged.connect(self.check_disable) # Fill example data self.fill_table() @@ -76,27 +72,25 @@ class Widget(QWidget): @Slot() def add_element(self): des = self.description.text() - price = self.price.text() + price = float(self.price.text()) self.table.insertRow(self.items) description_item = QTableWidgetItem(des) - price_item = QTableWidgetItem(f"{float(price):.2f}") + price_item = QTableWidgetItem(f"{price:.2f}") price_item.setTextAlignment(Qt.AlignRight) self.table.setItem(self.items, 0, description_item) self.table.setItem(self.items, 1, price_item) - self.description.setText("") - self.price.setText("") + self.description.clear() + self.price.clear() self.items += 1 @Slot() def check_disable(self, s): - if not self.description.text() or not self.price.text(): - self.add.setEnabled(False) - else: - self.add.setEnabled(True) + enabled = bool(self.description.text() and self.price.text()) + self.add.setEnabled(enabled) @Slot() def plot_data(self): @@ -112,10 +106,6 @@ class Widget(QWidget): chart.legend().setAlignment(Qt.AlignLeft) self.chart_view.setChart(chart) - @Slot() - def quit_application(self): - QApplication.quit() - def fill_table(self, data=None): data = self._data if not data else data for desc, price in data.items(): @@ -135,7 +125,7 @@ class Widget(QWidget): class MainWindow(QMainWindow): def __init__(self, widget): - QMainWindow.__init__(self) + super().__init__() self.setWindowTitle("Tutorial") # Menu @@ -143,17 +133,11 @@ class MainWindow(QMainWindow): self.file_menu = self.menu.addMenu("File") # Exit QAction - exit_action = QAction("Exit", self) + exit_action = self.file_menu.addAction("Exit", self.close) exit_action.setShortcut("Ctrl+Q") - exit_action.triggered.connect(self.exit_app) - self.file_menu.addAction(exit_action) self.setCentralWidget(widget) - @Slot() - def exit_app(self, checked): - QApplication.quit() - if __name__ == "__main__": # Qt Application diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/Main.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/Main.qml new file mode 100644 index 000000000..faa9175d6 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/Main.qml @@ -0,0 +1,196 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls.Basic +import QtQuick.Layouts +import FileSystemModule + +pragma ComponentBehavior: Bound + +ApplicationWindow { + id: root + + property bool expandPath: false + property bool showLineNumbers: true + property string currentFilePath: "" + + width: 1100 + height: 600 + minimumWidth: 200 + minimumHeight: 100 + visible: true + color: Colors.background + flags: Qt.Window | Qt.FramelessWindowHint + title: qsTr("File System Explorer Example") + + function getInfoText() : string { + let out = root.currentFilePath + if (!out) + return qsTr("File System Explorer") + return root.expandPath ? out : out.substring(out.lastIndexOf("/") + 1, out.length) + } + + menuBar: MyMenuBar { + dragWindow: root + infoText: root.getInfoText() + MyMenu { + title: qsTr("File") + + Action { + text: qsTr("Increase Font") + shortcut: StandardKey.ZoomIn + onTriggered: editor.text.font.pixelSize += 1 + } + Action { + text: qsTr("Decrease Font") + shortcut: StandardKey.ZoomOut + onTriggered: editor.text.font.pixelSize -= 1 + } + Action { + text: root.showLineNumbers ? qsTr("Toggle Line Numbers OFF") + : qsTr("Toggle Line Numbers ON") + shortcut: "Ctrl+L" + onTriggered: root.showLineNumbers = !root.showLineNumbers + } + Action { + text: root.expandPath ? qsTr("Toggle Short Path") + : qsTr("Toggle Expand Path") + enabled: root.currentFilePath + onTriggered: root.expandPath = !root.expandPath + } + Action { + text: qsTr("Reset Filesystem") + enabled: sidebar.currentTabIndex === 1 + onTriggered: fileSystemView.rootIndex = undefined + } + Action { + text: qsTr("Exit") + onTriggered: Qt.exit(0) + shortcut: StandardKey.Quit + } + } + + MyMenu { + title: qsTr("Edit") + + Action { + text: qsTr("Cut") + shortcut: StandardKey.Cut + enabled: editor.text.selectedText.length > 0 + onTriggered: editor.text.cut() + } + Action { + text: qsTr("Copy") + shortcut: StandardKey.Copy + enabled: editor.text.selectedText.length > 0 + onTriggered: editor.text.copy() + } + Action { + text: qsTr("Paste") + shortcut: StandardKey.Paste + enabled: editor.text.canPaste + onTriggered: editor.text.paste() + } + Action { + text: qsTr("Select All") + shortcut: StandardKey.SelectAll + enabled: editor.text.length > 0 + onTriggered: editor.text.selectAll() + } + Action { + text: qsTr("Undo") + shortcut: StandardKey.Undo + enabled: editor.text.canUndo + onTriggered: editor.text.undo() + } + } + } + // Set up the layout of the main components in a row: + // [ Sidebar, Navigation, Editor ] + RowLayout { + anchors.fill: parent + spacing: 0 + + // Stores the buttons that navigate the application. + Sidebar { + id: sidebar + dragWindow: root + Layout.preferredWidth: 50 + Layout.fillHeight: true + } + + // Allows resizing parts of the UI. + SplitView { + Layout.fillWidth: true + Layout.fillHeight: true + // Customized handle to drag between the Navigation and the Editor. + handle: Rectangle { + implicitWidth: 10 + color: SplitHandle.pressed ? Colors.color2 : Colors.background + border.color: SplitHandle.hovered ? Colors.color2 : Colors.background + opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0 + + Behavior on opacity { + OpacityAnimator { + duration: 1400 + } + } + } + + Rectangle { + id: navigationView + color: Colors.surface1 + SplitView.preferredWidth: 250 + SplitView.fillHeight: true + // The stack-layout provides different views, based on the + // selected buttons inside the sidebar. + StackLayout { + anchors.fill: parent + currentIndex: sidebar.currentTabIndex > 1 ? 1 : sidebar.currentTabIndex + + // Shows the help text. + Text { + text: qsTr("This example shows how to use and visualize the file system.\n\n" + + "Customized Qt Quick Components have been used to achieve this look.\n\n" + + "You can edit the files but they won't be changed on the file system.\n\n" + + "Click on the folder icon to the left to get started.") + wrapMode: TextArea.Wrap + color: Colors.text + } + + // Shows the files on the file system. + FileSystemView { + id: fileSystemView + color: Colors.surface1 + onFileClicked: path => root.currentFilePath = path + } + } + } + + // The main view that contains the editor or the scheme-manager. + StackLayout { + currentIndex: sidebar.currentTabIndex > 1 ? 1 : 0 + + SplitView.fillWidth: true + SplitView.fillHeight: true + + Editor { + id: editor + showLineNumbers: root.showLineNumbers + currentFilePath: root.currentFilePath + } + + ColorScheme { + Layout.fillWidth: true + Layout.fillHeight: true + } + + } + } + } + + ResizeButton { + resizeWindow: root + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/app.qrc b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/app.qrc new file mode 100644 index 000000000..ccd9eefec --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/app.qrc @@ -0,0 +1,16 @@ +<RCC> + <qresource prefix="/qt/qml/FileSystemModule"> + <file>qmldir</file> + <file>Main.qml</file> + <file>qml/About.qml</file> + <file>qml/Editor.qml</file> + <file>qml/Colors.qml</file> + <file>qml/FileSystemView.qml</file> + <file>qml/Icon.qml</file> + <file>qml/MyMenu.qml</file> + <file>qml/MyMenuBar.qml</file> + <file>qml/ResizeButton.qml</file> + <file>qml/Sidebar.qml</file> + <file>qml/WindowDragHandler.qml</file> + </qresource> +</RCC> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons.qrc b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons.qrc new file mode 100644 index 000000000..69bddc018 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons.qrc @@ -0,0 +1,15 @@ +<RCC> + <qresource> + <file>icons/app_icon.svg</file> + <file>icons/folder_closed.svg</file> + <file>icons/folder_open.svg</file> + <file>icons/generic_file.svg</file> + <file>icons/globe.svg</file> + <file>icons/info_sign.svg</file> + <file>icons/leaf.svg</file> + <file>icons/light_bulb.svg</file> + <file>icons/qt_logo.svg</file> + <file>icons/read.svg</file> + <file>icons/resize.svg</file> + </qresource> +</RCC> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/app_icon.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/app_icon.svg new file mode 100644 index 000000000..5aae4221f --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/app_icon.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#EBDBB2" d="M13.25 8.5a.75.75 0 1 1-.75-.75.75.75 0 0 1 .75.75zM9.911 21.35l.816.578C10.819 21.798 13 18.666 13 13h-1a15.503 15.503 0 0 1-2.089 8.35zM4 6.703V10a2.002 2.002 0 0 1-2 2v1a2.002 2.002 0 0 1 2 2v3.297A3.707 3.707 0 0 0 7.703 22H9v-1H7.703A2.706 2.706 0 0 1 5 18.297V15a2.999 2.999 0 0 0-1.344-2.5A2.999 2.999 0 0 0 5 10V6.703A2.706 2.706 0 0 1 7.703 4H9V3H7.703A3.707 3.707 0 0 0 4 6.703zM20 10V6.703A3.707 3.707 0 0 0 16.297 3H15v1h1.297A2.706 2.706 0 0 1 19 6.703V10a2.999 2.999 0 0 0 1.344 2.5A2.999 2.999 0 0 0 19 15v3.297A2.706 2.706 0 0 1 16.297 21H15v1h1.297A3.707 3.707 0 0 0 20 18.297V15a2.002 2.002 0 0 1 2-2v-1a2.002 2.002 0 0 1-2-2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_closed.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_closed.svg new file mode 100644 index 000000000..36f119c96 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_closed.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1792 1792" + id="svg51" + sodipodi:docname="folder_closed.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs55" /> + <sodipodi:namedview + id="namedview53" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.45033482" + inkscape:cx="842.70632" + inkscape:cy="896" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg51" /> + <path + fill="currentColor" + d="m 1718,672 v 704 q 0,92 -66,158 -66,66 -158,66 H 278 q -92,0 -158,-66 -66,-66 -66,-158 V 416 q 0,-92 66,-158 66,-66 158,-66 h 320 q 92,0 158,66 66,66 66,158 v 32 h 672 q 92,0 158,66 66,66 66,158 z" + id="path49" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_open.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_open.svg new file mode 100644 index 000000000..daa55a7a1 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/folder_open.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1792 1792" + id="svg139" + sodipodi:docname="folder_open.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs143" /> + <sodipodi:namedview + id="namedview141" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.24358259" + inkscape:cx="149.84651" + inkscape:cy="1098.1901" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg139" /> + <path + fill="currentColor" + d="M 1590,1376 V 672 q 0,-40 -28,-68 -28,-28 -68,-28 H 790 q -40,0 -68,-28 -28,-28 -28,-68 v -64 q 0,-40 -28,-68 -28,-28 -68,-28 H 278 q -40,0 -68,28 -28,28 -28,68 v 960 q 0,40 28,68 28,28 68,28 h 1216 q 40,0 68,-28 28,-28 28,-68 z m 128,-704 v 704 q 0,92 -66,158 -66,66 -158,66 H 278 q -92,0 -158,-66 -66,-66 -66,-158 V 416 q 0,-92 66,-158 66,-66 158,-66 h 320 q 92,0 158,66 66,66 66,158 v 32 h 672 q 92,0 158,66 66,66 66,158 z" + id="path137" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/generic_file.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/generic_file.svg new file mode 100644 index 000000000..9c855676e --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/generic_file.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1792 1792" + id="svg147" + sodipodi:docname="generic_file.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs151" /> + <sodipodi:namedview + id="namedview149" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.12179129" + inkscape:cx="-578.85911" + inkscape:cy="1687.3127" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg147" /> + <path + fill="currentColor" + d="m 1586,476 q 14,14 28,36 H 1142 V 40 q 22,14 36,28 z m -476,164 h 544 v 1056 q 0,40 -28,68 -28,28 -68,28 H 214 q -40,0 -68,-28 -28,-28 -28,-68 V 96 Q 118,56 146,28 174,0 214,0 h 800 v 544 q 0,40 28,68 28,28 68,28 z m 160,736 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 534 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 704 q 14,0 23,-9 9,-9 9,-23 z m 0,-256 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 534 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 704 q 14,0 23,-9 9,-9 9,-23 z m 0,-256 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 534 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 704 q 14,0 23,-9 9,-9 9,-23 z" + id="path145" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/globe.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/globe.svg new file mode 100644 index 000000000..081433813 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/globe.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1792 1792" + id="svg155" + sodipodi:docname="globe.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs159" /> + <sodipodi:namedview + id="namedview157" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.12179129" + inkscape:cx="504.9622" + inkscape:cy="1720.1558" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg155" /> + <path + fill="currentColor" + d="m 886,128 q 209,0 385.5,103 176.5,103 279.5,279.5 103,176.5 103,385.5 0,209 -103,385.5 Q 1448,1458 1271.5,1561 1095,1664 886,1664 677,1664 500.5,1561 324,1458 221,1281.5 118,1105 118,896 118,687 221,510.5 324,334 500.5,231 677,128 886,128 Z m 274,521 q -2,1 -9.5,9.5 -7.5,8.5 -13.5,9.5 2,0 4.5,-5 2.5,-5 5,-11 2.5,-6 3.5,-7 6,-7 22,-15 14,-6 52,-12 34,-8 51,11 -2,-2 9.5,-13 11.5,-11 14.5,-12 3,-2 15,-4.5 12,-2.5 15,-7.5 l 2,-22 q -12,1 -17.5,-7 -5.5,-8 -6.5,-21 0,2 -6,8 0,-7 -4.5,-8 -4.5,-1 -11.5,1 -7,2 -9,1 -10,-3 -15,-7.5 -5,-4.5 -8,-16.5 -3,-12 -4,-15 -2,-5 -9.5,-10.5 -7.5,-5.5 -9.5,-10.5 -1,-2 -2.5,-5.5 -1.5,-3.5 -3,-6.5 -1.5,-3 -4,-5.5 -2.5,-2.5 -5.5,-2.5 -3,0 -7,5 -4,5 -7.5,10 -3.5,5 -4.5,5 -3,-2 -6,-1.5 -3,0.5 -4.5,1 -1.5,0.5 -4.5,3 -3,2.5 -5,3.5 -3,2 -8.5,3 -5.5,1 -8.5,2 15,-5 -1,-11 -10,-4 -16,-3 9,-4 7.5,-12 -1.5,-8 -8.5,-14 h 5 q -1,-4 -8.5,-8.5 -7.5,-4.5 -17.5,-8.5 -10,-4 -13,-6 -8,-5 -34,-9.5 -26,-4.5 -33,-0.5 -5,6 -4.5,10.5 0.5,4.5 4,14 3.5,9.5 3.5,12.5 1,6 -5.5,13 -6.5,7 -6.5,12 0,7 14,15.5 14,8.5 10,21.5 -3,8 -16,16 -13,8 -16,12 -5,8 -1.5,18.5 3.5,10.5 10.5,16.5 2,2 1.5,4 -0.5,2 -3.5,4.5 -3,2.5 -5.5,4 -2.5,1.5 -6.5,3.5 l -3,2 q -11,5 -20.5,-6 -9.5,-11 -13.5,-26 -7,-25 -16,-30 -23,-8 -29,1 -5,-13 -41,-26 -25,-9 -58,-4 6,-1 0,-15 -7,-15 -19,-12 3,-6 4,-17.5 1,-11.5 1,-13.5 3,-13 12,-23 1,-1 7,-8.5 6,-7.5 9.5,-13.5 3.5,-6 0.5,-6 35,4 50,-11 5,-5 11.5,-17 6.5,-12 10.5,-17 9,-6 14,-5.5 5,0.5 14.5,5.5 9.5,5 14.5,5 14,1 15.5,-11 1.5,-12 -7.5,-20 12,1 3,-17 -5,-7 -8,-9 -12,-4 -27,5 -8,4 2,8 -1,-1 -9.5,10.5 Q 927,340 919,346 q -8,6 -16,-5 -1,-1 -5.5,-13.5 Q 893,315 888,314 q -8,0 -16,15 3,-8 -11,-15 -14,-7 -24,-8 19,-12 -8,-27 -7,-4 -20.5,-5 -13.5,-1 -19.5,4 -5,7 -5.5,11.5 -0.5,4.5 5,8 5.5,3.5 10.5,5.5 5,2 11.5,4 6.5,2 8.5,3 14,10 8,14 -2,1 -8.5,3.5 -6.5,2.5 -11.5,4.5 -5,2 -6,4 -3,4 0,14 3,10 -2,14 -5,-5 -9,-17.5 -4,-12.5 -7,-16.5 7,9 -25,6 l -10,-1 q -4,0 -16,2 -12,2 -20.5,1 -8.5,-1 -13.5,-8 -4,-8 0,-20 1,-4 4,-2 -4,-3 -11,-9.5 -7,-6.5 -10,-8.5 -46,15 -94,41 6,1 12,-1 5,-2 13,-6.5 8,-4.5 10,-5.5 34,-14 42,-7 l 5,-5 q 14,16 20,25 -7,-4 -30,-1 -20,6 -22,12 7,12 5,18 -4,-3 -11.5,-10 -7.5,-7 -14.5,-11 -7,-4 -15,-5 -16,0 -22,1 -146,80 -235,222 7,7 12,8 4,1 5,9 1,8 2.5,11 1.5,3 11.5,-3 9,8 3,19 1,-1 44,27 19,17 21,21 3,11 -10,18 -1,-2 -9,-9 -8,-7 -9,-4 -3,5 0.5,18.5 3.5,13.5 10.5,12.5 -7,0 -9.5,16 -2.5,16 -2.5,35.5 0,19.5 -1,23.5 l 2,1 q -3,12 5.5,34.5 8.5,22.5 21.5,19.5 -13,3 20,43 6,8 8,9 3,2 12,7.5 9,5.5 15,10 6,4.5 10,10.5 4,5 10,22.5 6,17.5 14,23.5 -2,6 9.5,20 11.5,14 10.5,23 -1,0 -2.5,1 -1.5,1 -2.5,1 3,7 15.5,14 12.5,7 15.5,13 1,3 2,10 1,7 3,11 2,4 8,2 2,-20 -24,-62 -15,-25 -17,-29 -3,-5 -5.5,-15.5 Q 541,919 539,915 q 2,0 6,1.5 4,1.5 8.5,3.5 4.5,2 7.5,4 3,2 2,3 -3,7 2,17.5 5,10.5 12,18.5 7,8 17,19 10,11 12,13 6,6 14,19.5 8,13.5 0,13.5 9,0 20,10 11,10 17,20 5,8 8,26 3,18 5,24 2,7 8.5,13.5 6.5,6.5 12.5,9.5 l 16,8 q 0,0 13,7 5,2 18.5,10.5 13.5,8.5 21.5,11.5 10,4 16,4 6,0 14.5,-2.5 8.5,-2.5 13.5,-3.5 15,-2 29,15 14,17 21,21 36,19 55,11 -2,1 0.5,7.5 2.5,6.5 8,15.5 5.5,9 9,14.5 3.5,5.5 5.5,8.5 5,6 18,15 13,9 18,15 6,-4 7,-9 -3,8 7,20 10,12 18,10 14,-3 14,-32 -31,15 -49,-18 0,-1 -2.5,-5.5 -2.5,-4.5 -4,-8.5 -1.5,-4 -2.5,-8.5 -1,-4.5 0,-7.5 1,-3 5,-3 9,0 10,-3.5 1,-3.5 -2,-12.5 -3,-9 -4,-13 -1,-8 -11,-20 -10,-12 -12,-15 -5,9 -16,8 -11,-1 -16,-9 0,1 -1.5,5.5 -1.5,4.5 -1.5,6.5 -13,0 -15,-1 1,-3 2.5,-17.5 1.5,-14.5 3.5,-22.5 1,-4 5.5,-12 4.5,-8 7.5,-14.5 3,-6.5 4,-12.5 1,-6 -4.5,-9.5 -5.5,-3.5 -17.5,-2.5 -19,1 -26,20 -1,3 -3,10.5 -2,7.5 -5,11.5 -3,4 -9,7 -7,3 -24,2 -17,-1 -24,-5 -13,-8 -22.5,-29 -9.5,-21 -9.5,-37 0,-10 2.5,-26.5 2.5,-16.5 3,-25 0.5,-8.5 -5.5,-24.5 3,-2 9,-9.5 6,-7.5 10,-10.5 2,-1 4.5,-1.5 2.5,-0.5 4.5,0 2,0.5 4,-1.5 2,-2 3,-6 -1,-1 -4,-3 -3,-3 -4,-3 7,3 28.5,-1.5 21.5,-4.5 27.5,1.5 15,11 22,-2 0,-1 -2.5,-9.5 Q 870,931 872,926 q 5,27 29,9 3,3 15.5,5 12.5,2 17.5,5 3,2 7,5.5 4,3.5 5.5,4.5 1.5,1 5,-0.5 3.5,-1.5 8.5,-6.5 10,14 12,24 11,40 19,44 7,3 11,2 4,-1 4.5,-9.5 0.5,-8.5 0,-14 Q 1006,989 1005,982 l -1,-8 v -18 l -1,-8 q -15,-3 -18.5,-12 -3.5,-9 1.5,-18.5 5,-9.5 15,-18.5 1,-1 8,-3.5 7,-2.5 15.5,-6.5 8.5,-4 12.5,-8 21,-19 15,-35 7,0 11,-9 -1,0 -5,-3 -4,-3 -7.5,-5 -3.5,-2 -4.5,-2 9,-5 2,-16 5,-3 7.5,-11 2.5,-8 7.5,-10 9,12 21,2 7,-8 1,-16 5,-7 20.5,-10.5 15.5,-3.5 18.5,-9.5 7,2 8,-2 1,-4 1,-12 0,-8 3,-12 4,-5 15,-9 11,-4 13,-5 l 17,-11 q 3,-4 0,-4 18,2 31,-11 10,-11 -6,-20 3,-6 -3,-9.5 -6,-3.5 -15,-5.5 3,-1 11.5,-0.5 8.5,0.5 10.5,-1.5 15,-10 -7,-16 -17,-5 -43,12 z m -163,877 q 206,-36 351,-189 -3,-3 -12.5,-4.5 -9.5,-1.5 -12.5,-3.5 -18,-7 -24,-8 1,-7 -2.5,-13 -3.5,-6 -8,-9 -4.5,-3 -12.5,-8 -8,-5 -11,-7 -2,-2 -7,-6 -5,-4 -7,-5.5 -2,-1.5 -7.5,-4.5 -5.5,-3 -8.5,-2 -3,1 -10,1 l -3,1 q -3,1 -5.5,2.5 -2.5,1.5 -5.5,3 -3,1.5 -4,3 -1,1.5 0,2.5 -21,-17 -36,-22 -5,-1 -11,-5.5 -6,-4.5 -10.5,-7 -4.5,-2.5 -10,-1.5 -5.5,1 -11.5,7 -5,5 -6,15 -1,10 -2,13 -7,-5 0,-17.5 7,-12.5 2,-18.5 -3,-6 -10.5,-4.5 -7.5,1.5 -12,4.5 -4.5,3 -11.5,8.5 -7,5.5 -9,6.5 -2,1 -8.5,5.5 -6.5,4.5 -8.5,7.5 -3,4 -6,12 -3,8 -5,11 -2,-4 -11.5,-6.5 -9.5,-2.5 -9.5,-5.5 2,10 4,35 2,25 5,38 7,31 -12,48 -27,25 -29,40 -4,22 12,26 0,7 -8,20.5 -8,13.5 -7,21.5 0,6 2,16 z" + id="path153" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/info_sign.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/info_sign.svg new file mode 100644 index 000000000..517f76360 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/info_sign.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1792 1792" + id="svg163" + sodipodi:docname="info_sign.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs167" /> + <sodipodi:namedview + id="namedview165" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.48716518" + inkscape:cx="72.870561" + inkscape:cy="896" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg163" /> + <path + fill="currentColor" + d="m 1142,1376 v -160 q 0,-14 -9,-23 -9,-9 -23,-9 h -96 V 672 q 0,-14 -9,-23 -9,-9 -23,-9 H 662 q -14,0 -23,9 -9,9 -9,23 v 160 q 0,14 9,23 9,9 23,9 h 96 v 320 h -96 q -14,0 -23,9 -9,9 -9,23 v 160 q 0,14 9,23 9,9 23,9 h 448 q 14,0 23,-9 9,-9 9,-23 z M 1014,480 V 320 q 0,-14 -9,-23 -9,-9 -23,-9 H 790 q -14,0 -23,9 -9,9 -9,23 v 160 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 z m 640,416 q 0,209 -103,385.5 Q 1448,1458 1271.5,1561 1095,1664 886,1664 677,1664 500.5,1561 324,1458 221,1281.5 118,1105 118,896 118,687 221,510.5 324,334 500.5,231 677,128 886,128 1095,128 1271.5,231 1448,334 1551,510.5 1654,687 1654,896 Z" + id="path161" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/leaf.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/leaf.svg new file mode 100644 index 000000000..c1cabb5cf --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/leaf.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-10 0 1034 1024"> + <path fill="currentColor" +d="M765 327l-14 -11l-538 502l503 -533l-14 -12q-48 -26 -106 -23.5t-109 19.5q-14 4 -28.5 10t-28.5 13q-30 14 -57.5 32.5t-52.5 41.5q-55 52 -90.5 119t-52.5 140q-5 21 -9 42t-7 42q-3 26 -5.5 52.5t-4.5 53.5q-1 22 1.5 45.5t33.5 21.5h11.5h10.5q78 -2 156 -6t153 -29 +q49 -16 94 -42.5t82 -62.5q27 -27 50 -60t39 -69.5t24 -75.5t5 -78q-3 -35 -12.5 -70t-33.5 -62v0zM844 160l30 30l-563 531z" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/light_bulb.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/light_bulb.svg new file mode 100644 index 000000000..ed2ed55fb --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/light_bulb.svg @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-10 0 1538 1538" + id="svg4" + sodipodi:docname="light_bulb.svg" + width="1538" + height="1538" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs8" /> + <sodipodi:namedview + id="namedview6" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + fit-margin-top="1" + fit-margin-left="1" + fit-margin-right="1" + fit-margin-bottom="1" + lock-margins="true" + inkscape:zoom="0.16" + inkscape:cx="1234.375" + inkscape:cy="409.375" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg4" /> + <path + fill="currentColor" + d="m 983,449 q 0,13 -9.5,22.5 Q 964,481 951,481 938,481 928.5,471.5 919,462 919,449 919,403 865,378 811,353 759,353 746,353 736.5,343.5 727,334 727,321 q 0,-13 9.5,-22.5 9.5,-9.5 22.5,-9.5 50,0 99.5,16 49.5,16 87,54 37.5,38 37.5,90 z m 160,0 q 0,-72 -34.5,-134 -34.5,-62 -90,-101.5 Q 963,174 895.5,151.5 828,129 759,129 690,129 622.5,151.5 555,174 499.5,213.5 444,253 409.5,315 375,377 375,449 q 0,101 68,180 10,11 30.5,33 20.5,22 30.5,33 128,153 141,298 h 228 q 13,-145 141,-298 10,-11 30.5,-33 20.5,-22 30.5,-33 68,-79 68,-180 z m 128,0 q 0,155 -103,268 -45,49 -74.5,87 -29.5,38 -59.5,95.5 -30,57.5 -34,107.5 47,28 47,82 0,37 -25,64 25,27 25,64 0,52 -45,81 13,23 13,47 0,46 -31.5,71 -31.5,25 -77.5,25 -20,44 -60,70 -40,26 -87,26 -47,0 -87,-26 -40,-26 -60,-70 -46,0 -77.5,-25 -31.5,-25 -31.5,-71 0,-24 13,-47 -45,-29 -45,-81 0,-37 25,-64 -25,-27 -25,-64 0,-54 47,-82 Q 514,957 484,899.5 454,842 424.5,804 395,766 350,717 247,604 247,449 247,350 291.5,264.5 336,179 408.5,122.5 481,66 572.5,33.5 664,1 759,1 q 95,0 186.5,32.5 91.5,32.5 164,89 72.5,56.5 117,142 Q 1271,350 1271,449 Z" + id="path2" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/qt_logo.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/qt_logo.svg new file mode 100644 index 000000000..062daff3e --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/qt_logo.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns="http://www.w3.org/2000/svg" + width="462pt" + height="339pt" + viewBox="0 0 462 339" + version="1.1" + id="svg2" +> + <path + fill="#41cd52" + d=" M 63.50 0.00 L 462.00 0.00 L 462.00 274.79 C 440.60 296.26 419.13 317.66 397.61 339.00 L 0.00 339.00 L 0.00 63.39 C 21.08 42.18 42.34 21.13 63.50 0.00 Z" + id="path6"/> + <path + d=" M 122.37 71.33 C 137.50 61.32 156.21 58.79 174.00 58.95 C 190.94 59.16 208.72 62.13 222.76 72.24 C 232.96 79.41 239.59 90.48 244.01 101.93 C 251.16 120.73 253.26 141.03 253.50 161.01 C 253.53 181.13 252.62 201.69 245.96 220.86 C 241.50 233.90 233.01 245.48 221.81 253.52 C 229.87 266.58 238.09 279.54 246.15 292.60 C 236.02 297.27 225.92 301.97 215.78 306.62 C 207.15 292.38 198.56 278.11 189.90 263.89 C 178.19 265.81 166.21 265.66 154.44 264.36 C 140.34 262.67 125.97 258.37 115.09 248.88 C 106.73 241.64 101.48 231.51 97.89 221.21 C 92.01 203.79 90.43 185.25 90.16 166.97 C 90.02 147.21 91.28 127.14 97.24 108.18 C 101.85 93.92 109.48 79.69 122.37 71.33 Z" + id="path8" + fill="#ffffff"/> + <path + d=" M 294.13 70.69 C 304.73 70.68 315.33 70.68 325.93 70.69 C 325.96 84.71 325.92 98.72 325.95 112.74 C 339.50 112.76 353.05 112.74 366.60 112.75 C 366.37 121.85 366.12 130.95 365.86 140.05 C 352.32 140.08 338.79 140.04 325.25 140.07 C 325.28 163.05 325.18 186.03 325.30 209.01 C 325.56 215.30 325.42 221.94 328.19 227.75 C 330.21 232.23 335.65 233.38 340.08 233.53 C 348.43 233.50 356.77 233.01 365.12 232.86 C 365.63 241.22 366.12 249.59 366.60 257.95 C 349.99 260.74 332.56 264.08 316.06 258.86 C 309.11 256.80 302.63 252.19 299.81 245.32 C 294.76 233.63 294.35 220.62 294.13 208.07 C 294.11 185.40 294.13 162.74 294.12 140.07 C 286.73 140.05 279.34 140.08 271.95 140.05 C 271.93 130.96 271.93 121.86 271.95 112.76 C 279.34 112.73 286.72 112.77 294.11 112.74 C 294.14 98.72 294.10 84.71 294.13 70.69 Z" + id="path10" + fill="#ffffff"/> + <path + fill="#41cd52" + d=" M 160.51 87.70 C 170.80 86.36 181.60 86.72 191.34 90.61 C 199.23 93.73 205.93 99.84 209.47 107.58 C 214.90 119.31 216.98 132.26 218.03 145.05 C 219.17 162.07 219.01 179.25 216.66 196.17 C 215.01 206.24 212.66 216.85 205.84 224.79 C 198.92 232.76 188.25 236.18 178.01 236.98 C 167.21 237.77 155.82 236.98 146.07 231.87 C 140.38 228.84 135.55 224.09 132.73 218.27 C 129.31 211.30 127.43 203.69 126.11 196.07 C 122.13 171.91 121.17 146.91 126.61 122.89 C 128.85 113.83 132.11 104.53 138.73 97.70 C 144.49 91.85 152.51 88.83 160.51 87.70 Z" + id="path12"/> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/read.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/read.svg new file mode 100644 index 000000000..c3af473d2 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/read.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + version="1.1" + viewBox="-11 0 1792 1792" + id="svg184" + sodipodi:docname="read.svg" + width="1792" + height="1792" + inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <defs + id="defs188" /> + <sodipodi:namedview + id="namedview186" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + showgrid="false" + inkscape:zoom="0.24358259" + inkscape:cx="519.33104" + inkscape:cy="1089.9794" + inkscape:window-width="1846" + inkscape:window-height="1016" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg184" /> + <path + fill="currentColor" + d="m 1691.8576,478 q 40,57 18,129 l -275,906 q -19,64 -76.5,107.5 -57.5,43.5 -122.5,43.5 H 312.85764 q -77,0 -148.5,-53.5 Q 92.857644,1557 64.857644,1479 q -24,-67 -2,-127 0,-4 3,-27 3,-23 4,-37 1,-8 -3,-21.5 -4,-13.5 -3,-19.5 2,-11 8,-21 6,-10 16.5,-23.5 10.5,-13.5 16.499996,-23.5 23,-38 45,-91.5 22,-53.5 30,-91.5 3,-10 0.5,-30 -2.5,-20 -0.5,-28 3,-11 17,-28 14,-17 17,-23 21,-36 42,-92 21,-56 25,-90 1,-9 -2.5,-32 -3.5,-23 0.5,-28 4,-13 22,-30.5 18,-17.5 22,-22.5 19,-26 42.5,-84.5 23.5,-58.5 27.5,-96.5 1,-8 -3,-25.5 -4,-17.5 -2,-26.5 2,-8 9,-18 7,-10 18,-23 11,-13 17,-21 8,-12 16.5,-30.5 8.5,-18.5 15,-35 6.5,-16.5 16,-36 9.5,-19.5 19.5,-32 10,-12.5 26.5,-23.5 16.5,-11 36,-11.5 19.5,-0.5 47.5,5.5 l -1,3 q 38,-9 51,-9 h 760.99996 q 74,0 114,56 40,56 18,130 l -274,906 q -36,119 -71.5,153.5 -35.5,34.5 -128.5,34.5 H 208.85764 q -27,0 -38,15 -11,16 -1,43 24,70 144,70 h 922.99996 q 29,0 56,-15.5 27,-15.5 35,-41.5 l 300,-987 q 7,-22 5,-57 38,15 59,43 z m -1063.99996,2 q -4,13 2,22.5 6,9.5 20,9.5 h 607.99996 q 13,0 25.5,-9.5 12.5,-9.5 16.5,-22.5 l 21,-64 q 4,-13 -2,-22.5 -6,-9.5 -20,-9.5 H 690.85764 q -13,0 -25.5,9.5 -12.5,9.5 -16.5,22.5 z m -83,256 q -4,13 2,22.5 6,9.5 20,9.5 h 607.99996 q 13,0 25.5,-9.5 12.5,-9.5 16.5,-22.5 l 21,-64 q 4,-13 -2,-22.5 -6,-9.5 -20,-9.5 H 607.85764 q -13,0 -25.5,9.5 -12.5,9.5 -16.5,22.5 z" + id="path182" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/resize.svg b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/resize.svg new file mode 100644 index 000000000..e86d612f3 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/icons/resize.svg @@ -0,0 +1,6 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> + <line x1="00" y1="100" x2="100" y2="00" stroke="black" stroke-width="3" /> + <line x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="3" /> + <line x1="40" y1="100" x2="100" y2="40" stroke="black" stroke-width="3" /> + <line x1="60" y1="100" x2="100" y2="60" stroke="black" stroke-width="3" /> +</svg> diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/About.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/About.qml new file mode 100644 index 000000000..178bf03e4 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/About.qml @@ -0,0 +1,93 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls.Basic +import FileSystemModule + +ApplicationWindow { + id: root + width: 650 + height: 550 + flags: Qt.Window | Qt.FramelessWindowHint + color: Colors.surface1 + + menuBar: MyMenuBar { + id: menuBar + + dragWindow: root + implicitHeight: 27 + infoText: "About Qt" + } + + Image { + id: logo + + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 20 + + source: "../icons/qt_logo.svg" + sourceSize.width: 80 + sourceSize.height: 80 + fillMode: Image.PreserveAspectFit + + smooth: true + antialiasing: true + asynchronous: true + } + + ScrollView { + anchors.top: logo.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 20 + + TextArea { + selectedTextColor: Colors.textFile + selectionColor: Colors.selection + horizontalAlignment: Text.AlignHCenter + textFormat: Text.RichText + + text: qsTr("<h3>About Qt</h3>" + + "<p>This program uses Qt version %1.</p>" + + "<p>Qt is a C++ toolkit for cross-platform application " + + "development.</p>" + + "<p>Qt provides single-source portability across all major desktop " + + "operating systems. It is also available for embedded Linux and other " + + "embedded and mobile operating systems.</p>" + + "<p>Qt is available under multiple licensing options designed " + + "to accommodate the needs of our various users.</p>" + + "<p>Qt licensed under our commercial license agreement is appropriate " + + "for development of proprietary/commercial software where you do not " + + "want to share any source code with third parties or otherwise cannot " + + "comply with the terms of GNU (L)GPL.</p>" + + "<p>Qt licensed under GNU (L)GPL is appropriate for the " + + "development of Qt applications provided you can comply with the terms " + + "and conditions of the respective licenses.</p>" + + "<p>Please see <a href=\"http://%2/\">%2</a> " + + "for an overview of Qt licensing.</p>" + + "<p>Copyright (C) %3 The Qt Company Ltd and other " + + "contributors.</p>" + + "<p>Qt and the Qt logo are trademarks of The Qt Company Ltd.</p>" + + "<p>Qt is The Qt Company Ltd product developed as an open source " + + "project. See <a href=\"http://%4/\">%4</a> for more information.</p>") + .arg(Application.version).arg("qt.io/licensing").arg("2023").arg("qt.io") + color: Colors.textFile + wrapMode: Text.WordWrap + readOnly: true + antialiasing: true + background: null + + onLinkActivated: function(link) { + Qt.openUrlExternally(link) + } + } + } + + ResizeButton { + resizeWindow: root + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ColorScheme.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ColorScheme.qml new file mode 100644 index 000000000..19c8cd905 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ColorScheme.qml @@ -0,0 +1,118 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import FileSystemModule + +ColumnLayout { + id: colorScheme + + spacing: 20 + + // Inline component that customizes TabButton + component MyTabButton: TabButton { + id: root + + implicitWidth: 150 + implicitHeight: 30 + padding: 6 + spacing: 6 + + contentItem: Text { + anchors.centerIn: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + text: root.text + font.bold: true + color: Colors.text + } + + background: Rectangle { + anchors.fill: parent + implicitHeight: 40 + + color: root.checked ? Colors.active : Colors.selection + Rectangle { + height: 4 + width: parent.width + color: root.checked ? Colors.color1 : Colors.selection + } + } + } + + Item { + // Spacer item + Layout.fillHeight: true + Layout.fillWidth: true + } + + Text { + Layout.alignment: Qt.AlignHCenter + + text: "Select a Scheme!" + font.pointSize: 30 + font.bold: true + color: Colors.text + } + + // Display all the color-scheme names. The model is a string-list provided + // by our python class. + TabBar { + id: schemeSelector + + Layout.alignment: Qt.AlignHCenter + + background: Rectangle { + color: Colors.surface1 + } + + Repeater { + model: Colors.getKeys() + MyTabButton { + text: modelData + onClicked: { + Colors.setScheme(modelData) + themePreviewContainer.background + = (modelData === "Solarized") ? "#777777" : "#FEFAEC" + } + } + } + } + + // The current colors can be visualized using the same method as above. + Rectangle { + id: themePreviewContainer + + property color background: "#FEFAEC" + + Layout.alignment: Qt.AlignHCenter + + width: 700 + height: 50 + radius: 10 + color: background + + // Display all used colors inside a row + Row { + anchors.centerIn: parent + spacing: 10 + + Repeater { + model: Colors.currentColors + Rectangle { + width: 35 + height: width + radius: width / 2 + color: modelData + } + } + } + } + Item { + // Spacer item + Layout.fillHeight: true + Layout.fillWidth: true + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Editor.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Editor.qml new file mode 100644 index 000000000..80f7c04c5 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Editor.qml @@ -0,0 +1,160 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import FileSystemModule + +pragma ComponentBehavior: Bound + +// This is the text editor that displays the currently open file, including +// their corresponding line numbers. +Rectangle { + id: root + + required property string currentFilePath + required property bool showLineNumbers + property alias text: textArea + property int currentLineNumber: -1 + property int rowHeight: Math.ceil(fontMetrics.lineSpacing) + + color: Colors.background + + onWidthChanged: textArea.update() + onHeightChanged: textArea.update() + + RowLayout { + anchors.fill: parent + // We use a flickable to synchronize the position of the editor and + // the line numbers. This is necessary because the line numbers can + // extend the available height. + Flickable { + id: lineNumbers + + // Calculate the width based on the logarithmic scale. + Layout.preferredWidth: fontMetrics.averageCharacterWidth + * (Math.floor(Math.log10(textArea.lineCount)) + 1) + 10 + Layout.fillHeight: true + + interactive: false + contentY: editorFlickable.contentY + visible: textArea.text !== "" && root.showLineNumbers + + Column { + anchors.fill: parent + Repeater { + id: repeatedLineNumbers + + model: LineNumberModel { + lineCount: textArea.text !== "" ? textArea.lineCount : 0 + } + + delegate: Item { + required property int index + + width: parent.width + height: root.rowHeight + Label { + id: numbers + + text: parent.index + 1 + + width: parent.width + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + + color: (root.currentLineNumber === parent.index) + ? Colors.iconIndicator : Qt.darker(Colors.text, 2) + font: textArea.font + } + Rectangle { + id: indicator + + anchors.left: numbers.right + width: 1 + height: parent.height + color: Qt.darker(Colors.text, 3) + } + } + } + } + } + + Flickable { + id: editorFlickable + + property alias textArea: textArea + + // We use an inline component to customize the horizontal and vertical + // scroll-bars. This is convenient when the component is only used in one file. + component MyScrollBar: ScrollBar { + id: scrollBar + background: Rectangle { + implicitWidth: scrollBar.interactive ? 8 : 4 + implicitHeight: scrollBar.interactive ? 8 : 4 + + opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0 + color: Colors.background + Behavior on opacity { + OpacityAnimator { + duration: 500 + } + } + } + contentItem: Rectangle { + implicitWidth: scrollBar.interactive ? 8 : 4 + implicitHeight: scrollBar.interactive ? 8 : 4 + opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0 + color: Colors.color1 + Behavior on opacity { + OpacityAnimator { + duration: 1000 + } + } + } + } + + Layout.fillHeight: true + Layout.fillWidth: true + ScrollBar.horizontal: MyScrollBar {} + ScrollBar.vertical: MyScrollBar {} + + boundsBehavior: Flickable.StopAtBounds + + TextArea.flickable: TextArea { + id: textArea + anchors.fill: parent + + focus: false + topPadding: 0 + leftPadding: 10 + + text: FileSystemModel.readFile(root.currentFilePath) + tabStopDistance: fontMetrics.averageCharacterWidth * 4 + + // Grab the current line number from the C++ interface. + onCursorPositionChanged: { + root.currentLineNumber = FileSystemModel.currentLineNumber( + textArea.textDocument, textArea.cursorPosition) + } + + color: Colors.textFile + selectedTextColor: Colors.textFile + selectionColor: Colors.selection + + textFormat: TextEdit.PlainText + renderType: Text.QtRendering + selectByMouse: true + antialiasing: true + background: null + } + + FontMetrics { + id: fontMetrics + font: textArea.font + } + } + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/FileSystemView.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/FileSystemView.qml new file mode 100644 index 000000000..db955168c --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/FileSystemView.qml @@ -0,0 +1,156 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects +import QtQuick.Controls.Basic +import FileSystemModule + +pragma ComponentBehavior: Bound + +// This is the file system view which gets populated by the C++ model. +Rectangle { + id: root + + signal fileClicked(string filePath) + property alias rootIndex: fileSystemTreeView.rootIndex + + TreeView { + id: fileSystemTreeView + + property int lastIndex: -1 + + anchors.fill: parent + model: FileSystemModel + rootIndex: FileSystemModel.rootIndex + boundsBehavior: Flickable.StopAtBounds + boundsMovement: Flickable.StopAtBounds + clip: true + + Component.onCompleted: fileSystemTreeView.toggleExpanded(0) + + // The delegate represents a single entry in the filesystem. + delegate: TreeViewDelegate { + id: treeDelegate + indentation: 8 + implicitWidth: fileSystemTreeView.width > 0 ? fileSystemTreeView.width : 250 + implicitHeight: 25 + + // Since we have the 'ComponentBehavior Bound' pragma, we need to + // require these properties from our model. This is a convenient way + // to bind the properties provided by the model's role names. + required property int index + required property url filePath + required property string fileName + + indicator: Image { + id: directoryIcon + + x: treeDelegate.leftMargin + (treeDelegate.depth * treeDelegate.indentation) + anchors.verticalCenter: parent.verticalCenter + source: treeDelegate.hasChildren ? (treeDelegate.expanded + ? "../icons/folder_open.svg" : "../icons/folder_closed.svg") + : "../icons/generic_file.svg" + sourceSize.width: 20 + sourceSize.height: 20 + fillMode: Image.PreserveAspectFit + + smooth: true + antialiasing: true + asynchronous: true + } + + contentItem: Text { + text: treeDelegate.fileName + color: Colors.text + } + + background: Rectangle { + color: (treeDelegate.index === fileSystemTreeView.lastIndex) + ? Colors.selection + : (hoverHandler.hovered ? Colors.active : "transparent") + } + + // We color the directory icons with this MultiEffect, where we overlay + // the colorization color ontop of the SVG icons. + MultiEffect { + id: iconOverlay + + anchors.fill: directoryIcon + source: directoryIcon + colorization: 1.0 + brightness: 1.0 + colorizationColor: { + const isFile = treeDelegate.index === fileSystemTreeView.lastIndex + && !treeDelegate.hasChildren; + if (isFile) + return Qt.lighter(Colors.folder, 3) + + const isExpandedFolder = treeDelegate.expanded && treeDelegate.hasChildren; + if (isExpandedFolder) + return Colors.color2 + else + return Colors.folder + } + } + + HoverHandler { + id: hoverHandler + } + + TapHandler { + acceptedButtons: Qt.LeftButton | Qt.RightButton + onSingleTapped: (eventPoint, button) => { + switch (button) { + case Qt.LeftButton: + fileSystemTreeView.toggleExpanded(treeDelegate.row) + fileSystemTreeView.lastIndex = treeDelegate.index + // If this model item doesn't have children, it means it's + // representing a file. + if (!treeDelegate.hasChildren) + root.fileClicked(treeDelegate.filePath) + break; + case Qt.RightButton: + if (treeDelegate.hasChildren) + contextMenu.popup(); + break; + } + } + } + + MyMenu { + id: contextMenu + Action { + text: qsTr("Set as root index") + onTriggered: { + fileSystemTreeView.rootIndex = fileSystemTreeView.index(treeDelegate.row, 0) + } + } + Action { + text: qsTr("Reset root index") + onTriggered: fileSystemTreeView.rootIndex = undefined + } + } + } + + // Provide our own custom ScrollIndicator for the TreeView. + ScrollIndicator.vertical: ScrollIndicator { + active: true + implicitWidth: 15 + + contentItem: Rectangle { + implicitWidth: 6 + implicitHeight: 6 + + color: Colors.color1 + opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0 + + Behavior on opacity { + OpacityAnimator { + duration: 500 + } + } + } + } + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenu.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenu.qml new file mode 100644 index 000000000..1f1d30c56 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenu.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls.Basic +import FileSystemModule + +Menu { + id: root + + delegate: MenuItem { + id: menuItem + contentItem: Item { + Text { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 5 + + text: menuItem.text + color: enabled ? Colors.text : Colors.disabledText + } + Rectangle { + id: indicator + + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + width: 6 + height: parent.height + + visible: menuItem.highlighted + color: Colors.color2 + } + } + background: Rectangle { + implicitWidth: 210 + implicitHeight: 35 + color: menuItem.highlighted ? Colors.active : "transparent" + } + } + background: Rectangle { + implicitWidth: 210 + implicitHeight: 35 + color: Colors.surface2 + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenuBar.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenuBar.qml new file mode 100644 index 000000000..4874a2c03 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/MyMenuBar.qml @@ -0,0 +1,177 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.Basic +import FileSystemModule + +// The MenuBar also serves as a controller for our window as we don't use any decorations. +MenuBar { + id: root + + required property ApplicationWindow dragWindow + property alias infoText: windowInfo.text + + // Customization of the top level menus inside the MenuBar + delegate: MenuBarItem { + id: menuBarItem + + contentItem: Text { + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + + text: menuBarItem.text + font: menuBarItem.font + elide: Text.ElideRight + color: menuBarItem.highlighted ? Colors.textFile : Colors.text + opacity: enabled ? 1.0 : 0.3 + } + + background: Rectangle { + id: background + + color: menuBarItem.highlighted ? Colors.selection : "transparent" + Rectangle { + id: indicator + + width: 0; height: 3 + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + + color: Colors.color1 + states: State { + name: "active" + when: menuBarItem.highlighted + PropertyChanges { + indicator.width: background.width - 2 + } + } + transitions: Transition { + NumberAnimation { + properties: "width" + duration: 175 + } + } + } + } + } + // We use the contentItem property as a place to attach our window decorations. Beneath + // the usual menu entries within a MenuBar, it includes a centered information text, along + // with the minimize, maximize, and close buttons. + contentItem: RowLayout { + id: windowBar + + Layout.fillWidth: true + Layout.fillHeight: true + + spacing: root.spacing + Repeater { + id: menuBarItems + + Layout.alignment: Qt.AlignLeft + model: root.contentModel + } + + Item { + Layout.fillWidth: true + Layout.fillHeight: true + Text { + id: windowInfo + + width: parent.width; height: parent.height + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + leftPadding: windowActions.width + color: Colors.text + clip: true + } + } + + RowLayout { + id: windowActions + + Layout.alignment: Qt.AlignRight + Layout.fillHeight: true + + spacing: 0 + + component InteractionButton: Rectangle { + id: interactionButton + + signal action() + property alias hovered: hoverHandler.hovered + + Layout.fillHeight: true + Layout.preferredWidth: height + + color: hovered ? Colors.background : "transparent" + HoverHandler { + id: hoverHandler + } + TapHandler { + id: tapHandler + onTapped: interactionButton.action() + } + } + + InteractionButton { + id: minimize + + onAction: root.dragWindow.showMinimized() + Rectangle { + anchors.centerIn: parent + color: parent.hovered ? Colors.iconIndicator : Colors.icon + height: 2 + width: parent.height - 14 + } + } + + InteractionButton { + id: maximize + + onAction: root.dragWindow.showMaximized() + Rectangle { + anchors.fill: parent + anchors.margins: 7 + border.color: parent.hovered ? Colors.iconIndicator : Colors.icon + border.width: 2 + color: "transparent" + } + } + + InteractionButton { + id: close + + color: hovered ? "#ec4143" : "transparent" + onAction: root.dragWindow.close() + Rectangle { + anchors.centerIn: parent + width: parent.height - 8; height: 2 + + rotation: 45 + antialiasing: true + transformOrigin: Item.Center + color: parent.hovered ? Colors.iconIndicator : Colors.icon + + Rectangle { + anchors.centerIn: parent + width: parent.height + height: parent.width + + antialiasing: true + color: parent.color + } + } + } + } + } + + background: Rectangle { + color: Colors.surface2 + // Make the empty space drag the specified root window. + WindowDragHandler { + dragWindow: root.dragWindow + } + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ResizeButton.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ResizeButton.qml new file mode 100644 index 000000000..0df65bf82 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/ResizeButton.qml @@ -0,0 +1,23 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick.Controls +import FileSystemModule + +Button { + required property ApplicationWindow resizeWindow + + icon.width: 20; icon.height: 20 + anchors.right: parent.right + anchors.bottom: parent.bottom + rightPadding: 3 + bottomPadding: 3 + + icon.source: "../icons/resize.svg" + icon.color: hovered ? Colors.iconIndicator : Colors.icon + + background: null + checkable: false + display: AbstractButton.IconOnly + onPressed: resizeWindow.startSystemResize(Qt.BottomEdge | Qt.RightEdge) +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Sidebar.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Sidebar.qml new file mode 100644 index 000000000..04880a55d --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/Sidebar.qml @@ -0,0 +1,146 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls.Basic +import FileSystemModule + +Rectangle { + id: root + + property alias currentTabIndex: topBar.currentIndex + required property ApplicationWindow dragWindow + readonly property int tabBarSpacing: 10 + + color: Colors.surface2 + + component SidebarEntry: Button { + id: sidebarButton + + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + + icon.color: down || checked ? Colors.iconIndicator : Colors.icon + icon.width: 27 + icon.height: 27 + + topPadding: 0 + rightPadding: 0 + bottomPadding: 0 + leftPadding: 0 + background: null + + Rectangle { + id: indicator + + anchors.verticalCenter: parent.verticalCenter + x: 2 + width: 4 + height: sidebarButton.icon.height * 1.2 + + visible: sidebarButton.checked + color: Colors.color1 + } + } + + // TabBar is designed to be horizontal, whereas we need a vertical bar. + // We can easily achieve that by using a Container. + component TabBar: Container { + id: tabBarComponent + + Layout.fillWidth: true + // ButtonGroup ensures that only one button can be checked at a time. + ButtonGroup { + buttons: tabBarComponent.contentChildren + + // We have to manage the currentIndex ourselves, which we do by setting it to the index + // of the currently checked button. We use setCurrentIndex instead of setting the + // currentIndex property to avoid breaking bindings. See "Managing the Current Index" + // in Container's documentation for more information. + onCheckedButtonChanged: tabBarComponent.setCurrentIndex( + Math.max(0, buttons.indexOf(checkedButton))) + } + + contentItem: ColumnLayout { + spacing: tabBarComponent.spacing + Repeater { + model: tabBarComponent.contentModel + } + } + } + + ColumnLayout { + anchors.fill: root + anchors.topMargin: root.tabBarSpacing + anchors.bottomMargin: root.tabBarSpacing + + spacing: root.tabBarSpacing + TabBar { + id: topBar + + spacing: root.tabBarSpacing + // Shows help text when clicked. + SidebarEntry { + id: infoTab + icon.source: "../icons/light_bulb.svg" + checkable: true + checked: true + } + + // Shows the file system when clicked. + SidebarEntry { + id: filesystemTab + + icon.source: "../icons/read.svg" + checkable: true + } + + // Shows the scheme switcher + SidebarEntry { + icon.source: "../icons/leaf.svg" + checkable: true + + Layout.alignment: Qt.AlignHCenter + } + } + + // This item acts as a spacer to expand between the checkable and non-checkable buttons. + Item { + Layout.fillHeight: true + Layout.fillWidth: true + + // Make the empty space drag our main window. + WindowDragHandler { + dragWindow: root.dragWindow + } + } + + TabBar { + id: bottomBar + + spacing: root.tabBarSpacing + // Opens the Qt website in the system's web browser. + SidebarEntry { + id: qtWebsiteButton + icon.source: "../icons/globe.svg" + checkable: false + onClicked: Qt.openUrlExternally("https://www.qt.io/") + } + + // Opens the About Qt Window. + SidebarEntry { + id: aboutQtButton + + icon.source: "../icons/info_sign.svg" + checkable: false + onClicked: aboutQtWindow.visible = !aboutQtWindow.visible + } + } + } + + About { + id: aboutQtWindow + visible: false + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/WindowDragHandler.qml b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/WindowDragHandler.qml new file mode 100644 index 000000000..0e140aca3 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qml/WindowDragHandler.qml @@ -0,0 +1,16 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls + +// Allows dragging the window when placed on an unused section of the UI. +DragHandler { + + required property ApplicationWindow dragWindow + + target: null + onActiveChanged: { + if (active) dragWindow.startSystemMove() + } +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qmldir b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qmldir new file mode 100644 index 000000000..e9c99b07b --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/FileSystemModule/qmldir @@ -0,0 +1,11 @@ +module FileSystemModule +Main 1.0 Main.qml +About 1.0 qml/About.qml +Editor 1.0 qml/Editor.qml +MyMenu 1.0 qml/MyMenu.qml +Sidebar 1.0 qml/Sidebar.qml +MyMenuBar 1.0 qml/MyMenuBar.qml +ColorScheme 1.0 qml/ColorScheme.qml +ResizeButton 1.0 qml/ResizeButton.qml +FileSystemView 1.0 qml/FileSystemView.qml +WindowDragHandler 1.0 qml/WindowDragHandler.qml diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/editormodels.py b/sources/pyside6/doc/tutorials/extendedexplorer/editormodels.py new file mode 100644 index 000000000..688147726 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/editormodels.py @@ -0,0 +1,116 @@ +# Copyright (C) 2024 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +from PySide6.QtWidgets import QFileSystemModel +from PySide6.QtQuick import QQuickTextDocument +from PySide6.QtQml import QmlElement, QmlSingleton +from PySide6.QtCore import (Qt, QDir, QAbstractListModel, Slot, QFile, QTextStream, + QMimeDatabase, QFileInfo, QStandardPaths, QModelIndex, + Signal, Property) + +QML_IMPORT_NAME = "FileSystemModule" +QML_IMPORT_MAJOR_VERSION = 1 + + +@QmlElement +@QmlSingleton +class FileSystemModel(QFileSystemModel): + + rootIndexChanged = Signal() + + def getDefaultRootDir(): + return QStandardPaths.writableLocation(QStandardPaths.StandardLocation.HomeLocation) + + def __init__(self, parent=None): + super().__init__(parent=parent) + self.mRootIndex = QModelIndex() + self.mDb = QMimeDatabase() + self.setFilter(QDir.Filter.AllEntries | QDir.Filter.Hidden | QDir.Filter.NoDotAndDotDot) + self.setInitialDirectory() + + # check for the correct mime type and then read the file. + # returns the text file's content or an error message on failure + @Slot(str, result=str) + def readFile(self, path): + if path == "": + return "" + + file = QFile(path) + + mime = self.mDb.mimeTypeForFile(QFileInfo(file)) + if ('text' in mime.comment().lower() + or any('text' in s.lower() for s in mime.parentMimeTypes())): + if file.open(QFile.OpenModeFlag.ReadOnly | QFile.OpenModeFlag.Text): + stream = QTextStream(file).readAll() + file.close() + return stream + else: + return self.tr("Error opening the file!") + return self.tr("File type not supported!") + + @Slot(QQuickTextDocument, int, result=int) + def currentLineNumber(self, textDocument, cursorPosition): + td = textDocument.textDocument() + tb = td.findBlock(cursorPosition) + return tb.blockNumber() + + def setInitialDirectory(self, path=getDefaultRootDir()): + dir = QDir(path) + if dir.makeAbsolute(): + self.setRootPath(dir.path()) + else: + self.setRootPath(self.getDefaultRootDir()) + self.setRootIndex(self.index(dir.path())) + + # we only need one column in this example + def columnCount(self, parent): + return 1 + + @Property(QModelIndex, notify=rootIndexChanged) + def rootIndex(self): + return self.mRootIndex + + def setRootIndex(self, index): + if (index == self.mRootIndex): + return + self.mRootIndex = index + self.rootIndexChanged.emit() + + +@QmlElement +class LineNumberModel(QAbstractListModel): + + lineCountChanged = Signal() + + def __init__(self, parent=None): + self.mLineCount = 0 + super().__init__(parent=parent) + + @Property(int, notify=lineCountChanged) + def lineCount(self): + return self.mLineCount + + @lineCount.setter + def lineCount(self, n): + if n < 0: + print("lineCount must be greater then zero") + return + if self.mLineCount == n: + return + + if self.mLineCount < n: + self.beginInsertRows(QModelIndex(), self.mLineCount, n - 1) + self.mLineCount = n + self.endInsertRows() + else: + self.beginRemoveRows(QModelIndex(), n, self.mLineCount - 1) + self.mLineCount = n + self.endRemoveRows() + + def rowCount(self, parent): + return self.mLineCount + + def data(self, index, role): + if not self.checkIndex(index) or role != Qt.ItemDataRole.DisplayRole: + return + return index.row() diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.md b/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.md new file mode 100644 index 000000000..0ac7bec18 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.md @@ -0,0 +1,210 @@ +# Extending the file system explorer example + +This tutorial shows how to extend the +[Filesystem Explorer Example](filesystemexplorer_example) +by adding a simple scheme manager. This feature will allow you to switch color +schemes during the application's runtime. The color schemes will be declared in +JSON format and made available through a custom Python-QML plugin. + + + +## Defining the color schemes + +To define your color scheme, you can use the same color names as the original +example, so you don't have to rename every occurrence. The original colors are +defined in the `Colors.qml` file as follows: + +```{literalinclude} resources/Colors.qml +--- +language: QML +caption: true +linenos: true +lines: 7-22 +--- +``` + +The `schemes.json` file holds the color schemes. To start implementing this, you +can use the [Catppuccin](https://github.com/catppuccin/catppuccin) scheme. + +```{literalinclude} schemes.json +---json +caption: true +linenos: true +start-at: "Catppuccin" +end-at: "}," +--- +``` + +In addition to the "Catppuccin" color scheme, four other color schemes got +implemented: Nordic, One Dark, Gruvbox, and Solarized. However, feel free to get +creative and experiment with **your** schemes. + +To define a new color scheme, copy the structure from above and provide your +color values + +## Implement the scheme manager + +After defining the color schemes, you can implement the actual scheme manager. +The manager will read the `schemes.json` file and provide QML bindings to switch +between schemes during runtime. + +To implement the scheme manager, create a Python-QML plugin that exposes the +`SchemeManager` object to QML. This object will have methods to load the color +schemes from the `schemes.json` file and switch between them. + +Create a new Python file called `schememanager.py` in your project directory. In +this file, define the **SchemeManager** class: + +```{literalinclude} scheme_manager.py +--- +language: python +caption: true +linenos: true +start-at: "QML_IMPORT_NAME" +end-at: "class SchemeManager" +--- +``` + +To integrate smoothly into the already existing code, attach the SchemeManager +to the same QML module that's already present with +`QML_IMPORT_NAME = "FileSystemModule"`. Additionally, use the`@QmlNamedElement` +decorator to smoothly transition to using the custom plugin instead of the +`Colors.qml` file. With these changes, we can avoid editing all previous +assignments like: + +```QML +import FileSystemModule +... +Rectangle { + color: Colors.background +} +``` + +The constructor reads the `schemes.json` file once upon application start and +then calls the `setTheme` member function. + +```{literalinclude} scheme_manager.py +--- +language: python +caption: true +linenos: true +lines: 18-24 +--- +``` + +By adding the `SchemeManager` as a callable QML element named **Colors** to the +FileSystemModule, the class is now accessible in the code without the need to +import it each time or edit previous assignments. This, in turn, will streamline +the workflow. + +After defining the schemes in the JSON format and making the `SchemeManager` +class a callable element from QML under the name **Colors**, there are two +remaining steps to fully integrate the new scheme manager in the example. + +The **first step** is to create a function in the `SchemeManager` class that +loads a color scheme from the JSON file. The **second step** is to make the +individual colors available in QML with the *same name* as used before with the +syntax `Colors.<previousName>` as assignable properties. + + +```{literalinclude} scheme_manager.py +--- +language: python +caption: true +linenos: true +lines: 26-31 +--- +``` + +The `setScheme` method is responsible for switching between color schemes. To +make this method accessible in QML, use the `@Slot(str)` decorator and specify +that it takes a string as its input parameter. In this method, we populate a +dictionary with the color values from the JSON file. + +> Note: For simplicity reasons no other error checking is performed. +> You would probably want to validate the keys contained in the json. + +```{literalinclude} scheme_manager.py +--- +language: python +caption: true +linenos: true +start-at: "@Property(QColor" +end-at: "return" +--- +``` + +To make the color property assignable in QML, use the `@Property` decorator. +We simply return the corresponding color value from the dictionary for each +property. This process is repeated for all other colors that are used in the +application. +At this point the application should start with the colors provided by the +active scheme in the constructor. + +## Add the scheme switching to QML + +To visualize the current scheme and enable interactive scheme switching, start +by adding a new entry to the `Sidebar.qml` file. + +```{literalinclude} FileSystemModule/qml/Sidebar.qml +--- +language: QML +caption: true +linenos: true +lines: 99-105 +--- +``` + +To update the main content area of the application to display the `ColorScheme`, +the logic that checks the active index from the Sidebar buttons needs to be +modified. The necessary changes will be made to the Main.qml file: + +```{literalinclude} FileSystemModule/Main.qml +--- +language: QML +caption: true +linenos: true +lines: 170-187 +--- +``` + +In addition, change the behavior of the application so that there are two +`StackLayouts`: one for the resizable navigation and one for the main content +area where we display our color scheme switching functionality. These changes +will also be made to the Main.qml file. + +```{literalinclude} FileSystemModule/Main.qml +--- +language: QML +caption: true +linenos: true +lines: 147-150 +--- +``` + +To complete our implementation, the `ColorScheme.qml` file needs to be created. +The implementation is straightforward and follows the same principles as in the +original example. If anything is unclear, please refer to the documentation +provided there. To display all colors and scheme names, use a `Repeater`. The +model for the Repeater is provided by our `scheme_manager.py`file as a +`QStringList`. + +```{literalinclude} FileSystemModule/qml/ColorScheme.qml +--- +language: QML +caption: true +linenos: true +lines: 97-111 +--- +``` + +When examining the code in more detail, you will notice that there are different +ways to retrieve the models. The `getKeys()` method is defined as a **Slot** and +therefore requires parentheses when called. On the other hand, the `currentColors` +model is defined as a **property** and is therefore assigned as a property in QML. +The reason for this is to receive notifications when the color scheme is switched +so that the colors displayed in the application can be updated. The keys for the +color schemes are loaded only once at application startup and do not rely on any +notifications. + + diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.pyproject b/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.pyproject new file mode 100644 index 000000000..77a3969ae --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/extendedexplorer.pyproject @@ -0,0 +1,31 @@ +{ + "files": [ + "main.py", + "editormodels.py", + "scheme_manager.py", + "schemes.json", + "FileSystemModule/qmldir", + "FileSystemModule/app.qrc", + "FileSystemModule/icons.qrc", + "FileSystemModule/Main.qml", + "FileSystemModule/qml/About.qml", + "FileSystemModule/qml/ColorScheme.qml", + "FileSystemModule/qml/Editor.qml", + "FileSystemModule/qml/FileSystemView.qml", + "FileSystemModule/qml/MyMenu.qml", + "FileSystemModule/qml/MyMenuBar.qml", + "FileSystemModule/qml/ResizeButton.qml", + "FileSystemModule/qml/Sidebar.qml", + "FileSystemModule/qml/WindowDragHandler.qml", + "FileSystemModule/icons/app_icon.svg", + "FileSystemModule/icons/folder_closed.svg", + "FileSystemModule/icons/folder_open.svg", + "FileSystemModule/icons/generic_file.svg", + "FileSystemModule/icons/globe.svg", + "FileSystemModule/icons/info_sign.svg", + "FileSystemModule/icons/light_bulb.svg", + "FileSystemModule/icons/qt_logo.svg", + "FileSystemModule/icons/read.svg", + "FileSystemModule/icons/resize.svg" + ] +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/main.py b/sources/pyside6/doc/tutorials/extendedexplorer/main.py new file mode 100644 index 000000000..f1e6e7d93 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/main.py @@ -0,0 +1,50 @@ +# Copyright (C) 2024 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +""" +This example shows how to customize Qt Quick Controls by implementing a simple filesystem explorer. +""" + +# Compile both resource files app.qrc and icons.qrc and include them here if you wish +# to load them from the resource system. Currently, all resources are loaded locally +# import FileSystemModule.rc_icons +# import FileSystemModule.rc_app + +from scheme_manager import SchemeManager +from editormodels import FileSystemModel +import PySide6 +from PySide6.QtGui import QGuiApplication, QIcon +from PySide6.QtQml import QQmlApplicationEngine +from PySide6.QtCore import QCommandLineParser + +import sys + +if __name__ == '__main__': + app = QGuiApplication(sys.argv) + app.setOrganizationName("QtProject") + app.setApplicationName("File System Explorer") + app.setApplicationVersion(PySide6.__version__) + app.setWindowIcon(QIcon("FileSystemModule/icons/app_icon.svg")) + + parser = QCommandLineParser() + parser.setApplicationDescription("Qt Filesystemexplorer Example") + parser.addHelpOption() + parser.addVersionOption() + parser.addPositionalArgument("", "Initial directory", "[path]") + parser.process(app) + args = parser.positionalArguments() + + engine = QQmlApplicationEngine() + # Include the path of this file to search for the 'qmldir' module + engine.addImportPath(sys.path[0]) + + engine.loadFromModule("FileSystemModule", "Main") + + if not engine.rootObjects(): + sys.exit(-1) + + if (len(args) == 1): + fsm = engine.singletonInstance("FileSystemModule", "FileSystemModel") + fsm.setInitialDirectory(args[0]) + + sys.exit(app.exec()) diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/resources/Colors.qml b/sources/pyside6/doc/tutorials/extendedexplorer/resources/Colors.qml new file mode 100644 index 000000000..280f89286 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/resources/Colors.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +pragma Singleton +import QtQuick + +QtObject { + readonly property color background: "#23272E" + readonly property color surface1: "#1E2227" + readonly property color surface2: "#090A0C" + readonly property color text: "#ABB2BF" + readonly property color textFile: "#C5CAD3" + readonly property color disabledText: "#454D5F" + readonly property color selection: "#2C313A" + readonly property color active: "#23272E" + readonly property color inactive: "#3E4452" + readonly property color folder: "#3D4451" + readonly property color icon: "#3D4451" + readonly property color iconIndicator: "#E5C07B" + readonly property color color1: "#E06B74" + readonly property color color2: "#62AEEF" +} diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/resources/colorscheme.png b/sources/pyside6/doc/tutorials/extendedexplorer/resources/colorscheme.png Binary files differnew file mode 100644 index 000000000..410538ca3 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/resources/colorscheme.png diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.gif b/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.gif Binary files differnew file mode 100644 index 000000000..9e59f64aa --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.gif diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.webp b/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.webp Binary files differnew file mode 100644 index 000000000..79a14f34c --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/resources/extendedexplorer.webp diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/scheme_manager.py b/sources/pyside6/doc/tutorials/extendedexplorer/scheme_manager.py new file mode 100644 index 000000000..8d732093c --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/scheme_manager.py @@ -0,0 +1,97 @@ +# Copyright (C) 2023 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import json +from pathlib import Path +from PySide6.QtCore import Slot, QObject, Property, Signal +from PySide6.QtGui import QColor +from PySide6.QtQml import QmlNamedElement, QmlSingleton + +QML_IMPORT_NAME = "FileSystemModule" +QML_IMPORT_MAJOR_VERSION = 1 + + +@QmlNamedElement("Colors") +@QmlSingleton +class SchemeManager(QObject): + + schemeChanged = Signal() + + def __init__(self, parent=None): + super().__init__(parent=parent) + with open(Path(__file__).parent / "schemes.json", 'r') as f: + self.m_schemes = json.load(f) + self.m_activeScheme = {} + self.m_activeSchemeName = "Catppuccin" + self.setScheme(self.m_activeSchemeName) + + @Slot(str) + def setScheme(self, theme): + for k, v in self.m_schemes[theme].items(): + self.m_activeScheme[k] = QColor.fromString(v) + self.m_activeSchemeName = theme + self.schemeChanged.emit() + + @Slot(result='QStringList') + def getKeys(self): + return self.m_schemes.keys() + + @Property('QStringList', notify=schemeChanged) + def currentColors(self): + return self.m_schemes[self.m_activeSchemeName].values() + + @Property(QColor, notify=schemeChanged) + def background(self): + return self.m_activeScheme["background"] + + @Property(QColor, notify=schemeChanged) + def surface1(self): + return self.m_activeScheme["surface1"] + + @Property(QColor, notify=schemeChanged) + def surface2(self): + return self.m_activeScheme["surface2"] + + @Property(QColor, notify=schemeChanged) + def text(self): + return self.m_activeScheme["text"] + + @Property(QColor, notify=schemeChanged) + def textFile(self): + return self.m_activeScheme["textFile"] + + @Property(QColor, notify=schemeChanged) + def disabledText(self): + return self.m_activeScheme["disabledText"] + + @Property(QColor, notify=schemeChanged) + def selection(self): + return self.m_activeScheme["selection"] + + @Property(QColor, notify=schemeChanged) + def active(self): + return self.m_activeScheme["active"] + + @Property(QColor, notify=schemeChanged) + def inactive(self): + return self.m_activeScheme["inactive"] + + @Property(QColor, notify=schemeChanged) + def folder(self): + return self.m_activeScheme["folder"] + + @Property(QColor, notify=schemeChanged) + def icon(self): + return self.m_activeScheme["icon"] + + @Property(QColor, notify=schemeChanged) + def iconIndicator(self): + return self.m_activeScheme["iconIndicator"] + + @Property(QColor, notify=schemeChanged) + def color1(self): + return self.m_activeScheme["color1"] + + @Property(QColor, notify=schemeChanged) + def color2(self): + return self.m_activeScheme["color2"] diff --git a/sources/pyside6/doc/tutorials/extendedexplorer/schemes.json b/sources/pyside6/doc/tutorials/extendedexplorer/schemes.json new file mode 100644 index 000000000..e4f2d8c81 --- /dev/null +++ b/sources/pyside6/doc/tutorials/extendedexplorer/schemes.json @@ -0,0 +1,82 @@ +{ + "Catppuccin": { + "background": "#1E1E2E", + "surface1": "#181825", + "surface2": "#11111B", + "text": "#CDD6F4", + "textFile": "#CDD6F4", + "disabledText": "#363659", + "selection": "#45475A", + "active": "#1E1E2E", + "inactive": "#6C7086", + "folder": "#6C7086", + "icon": "#6C7086", + "iconIndicator": "#FFCC66", + "color1": "#CBA6F7", + "color2": "#89DCEB" + }, + "Nordic": { + "background": "#2E3440", + "surface1": "#2B2F3A", + "surface2": "#262A35", + "text": "#D8DEE9", + "textFile": "#D8DEE9", + "disabledText": "#4D556A", + "selection": "#495468", + "active": "#2E3440", + "inactive": "#555B6A", + "folder": "#495468", + "icon": "#495468", + "iconIndicator": "#FFC40D", + "color1": "#81B6C6", + "color2": "#5E81AC" + }, + "One Dark": { + "background": "#23272E", + "surface1": "#1E2227", + "surface2": "#090A0C", + "text": "#ABB2BF", + "textFile": "#C5CAD3", + "disabledText": "#2B303B", + "selection": "#2C313A", + "active": "#23272E", + "inactive": "#3E4452", + "folder": "#3D4451", + "icon": "#3D4451", + "iconIndicator": "#E5C07B", + "color1": "#E06B74", + "color2": "#62AEEF" + }, + "Gruvbox": { + "background": "#292828", + "surface1": "#171819", + "surface2": "#090A0C", + "text": "#D4BE98", + "textFile": "#E1D2B7", + "disabledText": "#2C313A", + "selection": "#333130", + "active": "#292828", + "inactive": "#383737", + "folder": "#383737", + "icon": "#383737", + "iconIndicator": "#FFCC66", + "color1": "#A7B464", + "color2": "#D3869B" + }, + "Solarized": { + "background": "#FDF6E3", + "surface1": "#EEE8D5", + "surface2": "#DDD6C1", + "text": "#6D6D6D", + "textFile": "#333333", + "disabledText": "#ADADAD", + "selection": "#D1CBB8", + "active": "#FDF6E3", + "inactive": "#8C8364", + "folder": "#5F5944", + "icon": "#5F5944", + "iconIndicator": "#002B36", + "color1": "#B58900", + "color2": "#6B9E75" + } +} diff --git a/sources/pyside6/doc/tutorials/index.rst b/sources/pyside6/doc/tutorials/index.rst index ae29da9d9..8a69a3c6f 100644 --- a/sources/pyside6/doc/tutorials/index.rst +++ b/sources/pyside6/doc/tutorials/index.rst @@ -1,5 +1,5 @@ -|project| Tutorials -==================== +Tutorials +========= A collection of tutorials with walkthrough guides are provided with |project| to help new users get started. @@ -8,64 +8,6 @@ Some of these documents were ported from C++ to Python and cover a range of topics, from basic use of widgets to step-by-step tutorials that show how an application is put together. -Before you start ----------------- - -Here you can find a couple of common questions and situations that will -clarify questions before you start programming. -If you have not installed PySide yet, remember to check the -`Quick Start <../quickstart.html>`_ section. - -.. panels:: - :container: container-lg pb-1 - :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2 - - .. link-button:: pretutorial/whatisqt - :type: ref - :text: Qt, QML, Widgets... What is the difference? - :classes: btn-link btn-block stretched-link - --- - - .. link-button:: pretutorial/whichide - :type: ref - :text: Which IDEs are compatible with PySide? - :classes: btn-link btn-block stretched-link - --- - - .. link-button:: pretutorial/whatisshiboken - :type: ref - :text: Binding Generation: What is Shiboken? - :classes: btn-link btn-block stretched-link - --- - - .. link-button:: pretutorial/typesoffiles - :type: ref - :text: File Types in PySide - :classes: btn-link btn-block stretched-link - --- - - .. link-button:: pretutorial/distribution - :type: ref - :text: Distributing your application to other systems and platforms - :classes: btn-link btn-block stretched-link - - --- - - .. link-button:: pretutorial/whyqtforpython - :type: ref - :text: As a Qt/C++ developer, why should I consider Qt for Python? - :classes: btn-link btn-block stretched-link - -.. toctree:: - :hidden: - - pretutorial/whatisqt.rst - pretutorial/whichide.rst - pretutorial/whatisshiboken.rst - pretutorial/typesoffiles.rst - pretutorial/distribution.rst - pretutorial/whyqtforpython.rst - Qt Widgets: Basic tutorials --------------------------- @@ -73,86 +15,78 @@ If you want to see the available widgets in action, you can check the `Qt Widget Gallery <https://doc.qt.io/qt-6/gallery.html>`_ to learn their names and how they look like. -.. panels:: - :container: container-lg pb-1 - :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2 - :img-top-cls: d-flex align-self-center - - :img-top: basictutorial/widgets.png - - .. link-button:: basictutorial/widgets - :type: ref - :text: Your First QtWidgets Application - :classes: btn-link btn-block stretched-link - --- - :img-top: basictutorial/clickablebutton.png - - .. link-button:: basictutorial/clickablebutton - :type: ref - :text: Using a Simple Button - :classes: btn-link btn-block stretched-link - --- - :img-top: basictutorial/signals_slots.png - - .. link-button:: basictutorial/signals_and_slots - :type: ref - :text: Signals and Slots - :classes: btn-link btn-block stretched-link - --- - :img-top: basictutorial/dialog.png - - .. link-button:: basictutorial/dialog - :type: ref - :text: Creating a Dialog Application - :classes: btn-link btn-block stretched-link - --- - :img-top: basictutorial/tablewidget.png - - .. link-button:: basictutorial/tablewidget - :type: ref - :text: Displaying Data Using a Table Widget - :classes: btn-link btn-block stretched-link - - --- - :img-top: basictutorial/treewidget.png - - .. link-button:: basictutorial/treewidget - :type: ref - :text: Displaying Data Using a Tree Widget - :classes: btn-link btn-block stretched-link - - --- - :img-top: basictutorial/uifiles.png - - .. link-button:: basictutorial/uifiles - :type: ref - :text: Using .ui files from Designer or QtCreator with QUiLoader and pyside6-uic - :classes: btn-link btn-block stretched-link - - --- - :img-top: basictutorial/player-new.png - - .. link-button:: basictutorial/qrcfiles - :type: ref - :text: Using .qrc Files (pyside6-rcc) - :classes: btn-link btn-block stretched-link - - --- - :img-top: basictutorial/translations.png - - .. link-button:: basictutorial/translations - :type: ref - :text: Translating Applications - :classes: btn-link btn-block stretched-link - - --- - :img-top: basictutorial/widgetstyling-yes.png - - .. link-button:: basictutorial/widgetstyling - :type: ref - :text: Styling the Widgets Application - :classes: btn-link btn-block stretched-link +.. grid:: 1 3 3 3 + :gutter: 2 + + .. grid-item-card:: Basic Widget + :class-item: cover-img + :link: basictutorial/widgets.html + :img-top: basictutorial/widgets.png + + Your first QtWidgets Application + + .. grid-item-card:: Basic Button + :class-item: cover-img + :link: basictutorial/clickablebutton.html + :img-top: basictutorial/clickablebutton.png + + Using a Simple Button + + .. grid-item-card:: Basic Connections + :class-item: cover-img + :link: basictutorial/signals_and_slots.html + :img-top: basictutorial/signals_slots.png + + Signals and Slots + + .. grid-item-card:: Basic Dialog + :class-item: cover-img + :link: basictutorial/dialog.html + :img-top: basictutorial/dialog.png + + Creating a Dialog Application + + .. grid-item-card:: Basic Table + :class-item: cover-img + :link: basictutorial/tablewidget.html + :img-top: basictutorial/tablewidget.png + + Displaying Data Using a Table Widget + + .. grid-item-card:: Basic Tree + :class-item: cover-img + :link: basictutorial/treewidget.html + :img-top: basictutorial/treewidget.png + + Displaying Data Using a Tree Widget + .. grid-item-card:: Basic ``ui`` files + :class-item: cover-img + :link: basictutorial/uifiles.html + :img-top: basictutorial/uifiles.png + + Using .ui files from Designer or QtCreator with QUiLoader and pyside6-uic + + .. grid-item-card:: Basic ``qrc`` files + :class-item: cover-img + :link: basictutorial/qrcfiles.html + :img-top: basictutorial/player-new.png + + Using .qrc Files (pyside6-rcc) + + .. grid-item-card:: Basic Translations + :class-item: cover-img + :link: basictutorial/translations.html + :img-top: basictutorial/translations.png + + Translating Applications + + .. grid-item-card:: Basic Widget Style + :class-item: cover-img + :link: basictutorial/widgetstyling.html + :img-top: basictutorial/widgetstyling-yes.png + + Styling the Widgets Application .. toctree:: :hidden: @@ -172,39 +106,43 @@ names and how they look like. Quick/QML: Basic tutorials -------------------------- -.. panels:: - :container: container-lg pb-1 - :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2 - :img-top-cls: d-flex align-self-center +.. grid:: 1 3 3 3 + :gutter: 2 + + .. grid-item-card:: Basic Quick + :class-item: cover-img + :link: basictutorial/qml.html + :img-top: basictutorial/greenapplication.png - :img-top: basictutorial/greenapplication.png + Your First QtQuick/QML Application - .. link-button:: basictutorial/qml - :type: ref - :text: Your First QtQuick/QML Application - :classes: btn-link btn-block stretched-link - --- - :img-top: qmlintegration/textproperties_material.png + .. grid-item-card:: Basic QML Integration + :class-item: cover-img + :link: qmlintegration/qmlintegration.html + :img-top: qmlintegration/textproperties_material.png - .. link-button:: qmlintegration/qmlintegration - :type: ref - :text: Python-QML integration - :classes: btn-link btn-block stretched-link - --- - :img-top: qmlapp/qmlapplication.png + Python-QML integration - .. link-button:: qmlapp/qmlapplication - :type: ref - :text: QML Application Tutorial (QtCreator) - :classes: btn-link btn-block stretched-link - --- - :img-top: qmlsqlintegration/example_list_view.png + .. grid-item-card:: QML Application + :class-item: cover-img + :link: qmlapp/qmlapplication.html + :img-top: qmlapp/qmlapplication.png - .. link-button:: qmlsqlintegration/qmlsqlintegration - :type: ref - :text: QML, SQL and PySide Integration Tutorial - :classes: btn-link btn-block stretched-link + QML Application Tutorial (QtCreator) + .. grid-item-card:: Advanced QML Integration + :class-item: cover-img + :link: qmlsqlintegration/qmlsqlintegration.html + :img-top: qmlsqlintegration/example_list_view.png + + QML, SQL and PySide Integration Tutorial + + .. grid-item-card:: Extended Explorer + :class-item: cover-img + :link: extendedexplorer/extendedexplorer.html + :img-top: extendedexplorer/resources/extendedexplorer.webp + + Extending an Qt Quick Controls example .. toctree:: :maxdepth: 1 @@ -214,28 +152,27 @@ Quick/QML: Basic tutorials qmlintegration/qmlintegration.rst qmlapp/qmlapplication.rst qmlsqlintegration/qmlsqlintegration.rst + extendedexplorer/extendedexplorer.md General Applications -------------------- -.. panels:: - :container: container-lg pb-1 - :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2 - :img-top-cls: d-flex align-self-center +.. grid:: 1 3 3 3 + :gutter: 2 + + .. grid-item-card:: Data Visualization + :class-item: cover-img + :link: datavisualize/index.html + :img-top: datavisualize/images/datavisualization_app.png - :img-top: datavisualize/images/datavisualization_app.png + Data Visualization Tool - .. link-button:: datavisualize/index - :type: ref - :text: Data Visualization Tool - :classes: btn-link btn-block stretched-link - --- - :img-top: expenses/expenses_tool.png + .. grid-item-card:: Expenses Application + :class-item: cover-img + :link: expenses/expenses.html + :img-top: expenses/expenses_tool.png - .. link-button:: expenses/expenses - :type: ref - :text: Expenses Tool - :classes: btn-link btn-block stretched-link + Expenses administration tool .. toctree:: :hidden: @@ -243,6 +180,13 @@ General Applications datavisualize/index.rst expenses/expenses.rst +Qt Overviews +------------ + +.. toctree:: + :maxdepth: 1 + + ../overviews/overviews-main.rst C++ and Python -------------- @@ -258,4 +202,5 @@ Debug a PySide6 Application :maxdepth: 1 debugging/mixed_debugging.rst + debugging/qml_debugging.rst diff --git a/sources/pyside6/doc/tutorials/modelviewprogramming/qlistview-dnd.py b/sources/pyside6/doc/tutorials/modelviewprogramming/qlistview-dnd.py new file mode 100644 index 000000000..3a37cc0f3 --- /dev/null +++ b/sources/pyside6/doc/tutorials/modelviewprogramming/qlistview-dnd.py @@ -0,0 +1,137 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import sys + +from PySide6.QtWidgets import (QAbstractItemView, QApplication, QMainWindow, + QListView) +from PySide6.QtCore import (QByteArray, QDataStream, QIODevice, QMimeData, + QModelIndex, QStringListModel, Qt) + + +class DragDropListModel(QStringListModel): + """A simple model that uses a QStringList as its data source.""" + + def __init__(self, strings, parent=None): + super().__init__(strings, parent) + +#! [0] + + def canDropMimeData(self, data, action, row, column, parent): + if not data.hasFormat("application/vnd.text.list"): + return False + + if column > 0: + return False + + return True +#! [0] +#! [1] + def dropMimeData(self, data, action, row, column, parent): + if not self.canDropMimeData(data, action, row, column, parent): + return False + + if action == Qt.IgnoreAction: + return True +#! [1] + +#! [2] + begin_row = 0 + + if row != -1: + begin_row = row +#! [2] #! [3] + elif parent.isValid(): + begin_row = parent.row() +#! [3] #! [4] + else: + begin_row = self.rowCount(QModelIndex()) +#! [4] + +#! [5] + encoded_data = data.data("application/vnd.text.list") + stream = QDataStream(encoded_data, QIODevice.ReadOnly) + new_items = [] + while not stream.atEnd(): + new_items.append(stream.readQString()) +#! [5] + +#! [6] + self.insertRows(begin_row, len(new_items), QModelIndex()) + for text in new_items: + idx = self.index(begin_row, 0, QModelIndex()) + self.setData(idx, text) + begin_row += 1 + + return True +#! [6] + +#! [7] + def flags(self, index): + default_flags = super().flags(index) + if index.isValid(): + return Qt.ItemIsDragEnabled | Qt.ItemIsDropEnabled | default_flags + return Qt.ItemIsDropEnabled | default_flags +#! [7] + +#! [8] + def mimeData(self, indexes): + mime_data = QMimeData() + encoded_data = QByteArray() + stream = QDataStream(encoded_data, QIODevice.WriteOnly) + for index in indexes: + if index.isValid(): + text = self.data(index, Qt.DisplayRole) + stream.writeQString(text) + + mime_data.setData("application/vnd.text.list", encoded_data) + return mime_data +#! [8] + +#! [9] + def mimeTypes(self): + return ["application/vnd.text.list"] +#! [9] + +#! [10] + def supportedDropActions(self): + return Qt.CopyAction | Qt.MoveAction +#! [10] + + +class MainWindow(QMainWindow): + + def __init__(self, parent=None): + super().__init__(parent) + + file_menu = self.menuBar().addMenu("&File") + quit_action = file_menu.addAction("E&xit") + quit_action.setShortcut("Ctrl+Q") + +#! [mainwindow0] + self._list_view = QListView(self) + self._list_view.setSelectionMode(QAbstractItemView.ExtendedSelection) + self._list_view.setDragEnabled(True) + self._list_view.setAcceptDrops(True) + self._list_view.setDropIndicatorShown(True) +#! [mainwindow0] + + quit_action.triggered.connect(self.close) + + self.setup_list_items() + + self.setCentralWidget(self._list_view) + self.setWindowTitle("List View") + + def setup_list_items(self): + items = ["Oak", "Fir", "Pine", "Birch", "Hazel", "Redwood", "Sycamore", + "Chestnut", "Mahogany"] + model = DragDropListModel(items, self) + self._list_view.setModel(model) + + +if __name__ == '__main__': + app = QApplication(sys.argv) + window = MainWindow() + window.show() + sys.exit(app.exec()) diff --git a/sources/pyside6/doc/tutorials/modelviewprogramming/simplemodel-use.py b/sources/pyside6/doc/tutorials/modelviewprogramming/simplemodel-use.py new file mode 100644 index 000000000..1bacfd829 --- /dev/null +++ b/sources/pyside6/doc/tutorials/modelviewprogramming/simplemodel-use.py @@ -0,0 +1,44 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import sys + +from PySide6.QtWidgets import (QApplication, QFileSystemModel, QLabel, + QVBoxLayout, QWidget) +from PySide6.QtGui import QPalette +from PySide6.QtCore import QDir, Qt + + +if __name__ == '__main__': + app = QApplication(sys.argv) + + window = QWidget() + layout = QVBoxLayout(window) + title = QLabel("Some items from the directory model", window) + title.setBackgroundRole(QPalette.Base) + title.setMargin(8) + layout.addWidget(title) + +#! [0] + model = QFileSystemModel() + model.setRootPath(QDir.currentPath()) + + def on_directory_loaded(directory): + parent_index = model.index(directory) + num_rows = model.rowCount(parent_index) +#! [1] + for row in range(num_rows): + index = model.index(row, 0, parent_index) +#! [1] +#! [2] + text = model.data(index, Qt.DisplayRole) +#! [2] + label = QLabel(text, window) + layout.addWidget(label) + + model.directoryLoaded.connect(on_directory_loaded) +#! [0] + + window.setWindowTitle("A simple model example") + window.show() + sys.exit(app.exec()) diff --git a/sources/pyside6/doc/tutorials/modelviewprogramming/stringlistmodel.py b/sources/pyside6/doc/tutorials/modelviewprogramming/stringlistmodel.py new file mode 100644 index 000000000..2c8493aa9 --- /dev/null +++ b/sources/pyside6/doc/tutorials/modelviewprogramming/stringlistmodel.py @@ -0,0 +1,124 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import sys + +from PySide6.QtWidgets import (QApplication, QListView) +from PySide6.QtCore import QAbstractListModel, QStringListModel, QModelIndex, Qt + + +#! [0] +class StringListModel(QAbstractListModel): + def __init__(self, strings, parent=None): + super().__init__(parent) + self._strings = strings + +#! [0] + def rowCount(self, parent=QModelIndex()): + """Returns the number of items in the string list as the number of rows + in the model.""" + return len(self._strings) +#! [0] + +#! [1] + def data(self, index, role): + """Returns an appropriate value for the requested data. + If the view requests an invalid index, an invalid variant is returned. + Any valid index that corresponds to a string in the list causes that + string to be returned.""" + row = index.row() + if not index.isValid() or row >= len(self._strings): + return None + if role != Qt.DisplayRole and role != Qt.EditRole: + return None + return self._strings[row] +#! [1] + +#! [2] + def headerData(self, section, orientation, role=Qt.DisplayRole): + """Returns the appropriate header string depending on the orientation of + the header and the section. If anything other than the display role is + requested, we return an invalid variant.""" + if role != Qt.DisplayRole: + return None + if orientation == Qt.Horizontal: + return f"Column {section}" + return f"Row {section}" +#! [2] + +#! [3] + def flags(self, index): + """Returns an appropriate value for the item's flags. Valid items are + enabled, selectable, and editable.""" + + if not index.isValid(): + return Qt.ItemIsEnabled + return super().flags(index) | Qt.ItemIsEditable +#! [3] + + #! [4] + def setData(self, index, value, role=Qt.EditRole): + """Changes an item in the string list, but only if the following conditions + are met: + + # The index supplied is valid. + # The index corresponds to an item to be shown in a view. + # The role associated with editing text is specified. + + The dataChanged() signal is emitted if the item is changed.""" + + if index.isValid() and role == Qt.EditRole: + self._strings[index.row()] = value + self.dataChanged.emit(index, index, {role}) + return True +#! [4] #! [5] + return False +#! [5] + +#! [6] + def insertRows(self, position, rows, parent): + """Inserts a number of rows into the model at the specified position.""" + self.beginInsertRows(QModelIndex(), position, position + rows - 1) + for row in range(rows): + self._strings.insert(position, "") + self.endInsertRows() + return True +#! [6] #! [7] +#! [7] + +#! [8] + def removeRows(self, position, rows, parent): + """Removes a number of rows from the model at the specified position.""" + self.beginRemoveRows(QModelIndex(), position, position + rows - 1) + for row in range(rows): + del self._strings[position] + self.endRemoveRows() + return True +#! [8] #! [9] +#! [9] + + +#! [main0] +if __name__ == '__main__': + app = QApplication(sys.argv) + +#! [main1] + numbers = ["One", "Two", "Three", "Four", "Five"] + model = StringListModel(numbers) +#! [main0] #! [main1] #! [main2] #! [main3] + view = QListView() +#! [main2] + view.setWindowTitle("View onto a string list model") +#! [main4] + view.setModel(model) +#! [main3] #! [main4] + + model.insertRows(5, 7, QModelIndex()) + for row in range(5, 12): + index = model.index(row, 0, QModelIndex()) + model.setData(index, f"{row+1}") + +#! [main5] + view.show() + sys.exit(app.exec()) +#! [main5] diff --git a/sources/pyside6/doc/tutorials/portingguide/chapter1/chapter1.rst b/sources/pyside6/doc/tutorials/portingguide/chapter1/chapter1.rst index 2a3bd7079..87fb97660 100644 --- a/sources/pyside6/doc/tutorials/portingguide/chapter1/chapter1.rst +++ b/sources/pyside6/doc/tutorials/portingguide/chapter1/chapter1.rst @@ -26,7 +26,7 @@ the tables. Port these helper functions first. Here is how the C++ and Python versions of these functions look like: C++ version ------------- +----------- .. literalinclude:: initdb.h :language: c++ @@ -34,7 +34,7 @@ C++ version :lines: 9-33 Python version ---------------- +-------------- .. literalinclude:: createdb.py :language: python @@ -45,16 +45,16 @@ Now that the helper functions are in place, port ``initDb``. Here is how the C++ and Python versions of this function looks like: -C++ version ------------- +C++ version (initDb) +-------------------- .. literalinclude:: initdb.h :language: c++ :linenos: :lines: 35-112 -Python version ---------------- +Python version (init_db) +------------------------ .. literalinclude:: createdb.py :language: python @@ -77,7 +77,7 @@ test it, add the following code to ``main.py`` and run it: Use the following command from the prompt to run: -.. code-block:: +.. code-block:: bash python main.py diff --git a/sources/pyside6/doc/tutorials/portingguide/chapter2/chapter2.rst b/sources/pyside6/doc/tutorials/portingguide/chapter2/chapter2.rst index fa6ef1116..83ba3357b 100644 --- a/sources/pyside6/doc/tutorials/portingguide/chapter2/chapter2.rst +++ b/sources/pyside6/doc/tutorials/portingguide/chapter2/chapter2.rst @@ -47,16 +47,16 @@ For example, painting stars to represent the rating for each book in the table. Here is how the reimplemented code looks like: -C++ version ------------- +C++ version (bookdelegate) +-------------------------- .. literalinclude:: bookdelegate.cpp :language: c++ :linenos: :lines: 22- -Python version ---------------- +Python version (bookdelegate) +----------------------------- .. literalinclude:: bookdelegate.py :language: python diff --git a/sources/pyside6/doc/tutorials/portingguide/chapter3/chapter3.rst b/sources/pyside6/doc/tutorials/portingguide/chapter3/chapter3.rst index 1d48d4ea3..98d4d3982 100644 --- a/sources/pyside6/doc/tutorials/portingguide/chapter3/chapter3.rst +++ b/sources/pyside6/doc/tutorials/portingguide/chapter3/chapter3.rst @@ -21,9 +21,9 @@ and add the following imports to it: To generate this Python code, run the following command on the prompt: -.. code-block:: +.. code-block:: bash - pyside6-uic bookwindow.ui > ui_bookwindow.py + pyside6-uic bookwindow.ui -o ui_bookwindow.py Try porting the remaining code now. To begin with, here is how both the versions of the constructor code looks: @@ -101,9 +101,9 @@ image only. Now, run the ``pyside6-rcc`` tool on the ``books.qrc`` file to generate ``rc_books.py``. -.. code-block:: +.. code-block:: bash - pyside6-rcc books.qrc > rc_books.py + pyside6-rcc books.qrc -o rc_books.py Once you have the Python script generated, make the following changes to ``bookdelegate.py`` and ``main.py``: diff --git a/sources/pyside6/doc/tutorials/portingguide/index.rst b/sources/pyside6/doc/tutorials/portingguide/index.rst index ed1a7a4f6..0b89c2ff8 100644 --- a/sources/pyside6/doc/tutorials/portingguide/index.rst +++ b/sources/pyside6/doc/tutorials/portingguide/index.rst @@ -8,7 +8,7 @@ to Python to understand this. Before you start, ensure that all the prerequisites for Qt for Python are met. See -:doc:`Getting Started <../../gettingstarted>` for more +:doc:`Getting Started <../../gettingstarted/index>` for more information. In addition, familiarize yourself with the basic differences between Qt in C++ and in Python. @@ -63,7 +63,7 @@ C++ vs Python doStuff(key, value) In this example, ``func()`` would treat ``var`` as a local -name without the ``global`` statement. This would lead to +name without the ``global`` statement. This would lead to a ``NameError`` in the ``value is None`` handling, on accessing ``var``. For more information about this, see `Python refernce documentation <python refdoc>`_. diff --git a/sources/pyside6/doc/tutorials/pretutorial/distribution.rst b/sources/pyside6/doc/tutorials/pretutorial/distribution.rst deleted file mode 100644 index fea588153..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/distribution.rst +++ /dev/null @@ -1,69 +0,0 @@ -.. _distribution: - -Distributing Your Application to Other Systems/Platforms -======================================================== - -After developing a couple of applications, you might want to distribute them to -other users. In case you do not have much experience with Python packages, you -might have even asked: *How do I create a Python executable?*. - -If you come from compiled programming languages, deployment is something -almost trivial, but for Python is a bit difficult. - -The deployment process for Python applications is called, "freezing", which is -distributing your virtual environment content to other users. - -.. important:: As Python does not support WebAssembly and mobile platforms, - such as Android and iOS, you cannot deploy applications to these platforms - directly, and you require advanced processes to do so. - -.. note:: For embedded systems, you currently need to build |project| for your - target platform, and deploy the installation alongside your application. - -Reproducible deployment ------------------------ - -A common approach is to only provide a ``requirements.txt`` file, where you -state your dependencies. Users would need to install them from there -to run your Application. - -For example, imagine I have a project with two dependencies, ``module_a`` and -``module_b``, which I use in my ``main.py`` file. So my structure is: - -.. code-block:: python - - # Content of the main.py file - from module_a import something - import module_b - - # ... - -So the ``requirements.txt`` for my application would look like this:: - - module_a - module_b - -Later, when a user want to execute your ``main.py``, the dependencies -must be installed using :command:`pip install -r requirements.txt` -in a new virtual environment. - -.. important:: You can notice that this approach includes sharing your code - so it fails if you want to hide the code of your application. - -Freezing Your Application -------------------------- - -This is the most common approach for users to distribute their applications -and even though the code is still available for the end user, it is a bit more -difficult to retrieve it. - -You can find a series of tutorials based on the most popular tools that -allow Python users to freeze and distribute applications in our -:ref:`deployment-guides` section. - -Compiling Python ----------------- - -Even though Python does not natively support to be compiled, there are -complementary tools that let you to achieve this. -You can check the `Nuitka <https://nuitka.net/>`_ project to learn more. diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png b/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png Binary files differdeleted file mode 100644 index f335a234d..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png +++ /dev/null diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png b/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png Binary files differdeleted file mode 100644 index 863149399..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png +++ /dev/null diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg b/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg Binary files differdeleted file mode 100644 index 78dcf8ab5..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg +++ /dev/null diff --git a/sources/pyside6/doc/tutorials/pretutorial/tiobe.png b/sources/pyside6/doc/tutorials/pretutorial/tiobe.png Binary files differdeleted file mode 100644 index 87647d1c2..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/tiobe.png +++ /dev/null diff --git a/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst b/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst deleted file mode 100644 index 71d38f809..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst +++ /dev/null @@ -1,152 +0,0 @@ -.. _typesoffiles: - -File Types -========== - -There are many different file types that you will encounter while -developing |project| applications, ui, qrc, qml, pyproject, etc. -Here you can find a simple explanation for -each of them. - -Python Files ``.py`` --------------------- - -Python files are the main format you will be dealing with, while developing -|project| projects. - -It is important to note that you can write applications **only** with Python -files, without the need of ``.ui``, ``.qrc``, or ``.qml`` files, however -using other formats will facilitate some processes, and enable new -functionality to your applications. - -.. code-block:: python - - class MyWidget(QWidget): - def __init__(self): - QWidget.__init__(self) - - self.hello = ["Hallo Welt", "你好，世界", "Hei maailma", - "Hola Mundo", "Привет мир"] - - self.button = QPushButton("Click me!") - self.text = QLabel("Hello World") - self.text.setAlignment(Qt.AlignCenter) - # ... - -User Interface Definition File ``.ui`` --------------------------------------- - -When using Qt Designer, you can create user interfaces using Qt Widgets with -the WYSIWYG form editor, this interface is represented as a widget tree using -XML. Here is an extract of the beginning of a ``.ui`` file: - -.. code-block:: xml - - <?xml version="1.0" encoding="UTF-8"?> - <ui version="4.0"> - <class>MainWindow</class> - <widget class="QMainWindow" name="MainWindow"> - <property name="geometry"> - <rect> - <x>0</x> - <y>0</y> - <width>400</width> - <height>300</height> - </rect> - </property> - <property name="windowTitle"> - <string>MainWindow</string> - </property> - <widget class="QWidget" name="centralWidget"> - ... - -The `pyside6-uic` tool generates Python code from these `.ui` files, -which you can import from your main files, so it is not necessary -for you to include the `.ui` files in your deployed application. - -For more details, see :ref:`using_ui_files`. - -Resource Collection Files ``.qrc`` ----------------------------------- - -List of binary files that will be used alongside your application. -As an XML-based file, its structure look like this: - -.. code-block:: xml - - <!DOCTYPE RCC><RCC version="1.0"> - <qresource> - <file>images/quit.png</file> - <file>font/myfont.ttf</file> - </qresource> - </RCC> - - -The `pyside6-rcc` tool generates Python code from these `.qrc` files, -so you are not required to include the listed files in your deployed -application. - -For more details, see :ref:`using_qrc_files`. - -Qt Modeling Language File ``.qml`` ----------------------------------- - -Graphical QML applications are not related to Qt Widgets applications, and -that is why the usual setup of QML project is a Python file that loads -the QML file, and optionally, elements defined in Python that are exposed -to QML to be used. - -You can write ``.qml`` files by hand, but also you can use tools like the -QML Designer that is embedded in Qt Creator. Additionally, there are commercial -tools like Qt Design Studio that allow you to load designs from other design -applications. - -Here you can find an example of how a ``.qml`` file looks like. -The code will display a lightgray rectangle, with the "Hello World!" -message on it. - -.. code-block:: javascript - - import QtQuick 2.0 - - Rectangle { - id: page - width: 320; - height: 480 - color: "lightgray" - - Text { - id: helloText - text: "Hello world!" - y: 30 - anchors.horizontalCenter: page.horizontalCenter - font.pointSize: 24; - font.bold: true - } - } - -Qt Creator Python Project File ``.pyproject`` ---------------------------------------------- - -For Qt Creator to load and handle Python based projects, a special file is -needed, because C++ based projects could be handle from ``.qmake`` or -``CMakeLists.txt`` file, which are not used with Python-based projects. - -Old versions of Qt Creator, provided a simple format with the ``.pyqtc`` -extension, which were plain-text files with one-file-per-line:: - - library/server.py - library/client.py - logger.py - ... - -There were limitations to this format, and further options that might be -added that would not be supported, which was the motivation to create a -``.pyproject`` file, which is a JSON-based file where more options could -be added. Here is an example of such file: - -.. code-block:: javascript - - { - "files": ["library/server.py", "library/client.py", "logger.py", ...] - } diff --git a/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst b/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst deleted file mode 100644 index 2dee661a7..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst +++ /dev/null @@ -1,112 +0,0 @@ -.. _whatisqt: - -Qt, QML, Widgets...What Is The Difference? -========================================== - -If you are new to Qt, there might be a chance that you are a bit confused about -all the concepts you have read so far. This section aims to provide a summary -of all the key components that are relevant to develop Qt applications. - -Keep in mind that Qt was designed and written in C++ as a C++ framework, you -will find many references, examples, and concepts that make sense in C++ -based applications, that might not be relevant in your Python applications, -but keep in mind that |project| aims to expose the Qt framework to Python -with many adaptations. You don't need to know C++ to use |project|, and you -can find all the possible combinations between these languages later on. - -Qt --- - -The Qt Project is an open collaboration that coordinates the development of the -Qt Framework. You might find situations where "Qt" refers to the project, or -to the framework. - -As a framework, Qt has many components, which are distributed by components -and modules, for example, `qtbase <https://code.qt.io/cgit/qt/qtbase.git/>`_ -is the base component that holds many modules, like: ``QtCore``, ``QtGui``, -``QtWidgets``, ``QtNetwork``, etc. -All those modules contains many classes that you can directly use, like the -case of the `Classes of QtCore <https://doc.qt.io/qt-6/qtcore-module.html>`_ -from which you can find classes like ``QFile``, ``QTime``, ``QByteArray``, etc. - -You can create applications without a User Interface, while using this classes -to create command line applications, handle files, network connections, -regular expressions, encoding of text, etc. - -On the other hand, you can create Graphical applications with classes -from the ``QtWidgets`` module, this is also referred as **Widgets**. - -There are many other Qt modules like ``QtMultimedia``, ``QtCharts``, ``Qt3D``, -among others. These modules has a specific functionality, and among this -modules, there is one called ``QtDeclarative``, in which you can find the -implementation of the ``QML`` declarative language. This language is similar -to CSS and JSON, and it was created to design UI applications declaratively, -allowing JavaScript to take care of some imperative sections, and enabling -other components to extend and connect the code with C++. - -Let us check the functionality of these different approaches separately. - -Widgets -------- - -As we mentioned before, ``QtWidgets`` is the module that provide predefined -Widgets that you can add into your graphical application, like Buttons, Labels, -Boxes, Menus, etc. - -Widget based applications will look like a native application, because the goal -is not to affect the user experience compared to other included applications. - -.. image:: hello_macOS.png - :width: 20% -.. image:: hello_win10.jpg - :width: 20% -.. image:: hello_linux.png - :width: 20% - -.. note:: You can adapt these applications to use your self-made style, but - you need to be aware that the goal of Widgets is to respect the system - style, be careful when changing colors. Check this `simple tutorial - <widgetstyling>`_ on how to do so. - -QML ---- - -QML offers an alternative approach to create User Interfaces, compared to -Widgets, and it was originally motivated from mobile applications development. -Together with the ``Qt Quick`` module, it provides access to interact with -mobile device using actions like taps, drag and drop, animations, states, -transitions, drawer menus, etc. - -The elements that you can find in QML/Quick applications are focused on -providing a more dynamic application infrastructure which different properties -based in certain behaviors. - -Even though QML has the motivation to provide interfaces with mobile devices, -you can use it for Desktop applications, too. - -Additionally, you can augment your application with standard JavaScript, which -in combination with C++ can become an attractive infrastructure. - -Python And C++ --------------- - -For |project| applications you **do not need to know C++**, but it is possible -to mix both languages in a couple of different use cases: - -1. If you have a Qt/C++ application, you can re-write it so it is a Qt/Python - application. This means that Python aims to be a full replacement for the - user level C++ code of Qt applications. -2. For custom Qt widgets written in C++, you can generate your own Python - bindings so people can use it directly from Python. -3. If you have a C++ based library that you use with your Qt/C++ applications - that is in charge of a specific task, like a performant process, you can - generate bindings for it, so people could be able to use it from Python. -4. For a Qt/C++ application, you can extend it with Python, by exposing the - main QApplication singleton as a python binding to a Python interpreter. - This can be understand as a "Python Plugin System" for your Qt/C++ - application, for example. - -For the the steps **2., 3., and 4.** you need the help of Shiboken, the -binding generation tool that is used to generate |project|. -You can find more information in the -`documentation page <https://doc.qt.io/qtforpython/shiboken6/index.html>`_. diff --git a/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst b/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst deleted file mode 100644 index e867fadd4..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst +++ /dev/null @@ -1,42 +0,0 @@ -.. _whatisshiboken: - -Binding Generation: What Is Shiboken? -===================================== - -When you install ``PySide6`` you might have notice that also ``Shiboken6`` -is installed as a dependency: - -.. code-block:: bash - - (env) [qt ~]$ pip install pyside6 - Collecting pyside6 - Downloading PySide6-6.0.0-6.0.0-cp36.cp37.cp38.cp39-abi3-manylinux1_x86_64.whl (170.5 MB) - |████████████████████████████████| 170.5 MB 42 kB/s - Collecting shiboken6==6.0.0 - Downloading shiboken6-6.0.0-6.0.0-cp36.cp37.cp38.cp39-abi3-manylinux1_x86_64.whl (964 kB) - |████████████████████████████████| 964 kB 29.3 MB/s - Installing collected packages: shiboken6, pyside6 - Successfully installed pyside6-6.0.0 shiboken6-6.0.0 - -That installed package is also called **Shiboken Module**, and it contains -some utilities for PySide to properly work. -You can find more information about it on its -`documentation page (module) <https://doc.qt.io/qtforpython/shiboken6/shibokenmodule.html>`_ - -There is a third package that does not get installed when you install PySide, -because it is not required, and it is called **Shiboken Generator**. - -Most of the times you see mentions to use "Shiboken" or to do something -related to "binding generation", it is about this third package, and **not** -the dependency of the PySide package. - -Do I Need Shiboken Generator? ------------------------------ - -If your goal is to just write Qt applications in Python, -you do not need to worry about a Shiboken generator installation, -but on the other hand, if you want to work with your own bindings -or extend Qt/C++ applications with Python, you **need** it. - -You can find all the information related to Shiboken on its -`documentation page (generator) <https://doc.qt.io/qtforpython/shiboken6/>`_. diff --git a/sources/pyside6/doc/tutorials/pretutorial/whichide.rst b/sources/pyside6/doc/tutorials/pretutorial/whichide.rst deleted file mode 100644 index ec005a188..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/whichide.rst +++ /dev/null @@ -1,54 +0,0 @@ -.. _whichide: - -Which IDEs Are Compatible? -========================== - -|project|, as any other Python module, can be used in any Python-compatible -IDE, but not all of them will provide extra functionality like Qt Creator does. - -Besides writing files, there are some external steps you might want to perform -in order to help the development of your applications: - -From a terminal: - -* Generating a Python file from a ``.ui`` file: - :command:`pyside6-uic -i form.ui -o ui_form.py` -* Generating a Python file from a ``.qrc`` file: - :command:`pyside6-rcc -i resources.qrc -o rc_resources.py` -* Opening Qt Designer with the command :command:`pyside6-designer` to - edit/create ``.ui`` files. - -External add-ons/plugins from your favorite IDE might include configuration -steps to run these commands, or open external tools like Designer and -QtCreator. - -QtCreator ---------- - -You can create new projects based on some basic templates that are currently -available in QtCreator. After selecting one, you will pass through some steps -where you can specify the details of the template, like the project name, -base Qt class to use for your interface, among others. - -Here you can see an animation of the creation of a project: - -.. image:: https://qt-wiki-uploads.s3.amazonaws.com/images/7/7c/Qtcreator.gif - :alt: Qt Creator Animation - -Visual Studio Code ------------------- - -Besides editing the code of your application, you can use external plugins to -enable more functionality, like this unofficial -`plugin <https://marketplace.visualstudio.com/items?itemName=seanwu.vscode-qt-for-python>`_ -that you can install from VS Code while writing the following on the Quick Open Menu (``Ctrl+P``): -:command:`ext install seanwu.vscode-qt-for-python`. - -PyCharm -------- - -You can configure PyCharm to enable external tools, in |project| terms, Qt Designer, and -Qt Creator. Go to ``File > Settings > tools > PyCharm External Tools``, and include the following -information to add them to your project. -Later, you will be able to right click a ``.ui`` file, and select ``Qt Designer``, -``pyside6-uic``, or any tool that you configured this way. diff --git a/sources/pyside6/doc/tutorials/pretutorial/whyqtforpython.rst b/sources/pyside6/doc/tutorials/pretutorial/whyqtforpython.rst deleted file mode 100644 index 6046249b9..000000000 --- a/sources/pyside6/doc/tutorials/pretutorial/whyqtforpython.rst +++ /dev/null @@ -1,208 +0,0 @@ -.. _whyqtforpython: - -Why Qt for Python? -================== - -.. image:: tiobe.png - :width: 0 - -.. raw:: html - - <div style="float: right; padding-left: 20px; max-width: 30%; - background-color: #e9eff5; padding-top: 5px;"> - <img src="../../_images/tiobe.png" - style="width: 90%;" - alt="TIOBE index for Python" /> - <p style="font-size: 80%;"> - Screenshot from - <a href="https://www.tiobe.com/tiobe-index/python/">tiobe.com/tiobe-index/python</a>, - on 2021.09.06 - </p> - </div> - -To answer this question we need to take a step back, and talk a bit about -languages. - -Python has been around for almost the same amount of years that Qt has, -and similarly it has been growing, and transforming to become the most used, -loved, and demanded language for many programming areas. - -Currently (2021), it's rare to be aware of Machine Learning and Artificial -Intelligence, without having heard of Python. Similarly, when we hear about -Data Science/Analysis/Engineering we know that it is most probably related -to Python. - -One can validate this statements by public surveys that have been showing -the evolution and preference of the Python language, like the StackOverflow -Surveys of the lasts years: - -+----------------------+-----------+-----------+-----------+ -| | 2019_ | 2020_ | 2021_ | -+======================+===========+===========+===========+ -| Most Loved Language | 2nd place | 3rd place | 6th place | -+----------------------+-----------+-----------+-----------+ -| Most Wanted Language | 1st place | 1st place | 1st place | -+----------------------+-----------+-----------+-----------+ - -and the `TIOBE index`_ (image on the right). - -It's natural to think that this sources might not be enough to judge the -language in general terms, but it certainly highlights a trend among -developers around the world. - -Lowering the Qt Barrier ------------------------ - -Veteran C++ developers will have no problem with setting up a Qt -application from scratch, or even manage to understand a different -code base written with Qt. In addition, many teams are multidisciplinary, -and other project/company developers might not be fluent in C++. - -Python has been luring people into programming, and for the same reason -it's not uncommon that even people with a different background are able -to write code, meaning that different teams are enabled to speak -"the same language". - -Creating Qt applications in Python requires only a few lines of code, -and not much configuration is required to execute it. As an /unfair/ -example, let's check the code of a simple hello world application: - - -.. panels:: - :container: container-lg - - :column: col-lg-6 p-2 - - .. tabbed:: C++ Header - - .. code-block:: cpp - - #ifndef MAINWINDOW_H - #define MAINWINDOW_H - - #include <QMainWindow> - #include <QPushButton> - - class MainWindow : public QMainWindow - { - Q_OBJECT - public: - MainWindow(QWidget *parent = nullptr); - private slots: - void handleButton(); - private: - QPushButton *m_button; - }; - - #endif // MAINWINDOW_H - - .. tabbed:: C++ Implementation - - .. code-block:: cpp - - #include "mainwindow.h" - - MainWindow::MainWindow(QWidget *parent) - : QMainWindow(parent) - { - m_button = new QPushButton("My Button", this); - connect(m_button, SIGNAL(clicked()), this, - SLOT(handleButton())); - } - - void MainWindow::handleButton() - { - m_button->setText("Ready"); - } - - .. tabbed:: C++ Main - - .. code-block:: cpp - - #include <QApplication> - #include "mainwindow.h" - - int main(int argc, char *argv[]) - { - QApplication app(argc, argv); - MainWindow mainWindow; - mainWindow.show(); - return app.exec(d); - } - - --- - :column: col-lg-6 p-2 - - .. tabbed:: Python - - .. code-block:: python - - import sys - from pyside6.QtWidgets import (QApplication, QMainWindow, - QPushButton) - - class MainWindow(QMainWindow): - def __init__(self, parent=None): - QMainWindow.__init__(self, parent) - self.button = QPushButton("My Button", self) - self.button.clicked.connect(self.handleButton) - - def handleButton(self): - self.button.setText("Ready") - - if __name__ == "__main__": - app = QApplication([]) - mainWindow = MainWindow() - mainWindow.show() - sys.exit(app.exec()) - -It's fair to say that most of the boilerplate code is provided by many -good IDEs, like QtCreator, but using external tools certainly requires -some practice to use them and get familiarized. - -Unity Makes Strength --------------------- - -In our mission to enable more developers to enter the Qt World, it's -important to note that this doesn't imply C++ developers are forgotten. - -Together with the bindings, Qt for Python provides our binding generator, -Shiboken (Check :ref:`whatisshiboken`), whose functionality has -extensibly been shown by talks on events such as those from our -:ref:`video-gallery` section. - -Generating bindings between two languages it nothing new, but it has -always been a non-trivial task, mainly for being as-compatible-as-possible -when using external modules/libraries in your project. - -Shiboken's main use case is to extend Qt/C++ project's -functionality, making them **scriptable**. - -What does it mean for an application to be scriptable? - -* enables a interpreted language to interact directly with the Qt/C++ - application, -* provide the option to modify and create components/elements of the - application from Python, -* possibility to create a plugins/add-ons system for the application. -* complement a process with external Python functionality. - -Check out this `Shiboken Webinar`_ for a hands-on example. - -Shiboken excels at Qt-dependent binding generation, meaning that -any Qt/C++ project can be easily exposed to Python. -In addition, Shiboken has proven its support for C++ projects (without Qt), -as shown on event talks and `blog posts`. - -Adding Python support to well known solutions/projects is a pattern we keep -seeing in the industry, on a broad range of devices. -This is why we are working every day to improve the Qt for Python offering. - -We believe both Qt and Python will benefit from this interaction. - -.. _2019: https://insights.stackoverflow.com/survey/2019 -.. _2020: https://insights.stackoverflow.com/survey/2020 -.. _2021: https://insights.stackoverflow.com/survey/2021 -.. _`TIOBE index`: https://www.tiobe.com/tiobe-index/ -.. _`blog posts`: https://www.qt.io/blog/tag/qt-for-python -.. _`Shiboken Webinar`: https://www.youtube.com/watch?v=wOMlDutOWXI diff --git a/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst index b68a3686e..c6d72e742 100644 --- a/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst +++ b/sources/pyside6/doc/tutorials/qmlapp/qmlapplication.rst @@ -15,15 +15,15 @@ defined in the QML file. Before you begin, install the following prerequisites: * The `PySide6 <https://pypi.org/project/PySide6/>`_ Python packages. -* Qt Creator v4.9 beta1 or later from +* *Qt Creator* from `https://download.qt.io - <https://download.qt.io/snapshots/qtcreator/4.9/4.9.0-beta1/>`_. + <https://download.qt.io/snapshots/qtcreator/>`_. The following step-by-step instructions guide you through application -development process using Qt Creator: +development process using *Qt Creator*: -#. Open Qt Creator and select **File > New File or Project..** menu item +#. Open *Qt Creator* and select **File > New File or Project..** menu item to open following dialog: .. image:: newpyproject.png diff --git a/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst b/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst index d9de42ee2..ff6fe3e31 100644 --- a/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst +++ b/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst @@ -2,17 +2,17 @@ Python-QML integration ====================== This tutorial provides a quick walk-through of a python application that loads, and interacts with -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 +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 will learn how to integrate Python with a QML application. This mechanism will help us to understand how to use Python as a backend for certain -signals from the UI elements in the QML interface. Additionally, you will learn how to provide +signals from the UI elements in the QML interface. Additionally, you will learn how to provide a modern look to your QML application using one of the features from Qt Quick Controls 2. The tutorial is based on an application that allow you to set many text properties, like increasing -the font size, changing the color, changing the style, and so on. Before you begin, install the +the font size, changing the color, changing the style, and so on. Before you begin, install the `PySide6 <https://pypi.org/project/PySide6/>`_ Python packages. The following step-by-step process will guide you through the key elements of the QML based @@ -35,7 +35,7 @@ application and PySide6 integration: Notice that we only need a :code:`QQmlApplicationEngine` to :code:`load` the QML file. -#. Define the `Bridge` class, containing all the logic for the element +#. Define the ``Bridge`` class, containing all the logic for the element that will be register in QML: .. literalinclude:: main.py @@ -48,7 +48,7 @@ application and PySide6 integration: class and the variables :code:`QML_IMPORT_NAME` and :code:`QML_IMPORT_MAJOR_VERSION`. -#. Now, go back to the QML file and connect the signals to the slots defined in the `Bridge` class: +#. Now, go back to the QML file and connect the signals to the slots defined in the ``Bridge`` class: .. code:: js @@ -68,7 +68,7 @@ application and PySide6 integration: The properties *Italic*, *Bold*, and *Underline* are mutually exclusive, this means only one can be active at any time. - To achieve this each time we select one of these options, we + To achieve this each time we select one of these options, we check the three properties via the QML element property as you can see in the above snippet. Only one of the three will return *True*, while the other two @@ -95,22 +95,22 @@ application and PySide6 integration: #. Now, for changing the look of our application, you have two options: - 1. Use the command line: execute the python file adding the option, `--style`:: + 1. Use the command line: execute the python file adding the option, ``--style``:: python main.py --style material - 2. Use a `qtquickcontrols2.conf` file: + 2. Use a ``qtquickcontrols2.conf`` file: .. literalinclude:: qtquickcontrols2.conf :linenos: - Then add it to your `.qrc` file: + Then add it to your ``.qrc`` file: .. literalinclude:: style.qrc :linenos: - Generate the *rc* file running, `pyside6-rcc style.qrc > style_rc.py` - And finally import it from your `main.py` script. + Generate the *rc* file running, ``pyside6-rcc style.qrc -o style_rc.py`` + And finally import it from your ``main.py`` script. .. literalinclude:: main.py :linenos: diff --git a/sources/pyside6/doc/tutorials/qmlsqlintegration/qmlsqlintegration.rst b/sources/pyside6/doc/tutorials/qmlsqlintegration/qmlsqlintegration.rst index 4c0131f32..eee3f807e 100644 --- a/sources/pyside6/doc/tutorials/qmlsqlintegration/qmlsqlintegration.rst +++ b/sources/pyside6/doc/tutorials/qmlsqlintegration/qmlsqlintegration.rst @@ -14,9 +14,9 @@ name of our table, and define the global function ``createTable()`` that creates doesn't already exist. The database contains a single line to mock the beginning of a conversation. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 3-42 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 4-43 The ``SqlConversationModel`` class offers the read-only data model required for the non-editable contacts list. It derives from the :ref:`QSqlQueryModel` class, which is the logical choice for @@ -26,25 +26,25 @@ Then, we proceed to create the table, set its name to the one defined previously We add the necessary attributes to the table, to have a program that reflects the idea of a chat application. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 46-58 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 47-59 In ``setRecipient()``, you set a filter over the returned results from the database, and emit a signal every time the recipient of the message changes. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 60-69 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 61-70 The ``data()`` function falls back to ``QSqlTableModel``'s implementation if the role is not a custom user role. If you get a user role, we can subtract :meth:`~.QtCore.Qt.UserRole` from it to get the index of that field, and then use that index to find the value to be returned. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 71-78 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 72-79 In ``roleNames()``, we return a Python dictionary with our custom role and role names as key-values @@ -53,27 +53,27 @@ Alternatively, it can be useful to declare an Enum to hold all of the role value Note that ``names`` has to be a hash to be used as a dictionary key, and that's why we're using the ``hash`` function. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 80-94 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 81-95 The ``send_message()`` function uses the given recipient and message to insert a new record into the database. Using :meth:`~.QSqlTableModel.OnManualSubmit` requires you to also call ``submitAll()``, since all the changes will be cached in the model until you do so. - .. literalinclude:: sqlDialog.py - :linenos: - :lines: 96-115 +.. literalinclude:: sqlDialog.py + :linenos: + :lines: 97-116 chat.qml -------- Let's look at the ``chat.qml`` file. - .. literalinclude:: chat.qml - :linenos: - :lines: 3-5 +.. literalinclude:: chat.qml + :linenos: + :lines: 4-6 First, import the Qt Quick module. This gives us access to graphical primitives such as Item, Rectangle, Text, and so on. @@ -86,9 +86,9 @@ root type, Window: Let's step through the ``chat.qml`` file. - .. literalinclude:: chat.qml - :linenos: - :lines: 8-13 +.. literalinclude:: chat.qml + :linenos: + :lines: 9-14 ``ApplicationWindow`` is a Window with some added convenience for creating a header and a footer. It also provides the foundation for popups and supports some basic styling, such as the background @@ -101,9 +101,9 @@ Once we've set these, we have a properly sized, empty window ready to be filled Because we are exposing the :code:`SqlConversationModel` class to QML, we will declare a component to access it: - .. literalinclude:: chat.qml - :linenos: - :lines: 15-17 +.. literalinclude:: chat.qml + :linenos: + :lines: 16-18 There are two ways of laying out items in QML: `Item Positioners`_ and `Qt Quick Layouts`_. @@ -113,13 +113,13 @@ There are two ways of laying out items in QML: `Item Positioners`_ and `Qt Quick resizable user interfaces. Below, we use `ColumnLayout`_ to vertically lay out a `ListView`_ and a `Pane`_. - .. literalinclude:: chat.qml - :linenos: - :lines: 19-22 + .. literalinclude:: chat.qml + :linenos: + :lines: 20-23 - .. literalinclude:: chat.qml - :linenos: - :lines: 71-73 + .. literalinclude:: chat.qml + :linenos: + :lines: 72-74 Pane is basically a rectangle whose color comes from the application's style. It's similar to `Frame`_, but it has no stroke around its border. @@ -144,18 +144,16 @@ remaining space that is left after accommodating the Pane. .. _attached properties: https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html .. _Layout.fillWidth: https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#fillWidth-attached-prop .. _Layout.fillHeight: https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#fillHeight-attached-prop -.. _ListView: https://doc.qt.io/qt-5/qml-qtquick-listview.html .. _Qt Quick QML Types: https://doc.qt.io/qt-5/qtquick-qmlmodule.html Let's look at the ``Listview`` in detail: - .. literalinclude:: chat.qml - :linenos: - :lines: 22-69 +.. literalinclude:: chat.qml + :linenos: + :lines: 23-70 After filling the ``width`` and ``height`` of its parent, we also set some margins on the view. - Next, we set `displayMarginBeginning`_ and `displayMarginEnd`_. These properties ensure that the delegates outside the view don't disappear when you scroll at the edges of the view. @@ -179,9 +177,9 @@ At the bottom of the screen, we place a `TextArea`_ item to allow multi-line tex button to send the message. We use Pane to cover the area under these two items: - .. literalinclude:: chat.qml - :linenos: - :lines: 71-95 +.. literalinclude:: chat.qml + :linenos: + :lines: 72-96 The `TextArea`_ should fill the available width of the screen. We assign some placeholder text to provide a visual cue to the contact as to where they should begin @@ -203,16 +201,16 @@ main.py We use ``logging`` instead of Python's ``print()``, because it provides a better way to control the messages levels that our application will generate (errors, warnings, and information messages). - .. literalinclude:: main.py - :linenos: - :lines: 3-15 +.. literalinclude:: main.py + :linenos: + :lines: 4-16 ``connectToDatabase()`` creates a connection with the SQLite database, creating the actual file if it doesn't already exist. - .. literalinclude:: main.py - :linenos: - :lines: 18-38 +.. literalinclude:: main.py + :linenos: + :lines: 19-39 A few interesting things happen in the ``main`` function: @@ -227,8 +225,8 @@ A few interesting things happen in the ``main`` function: Finally, the Qt application runs, and your program starts. - .. literalinclude:: main.py - :linenos: - :lines: 41-51 +.. literalinclude:: main.py + :linenos: + :lines: 42-52 .. image:: example_list_view.png |
