SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
Faire une interface adaptive
avec la VCL
Webinaire du 25 juin 2019
(c) Patrick Prémartin / developpeur-pascal.fr
Au programme
• Qu’est-ce que la VCL ?
• Les composants
• La hiérarchie parent/enfant des composants visuels
• Les ancrages
• Les alignements
• Les marges intérieures et extérieures
• Des conteneurs disponibles
(c) Patrick Prémartin / developpeur-pascal.fr
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 inter entreprises.
(c) Patrick Prémartin / developpeur-pascal.fr
Qu’est-ce que la VCL ?
• La Visual Component Library est le framework de composants visuels
historique de Delphi.
• Développée pour simplifier la création d’interfaces utilisateurs sous
Windows, la VCL a suivi les évolutions du système d’exploitation de
Microsoft.
(c) Patrick Prémartin / developpeur-pascal.fr
Qu’est-ce que la VCL ?
• Les projets VCL sont exclusivement destinés à fonctionner sous
Windows. Même si des produits tiers permettent aussi de compiler
pour macOS, ce n’est pas fait pour à la base.
• La VCL est mappée sur les API de Windows auxquelles on a librement
accès dans nos programmes.
(c) Patrick Prémartin / developpeur-pascal.fr
Les composants
• Dans Delphi nous avons deux types de composants quel que soit le
framework utilisé : des composants visuels et des composants non
visuels.
• La plupart du temps les composants non visuels peuvent être utilisés
de façon indépendante du framework visuel (VCL, FMX, IW, …) choisi.
• Les composants visuels de la VCL sont en revanche liés à Windows et
à son fonctionnement, notamment pour leur affichage (dessin sur le
canvas ou appel d’API de l’OS).
(c) Patrick Prémartin / developpeur-pascal.fr
La hiérarchie parent/enfant des
composants visuels
• Les composants de la VCL ont deux hiérarchies :
- une pour la création / suppression des composants (Owner)
- une pour la dépendance lors de l’affichage (Parent).
• Contrairement à FireMonkey, les composants visuels de la VCL ne
peuvent pas tous être parents d’autres composants. Les conteneurs
sont en nombre limité.
• Comme pour les autres frameworks, les propriétés d’affichage des
composants visuels de la VCL s’appliquent en fonction de leur parent
et non de la fiche sur laquelle ils apparaissent.
(c) Patrick Prémartin / developpeur-pascal.fr
Les ancrages
• Chaque côté d’un composant peut être ancré par rapport à un rebord
du parent du composant.
• La 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 à alNone.
(c) Patrick Prémartin / developpeur-pascal.fr
Les alignements
• La propriété « Align » des composants visuels permet de les ancrer
automatiquement dans leur parent par rapport aux autres
composants alignés dans celui-ci.
(c) Patrick Prémartin / developpeur-pascal.fr
Les alignements
• L’alignement alCustom permet de gérer la position du composant par
programmation en surchargeant deux méthodes sur leur parent.
(c) Patrick Prémartin / developpeur-pascal.fr
Les marges extérieures
• Les marges extérieures (Margins) se
calculent lorsque les composants sont
alignés par rapport à d’autres dans le
même parent.
• Il faut activer la propriété
« AlignWithMargins » pour que les
marges soient prises en compte.
(c) Patrick Prémartin / developpeur-pascal.fr
Les marges intérieures
• Les marges intérieures (Paddings)
changent la zone utilisable par les
composants enfants lorsque ceux-ci
sont alignés. Cette propriété n’est
accessible que sur les conteneurs.
• En cas de positionnement fixe (Top,
Left) des composants les marges
intérieures de leur parent ne sont pas
utilisées.
(c) Patrick Prémartin / developpeur-pascal.fr
Des conteneurs disponibles
• Il existe plusieurs séries de composants permettant d’en regrouper
d’autres en VCL :
• Les fiches (TForm)
• Les cadres (TFrame)
• Les zones avec défilement (TScrollBox)
• Les descendants de TCustomPanel
• Les descendants de TCustomGroupBox
• Sans oublier les barres d’outils pour stocker des boutons (TToolBar), les barres
de statut (TStatusBar), les onglets (TCustomTabControl), le TMultiView, …
(c) Patrick Prémartin / developpeur-pascal.fr
Le conteneur « TForm »
• Je ne m’étendrai pas sur les fiches aujourd’hui.
• C’est la base de tout écran développé avec Delphi. Vous les utilisez
forcément déjà dans vos projets.
(c) Patrick Prémartin / developpeur-pascal.fr
Le conteneur « TFrame »
• Les cadres fonctionnent comme des fiches dans le concepteur de
fiches mais s’utilisent comme des composants dans nos programmes.
• Reportez-vous au webinaire « Créer des composants visuels sans faire
de composant » du 22 février 2019 où j’en parlais pour la VCL et FMX.
https://developpeur-pascal.fr/p/___008-webinaire-du-22-fevrier-
2019-creer-des-composants-visuels-sans-faire-de-composant.html
(c) Patrick Prémartin / developpeur-pascal.fr
Le conteneur « TScrollBox »
• Le composant TScrollBox permet d’afficher les barres de défilement
horizontale et verticale lorsqu’on en a besoin.
• Sa taille extérieure est spécifiée.
• Sa taille intérieure ne l’est pas et s’adapte au contenu.
(c) Patrick Prémartin / developpeur-pascal.fr
Les conteneurs « TCustomPanel »
• Les panels sont les conteneurs les plus classiques dans les
applications VCL. Ce sont des zones délimitées par une bordure
modifiable.
(c) Patrick Prémartin / developpeur-pascal.fr
Les conteneurs « TCustomPanel »
• TPanel est une zone de stockage dans laquelle on met ce que l’on
veut.
• TFlowPanel simule un alignement sur les composants placés dedans.
C’est sa propriété FlowStyle qui détermine dans quel sens ses enfants
seront affichés et classés.
• TGridPanel affiche ses enfants sous forme de grille, à raison d’un
composant par case.
(c) Patrick Prémartin / developpeur-pascal.fr
Le conteneur « TCategoryPanelGroup »
• TCategoryPanelGroup stocke des composants TCategoryPanel qui
peuvent à leur tour stocker tout type de composant.
(c) Patrick Prémartin / developpeur-pascal.fr
Le conteneur « TRelativePanel »
• TRelativePanel permet de gérer une multitude d’alignements sur ses
enfants. Le tout se fait par programmation.
• Un exemple de son fonctionnement est disponible avec les exemples
installés avec l’EDI.
(c) Patrick Prémartin / developpeur-pascal.fr
Les conteneurs « TCustomPanel »
• TStackPanel affiche ses enfants en liste verticale ou horizontale.
• TCardPanel se comporte un peu comme des pages d’un classeur à
onglets, mais sans les onglets. Des exemples de son fonctionnement
sont disponibles sur GetIt.
(c) Patrick Prémartin / developpeur-pascal.fr
Les conteneurs « TCustomGroupBox »
• Les composants de cette hiérarchie sont des zones de stockage
encadrées avec un titre.
• TGroupBox permet de regrouper les composants que l’on veut.
• TRadioGroup regroupe des boutons radio et les relie ensemble.
• TButtonGroup regroupe des boutons sous forme de grille.
(c) Patrick Prémartin / developpeur-pascal.fr
Questions / réponses
(c) Patrick Prémartin / developpeur-pascal.fr
Prochainement
• Cette présentation et le replay seront mis à disposition sur le blog
https://developpeur-pascal.fr
• Les prochains événements en live et webinaires seront annoncés à la
rentrée par mailing de Barnsten et sur mon blog.
• Si vous avez des suggestions de sujets ou envie de présenter quelque
chose, faites-nous signe.
• D’autres choses devraient aussi arriver cet été. A suivre…
(c) Patrick Prémartin / developpeur-pascal.fr

