|
|
|
|
|
- Présentation du champ Disposition (Layout)
- Créer un champ Disposition
- Création du champ
- Création du champ Disposition par refactoring
- Champ Disposition dans un champ Zone répétée
- Caractéristiques du champ Disposition
- Onglet Général
- Onglet Détail
- Exemple des différents types de débordement
Le champ Disposition (Layout)
Présentation du champ Disposition (Layout) Le champ Disposition (Layout) facilite la mise en place d'UI dynamiques où des champs sont affichés et/ou masqués par programmation. Lorsqu'un champ devient invisible (par exemple via la propriété Visible), le champ Disposition permet de repositionner automatiquement tous les autres champs pour conserver une interface harmonieuse et éviter les "trous". Le champ Disposition est disponible en mode vertical et horizontal. Le champ Disposition est composé de cellules. Ces cellules contiennent les champs présents dans le champ Disposition. Chaque cellule peut contenir n'importe quel type de champ, y compris un autre champ Disposition. Ces champs peuvent être visibles ou non. La création de ces cellules peut être réalisée via l'onglet "Général" de la fenêtre de description du champ Disposition ou via le menu contextuel du champ. Créer un champ Disposition Création du champ Pour créer un champ de type Disposition : - Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Disposition" et choisissez l'orientation : horizontale ou verticale.
- Cliquez dans la fenêtre ou la page à la position où le champ doit être créé. Le champ apparaît en création.
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, redimensionnez le champ grâce à ses poignées. - Ajoutez les cellules dans le champ Disposition. Ces cellules peuvent être ajoutées :
- soit via le menu contextuel du champ (option "Insérer une cellule").
- soit via l'onglet "Général" de la description du champ (bouton "Ajouter").
- Ajoutez les champs dans les différentes cellules du champ Disposition.
- Paramétrez l'ancrage des champs présents dans le champ Disposition, notamment l'adaptation au contenu. Pour plus de détails, consultez :
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ. Création du champ Disposition par refactoring Le champ Disposition peut être également créé à partir de champs existants : - Sélectionnez les différents champs à intégrer dans le champ Disposition.
- Sous l'onglet "Modification", dans le groupe "Transformations", déroulez "Refactoring et permutations" et sélectionnez "Créer une disposition avec la sélection".
- Le champ Disposition est automatiquement créé et une cellule est créé pour chaque champ situé sur une ligne différente.
Champ Disposition dans un champ Zone répétée Caractéristiques du champ Disposition Les caractéristiques du champ Disposition sont regroupées dans l'onglet "Général" et l'onglet "Détail" de la fenêtre de description du champ. Onglet Général L'onglet "Général" permet de gérer les différentes cellules du champ Disposition. Il est possible de : - ajouter, dupliquer ou supprimer une cellule grâce à différents boutons.
- modifier l'ordre des cellules grâce aux boutons fléchés.
- modifier les paramètres de la cellule en cours. Il est possible de :
- Rendre la cellule visible ou non (état initial).
- Définir la hauteur et la hauteur maximale de la cellule :
- La hauteur correspond à la taille minimale de la cellule.
- La hauteur maximale de la cellule si elle est précisée ne pourra pas être dépassée.
- Occuper tout l'espace disponible. Cette option est disponible si l'option "En cas de débordement : Agrandir le champ, pousse les champs autour" n'a pas été sélectionnée (onglet "Détail" de la fenêtre de description du champ).
Onglet Détail L'onglet "Détail" permet de définir les paramètres de présentation du champ Disposition. Les options disponibles sont les suivantes : - Disposition : Permet de spécifier si le champ Disposition gère la disposition des champs verticalement ou horizontalement.
- Horizontal : Les cellules s'affichent sur une seule ligne et occupent toute la hauteur du champ. Seule leur largeur est modifiable.
- Vertical : Les cellules s'affichent sur une seule colonne et occupent toute la largeur du champ. Seule leur hauteur est modifiable.
- Caler les cellules : Permet de spécifier l'alignement des cellules dans le champ en fonction de la disposition choisie.
- Si la disposition est verticale, les cellules peuvent être calées en haut ou en bas.
- Si la disposition est horizontale, les cellules peuvent être calées à gauche ou à droite.
- Gestion du débordement :
- Agrandir le champ, pousse les champs autour : le champ est agrandi pour permettre l'affichage de toutes les cellules.
- Si des champs sont situés en dessous ou à droite du champ, ils sont "poussés".
- Si la taille d'une ou plusieurs cellules est réduite, la taille du champ Disposition s'adapte sans descendre en dessous de sa taille initiale.
- Les champs situés en dessous ou à droite sont déplacés en fonction du changement de taille appliqué.
- La taille de la fenêtre n'est jamais réduite.
- Afficher un ascenseur automatiquement : la zone cliente du champ est agrandie et des ascenseurs sont affichés pour pouvoir scroller dans le champ.
- Tronquer le contenu : Aucune adaptation n'est effectuée, l'affichage des cellules est tronqué.
L'option "Réduire le parent" permet de réduire si nécessaire le parent. Si le parent est la fenêtre, la réduction sera appliquée uniquement lors de l'ouverture de la fenêtre. Remarque : Lorsque cette option est activée, il faut masquer les cellules ou les champs des cellules soit dans l'événement "Déclarations globales" de la fenêtre, soit dans l'événement "Initialisation" des champs.
- Marge entre les cellules : Espacement entre les cellules du champ Disposition. Cet espacement est exprimé en pixels. Il peut être modifié par programmation via la propriété MargeInterCellules.
Exemple des différents types de débordement Exemple : Un champ Disposition est créé sous l'éditeur de fenêtres. Ce champ Disposition contient : - Plusieurs cellules permettant d'afficher les différents champs d'un formulaire.
- Un champ Disposition Horizontal contenant 2 boutons, affichés ou non suivant la présence du numéro de téléphone et/ou de l'adresse email.
Exemple 1 : Option Agrandir le champ pousse les champs autour - Au Go, la fenêtre affiche tous les champs.
- En supprimant le numéro de téléphone et l'adresse email, le champ Disposition se réduit mais la fenêtre garde la même taille.
- En ajoutant le numéro de téléphone, l'adresse email et un commentaire, le champ Disposition s'agrandit ainsi que la fenêtre.
Exemple 2 : Option Afficher un ascenseur automatiquement - Au Go, la fenêtre affiche tous les champs.
- En ajoutant un commentaire, un ascenseur apparaît automatiquement dans le champ Disposition pour faire défiler les différents éléments affichés.
Exemple 3 : Option Tronquer le contenu - Au Go, la fenêtre affiche tous les champs.
- En ajoutant un commentaire, le contenu qui dépasse du champ Disposition n'est pas affiché.
Liste des exemples associés :
|
Exemples unitaires (WINDEV) : Le champ Disposition
[ + ] Utilisation d'un champ Disposition
|
|
Exemples unitaires (WEBDEV) : Le champ Disposition
[ + ] Utilisation du champ Disposition
|
|
Exemples unitaires (WINDEV Mobile) : Le champ Disposition
[ + ] Utilisation d'un champ Disposition
|
|
Exemples didactiques (WEBDEV) : WW_UtilisationChampDisposition
[ + ] Le champ Disposition (Layout) facilite la mise en place d'UI dynamiques où des champs sont affichés et/ou masqués par programmation. Lorsqu'un champ devient invisible (par exemple via la propriété Visible), le champ Disposition repositionne automatiquement tous les autres champs pour conserver une interface harmonieuse et éviter les "trous". Cet exemple présente 2 cas d’utilisation de ce champ Disposition dans une page WEBDEV.
|
Documentation également disponible pour…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|