1.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.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.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.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.1.4 Créer et modifier des écrans