Skip to main content

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

  • le code HTML

  • l’espacement horizontal

  • la capture de médias

5.3.1 L'étiquette

Les contrôles de type Étiquette permettent l’affichage d’un texte fixe, non modifiable directement par l’utilisateur de l’application. Ils ne possèdent pas de déclencheurs et ne peuvent donc pas lancer l’exécution de comportements. À la différence des labels, les étiquettes ne peuvent pas être liées à un contrôle.

Etiquette.png

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.

Aucun déclencheur ne lui est associé.

Lien_HTML.png

5.3.3 L'image

Les contrôles Image permettent d’afficher une image à partir d’une adresse URL qui doit être renseignée.

Aucun déclencheur ne leur est associé.

Lien_Image.png

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.

Menu.png

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.

Recherche.png

Il peut être associé à un jeu de données (champ Type de données : Jeu de données dans l’onglet fa-solid-table.png 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 fa-solid-table.png 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

(Composant non-complet)

5.3.7 La table d'envoi de fichier

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

Table_upload.png

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.

Table_upload_fichiers.png

L’icône fa-solid-file-download.png permet de télécharger le fichier envoyé. L’icône fa-solid-times.png 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 fa-solid-wrench.png 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.

Table_upload_prop.png

Dans l’onglet fa-solid-table.png (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.

Table_upload_JDD.png

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.

Table_upload_creer_JDD.pngL’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.

Upload_Modele.pngCré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é.

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

Bouton_upload.png

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.

Upload_Modele.pngCré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é.

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

Code_HTML.png

5.3.10 L'espacement horizontal

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

Espacement.png

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

5.3.11 La capture de médias

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

Capturemedia.png

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.

Capturemedia_2.png

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.

Capturemedia_3.png