5.3 Les composants basiques

Les composants basiques comprennent :

• l’étiquette

• le lien HTML

• l’image

• le menu

• la recherche

• la barre de progression

• la table d’envoi de fichier

• le bouton d’envoi de fichier

• la signature
• la capture de médias
• le média
• l'annotation de PDF
• l'agent conversationnel

• le code HTML

• l'image avec zones cliquables

• l’espacement horizontal
  

5.3.1 L'étiquette

Le contrôle Étiquette permet l’affichage d’un texte fixe, non modifiable directement par l’utilisateur de l’application. Il ne possède pas de déclencheurs et ne peut donc pas lancer l’exécution de comportements. À la différence des labels, les étiquettes ne peuvent pas être liées à un contrôle. La propriété Type permet de modifier la mise en forme de l'étiquette.

5.3.2 Le lien HTML

Le lien HTML permet tout simplement de spécifier une adresse URL vers laquelle sera redirigé l’utilisateur en cliquant dessus. L'adresse est à spécifier dans la propriété Adresse du lien hypertexte.

Aucun déclencheur ne lui est associé.

5.3.3 L'image

Le contrôle Image permet d’afficher une image à partir d’une adresse URL qui doit être renseignée dans la propriété Chemin de l'image.

Aucun déclencheur ne lui est associé.

5.3.4 Le menu

Le contrôle de type Menu fonctionne de paire avec le module des menus dans la conception des IHM. Il doit obligatoirement être lié à l’un d’eux.

Pour plus d’informations, se reporter à la section Création de menus.

5.3.5 La recherche

Ce contrôle permet de rechercher du texte. Il utilise les déclencheurs Au changement de valeur et À la validation. Ce contrôle a un fonctionnement identique au composant d’auto-complétion pour son déclencheur Au changement de valeur.

Il peut être associé à 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 à 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). Lorsqu’il est associé à un jeu de données, le contrôle se comporte alors comme un champ avec complètement automatique.

5.3.6 La barre de progression

Le composant Barre de progression de la boîte à outils est statique et ne se rafraîchit pas pendant l'exécution des règles. La plateforme intègre un composant de progression natif qu'il est préférable de privilégier. C'est ce dernier qui sera documenté ici.

La plateforme possède un composant de progression intégré. Il n'est donc pas nécessaire d'utiliser celui de la boîte à outils. Nous prenons l'exemple du clic sur un bouton qui déclenche une barre de progression. Le bouton a son déclencheur À la validation lié à un comportement appelé Test barre de progression.

Il existe trois variables prédéfinies qui sont associées au composant de progression :

• Type d'indicateur de chargement : associée à une constante nommée linear, bar ou spinner, cette variable permet de modifier l'apparence du composant de progression. Si aucune constante n'est définie, le type par défaut est spinner.

Les trois types d'indicateurs de chargement

• Label de l'indicateur : cette variable permet de définir le message associé lors de l'affichage du composant.
  
• Valeur de l'indicateur :  cette variable permet de définir le pourcentage de l'indicateur de chargement. C'est ici que le développeur définit les étapes de la progression du composant.

Exemple de comportement associé au composant de progression

5.3.7 La table d'envoi de fichier

Ce contrôle permet d’envoyer des fichiers vers le serveur Ontomantics.

L’envoi se fait soit via le bouton Sélectionner des fichiers, soit en glissant et déposant des fichiers directement à la souris depuis le navigateur de fichiers jusqu’au composant. Il est possible de sélectionner plusieurs fichiers en une fois depuis la fenêtre de sélection de fichier. Les déclencheurs associés sont En cas de succès et À la suppression. Une analyse antivirus est effectuée à la fin de chaque envoi de fichier. Ce comportement est configurable dans l’administration de la plateforme.

L’icône permet de télécharger le fichier envoyé. L’icône permet de supprimer le fichier. La ligne est supprimée du jeu de données uniquement si aucun comportement n’est associé au déclencheur À la suppression.

Dans l’onglet Général des propriétés du contrôle, il est possible de définir des options, telles que la possibilité de démarrer le transfert sitôt le fichier déposé, le nombre et la taille maximale des fichiers, et les types ou extensions de fichiers supportés. Par défaut, tous les types sont acceptés, mais décocher la case Accepter tous les fichiers permet de sélectionner un à un les types supportés. Cliquer sur un type (ex: Image) permet d’afficher une liste d’extensions relatives au type de fichier (ex: jpg, png, gif). Cocher les extensions souhaitées. Il est possible de spécifier une taille maximale pour les images, qui seront redimensionnées avant envoi.

Le type du fichier est vérifié en fonction des extensions indiquées, mais également à partir du contenu réel du fichier si le type MIME est renseigné dans le champ Textarea des propriétés. Ce comportement est identique pour le bouton d’envoi de fichier.

Dans l’onglet (Données), il est possible d’associer un jeu de données au contrôle. Cela peut être nécessaire en cas d’envoi de fichiers multiples, et notamment pour pouvoir les visualiser une fois envoyés sur le serveur.

