2. Écrans : les composants de formulaire

Les composants de formulaire comprennent :

  • le bouton

  • le label

  • la saisie de texte

  • la sélection de date

  • la saisie de nombre

  • la saisie d’adresse email

  • la saisie de numéro de téléphone

  • la saisie d’adresse Web

  • la saisie de mot de passe

  • la zone de saisie de texte

  • le texte à complétion assistée

  • la liste déroulante

  • la liste

  • la liste à complétion assistée

  • la liste déroulante à sélection multiple

  • la case à cocher

  • le groupe de cases à cocher

  • le groupe de cases à cocher déroulant

  • le groupe de boutons radio

  • le curseur

  • le sélecteur de couleur

  • l’éditeur de texte

2.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).

_images/Bouton.png

2.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.

_images/Label.png

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

Astuce

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

2.3. 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 apparaitra 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.

_images/Saisie_texte_prop.png

Propriétés du contrôle

_images/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.

2.4. La sélection de date

La sélection de date est composée d’une champ texte et d’une icône cliquable proposant un calendrier dans lequel l’utilisateur peut choisir une date. Le choix d’une date dans le calendrier exécutera le déclencheur Au changement de valeur et les comportements qui lui sont associés. Il est possible de changer le format d’affichage de la date ainsi que l’interval en minutes dans les propriétés du composant.

_images/Saisie_date.png

2.5. 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 et 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 et (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).

_images/Saisie_nombre.png

2.6. La saisie d’adresse email

Ce contrôle autorise uniquement la saisie d’adresses emails 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 apparaitra 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.

_images/Saisie_email.png

2.7. 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 apparaitra 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.

_images/Saisie_telephone.png

2.8. 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 apparaitra 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.

_images/Saisie_url.png

2.9. 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.

_images/Saisie_mdp.png

2.10. La zone de saisie 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 apparaitra 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.

_images/Saisie_zone_texte.png

2.11. 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.

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

_images/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 Données). Il est impératif de désigner un attribut en tant que label : cliquer sur sur l’attribut souhaité, puis sélectionner la fonction Label.

_images/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 Données) puis cliquer sur le bouton pour saisir une valeur. Valider avec , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec et supprimées avec .

Attention

Cliquer sur l’icône située à côté du dans la zone Label supprimera toute la liste.

_images/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.

_images/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*

2.12. La liste déroulante

La liste déroulante peut être remplie à l’aide d’un jeu de données, ou bien avec des valeurs saisies en dur par le designer de l’application. Ce type de liste ne permet qu’une unique sélection.

Elle possède un déclencheur, Au changement de valeur, qui lance les comportements associés lors de la sélection d’une ligne dans la liste.

_images/Liste_deroulante.png

Affectation d’une liste de valeurs fixes

Une liste de valeurs fixes peut être affectée à une liste déroulante depuis les propriétés du contrôle (onglet Données). Sélectionner le type de données Valeurs fixes puis cliquer sur le bouton pour saisir une valeur. Valider avec , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec et supprimées avec .

Attention

Cliquer sur l’icône située à côté du dans la zone Label supprimera toute la liste.

_images/Liste_deroulante_valeurs.png

Affectation d’un jeu de données

Un jeu de données peut être affecté à une liste déroulante depuis les propriétés du contrôle (onglet Données). Sélectionner le type de données Jeu de données puis sélectionner le jeu de données à associer à la liste déroulante. Si le jeu de données n’existe pas, il est possible d’en créer un nouveau en cliquant sur le bouton Créer un nouveau jeu de données, qui renverra vers le module de gestion des jeux de données.

_images/Liste_deroulante_JDD.png

Sélection du jeu de données « DataSet table Employe » dans les propriétés de la liste déroulante

2.13. La liste

Quasiment identique à la liste déroulante, elle permet d’afficher et de sélectionner plusieurs valeurs. Elle peut être remplie à l’aide d’un jeu de données, ou bien avec des valeurs saisies en dur par le designer de l’application.

Elle possède aussi un déclencheur Au changement de valeur.

_images/Liste.png

Affectation d’une liste de valeurs fixes

Une liste de valeurs fixes peut être affectée à une liste depuis les propriétés du contrôle (onglet Données). Sélectionner le type de données Valeurs fixes puis cliquer sur le bouton pour saisir une valeur. Valider avec , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec et supprimées avec .

