4. Écrans : 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

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

_images/Etiquette.png

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

_images/Lien_HTML.png

4.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 lui est associé.

_images/Lien_Image.png

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

_images/Menu.png

4.5. La recherche

Ce contrôle permet de rechercher du texte. Il utilise les déclencheurs Au changement de valeur et À la validation.

_images/Recherche.png

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.

4.6. La barre de progression

(Composant non-complet)

4.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. Les déclencheurs associés sont En cas de succès et À la validation.

_images/Table_upload.png

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.

_images/Table_upload_prop.png

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.

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

_images/Table_upload_creer_JDD.png

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

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.

_images/Upload_Modele.png

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

_images/Comportement_table_upload.png

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.

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

Deux déclencheurs sont appelés :

  • En cas d'échec permet de lancer l’exécution des comportements si le téléchargement du fichier a échoué.

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

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

_images/Upload_Modele.png

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

_images/Comportement_bouton_upload.png

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.

4.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 lors du lancement de l’application en mode Player.

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

_images/Code_HTML.png

4.10. L’espacement horizontal

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

_images/Espacement.png

Note

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