-
-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve Qt Introduction #10
Draft
yeimiyaz
wants to merge
10
commits into
spyder-ide:master
Choose a base branch
from
yeimiyaz:qt_introduction
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
7434787
Add breaklines and changes to the widgets' section
yeimiyaz 3b96b95
Remove QApplication component
yeimiyaz 39a4cfd
Reorganize titles and content.
yeimiyaz 4e32df8
Improving the "Windows" and "Widgets" sections
yeimiyaz 08256ab
Improve the "Layouts" and "Actions, Toolbars & Menus" sections
yeimiyaz 0c4b738
Improve the "Actions, Toolbars & Menus" and "Dialogs" sections
yeimiyaz 01e1e0c
Improve the "Signals & Slots" and "Events" sections
yeimiyaz 61c2ec5
Revise Qt Introduction after Yeimi's changes
CAM-Gerlach 078f078
Move Widgets section up since its the building block of everything
CAM-Gerlach 3348544
Remove events section as its confusing for an introduction
CAM-Gerlach File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -3,73 +3,116 @@ | |||||
|
||||||
# Qt Fundamentals | ||||||
|
||||||
**Qt** is a multiplatform widget toolkit for creating native graphical user interfaces. Qt is also a very complete development framework that offers utilities for building applications, and libraries of extensions for Networking, Bluetooth, Charts, 3D rendering, Navigation (as GPS), among others. | ||||||
[Qt](https://www.qt.io/) is an open source, multiplatform toolkit for creating graphical user interfaces (GUI). | ||||||
Qt is also a complete development framework that offers utilities for building applications and libraries of extensions for networking, Bluetooth, charts, 3D rendering, navigation, among others. | ||||||
|
||||||
To develop a GUI, we will add graphical elements of interaction known as widgets and arrange them using layouts. | ||||||
Then, we interconnect those widgets using customized procedures implemented as functions or methods, allowing to trigger behavior from user interaction. | ||||||
|
||||||
## Basic Qt Components | ||||||
|
||||||
As mentioned before, Spyder's plugin development consists of extending the functionality of its Qt-based graphical interface. | ||||||
|
||||||
To develop a GUI we will add graphical elements of interaction known as widgets, arrange them using layouts. Then, we interconnect those widgets using customized procedures implemented as functions or methods, allowing to trigger behavior from user interaction. In the following, we will develop these ideas in more detail. | ||||||
## Basic Qt Components | ||||||
|
||||||
According to the official [Qt documentation](https://doc.qt.io/qtdesignstudio/quick-components.html): "a component is a reusable building block for a UI". | ||||||
Qt has some preset components that can include simple representations (shapes, text or images) or complex user interface (UI) controls (such as sliders). | ||||||
Each type of Qt component is a class starting with the letter ``Q`` followed by a name related to its functionality. | ||||||
Spyder's plugin development consists of extending the functionality of its Qt-based graphical interface. | ||||||
|
||||||
The core component of Qt is the ``QApplication`` class. Every Qt application needs a single instance of this class as the base, from where the Qt *event loop* is controlled. | ||||||
Spyder itself is an instance of ``QApplication``, its starting point is in the following two lines of code (Spyder/Spyder/app/mainwindow.py): | ||||||
The following sections describe with more detail some QT components and their main functions. | ||||||
|
||||||
```python | ||||||
QMainWindow.__init__(self) | ||||||
qapp = QApplication.instance() | ||||||
``` | ||||||
|
||||||
``QMainWindow`` is a pre-built widget that provides many standard window features as toolbars, menus, a status bar, dockable widgets and more, which serves as the basis for the application. | ||||||
### MainWindow | ||||||
|
||||||
``MainWindow`` class provides a main application window and it has its own layout in which you can include toolbars [QToolBar](https://doc.qt.io/qt-6/qtoolbar.html), menus [QMenuBar](https://doc.qt.io/qt-6/qmenubar.html), status bars [QStatusBar](https://doc.qt.io/qt-6/qstatusbar.html), and dockable widgets [QDockWidgets](https://doc.qt.io/qt-6/qdockwidget.html). | ||||||
|
||||||
### Signals & Slots | ||||||
For more details, you can refer to the official Qt documentation [MainWindow](https://doc.qt.io/qt-6/qmainwindow.html#details) | ||||||
|
||||||
**Signals** are notifications emitted by widgets when something happens. That something could be different things, from pressing a button, to changing text in an input box, to changing text in the window. | ||||||
Many signals are initiated by user action, but this is not a rule. | ||||||
|
||||||
**Slots** are signal receivers. Functions or methods could be used as slots, by connecting a signal to them. | ||||||
If a signal sends data, the receiver callable will also receive it. | ||||||
Many Qt widgets also have their own built-in slots, so the corresponding widgets are notified automatically. | ||||||
### Windows | ||||||
|
||||||
A window is a widget that is not embedded in a parent widget. | ||||||
When an application requires additional windows, which do not block the main window, they can be generated as non-parent ``QWidget`` instances. | ||||||
These are used for parallel tasks that take place in long-running processes, such as displaying graphs or editing documents. | ||||||
|
||||||
|
||||||
### Widgets | ||||||
|
||||||
In computer science a *Widget* is a shortened form of “window gadget”. A widget is an element of interaction, such as a button, or a container for other widgets, as panels or tabs. | ||||||
The ``QWidget`` class is the fundamental class for creating interfaces in Qt, it receives events from the window system, and renders its representation on the screen. A widget can provide a container for grouping other widgets, and if it is not embedded in a parent widget, it becomes a window. | ||||||
Widgets are the main elements for creating a UI in Qt. | ||||||
They can present data and updated information, receive user input (mouse, keyboard, and other events from the window system), and provide a container for grouping other widgets. | ||||||
|
||||||
``QWidget`` is the fundamental class in Qt that provides the capability to handle user input events and renders its representation on the screen. | ||||||
All UI elements provided by Qt are subclasses of QWidget or are used in connection with a QWidget subclass. | ||||||
You can define your own custom widgets by creating a QWidget or a suitable subclass, and reimplement the virtual event handlers. | ||||||
|
||||||
There are top-level and child widgets. | ||||||
The first one is a widget without a parent and it is an independent window. | ||||||
The second one is a non-window widget, which is displayed within its parent widget. | ||||||
Most widgets in Qt are mainly useful as child widgets. | ||||||
|
||||||
For more details, you can refer to the official Qt documentation [QWidget](https://doc.qt.io/qt-6/qwidget.html). | ||||||
|
||||||
|
||||||
### Layouts | ||||||
|
||||||
Interfaces are built by embedding widgets inside widgets, and since they are visual components they are visually organized by means of *layouts*. | ||||||
A layout indicates how the widgets fill their container, either as columns, rows, cells in a matrix or stacked so that only one is visible at a time. | ||||||
Those are the 4 basic layouts available in Qt: ``QHBoxLayout``, ``QVBoxLayout``, ``QGridLayout``, and ``QStackedLayout``. | ||||||
Qt layout system provides a way to arrange and distribute automatically child widgets within a widget taking advantage of the available space. | ||||||
This layout system can automatically position and resize widgets when the space available for them changes, ensuring that the UI remains usable. | ||||||
You can use the built-in layout managers to organize your widgets:[QHBoxLayout](https://doc.qt.io/qt-6/qhboxlayout.html), [QVBoxLayout](https://doc.qt.io/qt-6/qvboxlayout.html), [QGridLayout](https://doc.qt.io/qt-6/qgridlayout.html), [QFormLayoutClass](https://doc.qt.io/qt-6/qformlayout.html),and [QStackedLayout](https://doc.qt.io/qt-6/qstackedlayout.html). | ||||||
|
||||||
For more details, you can refer to the official Qt documentation [Layout Management](https://doc.qt.io/qt-6/layout.html). | ||||||
|
||||||
|
||||||
### Actions, Toolbars & Menus | ||||||
|
||||||
User interfaces of desktop applications usually use ``QToolbar`` and ``QMenu``. Since these are alternative ways to access the same functionality, Qt provides ``QAction`` as a way to avoid duplication of functions. | ||||||
Thus, each time a menu option or a toolbar button gives access to the same function, they point to the same action. | ||||||
User interfaces of desktop applications usually use toolbars and menus. | ||||||
A toolbar is a GUI element that facilities access to commonly used functions and controls in an application. | ||||||
It can include elements such as buttons, menus, icons, and search fields. | ||||||
It is usually located at the top or bottom of a window. | ||||||
A menu is a GUI element that presents a list of options to the user. | ||||||
Qt provides the [QToolBar](https://doc.qt.io/qt-6/qtoolbar.html#details) and [QMenu](https://doc.qt.io/qt-6/qmenu.html) classes. | ||||||
Since QToolBar and QMenu are alternative ways to access the same functionality, Qt includes [QAction](https://doc.qt.io/qt-6/qaction.html) as a way to avoid duplication of functions. | ||||||
Actions can be added to UI elements such as menus and toolbars, and will automatically keep the UI synchronized. | ||||||
For example, in a word processor, if the user presses a button on the Bold toolbar, the Bold menu item will be automatically checked. | ||||||
|
||||||
|
||||||
### Dialogs | ||||||
|
||||||
A *Dialog* is a GUI component that communicates with the user. Dialogs are commonly used for functions that do not fit into the main interface. | ||||||
In Qt, by design ``QDialog`` is a modal (or blocking) window that show in front of the main Window until it is dismissed. | ||||||
A Dialog is a GUI component used for brief communications with the user. | ||||||
Dialogs are commonly used for functions that do not fit into the main interface. | ||||||
A dialog can be included in an application using the QDialog class. | ||||||
QDialogs may be modal or modeless. | ||||||
A modal dialog blocks input to other visible windows in the same application. | ||||||
The user has to end the interaction with the modal dialog and close it to access to any other window in the application. | ||||||
For example, dialogs for requesting information or selecting preferences for an application may be modal. | ||||||
A modeless dialog operates independently of other windows of the same application. | ||||||
For example, find and replace dialogs allow the user to interact with both the modeless dialog and the application's main window. | ||||||
|
||||||
Qt provides some *special dialogs* for the most common use-cases as *file Open/Save*, *font selection*, *error messages*, *color choosing*, *printing*, among others. | ||||||
|
||||||
|
||||||
### Windows | ||||||
### Signals & Slots | ||||||
|
||||||
If an application requires additional windows that do not block the main window, these are generated as non-parent ``QWidget`` instances. | ||||||
These are used for tasks that happen in parallel over long-running processes such as displaying graphs or document editing. | ||||||
In the GUI programming is important to provide a way to communicate objects through notifications. | ||||||
In Qt, signals and slots are used to support this communication. | ||||||
|
||||||
**Signal** is a notification emitted by a widget when a particular event occurs. | ||||||
Example of these events includes: pressing a button, changing text in an input box, changing text in the window. | ||||||
Many signals are initiated by an user action, but this is not a rule. | ||||||
Qt's widgets have different predermined signals, but you can add your own signals to the widgets. | ||||||
|
||||||
**Slot** is a function that is invoked in response to a specific signal. | ||||||
Functions or methods could be used as slots, by connecting a signal to them. | ||||||
If a signal sends data, the receiver callable will also receive it. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
Many Qt widgets also have their own built-in slots, so the corresponding widgets are notified automatically. | ||||||
Qt's widgets have many pre-defined slots, but you can add your own slots to manage particular signals that you are interested in. | ||||||
|
||||||
For more details, you can refer to the official Qt documentation [Signals and Slots](https://doc.qt.io/qt-6/signalsandslots.html) | ||||||
|
||||||
|
||||||
### Events | ||||||
|
||||||
An *Event* denote every interaction the user has with a Qt application. There are several types of events designed to address different types of interactions. | ||||||
In Qt they are represented by ``QEvent`` instances that contain information about what prompted them, and are passed to specific handlers that are responsible for triggering further actions. | ||||||
An *Event* denotes every interaction the user has with a Qt application. | ||||||
There are several types of events designed to address different types of interactions. | ||||||
In Qt, events are objects, derived from the abstract ``QEvent`` class. | ||||||
According to the [Qt Event System documentation](https://doc.qt.io/qt-6/eventsandfilters.html), "when an event occurs, Qt creates an event object to represent it by constructing an instance of the appropriate QEvent subclass, and delivers it to a particular instance of QObject (or one of its subclasses) by calling its event() function. | ||||||
This function does not handle the event itself; based on the type of event delivered, it calls an event handler for that specific type of event, and sends a response based on whether the event was accepted or ignored." | ||||||
|
||||||
For more details about the type of events and event handlers, please check the official Qt documentation [Qt Event System](https://doc.qt.io/qt-6/eventsandfilters.html). |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.