You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
5.2 KiB
112 lines
5.2 KiB
# Premiers pas en QML
|
|
|
|
## Documentation
|
|
|
|
* Vérifiez bien que vous utilisez une doc de Qt5
|
|
* [Qt5 Cadaques](https://qmlbook.github.io/), un livre libre sur QML, existe en version HTML ou pdf.
|
|
* Doc officielle, [Qt Quick Examples and Tutorials](https://doc.qt.io/qt-5/qtquick-codesamples.html). Un bon point de départ dans la documentation, avec des guides plus abordables que les manuels de référence. Prenez un moment pour prendre la doc en main.
|
|
* [Le wiki officiel](https://wiki.qt.io/Main) est d'accès plus facile que la doc de référence
|
|
* Un tuto en vidéo pour Qt/QML: [Video KDAB](https://www.youtube.com/playlist?list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc) . Bien découpé, clair.
|
|
* Si seulement je savais lire le japonais, je lirais les bouquins [Qt
|
|
suivant](https://bookwalker.jp/series/111182/list/), ça a l'air fascinant...
|
|
* `assistant` lance le browser d'aide locale de Qt. Je vous recommande de commencer par regarder l'onglet *Contents* et d'expanser *Qt Reference documentation -> Tutorials and examples*. Vous avez aussi un onglet qui vous permet de faire des recherches dans le corps de la documentation, ainsi qu'une fonction recherche dans l'onglet d'index qui vous permet de ne rechercher que dans les titres.
|
|
* Outil: Pas pour tout de suite, mais à tester: GammaRay est un débuger/interpréteur/renderer QML, a ajouter à toutes vos plateformes: [Gamma
|
|
Ray](https://www.kdab.com/development-resources/qt-tools/gammaray/)
|
|
* `Ctrl+Espace` permet de forcer l'appel à la complétion. Indispensable en QML.
|
|
|
|
## Sujet
|
|
|
|
### Hello World
|
|
|
|
* Lancez le `qtcreator` déja installé sur vos machines,
|
|
* Faites un projet QtQuick Application (le nom varie suivant les versions du QtCreator).
|
|
* Éditez votre fichier QML. Lisez le code!
|
|
* Lancez l'UI (flêche verte).
|
|
* Redimensionnez la fenêtre
|
|
* Supprimez dans le code ce qui vous fait fermer la fenêtre au click.
|
|
* Changez le texte du "Hello world". C'est nul mais ça fait toujours plaisir.
|
|
* Regardez les composants que vous pouvez ajouter par glisser-coller.
|
|
* Ajoutez une importation de QtControls en choisissant une vesion disponibles (en général entre 1.8 et 2.4 suivant les installations)
|
|
|
|
<code>
|
|
QtQuick.Controls XX
|
|
</code>
|
|
|
|
|
|
### Petites manipulations
|
|
|
|
* Ajoutez un rectangle de couleur bleu clair dans la Window. Si vous ne le voyez pas, lisez la FAQ.
|
|
* Ajoutez un second champs de texte. Modifiez en le contenu et l'apparence.
|
|
* Jouez avec les propriétés, les repositionnements...
|
|
* Ajoutez un champs de texte.
|
|
* Ajoutez un second champs de texte.
|
|
|
|
#### Redimensionnement
|
|
|
|
* Lancez votre UI. Redimentionnez la fenêtre. Comment se comportent les deux texte? Pourquoi?
|
|
* Je voudrais (sans utiliser de Layout) que les deux textes soient au milieu horizontalement, le premier en haut de la fenêtre, le second au centre.
|
|
* D'ailleurs, mettez le rectangle bleu sous le premier texte
|
|
|
|
#### Référencement des objets et signaux en QML
|
|
|
|
* Ajoutez une "TextEdit" à votre interface
|
|
* Je veux que celle ci s'aligne juste sous le premier texte
|
|
* Comment faire pour que le premier texte contienne toujours une copie de la valeur du textEdit? Indice: les attributs de gestion des signaux commencent tous par `on`, suivi du nom du signal.
|
|
|
|
#### Utilisation des layout
|
|
|
|
* Nous allons changer la mise en page.
|
|
* Mettez tout ça dans une `Column` et testez.
|
|
* Dupliquez les champs de texte et testez ensuite le `GridLayout`
|
|
|
|
#### Ajout des contrôles
|
|
|
|
|
|
* Ajoutez un bouton à votre interface. Il permet d'afficher un message en console avec un `console.log()`
|
|
* Ajoutez un bouton à votre interface. Il permet de quitter l'application quand on clique dessus.
|
|
|
|
#### Créez votre famille de boutons
|
|
|
|
* Dans un nouveau fichier, créez un élément `BigButton` qui décrit un bouton et fixe certaines de ses propriétés de façon reconnaissable.
|
|
* Dans votre UI, ajoutez deux de vos BigButton avec un texte différent.
|
|
|
|
#### La horde de boutons
|
|
|
|
* Créez dix BigButton dans votre interface. Indice: en anglais, *répéter* se dit *repeat*.
|
|
* Si vous avez fait ça en copiant collant, clouez vous tout seul sur une porte de grange!
|
|
* Modifiez le texte des boutons pour qu'il se présentent comme "Bouton X" où X est l'index du bouton.
|
|
* Notez au passant le nom du champs utilisé pour les répétitions, on en reparlera!
|
|
|
|
#### Découvrez...
|
|
|
|
* Trouvez comment ajouter une image de fond à votre écran
|
|
* Appliquez des effets à vos élément (Rotation par exemple)
|
|
* Ajoutez des boutons issus de QuickControl à votre interface et regardez le
|
|
rendu
|
|
* Fouillez la doc, regardez ce que vous donne la complétion comme attributs
|
|
|
|
|
|
#### À la fin de ce TP, vous devriez
|
|
|
|
* Savoir créer un composant graphique.
|
|
* Comprendre l'usage des éléments suivants (et leurs propriétés):
|
|
|
|
* Les textes, textedit
|
|
* Les rectangles
|
|
* Les layout (row, column, grid et flow)
|
|
* Les ancres (Jouez avec les marges au besoin)
|
|
* Les boutons (mais pas les actions)
|
|
|
|
* Comprendre les notions suivantes
|
|
|
|
* Le positionnement, et les relations entre un élément et son père
|
|
* Les propriétés, comment les fixer, comment référencer les propriétés d'un autre élément.
|
|
* La création de composants maisons
|
|
|
|
* Savoir rechercher dans la doc
|
|
|
|
* C'est vaste
|
|
* Attention aux versions obsolètes
|
|
* Savoir trouver les exemples dans la doc, comprendre les propriétés.
|
|
|