2. Document QML
Pour débuter avec QML et comprendre les principes généraux, l'idéal est de partir d'un
code plus simple que celui de l'exemple fourni par Qt Creator. Ce premier exemple ne
montre qu'un rectangle contenant du texte, mais il illustre déjà un principe essentiel de
QML : un document QML forme une hiérarchie d'objets, ce qui correspond au
concept de composition en programmation orientée objet.
De manière générale, Qt Quick s'organise autour de deux concepts orientés objet : un
nouveau composant hérite d'un autre (dans l'exemple qui suit, l'interface hérite d'un
rectangle) ; il peut agréger une série d'autres composants par composition. Par
l'héritage, l'interface aura toutes les propriétés d'un rectangle, en en adaptant quelques
propriétés (taille, couleur). La composition remplit le contenu du rectangle.
Note > Les codes sources de ce chapitre sont disponibles dans le dossier bases. Ce
premier exemple se trouve dans le sous-dossier rectangle .
import QtQuick 2.5
Rectangle { width: 200 height: 100 color: "lightblue" Text {
anchors.centerIn: parent text: "Hello World" color: "darkblue" } }
La première étape consiste à importer les blocs de base qui seront utilisés pour
construire l'application, tout comme l'instruction import de Python. Ici,
l'importation se fait sur tous les éléments de base de Qt Quick, contenus dans le
module QtQuick. Généralement, les codes sources présenteront deux directives
d'importation : les composants Qt Quick de base, plus QtQuick.Controls pour
grandement faciliter la création d'une interface.
Note > Contrairement à Python, pour Qt Quick, les modules disposent d'un
numéro de version. Ainsi, il est possible de gérer des évolutions incompatibles
avec les versions précédentes d'un module sans casser le code existant.
Le document QML présenté a pour racine une instance du composant Rectangle,
déjà défini dans le module QtQuick. Ici, le rectangle est la racine du document
QML : il correspondra directement à la fenêtre ; ainsi, les dimensions du rectangle
seront celles de la fenêtre.
273
Pour débuter avec QML et comprendre les principes généraux, l'idéal est de partir d'un
code plus simple que celui de l'exemple fourni par Qt Creator. Ce premier exemple ne
montre qu'un rectangle contenant du texte, mais il illustre déjà un principe essentiel de
QML : un document QML forme une hiérarchie d'objets, ce qui correspond au
concept de composition en programmation orientée objet.
De manière générale, Qt Quick s'organise autour de deux concepts orientés objet : un
nouveau composant hérite d'un autre (dans l'exemple qui suit, l'interface hérite d'un
rectangle) ; il peut agréger une série d'autres composants par composition. Par
l'héritage, l'interface aura toutes les propriétés d'un rectangle, en en adaptant quelques
propriétés (taille, couleur). La composition remplit le contenu du rectangle.
Note > Les codes sources de ce chapitre sont disponibles dans le dossier bases. Ce
premier exemple se trouve dans le sous-dossier rectangle .
import QtQuick 2.5
Rectangle { width: 200 height: 100 color: "lightblue" Text {
anchors.centerIn: parent text: "Hello World" color: "darkblue" } }
La première étape consiste à importer les blocs de base qui seront utilisés pour
construire l'application, tout comme l'instruction import de Python. Ici,
l'importation se fait sur tous les éléments de base de Qt Quick, contenus dans le
module QtQuick. Généralement, les codes sources présenteront deux directives
d'importation : les composants Qt Quick de base, plus QtQuick.Controls pour
grandement faciliter la création d'une interface.
Note > Contrairement à Python, pour Qt Quick, les modules disposent d'un
numéro de version. Ainsi, il est possible de gérer des évolutions incompatibles
avec les versions précédentes d'un module sans casser le code existant.
Le document QML présenté a pour racine une instance du composant Rectangle,
déjà défini dans le module QtQuick. Ici, le rectangle est la racine du document
QML : il correspondra directement à la fenêtre ; ainsi, les dimensions du rectangle
seront celles de la fenêtre.
273