Le webinaire du 23 avril 2019 aura traité des outils de conception inclus dans l’environnement de développement de Delphi / C++ Builder / RAD Studio pour créer des interfaces utilisateurs adaptées aux différentes tailles d’écrans de smartphones et tablettes. Cette fois-ci nous parlerons des composants qui donnent à vos écrans des capacités d’adaptation automatique. Plutôt que de faire 10 versions de chaque fiche en fonction des tailles d’écran de vos utilisateurs, autant n’en faire qu’une seule qui se débrouille au mieux pour rester la plus agréable et fonctionnelle possible. Pour cela il existe un certain nombre de propriétés et de composants dans FireMonkey dédiés à cette lourde tâche. Lors de ce webinaire nous aborderons la hiérarchie des composants visuels (au sens parent/enfants), les marges, les alignements et les layouts. La rediffusion de cette présentation est disponible avec ses codes sources et des liens complémentaires sur https://serialstreameur.fr/webinaire-20190528.php

1. Faire une interface adaptive
avec FireMonkey
Webinaire du 28 mai 2019
(c) Patrick Prémartin / developpeur-pascal.fr

2. Au programme
• Qu’est-ce que FireMonkey ?
• La hiérarchie parent/enfant des composants visuels
• Les ancrages
• Les alignements
• Les marges intérieures et extérieures
• Les différents layouts
• Des exemples sur GetIt
(c) Patrick Prémartin / developpeur-pascal.fr

3. Les webinaires précédents
• Je participe régulièrement à des webinaires. Une page leur est
consacrée sur mon blog à l’adresse https://vasur.fr/webinairesdelphi
• Vous y trouverez les rediffusions en vidéos lorsqu’elles sont
disponibles, un PDF de mes présentations, le lien vers les sources des
exemples présentés et des informations complémentaires.
• S’y trouvent aussi les dates et liens d’inscriptions pour les prochains
webinaires, conférences et formations.
(c) Patrick Prémartin / developpeur-pascal.fr

4. Qu’est-ce que FireMonkey ?
• FireMonkey est une « version multiplateforme de la VCL ».
• Un fonctionnement équivalent à la VCL mais une philosophie et une
structure bien différentes.
• Des composants graphiques basés sur des librairies graphiques.
• Des accès aux API de chaque système d’exploitation en fonction de
leurs possibilités.
• Fourni pour iOS, Android, macOS et Windows.
Linux étant disponible à part.
(c) Patrick Prémartin / developpeur-pascal.fr

5. La hiérarchie parent/enfant des
composants visuels
• Dans la VCL il existe deux types de composants visuels : les classiques
et ceux qui servent de conteneurs.
• Dans FMX chaque composant visuel est un conteneur. Ca permet de
tout faire comme on le veut depuis le concepteur de fiches, par
programmation et dans la vue structure.
(c) Patrick Prémartin / developpeur-pascal.fr

6. Les ancrages
• Chaque côté d’un composant peut être ancré par rapport à un rebord
du parent du composant.
• A propriété « Anchors » permet ainsi de déplacer et redimensionner
les composants si leur parent change de taille.
• Les ancrages ne s’appliquent qu’en cas d’alignement à None.
(c) Patrick Prémartin / developpeur-pascal.fr

7. Les alignements
• FireMonkey était à la base destiné à
créer des applications mobiles. Il a été
pensé pour gérer des tailles d’écrans
fournir plus de possibilités que la VCL.
• Des 6 alignements de la VCL on passe à
une vingtaine.
• Les alignements s’appliquent aux
composants à l’intérieur d’un même
parent.
(c) Patrick Prémartin / developpeur-pascal.fr

8. Les alignements
• Pour mieux visualiser quels
alignements utiliser, on peut se
servir des modifications rapides
depuis le menu contextuel du
concepteur de fiches.
• L’aide est également à lire une fois
pour faire la différence entre les
Fitxxx et Mostxxx.
(c) Patrick Prémartin / developpeur-pascal.fr

9. Les marges intérieures et extérieures
• Les marges extérieures se calculent
lorsque les composants sont alignés par
rapport à d’autres dans le même
parent.
• Les marges intérieures changent la zone
utilisable par les composants enfants
lorsque ceux-ci sont alignés.
• En cas de positionnement fixe des
composants les marges intérieures de
leur parent ne sont pas utilisées.
(c) Patrick Prémartin / developpeur-pascal.fr

10. Les différents layouts
• Les layouts sont des zones transparentes permettant
de regrouper des composants.
• On peut s’en servir pour empiler des groupes de
composants et jouer sur leurs positions les uns par
rapport aux autres.
• Par habitude de la VCL on peut aussi utiliser un TPanel
ou un TGroupBox qui fonctionnent globalement pareil.
(c) Patrick Prémartin / developpeur-pascal.fr

11. Les différents layouts
• TLayout est un conteneur sans fond, sans fonctionnalité
particulière.
• TScaledLayout est un conteneur sans fond, qui adapte
l’échelle de ses enfants à la sienne.
• TGridLayout est un conteneur sans fond, en format
grille, qui prend un composant visuel par cellule en les
alignant automatiquement en Client.
(c) Patrick Prémartin / developpeur-pascal.fr

12. Les différents layouts
• Comme le TGridLayout le TGridPanelLayout ne prend
qu’un seul composant visuel par cellule, mais il ne les
modifie pas. On peut donc les aligner comme on veut.
• TFlowLayout et TFlowLayoutBreak fonctionnent
ensemble. Ils permettent de gérer un positionnement
en flot comme ça se fait sur le web. Les composants se
placent en ligne les uns à la suite des autres. La hauteur
de la zone s’adapte au contenu.
(c) Patrick Prémartin / developpeur-pascal.fr

13. Des exemples sur GetIt
• De nombreux exemples d’écrans
sont présents sur GetIt.
• Ces projets proposent des écrans
standards d’applications mobiles
dans plusieurs formats et avec
plusieurs looks possibles.
• Ils sont utilisables pour vos
projets comme vous pouvez les
étudier.
(c) Patrick Prémartin / developpeur-pascal.fr

14. Questions / réponses
(c) Patrick Prémartin / developpeur-pascal.fr

15. Prochainement
• Cette présentation, le replay et les sources des démos seront mis à
disposition sur le blog https://developpeur-pascal.fr
• Prochain événement en live :
=> meetup à Toulouse le 18 juin
• Prochain webinaire le 25 juin :
=> Faire une interface adaptive avec la VCL
(c) Patrick Prémartin / developpeur-pascal.fr