5.1 Les composants de formulaire

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

5.1.1 Les boutons et labels

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

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

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.

5.1.2 Les composants de saisie

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

Propriétés du contrôle

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.

 

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

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

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

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

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

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

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

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.

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.

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 .

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

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.

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

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

5.1.3 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'intervalle en minutes dans les propriétés du composant.

5.1.4 Les composants listes

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

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 .

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

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.

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

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

 

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 .

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

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

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

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

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

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 .

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

Tout comme les listes déroulantes, la liste à complétion assistée force à choisir une valeur existante, mais a deux mode de fonctionnement différents :

• si la valeur est affectée à une colonne du jeu de données, la ligne du jeu de données lié est sélectionnée, comme avec les listes déroulante ou plate.

• si la valeur n’est pas affectée à une colonne du jeu de données mais uniquement au label, alors la ligne du jeu de données lié n’est pas sélectionnée (fonctionnement s’approchant de celui du texte à complétion assistée). Cela peut être utile dans le cas où il y a besoin d’en afficher plusieurs sur le même jeu de données du même écran (ex: Ville de départ / Ville d’arrivée)).

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

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.

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.

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 .

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

5.1.5 Les cases à cocher et boutons radios

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

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

5.1.5.3 Le groupe de cases à cocher déroulant

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

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.

5.1.5.4 Le groupe de boutons radios

Le groupe de boutons radios 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.

5.1.6 Le curseur

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

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

5.1.7 Le sélecteur de couleur

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

5.1.8 Le Captcha

Le composant Captcha permet de différencier automatiquement un utilisateur humain d’un robot. La version utilisée sur la plateforme Ontomantics est reCaptcha, par Google.

Les clés reCaptcha sont à créer à l’adresse suivante :

https://www.google.com/recaptcha/admin/create

Il faut ensuite les configurer dans le module Configuration  Paramètres Propriétés générales de la plateforme.