1. Gestion des IHM

Le but de cette partie est de décrire comment concevoir une interface homme machine (IHM) pour une application Ontomantics.

Une IHM peut être composée :

  • d’écrans

  • de boîtes de message

  • de menus

Le module de conception des IHM est accessible depuis l’onglet Projets : cliquer sur l’application précédemment créée, puis cliquer sur l’onglet Conception pour ouvrir le module de création. Il permet de concevoir les IHM de l’application ( écrans - boîtes de messages - menus) mais églament les comportements (), les requêtes en base (), les jeux de données (), l’apparence de l’application (), les rôles utilisateurs (), etc. Par défaut, c’est le sous-module de création d’écran qui est affiché. Les autres sous-modules sont accessibles via le bandeau de navigation situé en haut de l’écran.

1.1. Création automatique d’écrans standards (assistant de création de formulaires)

Cet assistant permet de créer automatiquement des écrans de formulaires et les comportements nécessaires à leur fonctionnement :

  • Insertion en base

  • Suppression

  • Modification

  • Affichage

Note

Choisir uniquement les entités nécessaires pour éviter des doublons dans le référentiel.

Exemple d’utilisation

Depuis la liste des projets, cliquer sur l’application souhaitée, puis sur Assistant de création de formulaire dans le cadre Actions.

_images/Assistant_formulaire.png

L’assistant apparaît sous forme de popup. Choisir le modèle de données (ou la source de données) à utiliser pour générer les formulaires.

_images/Assistant_formulaire_1.png

Choisir ensuite pour chaque table le(s) type(s) de formulaire à générer, en cochant les cases correspondantes. Le label à utiliser peut être personnalisé. Cliquer sur Suivant .

Note

La colonne Formulaire permet d’accéder aux entités en modification (insertion / modification / suppression). La colonne Tableau peut également générer des accès en modification, mais seulement si les options suivantes sont cochées dans l’écran suivant de l’assistant :

Formulaire de modification :

  • Dans la table

Formulaire d’ajout :

  • Dans la table

_images/Assistant_formulaire_2.png

Choisir ensuite les paramètres de création (la boîte de dialogue peut être déroulée).

_images/Assistant_formulaire_3.png

Il faut ensuite choisir, pour chaque entité, les champs à utiliser dans le tableau et dans les formulaires, ainsi que leurs labels. Cliquer sur Suivant pour passer à l’entité suivante. Si le modèle de données intègre des clés étrangères, il est possible de choisir l’attribut que l’on veut voir affiché. Une fois la dernière entité traitée, cliquer sur Terminer pour générer les écrans correspondant.

_images/Assistant_formulaire_4.png

Remarque

Les écrans créés à partir des Vues apparaîtront seulement en lecture seule (cf. chapitre sur les Modèles de données).

1.2. Modifier des écrans

La gestion des écrans est accessible en cliquant sur Conception dans le module Designer, puis sur l’icône (Concevoir les écrans).

1.2.1. Nouvel écran

Pour créer un nouvel écran, cliquer sur le bouton puis sur Nouvel écran. Un formulaire demandera alors de renseigner les paramètres de l’écran.

_images/Nouvel_ecran.png

Formulaire de paramétrage de l’écran. Il est possible de modifier ces paramètres à tout moment

  • Écran parent : introduit la notion d’héritage entre les écrans. Un écran héritera de tous les contrôles de son écran parent, ainsi que tous les

mécanismes qui en découlent (jeux de données associés, déclencheurs, comportements…). En revanche, il n’est pas possible de modifier les contrôles hérités directement dans l’écran fils : il est nécessaire de se rendre dans le mode Création de l’écran parent.

  • Template : Il est possible de choisir un template vide, ou bien un écran avec en-tête et menu réactif (l’aperçu s’affiche sur le côté).

1.2.2. Mode Aperçu

Le mode Aperçu est accessible une fois l’écran créé, via l’onglet Aperçu de l’écran sélectionné. Il permet de visionner le rendu d’un écran tel qu’il apparaîtra une fois l’application exécutée.

_images/apercu.png

Mode Aperçu d’un écran

1.2.3. Mode Création