Contenu connexe

Similaire à Faire une interface adaptive avec la VCL

Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsJulien Wittouck
 
365 saturday - Développer un plugin XrmToolBox
365 saturday - Développer un plugin XrmToolBox365 saturday - Développer un plugin XrmToolBox
365 saturday - Développer un plugin XrmToolBoxTanguy TOUZARD
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536quickredfox
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesChristophe Furmaniak
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...CERTyou Formation
 
Gérer le clavier virtuel sous iOS et Android
Gérer le clavier virtuel sous iOS et AndroidGérer le clavier virtuel sous iOS et Android
Gérer le clavier virtuel sous iOS et Androidpprem
 
[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FRNuxeo
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPatelier111
 
alphorm.com - Formation UML
alphorm.com - Formation UMLalphorm.com - Formation UML
alphorm.com - Formation UMLAlphorm
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Romain Jarraud
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
121102 aetc_consultingconf4d
121102 aetc_consultingconf4d121102 aetc_consultingconf4d
121102 aetc_consultingconf4dNathalie Richomme
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013bellesmanieres
 
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...Core-Techs
 
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Microsoft
 
C++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in ParisC++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in Parischristophep21
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Martin Latrille
 

Similaire à Faire une interface adaptive avec la VCL (20)

Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
 
365 saturday - Développer un plugin XrmToolBox
365 saturday - Développer un plugin XrmToolBox365 saturday - Développer un plugin XrmToolBox
365 saturday - Développer un plugin XrmToolBox
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantes
 
Php 100k
Php 100kPhp 100k
Php 100k
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...
Taleb formation-talend-open-studio-data-integration-les-bases-et-perfectionne...
 
Gérer le clavier virtuel sous iOS et Android
Gérer le clavier virtuel sous iOS et AndroidGérer le clavier virtuel sous iOS et Android
Gérer le clavier virtuel sous iOS et Android
 
[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR[Webinar] Techniques avancées de création de workflow - FR
[Webinar] Techniques avancées de création de workflow - FR
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
 
alphorm.com - Formation UML
alphorm.com - Formation UMLalphorm.com - Formation UML
alphorm.com - Formation UML
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
121102 aetc_consultingconf4d
121102 aetc_consultingconf4d121102 aetc_consultingconf4d
121102 aetc_consultingconf4d
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
 
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
 
C++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in ParisC++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in Paris
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 

Plus de pprem

Using FireMonkey as a game engine
Using FireMonkey as a game engineUsing FireMonkey as a game engine
Using FireMonkey as a game enginepprem
 
Using Delphi as a no code development environment
Using Delphi as a no code development environmentUsing Delphi as a no code development environment
Using Delphi as a no code development environmentpprem
 
Easy coding a multi device game with FireMonkey
Easy coding a multi device game with FireMonkeyEasy coding a multi device game with FireMonkey
Easy coding a multi device game with FireMonkeypprem
 
Utiliser FireMonkey comme moteur de jeux vidéo
Utiliser FireMonkey comme moteur de jeux vidéoUtiliser FireMonkey comme moteur de jeux vidéo
Utiliser FireMonkey comme moteur de jeux vidéopprem
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !pprem
 
Quoi de neuf dans la version 11 Alexandria ?
Quoi de neuf dans la version 11 Alexandria ?Quoi de neuf dans la version 11 Alexandria ?
Quoi de neuf dans la version 11 Alexandria ?pprem
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphipprem
 
Utilisation de git avec Delphi
Utilisation de git avec DelphiUtilisation de git avec Delphi
Utilisation de git avec Delphipprem
 
Diffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jourDiffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jourpprem
 
Delphi et les tests unitaires
Delphi et les tests unitairesDelphi et les tests unitaires
Delphi et les tests unitairespprem
 
Développer une application pour Android TV avec Delphi
Développer une application pour Android TV avec DelphiDévelopper une application pour Android TV avec Delphi
Développer une application pour Android TV avec Delphipprem
 
Sauvegarder et restaurer l'état des applications mobiles
Sauvegarder et restaurer l'état des applications mobilesSauvegarder et restaurer l'état des applications mobiles
Sauvegarder et restaurer l'état des applications mobilespprem
 
Internationaliser les projets VCL / FMX
Internationaliser les projets VCL / FMXInternationaliser les projets VCL / FMX
Internationaliser les projets VCL / FMXpprem
 
Comment développer pour Linux avec Delphi
Comment développer pour Linux avec DelphiComment développer pour Linux avec Delphi
Comment développer pour Linux avec Delphipprem
 
Déploiement et débogage à distance
Déploiement et débogage à distanceDéploiement et débogage à distance
Déploiement et débogage à distancepprem
 
QR codes et codes à barres sous Delphi
QR codes et codes à barres sous DelphiQR codes et codes à barres sous Delphi
QR codes et codes à barres sous Delphipprem
 
Découvrez FireDAC pour FMX
Découvrez FireDAC pour FMXDécouvrez FireDAC pour FMX
Découvrez FireDAC pour FMXpprem
 
POC Notes de frais
POC Notes de fraisPOC Notes de frais
POC Notes de fraispprem
 
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...pprem
 
Comment écrire des articles de blog à succès
Comment écrire des articles de blog à succèsComment écrire des articles de blog à succès
Comment écrire des articles de blog à succèspprem
 

Plus de pprem (20)

Using FireMonkey as a game engine
Using FireMonkey as a game engineUsing FireMonkey as a game engine
Using FireMonkey as a game engine
 
Using Delphi as a no code development environment
Using Delphi as a no code development environmentUsing Delphi as a no code development environment
Using Delphi as a no code development environment
 
Easy coding a multi device game with FireMonkey
Easy coding a multi device game with FireMonkeyEasy coding a multi device game with FireMonkey
Easy coding a multi device game with FireMonkey
 
Utiliser FireMonkey comme moteur de jeux vidéo
Utiliser FireMonkey comme moteur de jeux vidéoUtiliser FireMonkey comme moteur de jeux vidéo
Utiliser FireMonkey comme moteur de jeux vidéo
 
Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
 
Quoi de neuf dans la version 11 Alexandria ?
Quoi de neuf dans la version 11 Alexandria ?Quoi de neuf dans la version 11 Alexandria ?
Quoi de neuf dans la version 11 Alexandria ?
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Utilisation de git avec Delphi
Utilisation de git avec DelphiUtilisation de git avec Delphi
Utilisation de git avec Delphi
 
Diffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jourDiffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jour
 
Delphi et les tests unitaires
Delphi et les tests unitairesDelphi et les tests unitaires
Delphi et les tests unitaires
 
Développer une application pour Android TV avec Delphi
Développer une application pour Android TV avec DelphiDévelopper une application pour Android TV avec Delphi
Développer une application pour Android TV avec Delphi
 
Sauvegarder et restaurer l'état des applications mobiles
Sauvegarder et restaurer l'état des applications mobilesSauvegarder et restaurer l'état des applications mobiles
Sauvegarder et restaurer l'état des applications mobiles
 
Internationaliser les projets VCL / FMX
Internationaliser les projets VCL / FMXInternationaliser les projets VCL / FMX
Internationaliser les projets VCL / FMX
 
Comment développer pour Linux avec Delphi
Comment développer pour Linux avec DelphiComment développer pour Linux avec Delphi
Comment développer pour Linux avec Delphi
 
Déploiement et débogage à distance
Déploiement et débogage à distanceDéploiement et débogage à distance
Déploiement et débogage à distance
 
QR codes et codes à barres sous Delphi
QR codes et codes à barres sous DelphiQR codes et codes à barres sous Delphi
QR codes et codes à barres sous Delphi
 
Découvrez FireDAC pour FMX
Découvrez FireDAC pour FMXDécouvrez FireDAC pour FMX
Découvrez FireDAC pour FMX
 
POC Notes de frais
POC Notes de fraisPOC Notes de frais
POC Notes de frais
 
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...
Présentation de Delphi 10.4 Sydney, C++Builder 10.4 Sydney et RAD Studio 10.4...
 
Comment écrire des articles de blog à succès
Comment écrire des articles de blog à succèsComment écrire des articles de blog à succès
Comment écrire des articles de blog à succès
 

Faire une interface adaptive avec la VCL

  • 1. Faire une interface adaptive avec la VCL Webinaire du 25 juin 2019 (c) Patrick Prémartin / developpeur-pascal.fr
  • 2. Au programme • Qu’est-ce que la VCL ? • Les composants • La hiérarchie parent/enfant des composants visuels • Les ancrages • Les alignements • Les marges intérieures et extérieures • Des conteneurs disponibles (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 inter entreprises. (c) Patrick Prémartin / developpeur-pascal.fr
  • 4. Qu’est-ce que la VCL ? • La Visual Component Library est le framework de composants visuels historique de Delphi. • Développée pour simplifier la création d’interfaces utilisateurs sous Windows, la VCL a suivi les évolutions du système d’exploitation de Microsoft. (c) Patrick Prémartin / developpeur-pascal.fr
  • 5. Qu’est-ce que la VCL ? • Les projets VCL sont exclusivement destinés à fonctionner sous Windows. Même si des produits tiers permettent aussi de compiler pour macOS, ce n’est pas fait pour à la base. • La VCL est mappée sur les API de Windows auxquelles on a librement accès dans nos programmes. (c) Patrick Prémartin / developpeur-pascal.fr
  • 6. Les composants • Dans Delphi nous avons deux types de composants quel que soit le framework utilisé : des composants visuels et des composants non visuels. • La plupart du temps les composants non visuels peuvent être utilisés de façon indépendante du framework visuel (VCL, FMX, IW, …) choisi. • Les composants visuels de la VCL sont en revanche liés à Windows et à son fonctionnement, notamment pour leur affichage (dessin sur le canvas ou appel d’API de l’OS). (c) Patrick Prémartin / developpeur-pascal.fr
  • 7. La hiérarchie parent/enfant des composants visuels • Les composants de la VCL ont deux hiérarchies : - une pour la création / suppression des composants (Owner) - une pour la dépendance lors de l’affichage (Parent). • Contrairement à FireMonkey, les composants visuels de la VCL ne peuvent pas tous être parents d’autres composants. Les conteneurs sont en nombre limité. • Comme pour les autres frameworks, les propriétés d’affichage des composants visuels de la VCL s’appliquent en fonction de leur parent et non de la fiche sur laquelle ils apparaissent. (c) Patrick Prémartin / developpeur-pascal.fr
  • 8. Les ancrages • Chaque côté d’un composant peut être ancré par rapport à un rebord du parent du composant. • La 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 à alNone. (c) Patrick Prémartin / developpeur-pascal.fr
  • 9. Les alignements • La propriété « Align » des composants visuels permet de les ancrer automatiquement dans leur parent par rapport aux autres composants alignés dans celui-ci. (c) Patrick Prémartin / developpeur-pascal.fr
  • 10. Les alignements • L’alignement alCustom permet de gérer la position du composant par programmation en surchargeant deux méthodes sur leur parent. (c) Patrick Prémartin / developpeur-pascal.fr
  • 11. Les marges extérieures • Les marges extérieures (Margins) se calculent lorsque les composants sont alignés par rapport à d’autres dans le même parent. • Il faut activer la propriété « AlignWithMargins » pour que les marges soient prises en compte. (c) Patrick Prémartin / developpeur-pascal.fr
  • 12. Les marges intérieures • Les marges intérieures (Paddings) changent la zone utilisable par les composants enfants lorsque ceux-ci sont alignés. Cette propriété n’est accessible que sur les conteneurs. • En cas de positionnement fixe (Top, Left) des composants les marges intérieures de leur parent ne sont pas utilisées. (c) Patrick Prémartin / developpeur-pascal.fr
  • 13. Des conteneurs disponibles • Il existe plusieurs séries de composants permettant d’en regrouper d’autres en VCL : • Les fiches (TForm) • Les cadres (TFrame) • Les zones avec défilement (TScrollBox) • Les descendants de TCustomPanel • Les descendants de TCustomGroupBox • Sans oublier les barres d’outils pour stocker des boutons (TToolBar), les barres de statut (TStatusBar), les onglets (TCustomTabControl), le TMultiView, … (c) Patrick Prémartin / developpeur-pascal.fr
  • 14. Le conteneur « TForm » • Je ne m’étendrai pas sur les fiches aujourd’hui. • C’est la base de tout écran développé avec Delphi. Vous les utilisez forcément déjà dans vos projets. (c) Patrick Prémartin / developpeur-pascal.fr
  • 15. Le conteneur « TFrame » • Les cadres fonctionnent comme des fiches dans le concepteur de fiches mais s’utilisent comme des composants dans nos programmes. • Reportez-vous au webinaire « Créer des composants visuels sans faire de composant » du 22 février 2019 où j’en parlais pour la VCL et FMX. https://developpeur-pascal.fr/p/___008-webinaire-du-22-fevrier- 2019-creer-des-composants-visuels-sans-faire-de-composant.html (c) Patrick Prémartin / developpeur-pascal.fr
  • 16. Le conteneur « TScrollBox » • Le composant TScrollBox permet d’afficher les barres de défilement horizontale et verticale lorsqu’on en a besoin. • Sa taille extérieure est spécifiée. • Sa taille intérieure ne l’est pas et s’adapte au contenu. (c) Patrick Prémartin / developpeur-pascal.fr
  • 17. Les conteneurs « TCustomPanel » • Les panels sont les conteneurs les plus classiques dans les applications VCL. Ce sont des zones délimitées par une bordure modifiable. (c) Patrick Prémartin / developpeur-pascal.fr
  • 18. Les conteneurs « TCustomPanel » • TPanel est une zone de stockage dans laquelle on met ce que l’on veut. • TFlowPanel simule un alignement sur les composants placés dedans. C’est sa propriété FlowStyle qui détermine dans quel sens ses enfants seront affichés et classés. • TGridPanel affiche ses enfants sous forme de grille, à raison d’un composant par case. (c) Patrick Prémartin / developpeur-pascal.fr
  • 19. Le conteneur « TCategoryPanelGroup » • TCategoryPanelGroup stocke des composants TCategoryPanel qui peuvent à leur tour stocker tout type de composant. (c) Patrick Prémartin / developpeur-pascal.fr
  • 20. Le conteneur « TRelativePanel » • TRelativePanel permet de gérer une multitude d’alignements sur ses enfants. Le tout se fait par programmation. • Un exemple de son fonctionnement est disponible avec les exemples installés avec l’EDI. (c) Patrick Prémartin / developpeur-pascal.fr
  • 21. Les conteneurs « TCustomPanel » • TStackPanel affiche ses enfants en liste verticale ou horizontale. • TCardPanel se comporte un peu comme des pages d’un classeur à onglets, mais sans les onglets. Des exemples de son fonctionnement sont disponibles sur GetIt. (c) Patrick Prémartin / developpeur-pascal.fr
  • 22. Les conteneurs « TCustomGroupBox » • Les composants de cette hiérarchie sont des zones de stockage encadrées avec un titre. • TGroupBox permet de regrouper les composants que l’on veut. • TRadioGroup regroupe des boutons radio et les relie ensemble. • TButtonGroup regroupe des boutons sous forme de grille. (c) Patrick Prémartin / developpeur-pascal.fr
  • 23. Questions / réponses (c) Patrick Prémartin / developpeur-pascal.fr
  • 24. Prochainement • Cette présentation et le replay seront mis à disposition sur le blog https://developpeur-pascal.fr • Les prochains événements en live et webinaires seront annoncés à la rentrée par mailing de Barnsten et sur mon blog. • Si vous avez des suggestions de sujets ou envie de présenter quelque chose, faites-nous signe. • D’autres choses devraient aussi arriver cet été. A suivre… (c) Patrick Prémartin / developpeur-pascal.fr