Comme pour tous les contrôles pouvant être associés à un jeu de données, il est possible de créer un jeu de données si aucun n’est disponible en cliquant sur le bouton Créer un nouveau jeu de données. Un assistant permet de cocher les champs utilisables pour ce type de contrôle.

L’assistant propose des champs en lien avec le contrôle utilisé

Il n’est pas obligatoire de lier un jeu de données au composant table d’envoi. Dans ce cas, les fichiers disparaissent de la table après envoi. Le jeu de données est nécessaire pour conserver ou ré-afficher les fichiers ultérieurement, via l’utilisation d’un champ Id de fichier (les autres paramètres Nom et Taille de fichier sont facultatifs, les tableau affichera quand même les fichiers même sans ces paramètres).

Exemple d'utilisation

La gestion de l’upload nécessite un référencement des fichiers dans une base de données. Les fichiers sont stockés en local, sur le serveur Ontomantics.

Création d’une table dans le modèle de données que l’on appelle « fichier » et qui contient la référence de chaque fichier

L’upload est géré par des identifiants propres à Ontomantics. Afin d’organiser plus facilement l’ensemble des fichiers, il est recommandé d’enregistrer le nom du fichier.

Il s’agit ensuite de remplir la base de données avec le nouveau fichier envoyé.

Sur le déclencheur « En cas de succès » du composant Table d’upload, il faut renseigner la table « fichier » à l’aide d’un comportement

Afin de gérer efficacement les fichiers téléchargés, il est possible de lancer l’assistant de formulaire sur la table « fichier » de notre modèle de données. On bénéficie ainsi d’une liste liée à un jeu de données qui répertorie tous les fichiers uploadés.

5.3.8 Le bouton d'envoi de fichier

Le contrôle Bouton d’upload permet le téléchargement de fichiers vers le serveur Ontomantics. En cliquant sur le bouton en mode Player, l’explorateur de fichiers permet de sélectionner le fichier sur la machine, et sa sélection lance le téléchargement vers le serveur. Une analyse antivirus est effectuée à la fin de chaque envoi de fichier. Ce comportement est configurable dans l’administration de la plateforme.

Un unique déclencheur est appelé :

• En cas de succès permet de lancer l’exécution des comportements si le téléchargement du fichier a réussi.

Exemple d'utilisation

La gestion de l’upload nécessite un référencement des fichiers dans une base de données. Les fichiers sont stockés en local, sur le serveur Ontomantics.

Création d’une table dans le modèle de données que l’on appelle « fichier » et qui contient la référence de chaque fichier

L’upload est géré par des identifiants propres à Ontomantics. Afin d’organiser plus facilement l’ensemble des fichiers, il est recommandé d’enregistrer le nom du fichier.

Il s’agit ensuite de remplir la base de données avec le nouveau fichier envoyé.

Sur le déclencheur « En cas de succès » du composant Bouton d’upload, il faut renseigner la table « fichier » à l’aide d’un comportement

Afin de gérer efficacement les fichiers téléchargés, il est possible de lancer l’assistant de formulaire sur la table fichier de notre modèle de données. On bénéficie ainsi d’une liste liée à un jeu de données qui répertorie tous les fichiers uploadés.

5.3.9 La signature

La signature est un composant qui offre un espace blanc permettant d'effectuer une signature de façon tactile sur tablette et mobile ou à la souris. Le déclencheur associé est Au changement de valeur.

5.3.10 La capture de médias

Ce composant permet d’envoyer sur la plateforme des documents de type média (images, vidéo, audio).

Les propriétés du contrôle permettent de voir et sélectionner les types de média et les formats d’images supportés. Elles permettent également de limiter ou non la largeur et la hauteur de l’image. La capture de média est liée à un déclencheur de type En cas de succès.

Il est par exemple possible de créer un comportement permettant d’afficher directement à l’écran l’image envoyée.

Il suffit de créer un comportement rattachant la valeur du fichier dans le composant de capture de média à un composant Image présent sur l’écran.

5.3.11 Le média

Le média est un composant qui permet d'insérer un élément de type audio ou vidéo dans la page. Il n'a pas de déclencheur associé.

L'emplacement du média est à renseigner dans la propriété Chemin du média. L'explorateur de ressource s'ouvre et permet de sélectionner le média. L'onglet Envoi permet d'envoyer un média depuis la machine de l'utilisateur.

5.3.12 Annotation de PDF

À compléter.

5.3.13 Agent conversationnel

À compléter

5.3.14 Le code HTML

Le contrôle Code HTML permet au designer d’insérer du code HTML dans son écran, qui sera par la suite interprété par le navigateur à l’affichage du composant.

Aucun déclencheur n’est disponible pour ce type de contrôle.

5.3.15 Image avec zones cliquables

À compléter.

5.3.16 L'espacement horizontal

Ce contrôle permet d’espacer horizontalement des contrôles. Il n’a pas de déclencheur associé.

Ce contrôle ne permet pas d’espacer verticalement.