1. Les écrans Ontomantics

Le module de conception intègre un outil intuitif de modélisation des écrans de l’application à base de glisser-déposer ; faire glisser un composant graphique (champ de formulaire, bouton radio, case à cocher, liste, tableau, planning, carte du monde, etc.) depuis la liste vers l’écran permet de le placer sur l’écran. Selon le type de disposition choisi, la disposition des composants à l’écran peut être gérée de façon automatique par la plateforme selon les principes du Responsive Design, ou bien manuellement par l’utilisateur via des coordonnées X et Y. Chaque composant peut se voir attribué un style graphique personnalisé à l’aide de classes CSS, en plus des styles applicables de manière globale à une application.

La conception des applications sous Ontomantics bénéficie des avantages offerts par les concepts de Responsive Web Design (RWD) et Progressive Web App (PWA). La conception des applications est ainsi également facilitée et accélérée. De manière plus globale, tous les modules de la plateforme Ontomantics sont compatibles Responsive Web Design et Progressive Web App.

1.1 Responsive Web Design

La technologie RWD que nous utilisons permet d’adapter automatiquement les écrans de l’application au terminal de l’utilisateur, que ce soit un ordinateur de bureau, un PC portable, une tablette ou un smartphone. La plateforme adapte la taille des composants à celle de l’écran pour un résultat agréable pour l’utilisateur final, et permet un double gain de temps de développement :

• un seul écran à créer pour l’ensemble des terminaux

• plus besoin de positionner manuellement les éléments de l’écran à concevoir, la plateforme se chargeant de cette tâche automatiquement.

1.2 Progressive Web App

La technologie PWA permet d’installer et d’utiliser une application web comme s’il s’agissait d’une application native sur le terminal de l’utilisateur. Sur smartphone ou tablette, l’utilisateur dispose d’une icône pour lancer l’application, tel qu’il le ferait pour une application classique, et bénéficie d’un confort de navigation et d’ergonomie similaire à celui d’une application native. Le PWA permet des gains de temps de développement considérables, puisqu’il n’est désormais plus nécessaire de développer des versions spécifiques de l’application pour les différents terminaux, notamment Android et iOS.

1.3 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 à partir de tables du modèle de données ou d’une source de données :

• Insertion en base

• Suppression

• Modification

• Affichage

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.

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.

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 .

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

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

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.

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

1.4 Créer et 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.4.1 Nouvel écran

La conception d’un écran se fait depuis le module Conception d’une application, en cliquant sur l’icône Concevoir les écrans du bandeau supérieur. 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.

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

• Classes de style CSS : ce champ permet de spécifier les classes de style CSS à appliquer à l’écran. La définition des classes CSS s’effectue depuis le menu Gérer l’apparence de l’application du module de conception.

• É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.

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

• Chemin : En cochant la case Cet écran est directement accessible via une URL, il est possible de spécifier un chemin d’accès direct à cet écran depuis la barre d’adresse du navigateur.

En ouvrant une nouvelle session directement sur un écran accessible, des variables requises pourraient ne pas être chargées. Il faudra, selon les cas, rediriger vers un autre écran, ou les remplir via le déclencheur À l’initialisation de l’écran. En ouvrant une nouvelle session directement sur un écran accessible, le déclencheur À l’initialisation de l’écran d’accueil ne sera pas exécuté et il faut donc éviter d’initialiser des variables ou faire des redirections à cet endroit (mais plutôt au chargement de l’application ou éventuellement à la connexion).

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

Mode Aperçu d'un écran

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

Boîte à outils

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

Bandeau supérieur

En haut de la zone d’affichage du mode Création se trouve un bandeau contenant plusieurs fonctionnalités.

Quitter le mode plein écran permet de retourner en mode Aperçu. Le bouton Plein écran affiche le mode Création sur toute la fenêtre du navigateur. Cocher la case N’afficher que le contenu principal a pour effet de supprimer l’affichage du bandeau supérieur de l’application ainsi que du menu de navigation à gauche. Utiliser les boutons et pour modifier le zoom. Cliquer sur le nombre entre les deux icônes pour revenir à la taille standard 100%. Les icônes Résolutions permettent d’adapter la taille de l’écran à celle de différents types d’appareils.

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

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

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

• : Tablette en mode paysage ou résolution entre 992px et 1200px

• : Résolution entre 1200px et 1400px

• : Résolution d’au moins 1400px

Cette fonctionnalité n’est qu’un aperçu du résultat de l’écran sur chaque type d’appareil ; les composants d’écran disposent également d’une fonction au sein de leurs propriétés qui permet de définir sa visibilité selon le type d’appareil sur lequel l’application est affichée (ex: masquer le composant en mode Smartphone). Cette fonctionnalité est décrite plus loin dans cette documentation.

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 disposition Nord / Ouest | Centre | Est / Sud qui permet de déposer les composants d’écran sans avoir à gérer manuellement leurs coordonnées X et Y.

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.

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

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

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

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

1.4.4.1 Propriétés

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

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.4.4.2 Données

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.4.4.3 Apparence

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

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 en mode portrait ou résolution entre 768px et 992px

• : Tablette en mode paysage ou résolution entre 992px et 1200px

• : Résolution entre 1200px et 1400px

• : Résolution d’au moins 1400px

Taille selon les résolutions

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

Se reporter à la section Les styles CSS de cette documentation.

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

Menu Validateurs d'un contrôle. Nous voyons ici tous les validateurs possibles 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.4.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é.

Menu Convertisseurs d'un contrôle

1.4.4.6 Droits

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

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

1.4.6 Description des contrôles

La liste exhaustive des contrôles d’écran et de leur fonctionnement est disponible à la section Les composants d’écran de cette documentation.

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

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.

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 Envoi qui permet d’envoyer des images sur la plateforme.

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 des fichiers… 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. Il est possible d’envoyer l’intégralité des images d’un dossier en cliquant sur le bouton Sélectionner un dossier… puis en sélectionnant le dossier désiré.

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

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.

1.7 Copier / Coller avancé

(Mettre à jour pour la V4.)

1.8 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 qui utilisent le composant).

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.

L’onglet Hiérarchie des appelants permet de voir les éléments faisant appel à l’écran sélectionné. L’onglet Hiérarchie des appelés 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.

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

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

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 :

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