Skip to main content

3.1 Les composants de formulaire

Les composants de formulaire sont des composants qui permettent de créer un écran de type formulaire.

3.1.1 Les boutons et labels

3.1.1.1 Le bouton

Les contrôles de type Bouton sont principalement destinés à la validation de formulaires. En effet, ceux-ci permettent uniquement de lancer un ou plusieurs comportements au travers d’un unique déclencheur (À la validation). Dans les propriétés générales du bouton, il est possible de choisir s’il s’agit d’un bouton de validation ou d’un bouton d’annulation / de redirection.

Bouton.png

3.1.1.2 Le label

Les labels sont des éléments textuels pouvant être liés à des contrôles. Ainsi, il est par exemple possible de créer un label de type Nom : et de le lier à un champ de saisie de nom.

Label.png

Les labels Prénom et Nom sont liés respectivement aux champs de saisie Saisie de prénom et Saisie de nom.

Placer un contrôle juste à côté d’un label liera automatiquement le label au contrôle.

3.1.2 Les composants de saisie
3.1.2.1 La saisie de texte

Les saisies de texte permettent d’afficher des données, et laissent surtout la possibilité aux utilisateurs de l’application d’ajouter ou modifier du texte. La saisie ne peut être effectuée que sur une ligne (voir le contrôle de type Zone de saisie de texte pour pouvoir saisir sur plusieurs lignes).

  • Valeur initiale : il est possible de saisir une valeur par défaut qui sera affichée dans le champ.

  • Message d’aide : le message saisi ici s’affichera au survol du composant à la souris.

  • Bulle d’aide : le message saisi ici s’affichera à côté du composant au survol à la souris.

  • Label : le texte saisi ici apparaîtra en tant que label dans le champ (il restera affiché lors de la saisie d’un texte par l’utilisateur.

  • Texte indicatif par défaut : le texte saisi ici apparaîtra dans le champ lorsqu’aucune saisie n’est effectuée. Il disparaîtra dès lors qu’un caractère sera saisi.

Saisie_texte_prop.png

Propriétés du contrôle

Saisie_texte.png

Résultat à l'écran

Deux déclencheurs sont disponibles pour ce contrôle :

  • Au changement de valeur lance l’exécution des comportements au moment où l’utilisateur quitte la saisie (en appuyant sur Entrée, Tabulation, ou en cliquant sur une zone quelconque de l’écran). Dans le cas où l’on souhaite lancer ce déclencheur à chaque caractère saisi, il vaut mieux utiliser un contrôle de type Texte à complétion assistée.

  • À la validation lance l’exécution des comportements lorsque l’utilisateur clique sur le contrôle.

 

3.1.2.2 La saisie de nombre

La saisie de nombre est une zone de saisie empêchant de saisir autre chose que des nombres. Elle dispose également de flèches fa-solid-caret-down.png et fa-solid-caret-up.png permettant d’incrémenter ou de décrémenter le nombre saisi.

  • Valeurs minimale et maximale : permet de définir les limites basse et haute des valeurs autorisées pouvant être saisies.

  • Pas : permet de définir l’incrémentation ; un pas de 1 augmente le nombre de 1 en cliquant sur les flèches fa-solid-caret-down.png et fa-solid-caret-up.png (si le nombre de décimales est à 0.

  • Nombre de décimales : permet de définir le nombre de chiffres après la virgule autorisés (par défaut : 0).

 

Saisie_nombre.png

 

3.1.2.3 La saisie d'adresse e-mail

Ce contrôle autorise uniquement la saisie d’adresses e-mails dans un formatage correct.

  • Valeur initiale : il est possible de saisir une valeur par défaut qui sera affichée dans le champ.

  • Message d’aide : le message saisi ici s’affichera au survol du composant à la souris.

  • Bulle d’aide : le message saisi ici s’affichera à côté du composant au survol à la souris.

  • Label : le texte saisi ici apparaîtra en tant que label dans le champ (il restera affiché lors de la saisie d’un texte par l’utilisateur.

  • Texte indicatif par défaut : le texte saisi ici apparaîtra dans le champ lorsqu’aucune saisie n’est effectuée. Il disparaîtra dès lors qu’un caractère sera saisi.

 

Saisie_email.png

 

3.1.2.4 La saisie de numéro de téléphone

Ce contrôle autorise uniquement la saisie de numéro de téléphone dans un formatage correct.

  • Valeur initiale : il est possible de saisir une valeur par défaut qui sera affichée dans le champ.

  • Message d’aide : le message saisi ici s’affichera au survol du composant à la souris.

  • Bulle d’aide : le message saisi ici s’affichera à côté du composant au survol à la souris.

  • Label : le texte saisi ici apparaîtra en tant que label dans le champ (il restera affiché lors de la saisie d’un texte par l’utilisateur.

  • Texte indicatif par défaut : le texte saisi ici apparaîtra dans le champ lorsqu’aucune saisie n’est effectuée. Il disparaîtra dès lors qu’un caractère sera saisi.

 

Saisie_telephone.png

 

3.1.2.5 La saisie d'adresse Web

Ce contrôle autorise uniquement la saisie d’adresses Web dans un formatage correct.

  • Valeur initiale : il est possible de saisir une valeur par défaut qui sera affichée dans le champ.

  • Message d’aide : le message saisi ici s’affichera au survol du composant à la souris.

  • Bulle d’aide : le message saisi ici s’affichera à côté du composant au survol à la souris.

  • Label : le texte saisi ici apparaîtra en tant que label dans le champ (il restera affiché lors de la saisie d’un texte par l’utilisateur.

  • Texte indicatif par défaut : le texte saisi ici apparaîtra dans le champ lorsqu’aucune saisie n’est effectuée. Il disparaîtra dès lors qu’un caractère sera saisi.

 

Saisie_url.png

 

3.1.2.6 La saisie de mot de passe

La saisie de mot de passe fonctionne de façon similaire à la saisie de texte classique. La différence est que les données saisies par l’utilisateur ne sont pas visibles à l’écran.

Les déclencheurs suivants sont disponibles : Au changement de valeur et À la validation.

 

Saisie_mdp.png

 

3.1.2.7 La saisie de zone de texte

Les contrôles de type Zone de saisie de texte offrent la possibilité d’effectuer une saisie sur plusieurs lignes (contrairement à la saisie de texte classique qui n’autorise qu’une ligne).

En revanche, la zone de saisie de texte ne propose qu’un seul déclencheur : Au changement de valeur. Il n’est donc pas possible d’exécuter des comportements au clic sur ce contrôle, mais uniquement lorsque le focus quitte ce dernier.

  • Valeur initiale : il est possible de saisir une valeur par défaut qui sera affichée dans le champ.

  • Message d’aide : le message saisi ici s’affichera au survol du composant à la souris.

  • Bulle d’aide : le message saisi ici s’affichera à côté du composant au survol à la souris.

  • Label : le texte saisi ici apparaîtra en tant que label dans le champ (il restera affiché lors de la saisie d’un texte par l’utilisateur.

  • Texte indicatif par défaut : le texte saisi ici apparaîtra dans le champ lorsqu’aucune saisie n’est effectuée. Il disparaîtra dès lors qu’un caractère sera saisi.

 

Saisie_zone_texte.png

 

3.1.2.8 Le texte à complétion assistée

Ce type de contrôle peut être utilisé conjointement avec un jeu de données, ou bien avec une liste saisie par le designer. Il permet, à partir d’une liste de données fournie, de proposer des valeurs en correspondance avec le début de saisie de l’utilisateur.

Il contient 2 déclencheurs :

  • Au changement de valeur lance l’exécution des comportements à chaque saisie d’un caractère, ou bien lorsque l’utilisateur sélectionne une valeur dans la liste proposée. Ce comportement diffère de celui des autres composants de saisie qui attendent d’avoir quitté le champ de saisie (ou d’appuyer sur Entrée) avant d’exécuter les comportements associés. Il faut donc faire veiller à ce que les comportements associés à ce composant soient le plus performants possible. Avec cette particularité, il est possible d’exploiter ce composant sans aucun jeu de données lié.

  • À la validation lance l’exécution des comportements lorsque l’utilisateur clique sur le contrôle.

 

Saisie_completion.png

 

Il est possible de lier un jeu de données en le sélectionnant dans la liste Jeu de données associé dans les propriétés du contrôle (onglet fa-solid-table.png Données). Il est impératif de désigner un attribut en tant que label : cliquer sur fa-solid-caret-right.png sur l’attribut souhaité, puis sélectionner la fonction Label.

Contrairement aux autres listes, le texte à complétion assistée ne sélectionne pas la ligne du jeu de données lié et n’oblige pas à choisir un élément existant.

 

Saisie_completion_JDD.png

 

Pour proposer une liste non-issue d’un jeu de données mais saisie manuellement par le designer, sélectionner le type de données Valeurs fixes dans les propriétés du contrôle (onglet fa-solid-table.png Données) puis cliquer sur le bouton fa-solid-plus.png pour saisir une valeur. Valider avec fa-solid-check.png , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec fa-solid-pencil-alt.png et supprimées avec fa-solid-times.png .

Cliquer sur l’icône fa-solid-times.png située à côté du fa-solid-plus.png dans la zone Label supprimera toute la liste.

 

Valeur_fixe.png

 

Le filtre de restitution des données est également paramétrable. Il est possible d’afficher les résultats contenant, commençant ou se terminant par la chaîne saisie, etc.

 

Saisie_completion_filtre.png

Le jeu de données associé est DataSet table employé, le type filtre utilisé est le filtre par défaut de la plate-forme

 

3.1.2.9 L'éditeur de texte

L’éditeur de texte propose un éditeur de type WordPad, permettant ainsi la mise en forme du texte avec les options les plus courantes (gras, souligné, centré, etc.).

Ce contrôle dispose d’un déclencheur Au changement de valeur exécutant les comportements lorsque l’utilisateur quitte le composant (en appuyant sur Tabulation, ou en cliquant sur une zone quelconque de l’écran). Il dispose également d’un déclencheur À la validation.

 

Editeur.png