3.4 Les composants de visualisation

3.4.1 Le tableau

Ce type de contrôle requiert un jeu de données associé. Il offre une multitude de fonctionnalités décrites ci-après. Il affiche par défaut tous les champs du jeu de données lié.

Les déclencheurs associés dépendent des options sélectionnées pour le contrôle.

Les options générales du tableau sont les suivantes :

• Activer la modification sur la table : cette option permet à l’utilisateur de modifier directement une valeur à l’intérieur d’un tableau. Le déclencheur Lors de la modification devient disponible. Une option Valider automatiquement les modifications est également disponible.

• Valider automatiquement les notifications : cette option permet de valider les modifications du tableau sans avoir à cliquer sun un bouton de validation. Les modifications sont enregistrées dès la saisie.

• Activer l’ajout sur la table : cette option permet à l’utilisateur d’ajouter directement une valeur dans le tableau. Le déclencheur Lors de l'ajout devient disponible.

• Cacher l’entête de la table : cette option masque l’entête du tableau. Cette option rend l’option Permettre à l’utilisateur d’afficher / masquer des colonnes indisponible.

• Permettre à l’utilisateur d’afficher / masquer les colonnes : cette option permet d’afficher ou de masquer des colonnes. Le déclencheur Lorsque l'utilisateur affiche/masque des colonnes devient disponible.

• Sélectionnable : cette option permet de sélectionner des lignes du tableau. Le déclencheur À la sélection d'une ligne devient disponible. Une option Sélection à choix multiple est également disponible pour pouvoir sélectionner plusieurs lignes.

• Afficher la pagination également en haut : cette option duplique les paginateurs du bas du tableau en haut.

Affectation d’un jeu de données

Pour afficher du contenu, un tableau doit obligatoirement être lié à un jeu de données (DataSet table Employe sur l’illustration). Les valeurs de l’un et de l’autre sont alors systématiquement synchronisées.

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

On voit ici apparaître la structure du jeu de données « DataSet table employe » dans le tableau

Une fois le jeu de données associé, il faut cocher les colonnes qui seront affichées dans le tableau. Il est possible de définir une fonction à chacune des colonnes en cliquant sur à côté du nom de la colonne.

La table éditable

La table éditable peut être activée avec les cases à cocher Activer la modification sur la table et Activer l’ajout sur la table dans les propriétés du tableau. Ces options permettent à l’utilisateur d’ajouter et / ou modifier directement des valeurs à l’intérieur d’un tableau. Ces options activent les déclencheurs Lors de la modification et Lors de l'ajout.

La colonne **Éditer* apparaît. Elle permet de sélectionner puis valider la ligne à éditer

Il est possible d’éditer chaque colonne du tableau en faisant un clic droit dessus depuis le cadre Liste des contrôles à gauche de l’écran.

Les propriétés de la colonne du tableau s’affichent à droite de l’écran. Les options suivantes sont disponibles :

• Cliquable : permet de sélectionner la colonne lorsque l’application est exécutée.

• Masquer le nom de la colonne

• Colonne triable (activé par défaut)

• Trié d’origine

• Colonne modifiable : permet de modifier la colonne depuis le tableau lorsque l’application est exécutée.

• Colonne modifiable en ajout : permet d’ajouter des entrées dans la colonne directement depuis le tableau lorsque l’application est exécutée.

• Colonne redimensionnable

• Colonne réorganisable

• Fusionner les cellules de même valeur

• Colonne filtrable : permet d’avoir un champ de filtrage dans l’entête de la colonne.

• Colonne figée

• Ne jamais exporter la colonne : l’export du tableau n’exportera jamais cette colonne.

• Toujours exporter la colonne : l’export du tableau exportera toujours cette colonne.

Les exports

Plusieurs types d’export de tableau sont disponibles : Excel, CSV et PDF. Pour les activer, il suffit de cocher les cases correspondantes dans les propriétés du tableau. Le champ Label correspond à l’entête du fichier exporté.

L’export Excel a été activé. Un bouton en bas du tableau permet de déclencher le téléchargement

Tableau de sélection à choix multiple

Il est possible de sélectionner plusieurs lignes dans un tableau. Cocher la case Sélection à choix multiples dans les propriétés du tableau.

La sélection peut être utilisée dans un comportement métier. Créer une condition Pour chaque sur un objet Contrôle. Le tableau apparaît dans la liste Objet à parcourir. Sélectionner Parcourir : les lignes sélectionnées après avoir sélectionné le tableau.

Filtre avancé

