Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Faire une interface adaptive avec FireMonkey

webinaire Delphi

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Faire une interface adaptive avec FireMonkey

  1. 1. Faire une interface adaptive avec FireMonkey Webinaire du 28 mai 2019 (c) Patrick Prémartin / developpeur-pascal.fr
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Questions / réponses (c) Patrick Prémartin / developpeur-pascal.fr
  15. 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

×