Attention

Cliquer sur l’icône située à côté du dans la zone Label supprimera toute la liste.

_images/Liste_valeurs.png

Affectation d’un jeu de données

Un jeu de données peut être affecté à une liste depuis les propriétés du contrôle (onglet Données). Sélectionner le type de données Jeu de données puis sélectionner le jeu de données à associer à la liste. Si le jeu de données n’existe pas, il est possible d’en créer un nouveau en cliquant sur le bouton Créer un nouveau jeu de données, qui renverra vers le module de gestion des jeux de données.

_images/Liste_JDD.png

Sélection du jeu de données « DataSet table Employe » dans les propriétés de la liste déroulante

2.14. La liste à complétion assistée

Ce type de liste 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.

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

_images/Liste_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 Données).

_images/Liste_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 Données) puis cliquer sur le bouton pour saisir une valeur. Valider avec , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec et supprimées avec .

Attention

Cliquer sur l’icône située à côté du dans la zone Label supprimera toute la liste.

_images/Valeur_fixe.png

2.15. La liste déroulante à sélection multiple

Ce type de liste 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 sélectionner plusieurs entrées au lieu d’une seule.

_images/Liste_deroulante_multiple_visu.png

La liste déroulante à sélection multiple permet de sélectionner plusieurs éléments dans une liste

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.

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

_images/Liste_deroulante_multiple.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 Données). Il est impératif de désigner un attribut en tant que valeur : cliquer sur sur l’attribut souhaité, puis sélectionner la fonction Valeur.

_images/Liste_deroulante_multiple_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 Données) puis cliquer sur le bouton pour saisir une valeur. Valider avec , puis recommencer l’opération pour chaque valeur à saisir. Les données peuvent être modifiées avec et supprimées avec .

Attention

Cliquer sur l’icône située à côté du dans la zone Label supprimera toute la liste.

_images/Valeur_fixe.png

2.16. La case à cocher

Le contrôle « case à cocher » renvoie un type booléen (« true » ou « false »), en fonction de l’état (coché ou non coché). Il est possible de cocher ou non la case lors de l’initialisation de l’écran, ou même de sélectionner un état intermédiaire / inconnu.

Un déclencheur Au changement de valeur permet d’exécuter les comportements liés à chaque clic sur la case.

_images/Case.png

2.17. Le groupe de cases à cocher

Le groupe de cases à cocher fonctionne comme la liste en mode sélection multiple. La différence est que l’on sélectionne les valeurs via une case à cocher au lieu d’une ligne. Différentes options sont disponibles, telles que l’orientation des cases.

Un déclencheur Au changement de valeur exécute les comportements liés lors de la coche/décoche d’une case.

_images/Groupe_cases.png

2.18. Le groupe de cases à cocher déroulant

Ce contrôle permet de cocher des éléments via une liste déroulante.

_images/Groupe_cases_deroulant.png

Il peut être rempli à l’aide d’un jeu de données (champ Type de données : Jeu de données dans l’onglet Données des propriétés du contrôle), ou bien avec des valeurs fixes saisies par le designer de l’application (champ Type de données : Valeurs fixes dans l’onglet Données des propriétés du contrôle). Plusieurs valeurs peuvent être cochées.

Un déclencheur Au changement de valeur exécute les comportements liés lors de la sélection d’une valeur.

2.19. Le groupe de boutons radio

Le groupe de boutons radio peut être rempli à l’aide d’un jeu de données (champ Type de données : Jeu de données dans l’onglet Données des propriétés du contrôle), ou bien avec des valeurs fixes saisies par le designer de l’application (champ Type de données : Valeurs fixes dans l’onglet Données des propriétés du contrôle). Ce contrôle ne permet de sélectionner qu’une seule valeur.

Un déclencheur Au changement de valeur exécute les comportements liés lors de la sélection d’une valeur.

_images/Groupe_radio.png

2.20. Le curseur

Ce contrôle permet de déplacer un curseur sur une règle graduée afin de sélectionner une valeur.

_images/Curseur.png
  • 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 et (si le nombre de décimales est à 0.

2.21. Le sélecteur de couleur

Ce contrôle permet de sélectionner une couleur.

_images/Selecteur_couleur.png

2.22. 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.

_images/Editeur.png