Une fonctionnalité de filtrage avancé est disponible pour les colonnes. Afficher les propriétés de la colonne, et cocher la case Colonne filtrable. Un champ Type de filtre apparaît. Sélectionner Filtre avancé et cliquer sur Sauvegarder. Le filtre est différent selon le type de données de la colonne (date, texte, entier et décimal).

Les exports

Comme pour le tableau classique, plusieurs types d’export sont disponibles : Excel, CSV et PDF. Pour les activer, il suffit de cocher les cases correspondantes dans les propriétés du tableau croisé.

L’export Excel a été activé. Un bouton en bas du tableau permet de déclencher le téléchargement

3.4.3 Le planning

Ce type de contrôle requiert un jeu de données associé. Son fonctionnement est proche de celui d’un tableau croisé.

Création d'un planning

Il dispose de trois déclencheurs possibles : Au changement de zoom, À la création d'une tâche et À la sélection d'une ligne, qui dépendent des options cochées dans les propriétés du composant.

Fenêtre contextuelle d’édition du planning

Dans cette même fenêtre contextuelle, il est possible de surligner les jours fériés français, en plus des week-ends. Cette option est activée par défaut, elle est désactivable en décochant la case Surligner les jours fériés français.

La pagination est affichée en-dessous du planning. Il est possible de l’afficher également au-dessus via la case à cocher Afficher la pagination également en haut.

Le planning peut être exporté au format PDF et / ou CSV en cochant la case Activer l’export des données en PDF et / ou Activer l’export des données en CSV. Il est également possible d’opter pour un format paysage en cochant la case Exporter au format paysage.

Visualisation d’une page de planning exporté en PDF

Dans l’onglet (Données) de la fenêtre contextuelle d’édition du contrôle, il faut sélectionner au minimum trois fonctions à affecter aux différents champs du jeu de données : une fonction Ligne qui correspond à la première colonne du planning, une fonction Date de début et une fonction Date de fin. La fonction Groupe permet d’avoir des tables extensibles. Il existe également, dans la liste des fonctions disponibles, des fonctions qui permettent de désactiver le redimensionnement, le déplacement et le déplacement à travers des lignes du planning. Cette désactivation se fait de façon horizontale et verticale.

Exécution d'un planning

En mode Player, le planning se présente sous la forme d’un tableau croisé dans lequel il est possible de déplacer des tâches parmi les lignes et les colonnes. Le déplacement se fait en mode Glisser-déposer à la souris, similaire au placement des composants sur un écran dans le Mode Création du module Conception Ontomantics.

Le redimensionnement d’une tâche se fait en plaçant le pointeur de la souris sur le bord droit de la tâche à redimensionner. Le pointeur change de forme et il suffit alors de cliquer sans relâcher le bouton gauche de la souris puis de changer la taille de la tâche en bougeant la souris vers la gauche ou vers la droite, et de relâcher le bouton une fois que la tâche est à la taille voulue.

Exemple de planning d’une application Ontomantics

En plaçant le pointeur de la souris sur le planning, il est possible de faire défiler ce dernier horizontalement à l’aide de la molette. Le fait de déplacer une tâche horizontalement vers le bord du planning fait également défiler celui-ci automatiquement. Pour des questions de lisibilité et d’ergonomie, le fait de faire défiler le planning horizontalement alors que des tâches sont affichées sur le bord gauche du planning, fait défiler le nom de la tâche le long de celle-ci, afin qu’il reste visible malgré le défilement.

Le nom des tâches à gauche du planning reste visible en défilant

Les paginateurs situés sous le planning permettent de changer de page. Cependant, il est possible de passer à la page suivante en déplaçant une tâche verticalement vers le bas du planning. De même, il est possible de retourner à la page précédente en déplaçant une tâche vers le haut du planning.

3.4.4 L'agenda

Ce contrôle nécessite un jeu de données associé. Ses déclencheurs sont Au changement de date, Au changement de vue, À la création d'une tâche (uniquement si la case Activer la création est cochée dans les propriétés du contrôle) et À l'import d'une tâche (uniquement si la case Activer l’import iCal est cochée).

Sur l’onglet (Général), il est possible de sélectionner une vue par défaut (agenda du mois, de la semaine, du jour, etc.) et d’afficher des boutons pour différentes vues, permettant de basculer sur celles-ci en mode Player. La case Surligner les jours fériés français est cochée par défaut. Il est également possible de masquer des jours de la semaine.