Le mode Création permet de modifier le contenu d’un écran. Il est accessible en cliquant sur le bouton Mode Création de l’onglet Aperçu.

Liste des contrôles

Cet onglet liste sous forme d’arborescence tous les contrôles utilisés dans l’écran, ainsi que les déclencheurs qui leur sont rattachés.

_images/Liste_controles.png

Boite à outils

Cet onglet liste l’ensemble des contrôles utilisables dans un écran Ontomantics par simple Glisser - Déposer.

_images/Outils_1.png
_images/Outils_2.png

Zone d’affichage

Cette zone présentée sous forme de grille permet de déplacer les contrôles en mode Glisser - Déposer. La version 4 de la plateforme Ontomantics permet de créer des écrans de différentes façons, via l’intégration de plusieurs conteneurs : grille en mode Responsive Design, disposition linéaire, disposition libre, formulaire, etc. Le conteneur principal utilisé par défaut est la grille Responsive qui permet de déposer les composants d’écran sans avoir à gérer manuellement leurs coordonnées X et Y.

_images/Grille.png

Propriétés du contrôle sélectionné

Un menu contextuel est accessible pour chaque contrôle à partir d’un clic droit sur celui-ci.

_images/Menu_contextuel_controle.png

L’accès aux propriétés d’un contrôle se fait par un clic sur le bouton « Modifier » du menu contextuel (de même pour la suppression et la copie).

_images/Proprietes_controle.png

Le cadre des propriétés du contrôle apparaît toujours à l’extrême droite de l’écran.

Les événements déclencheurs (À l'initialisation, À la fermeture, Au clic, Au clic, Au changement de valeur, Au double clic, À la sélection d'une ligne…) provoquent l’exécution des comportements, et par conséquent le fonctionnement de l’application.

_images/Triggers.png
_images/Triggers_1.png

1.2.4. Propriétés des contrôles

Les différentes propriétés qui suivent sont à peu près communes à tous les types de contrôles. Elles sont accessibles par le menu contextuel, puis en cliquant sur le bouton « Modifier ». Les options sont regroupées dans différents onglets situés en haut de la fenêtre de propriétés :

  • l’onglet (Propriétés) permet de modifier les propriétés du contrôle ;

  • l’onglet (Données) permet d’associer un jeu de données pour les contrôles de type tableau ;

  • l’onglet (Apparence) permet de modifier les propriétés visuelles du contrôle (taille, marges, style CSS…) ;

  • l’onglet (Validateurs) permet de définir des conditions (requis, Doit être une date, doit être négatif, etc.) pour le contrôle ;

  • l’onglet (Convertisseur) permet de convertir automatiquement le formatage des caractères saisis par un utilisateur dans le contrôle (passage automatique en majuscules, formatage d’un nombre, suppression des espaces et des caractères spéciaux, etc.) ;

  • l’onglet (Droits) permet de définir des droits sur le contrôle.

Remarque

Les onglets affichés peuvent différer selon le type de contrôle sélectionné.

1.2.4.1. Propriétés

_images/Proprietes_tableau.png

Le titre

Le titre permet de renseigner le nom du contrôle tel qu’il sera perçu par le designer dans les différents modules de la plate-forme.

La valeur initiale

La valeur initiale permet de renseigner la valeur qu’affichera et que renverra le contrôle dans le Player par défaut.

La description

La description permet de commenter le contrôle. Elle n’est pas visible depuis le Player.

Le message d’aide et la bulle d’aide

Les messages et bulles d’aide s’affichent au survol du contrôle dans le Player.

Le label

Le label est le texte affiché dans le contrôle (ex: Insérez votre nom pour un champ de saisie de nom).

1.2.4.2. Données

_images/Onglet_Donnees.png

L’onglet Données est uniquement présent pour les contrôles liés à des jeux de données (ex: le tableau). Il permet de sélectionner le jeu de données associé ainsi que les colonnes à afficher dans le contrôle.

1.2.4.3. Apparence

_images/Onglet_Apparence.png

L’onglet Apparence permet de définir la façon dont le contrôle est affiché à l’écran. Il permet notamment d’en définir les marges, la visibilité et la taille selon les résolutions, le style CSS et le nombre de lignes affiché par page pour un tableau par exemple.

Les marges

