5.1 Positionnement des contrôles

5.1.1        Utilisation de la grille

Dans une vue FormsStudio, lorsque deux éléments sont positionnés côte à côte (par exemple le libellé et la saisie de texte court du chapitre précédent), une Grille contenant ces éléments est créée automatiquement.

Pour sélectionner la grille :

  1. Sélectionner tout d’abord un des contrôles présents dans la grille (par exemple, la saisie de texte court).
  2. Sélectionner à nouveau ce même contrôle tout en maintenant la touche Maj appuyée pour sélectionner son parent (dans notre cas, la grille). On constate qu’une grille à deux colonnes et une rangée a bien été créée.

Il est possible de redimensionner les colonnes de cette grille en effectuant un glisser-déposer du séparateur situé entre les deux colonnes. Il est aussi possible de modifier la largeur d’une colonne en sélectionnant cette dernière, puis en éditant sa propriété Largeur. S’il existe plus de 3 colonnes, il est possible de déplacer les colonnes en effectuant un glisser-déposer de la colonne elle-même à gauche ou à droite.

Hauteur des rangées

Il n’est pas autorisé de modifier la hauteur d’une rangée dans FormsStudio. Cette hauteur est fixée arbitrairement. Seuls quelques contrôles disposent d’une hauteur personnalisable (saisie de texte long, image, ect.).

Pour ajouter / supprimer des colonnes à une grille :

  1. Sélectionner la grille, puis la colonne à supprimer ou pour laquelle ajouter une nouvelle colonne à droite ou à gauche.
  2. Cliquer droit sur cette colonne, et sélectionner l’action désirée.

Pour ajouter / supprimer des rangées à une grille :

  1. Sélectionner la grille
  2. Cliquer droit sur l’en-tête de la rangée à supprimer ou pour laquelle ajouter une nouvelle rangée en haut ou en bas, et sélectionner l’action désirée.
Pour accéder au menu contextuel d’une grille (et non pas celui des rangées ou des colonnes), le processus est légèrement différent d’un simple clic droit. En effet, lorsqu’une grille est sélectionnée et qu’on effectue un clic droit, c’est le menu contextuel de l’élément directement positionné sous le curseur de la souris qui est affiché. Ainsi, il faut utiliser l’icône positionné en haut à gauche de la grille pour ouvrir son menu contextuel, ou bien utiliser la touche Menu contextuel du clavier (située à gauche de la touche Ctrl droite) lorsque la grille est sélectionnée.

5.1.2        Propriétés communes des contrôles

Certaines propriétés sont communes à tous les contrôles.

Alignement

Chaque contrôle peut être aligné horizontalement ou verticalement dans sa cellule via sa propriété Alignement. Il est aussi possible d’étendre un contrôle de manière à ce qu’il occupe 100% de l’espace horizontal.

Marge

Chaque contrôle dispose d’une marge par défaut positionnée à 2px pour la majorité des contrôles (0px pour les contrôles particuliers de type Grille ou Zone de défilement).

Largeur

Largeur du contrôle.

Visibilité

Détermine si le contrôle est visible ou non en fonction des données du formulaire.

Modifiable

Cette propriété est présente sur la plupart des contrôles pouvant être liés à un champ du modèle. Elle détermine si le contrôle est modifiable ou non en fonction des données du formulaire.

Texte d’infobulle

Cette propriété est présente sur la plupart des contrôles et permet d’afficher un texte explicatif au survol de la souris.

Expressions

Les propriétés Visibilité et Modifiable sont des expressions. Voir le chapitre [6] pour plus d’informations sur les expressions.

De plus, beaucoup d’actions présentes dans le menu contextuel des contrôles sont communes à tous les types de contrôles. On retrouve notamment les suivantes :

  • Alignement vertical et horizontal.
  • Duplication de la ligne contenant l’élément.
  • Englober le contrôle dans un autre contrôle de type contenant.

Contrôle de type contenant et action Englober dans… 

Un contrôle de type contenant peut contenir d’autres contrôles. La liste est présente dans la rubrique Mise en page de la boîte à outils lorsque l’éditeur de vue est sélectionné. Chaque contrôle (contenant ou non) dispose de l’action Englober dans… via son menu contextuel. Cette action permet d’englober le contrôle sélectionné dans un nouveau contrôle de type contenant, par exemple dans un Groupe ou une Grille.

5.1.3        Exemple de réalisation de vue

Etapes de réalisation :

  1. Ajouter un contrôle Libellé et éditer sa propriété Libellé en « Poids ».
  2. Ajouter à sa droite un contrôle Saisie de texte court, puis diminuer la largeur de la colonne contenant le libellé.
  3. Sélectionner la colonne de droite, puis ajouter une nouvelle colonne à sa droite (en cliquant droit sur cette colonne, puis en sélectionnant Ajouter une colonne à droite).
  4. Dupliquer le libellé « Poids » dans la nouvelle cellule créée (via un glisser-déposer en maintenant la touche Ctrl appuyée).
  5. Renommer le libellé en « kg », puis réajuster les largeurs des colonnes.
  6. Dupliquer la rangée en dessous (en cliquant droit sur cette rangée, puis en sélectionnant Dupliquer la ligne en dessous), et renommer « Poids » en « Taille » et « kg » en « cm ».
  7. Englober la grille dans une nouvelle grille (via son menu contextuel, sélectionner l’action Englober dans… puis Grille).
  8. Sélectionner la nouvelle grille (via la touche Maj), et ajouter une rangée à la fin.
  9. Ajouter un contrôle Libellé dans la nouvelle cellule créée, le renommer, et ajouter un contrôle Saisie de texte court à sa droite. Diminuer ensuite la largeur de la première colonne.
  10. Sélectionner la grille parent (via la touche Maj), et ajouter une rangée à la fin.
  11. De la même manière que l’ajout du poids au début, ajouter une ligne correspondant à l’âge du patient dans la nouvelle cellule vide. Lorsque deux grilles différentes sont présentes l’une en dessous de l’autre (notre cas) et que l’on souhaite redimensionner une colonne de l’une des grilles avec une largeur identique à celle d’une colonne de l’autre grille, il est possible de maintenir la touche Ctrl appuyée lors du redimensionnement afin de faire apparaitre un témoin vertical indiquant que la largeur est bien atteinte.
  12. Finir en ajustant les largeurs des différentes colonnes.

 

 

 

 

 

 

 

 

 

 

Was this article helpful?

Related Articles

Poster un commentaire

Vous devez être connecté pour pouvoir poster un commentaire.