Sur l’onglet (Données) de la fenêtre contextuelle d’édition du contrôle, sélectionner un jeu de données à associer, puis sélectionner au minimum deux fonctions à affecter aux différents champs du jeu de données : une fonction Date de début et une fonction Date de fin.

3.4.5 L'arbre

Le contrôle de type Arbre nécessite un jeu de données pour fonctionner.

Il dispose d’un déclencheur À la sélection d'un nœud afin de pouvoir lancer l’exécution de comportements lors du clic sur un élément de l’arbre.

Sur l’onglet (Général), il est possible d’activer le filtre de recherche multiple et la sélection à choix multiple.

Sur l’onglet (Données), sélectionner un jeu de données ; si aucun n’est disponible, il est possible d’en créer un en cliquant sur Créer un nouveau jeu de données. Un popup s’ouvre avec les informations pré-remplies qu’il est possible de modifier.

Le jeu de données associé doit contenir 3 champs :

• ID : identifiant du nœud dans l’arbre

• ID parent : identifiant du parent du nœud

• Texte : intitulé du nœud

Ces champs sont automatiquement proposés à la création d’un nouveau jeu de données.

Dans l’exemple suivant, le jeu de données a été rempli avec les employés d’une entreprise, organisés selon la hiérarchie. Le contenu brut du jeu de données est visible dans le tableau en-dessous.

Restitution du jeu de données, sous forme d’arbre en haut, et sous forme de tableau en bas

3.4.6 La liste de fichiers

3.4.7 Le graphique

Le fonctionnement d’un graphique est très similaire à celui d’un tableau ou d’une liste déroulante. Nous allons voir ici un exemple basique de création de graphiques (courbes, barres et camemberts).

Un graphique est nécessairement associé à un jeu de données. Dans la plupart des cas, deux colonnes sont nécessaires : la première correspond aux abscisses, la seconde aux ordonnées. Dans le cas d’un camembert par exemple, la première correspond au libellé des différentes parts, et la deuxième au pourcentage.

Dans le cas présent, nous voulons connaître la répartition des congés par personne pour une application de congés payés d’une entreprise. Voici un exemple de règle qui remplit le jeu de données en conséquence.

 

Une fonction « count » dans les conditions permet de compter le nombre de personnes pour chaque ID_VILLE. Les résultats sont récupérés dans une action d’insertion dans le jeu de données.

 

Voici un exemple du résultat obtenu avec trois types de graphiques différents :

 

 

3.4.8 La carte

La plateforme intègre un composant de cartographie OpenStreetMap qui permet de naviguer sur les cartes du projet de cartographie libre OSM. Les déclencheurs associés au contrôle sont les suivants : Au changement d'emplacement, Au changement de zoom, Au clic, Au double clic, Au déplacement de la carte.

 

Composant OpenStreetMap dans le Designer en mode Création

 

Onglet Général de la fenêtre popup d’édition du contrôle OpenStreetMap

 

Il est possible de définir le lieu qui sera au centre de la carte en entrant ses coordonnées (latitude et longitude). En plus des champs traditionnels qui composent la fenêtre d’édition du contrôle (Titre, Description, Message d’aide, Bulle d’aide, etc.), d’autres options font leur apparition :

• le champ Emplacement initial spécifie le lieu qui sera affiché par défaut sur la carte

• le champ Niveau de zoom permet de définir le niveau de zoom par défaut ; cette valeur est modifiable en mode Player en utilisant la molette de la souris sur la carte pour zoomer et dézoomer, ou en utilisant les boutons + et -situés à gauche de la carte

• les champs Niveau de zoom minimal et maximal permettent de délimiter les limites du zoom qu’il est possible d’atteindre. Les valeurs situées en dehors de celles délimitant le niveau de zoom couvert ne seront pas accessibles

• le champ Adresse des tuiles permet de définir l’emplacement des images cartographiques à afficher dans le composant

• le champ Adresse du service de géocodage permet de renseigner l’adresse du service permettant de chercher des données OSM par leur nom et leur adresse et de générer des adresses potentielles à partir d’un point OSM

• la case Préserver le zoom et la position de la carte permet, lorsqu’elle est cochée, de ne pas se centrer ni zoomer directement sur l’itinéraire renseigné ; lorsqu’elle est décochée, la carte se focalise sur l’itinéraire

Le composant offre également la possibilité, lorsqu’associé à un jeu de données avec des valeurs de coordonnées géographiques cohérentes, de remplacer les marqueurs des points de départ, de passage et d’arrivée, par des marqueurs personnalisés.

 

Comment dessiner sur la carte