Les marges permettent de définir l’espacement en pixels autour d’un composant (au dessus, à gauche, à droite, au dessous).

Astuce

Certains éléments conteneurs ajustent les marges des composants placés à l’intérieur de façon prédéfinie. Ainsi par exemple, un champ de saisie placé dans un conteneur Formulaire verra sa marge inférieure définie à 15 pixels. Ces marges prédéfinies peuvent être modifiées.

Visibilité selon les résolutions

Il est possible de définir sous quelle résolution ou format / taille d’écran le composant sera visible. Ainsi, il est possible de masquer le composant lorsque l’application sera jouée sur un smartphone, par exemple.

Les tailles et formats d’écran suivants sont disponibles :

  • : Smartphone en mode portrait ou résolution inférieure à 576px

  • : Smartphone en mode paysage ou résolution entre 576px et 768px

  • : Tablette ou résolution entre 768px et 992px

  • : Résolution entre 992px et 1200px

  • : Résolution d’au moins 1200px

Taille selon les résolution

Il est également possible de définir la taille d’un composant en fonction de la résolution ou du format d’écran sur lesquels sera jouée l’application (celles-ci sont identiques aux tailles évoquées ci-dessus). Les valeurs allant de 1 à 12 correspondent au découpage des éléments conteneurs : chaque conteneur est découpé en 12 parties égales ; ainsi, la valeur 6 allouera la moitié de l’espace alloué au composant.

Les coordonnées

Les coordonnées permettent de placer le contrôle sur la grille en renseignant les positions X et Y.

Visible d’origine

Case à cocher permettant d’afficher par défaut ou non le contrôle.

Le style CSS

Il est possible d’affecter un style CSS de deux façons :

  • En injectant directement le code CSS dans le champ « Style CSS »

  • En faisant appel à une ou plusieurs classes CSS dans le champ « Classes de style CSS »

1.2.4.4. Validateurs

Les validateurs permettent de vérifier si le contenu d’un contrôle correspond bien au type de valeur qu’il est censé contenir. Ils sont accessibles dans le menu d’édition d’un contrôle. Dans les propriétés du contrôle, cliquer sur l’onglet (Validateurs) puis cliquer sur Nouveau validateur. Choisir ensuite le type de validateur souhaité.

_images/Validateurs.png

Menu « validateurs » d’un contrôle. On voit ici tous les validateurs disponibles pour un champ texte.

En mode Player, le validateur s’exécute lorsque la valeur du contrôle associé est modifiée. Si la nouvelle valeur n’est pas validée, aucun bouton de validation ne peut être déclenché (un message d’erreur avertit l’utilisateur).

1.2.4.5. Convertisseurs

Les convertisseurs fonctionnent de façon similaire aux validateurs. Ils permettent de modifier une entrée dans un contrôle afin d’obtenir un format uniforme des données (majuscules, minuscules…). Dans les propriétés du contrôle, cliquer sur l’onglet (Convertisseurs) puis cliquer sur Nouveau convertisseur. Choisir ensuite le type de convertisseur souhaité.

_images/Convertisseurs.png

Menu « convertisseurs » d’un contrôle.

1.2.4.6. Droits

_images/Onglet_Droits.png

Cet onglet permet d’activer ou désactiver les droits utilisateurs pour le contrôle sélectionné. Lorsque la case est cochée, il est possible de définir l’affichage du contrôle si l’utilisateur ne dispose d’aucun droit dessus (désactivation / masquage), et de définir quels rôles peuvent accéder au contrôle parmi la liste des rôles disponibles.

1.2.5. Remplacer un contrôle

Il est possible de remplacer un contrôle par un autre. Faire un clic droit sur un contrôle, puis cliquer sur Remplacer le(s) contrôle(s). La liste des contrôles apparaît à l’écran.

_images/Remplacer_controle.png

Les propriétés identiques seront conservées sur le nouveau contrôle ; celles qui sont incompatibles seront perdues.

1.3. Les styles CSS

Il existe différentes méthodes pour modifier l’apparence d’une application ou de certains de ses éléments.

Les styles par défaut

Il est possible de changer le style global par défaut d’une application avec une méthode simple. L’accès à la gestion des feuilles de style se fait depuis l’onglet Conception puis en cliquant sur (Gérer l’apparence de l’application). L’écran affiché est celui de l’éditeur de thème. Le cadre de gauche affiche toutes les pages CSS déjà créées. Le cadre de droite permet de visualiser rapidement les changements visuels. Enfin, le champ Thème de l’application situé sous la barre d’outil permet de choisir parmi quatre styles prédéfinis.

_images/Styles.png

Créer son propre style

Il est possible de créer son propre style. Pour cela, il faut commencer par créer des pages CSS. Cliquer sur le bouton situé dans le cadre de gauche. Il est conseillé de créer une page pour chaque élément de l’application (dans notre exemple : le style de la page Login est séparé du style des tableaux). Renseigner un titre, puis cliquer sur Sauvegarder. Une fois le style créé, il est possible de l’éditer en cliquant sur Modifier. L’édtieur fonctionne de la même façon qu’un éditeur de code open source classique.

_images/Styles_1.png

Pour faciliter la modification des éléments, des variables CSS ont été créées. Elles peuvent être observées et modifiées à l’aide de l’inspection du code de la page via un navigateur web (touche F12 sur Firefox notamment). Elles se trouvent tout en bas de la liste des styles CSS. Par exemple, pour changer la couleur des bords des boutons de la page, il n’y a qu’à modifier le style de la variable CSS –button-border-color pour pouvoir tout modifier en gagnant du temps.

_images/Styles_2.png

Modifier le style d’un élément précis

Plusieurs solutions permettent de changer un élément unique d’une page. La première est d’appliquer directement le script CSS sur les contrôles ou sur l’écran.

_images/CSS.png

L’inconvénient majeur est que le CSS écrit n’est alors pas réutilisable, et la maintenance est rendue difficile du fait de devoir passer dans chaque contrôle en cas de modification du style de l’application. Cette méthode est utile pour l’application ponctuelle d’un style sur un composant.

La deuxième solution est d’utiliser des feuilles de style, puis de les affecter aux contrôles concernés. L’accès à la gestion des feuilles de style se fait depuis l’onglet Conception puis en cliquant sur (Gérer l’apparence de l’application). L’édition des feuilles de styles se fait comme dans un simple fichier texte. Cliquer sur le bouton pour créer une feuille de style, et lui donner un nom.

_images/CSS_1.png

Cliquer sur Modifier puis saisir le style. Cliquer sur Sauvegarder pour enregistrer.

_images/CSS_2.png

Le style peut ensuite être appliqué au contrôle via le champ Classes de style CSS de l’onglet (Apparence). Plusieurs classes peuvent être affectées sur un contrôle en les séparant par des espaces.

_images/CSS_3.png

Enfin, il est possible de changer le style en utilisant les ID des éléments inspectés via l’outil d’inspection du code du navigateur web évoqué plus haut (les ID sont précédés d’un #). Il est également possible de modifier certains paramètres visuels comme la taille ou la gestion du Responsive dans le tableau Apparence en mode Création.

_images/capture6.png

Il est possible de désactiver une feuille de style et rendre ainsi inactives toutes les classes décrites dans cette feuille :

_images/CSS_4.png

Les feuilles de style d’Ontomantics se basent sur le fonctionnement des feuilles de style classiques. Pour définir un style, il faut spécifier l’élément sur lequel il s’applique en utilisant soit une classe personnalisée, qui aura été affectée préalablement au contrôle, soit une classe par défaut qui est insérée automatiquement dans les contrôles par la plateforme.

Voici une liste non exhaustive des classe CSS par défaut des composants d’Ontomantics :

  • Bouton : ontoSubmitButton

  • Étiquette : ontoLabel

  • Saisie de texte : ontoTextInput

  • Saisie de texte formaté : ontoRichTextInput

  • Saisie de mot de passe : ontoPasswordInput

  • Zone de saisie de texte : ontoTextArea

  • Texte à complétion assistée : ontoComboBoxGroup

  • Sélection de date : ontoDatePicker

  • Lien HTML : ontoHttpLink

  • Image : ontoImage

  • Liste déroulante : ontoDropDownList

  • Liste : ontoListBox

  • Case à cocher : ontoCheckBox

  • Groupe de cases à cocher : ontoCheckBoxGroup

  • Groupe de boutons radio : ontoRadioButtonGroup

  • Tableau : ontoTable

  • Tableau croisé : ontoCrossTable

  • Cadre : ontoPanel

  • GraphiquesMedia : ontoChart

  • Upload : ontoUpload

  • Code HTML : ontoHtmlCode

  • Map : ontoMap

Il peut être également nécessaire de descendre dans la hiérarchie des éléments HTML qui composent le contrôle pour cibler précisément l’élément sur lequel un style doit être appliqué. Pour cela, il faut partir de la classe prédéfinie du contrôle, ou de la classe personnalisée, puis lister les différentes classes rencontrées jusqu’à l’élément souhaité.

Par exemple, pour colorer le texte d’une étiquette en vert :

.ontoText span {
  color: green;
}

Pour faciliter la découverte de cet ensemble de classes, nous recommandons l’utilisation des extensions Firefox Firebug et Web Developer qui permettent de cibler un élément choisi plus facilement qu’en lisant directement le code source de la page.

Dans certains cas, l’utilisation d’un chemin complet pour accéder à un élément ne suffit pas, la règle n’atant pas appliquée car une autre règle plus prioritaire est déjà appliquée par Ontomantics. Pour contourner ce problème, il est possible de spécifier un « !important » à la fin d’un élément de la règle qui ne fonctionne pas. Cela permet d’élever le niveau de priorité de cette règle afin de la faire passer avant celle d’Ontomantics.

La règle a alors la forme suivante :

.ontoText span {
  color: green !important;
}

L’ordre des feuilles de style est également important, car comme en CSS classique, les valeurs des règles lues en dernier écrasent celles des règles antérieures ciblant les mêmes éléments. Dans notre cas, les feuilles de style sont lues dans leur ordre d’apparition dans l’arbre. Il est possible de faire monter ou descendre une feuille de style à l’aide des menus contextuels Monter et Descendre afin de la placer à un endroit différent.

Importer une police ou une image

Pour pouvoir gagner du temps lors de l’insertion d’une image ou d’une police, l’outil Explorateur de ressources est disponible lors de la modification du contenu d’une feuille CSS, en dessous de la barre d’outil. Cliquer dessus puis indiquer le chemin contenant les polices ou les images à utiliser. Une fois sélectionné, il suffit de modifier le style CSS pour afficher le résultat.

_images/capture7.png

Changer les logos

Il est possible de modifier les logos d’une application. La plateforme se charge de la conversion des tailles vers un format Responsive. Depuis l’écran Projets, cliquer sur l’onglet Icônes et logo d’une application. Il suffit de charger une image et la conversion se fait automatiquement pour les autres résolutions.

_images/capture8.png

1.4. Création de boîtes de message

Il est possible d’afficher des boîtes de message dans une application Ontomantics.

La première étape consiste à créer la boîte de message. Dans la liste des projets, cliquer sur l’application souhaitée, puis cliquer sur Conception. Cliquer sur l’icône (Gérer les boîtes de message et les notifications). Cliquer ensuite sur le bouton puis sur Nouvelle boîte de message.

_images/Boite_message_nouvelle.png

Sélectionner le type de la boîte de message souhaité :

  • Boîte de message OK : boîte de message avec un unique bouton OK

  • Boîte de message OK Annuler : boîte de message avec un bouton OK et un bouton Annuler

  • Boîte de message Oui Non Annuler : boîte de message avec un bouton Oui, un bouton Non et un bouton Annuler

  • Boîte de message Oui Non : boîte de message avec un bouton Oui et un bouton Non

  • Boîte de message Réessayer Annuler : boîte de message avec un bouton Réessayer et un bouton Annuler

Le formulaire suivant apparaît :

_images/Boite_message_form.png

Le champ Titre est le nom de la boîte de message. Le champ Titre de la boîte de message est le titre qui apparaît dans l’entête de la boîte. Le champ Message correspond au contenu affiché dans la boîte. Le champ Icône permet de choisir l’icône associée (question, succès, information, etc.). L’option Modale (bloquante), si cochée, requière que l’utilisateur réponde avant de poursuivre le programme. Une fois le formulaire complété et validé, un aperçu de la boîte de message est affiché (onglet Aperçu):

_images/Boite_message_apercu.png

Remarque

Une boîte ne peut pas contenir de contrôles.

Ensuite, il est possible de rattacher des comportements aux boutons de la boîte de dialogue :

_images/Boite_message_declencheurs.png

Faire un clic droit sur le déclencheur OK ou Annuler et créer ou rattacher le comportement (la création de comportement est décrite plus loin dans cette documentation).

_images/Boite_message_declencheurs_1.png

La boîte de message est maintenant créée.

Remarque

Cliquer sur un bouton de la boîte de message entraine sa fermeture.

1.5. Création de menus

Il est possible de gérer un ou plusieurs menus personnalisés à travers la plate-forme Ontomantics.

Remarque

Avant de mettre en place le menu, il est conseillé de désactiver le menu auto-généré sur la page d’édition d’une application.

Dans la liste des projets, cliquer sur l’application souhaitée, puis cliquer sur Conception. Cliquer sur l’icône (Gérer les menus). Cliquer ensuite sur le bouton pour créer un menu.

_images/Menu_nouveau.png

Une fois l’élément sauvegardé, sélectionner Nouvel élément de menu. Il existe trois types d’éléments :

  • Élément simple : élément simple le plus couramment utilisé.

  • Liste d’éléments : s’appuie sur un jeu de données pour afficher le menu

  • Élément du menu d’accueil d’Ontomantics : utilise des éléments de menu proposés par Ontomantics comme les boutons Déconnexion, Préférences utilisateur, Aller à, Page d’accueil.

En choisissant Élément simple, le formulaire suivant apparaît :

_images/Menu_simple.png

Une fois le titre renseigné, il est possible de personnaliser le style de l’élément à l’aide des champs Icône de l’élément et Classes de style CSS.

Pour créer la racine d’un menu, il n’est pas nécessaire de sélectionner un écran de redirection.

Une fois la racine ajoutée, il est possible de rajouter un sous-menu. Pour cela, sélectionner la racine puis cliquer sur Nouvel élément de menu.

_images/Menu_insertion.png

Il est possible de sélectionner un écran de redirection, si ce sous-menu doit rediriger vers un écran.

En cliquant sur Aperçu, l’écran affiche les différentes visualisations du menu.

_images/Menu_apercu.png
_images/Menu_liste.png

1.6. Gestion avancée des images

Import / export d’images

Ontomantics fournit une nouvelle fonctionnalité de gestion des images. Désormais, en plus du dossier « /files/Images » commun à toute la plateforme, chaque application utilise une variable ${RESOURCE_PATH} qui lui est propre et qui permet de stocker ses images.

La gestion des images est accessible depuis les propriétés d’un composant Image (clic droit sur le composant, Modifier) dans le mode Création de l’outil de conception des IHM du module Designer. Dans l’onglet (Général), cliquer sur l’icône (Explorateur de ressources*) pour ouvrir l’explorateur d’images qui contient deux dossiers : ${RESOURCE_PATH} et /files/Images.

_images/Image_ressource.png

Le fait de sélectionner une image affiche son type, sa taille, ses dimensions et son chemin d’accès en bas de l’Explorateur de ressources.

_images/Image_explorateur.png

Lorsqu’une application est exportée, le ${RESOURCE_PATH} est exporté aussi, ce qui permet de garder les images. Tous les éléments contenus dans le dossier /files/Images sont exportés aussi. La variable ${RESOURCE_PATH} permet d’éviter les problèmes de détection de chemin dynamique.

Lors de l’import d’une application, Ontomantics recréé le dossier ${RESOURCE_PATH} et remet tout les éléments à l’intérieur.

Envoi d’images

L’explorateur de ressources comporte un onglet « Upload » qui permet d’envoyer des images sur la plateforme.

_images/Image_upload.png

Le premier champ affiche le répertoire où envoyer le fichier. C’est le ${RESOURCE_PATH} qui est sélectionné. Il est possible d’y créer des sous-dossiers, en utilisant la syntaxe dossier/fichier.png.Il n’est pas possible d’envoyer d’image dans le dossier /files/Images car celui-ci est en lecture seule. Le bouton Sélectionner un fichier… ouvre une fenêtre d’explorateur qui permet d’aller chercher une image sur le disque dur de la machine locale. Sélectionner l’image pour l’envoyer sur la plateforme ; elle apparaît dans l’explorateur de ressources.

1.7. Utilisation des minuteurs

Il est possible de définir des minuteurs sur les écrans et les boites de dialogue. Ils permettent de déclencher des actions automatiquement selon un timing prédéfini. Pour créer un minuteur, faire un clic droit sur le nom d’un écran ou d’une boite de dialogue dans la colonne de gauche du module (Concevoir les écrans) et sélectionner Ajouter un minuteur.

_images/Nouveau_minuteur.png

Renseigner un titre pour le minuteur et une description éventuelle. Choisir ensuite le délai avant le déclenchement du minuteur en secondes. Cocher la case « Répéter indéfiniment » pour que le minuteur se répète, au lieu de ne s’exécuter qu’une seule fois. Le minuteur doit être activé à l’aide d’une variable booléenne dont la valeur est true ou false. Il est ensuite possible de rattacher un / des comportements au minuteur comme pour un écran.

_images/Minuteur_comportement.png

Il est également possible de définir des minuteurs sur des jeux de données en lecture seule.

1.8. Copier / Coller avancé

Ontomantics intègre des fonctionnalités de copier / coller avancées. Il est ainsi possible de copier des écrans, des comportements, des règles, mais également des conditions, des actions, des expressions, ou encore des opérandes.

Pour copier un élément, faire un clic droit dessus et choisir Copier. Pour coller l’élement à l’endroit désiré, cliquer sur Coller.

Si l’élément à coller est un écran, Ontomantics propose différentes actions à effectuer :

  • « Détacher l’objet lié » ne lie pas les objets liés à l’écran d’origine (modèles de données, jeu de données, etc.) et se contente de recréer l’écran sans attachement

  • « Cloner l’objet lié » recréé les objets attachés à l’écran d’origine

  • « Remplacer l’objet lié » permet de choisir un nouvel objet de même type à rattacher au nouvel écran.

_images/Collage_ecran.png

Si l’élément à coller est un comportement, une règle, une condition ou une action, Ontomantics propose également les trois actions décrites ci-dessus. Seul le type de l’élément à remplacer change.

_images/Collage_condition.png

Ontomantics propose une action pour chaque objet lié à l’élément collé :

_images/Collage_action.png

La plateforme détecte les règles qui ont le même nom et les surligne lors du collage. Par défaut, un élément est rattaché à l’élément du même nom si celui-ci existe.

1.9. Hiérarchie d’appel

La hiérarchie d’appel est une fonctionnalité qui permet de consulter rapidement les éléments liés au composant sélectionné. Elle peut être utilisée sur toutes les entités d’une application (modèle de données, écran, contrôles, boite de message, service métier, etc.). La hiérarchie d’appel peut être utilisée de manière ascendante (consulter les éléments utilisés par le composant) ou descendante (consulter les éléments que le composant utilise).

Depuis le module de conception des écrans, faire un clic droit sur un écran permet d’afficher le menu contextuel ; cliquer sur Hiérarchie d’appel.

_images/Call_hierarchy_0.png
_images/Call_hierarchy_1.png

Le premier onglet permet de voir les éléments faisant appel à l’écran sélectionné. Le deuxième onglet permet de voir les éléments utilisés par l’écran. Cliquer sur un élément redirige l’utilisateur sur ses détails. Il est possible de les déplier pour voir leurs enfants.

_images/Call_hierarchy_2.png

Les éléments de l’onglet (Boîtes de messages) peuvent également utiliser la hiérarchie d’appel.

_images/Call_hierarchy_3.png

Les éléments de l’onglet (Gérer les menus) le peuvent aussi.

_images/Call_hierarchy_4.png

Les éléments du module de gestion des modèles de données ont aussi accès à la hiérarchie d’appel via un clic droit sur l’élément ; ici, le modèle lui-même :

_images/Call_hierarchy_5.png
_images/Call_hierarchy_6.png

Même chose pour chaque table ou chaque attribut de la table :

_images/Call_hierarchy_7.png