ISD Cinematic tooling
Copyright © 2008, 2023 Obeo – All rights reserved. This program and the accompanying materials are made available under the terms of the Eclipse Public License v2.0
Cinematic Designer est un outil de conception d’écrans d’application, permettant de décrire la structure d’une IHM (modélisation statique) et son comportement (modélisation dynamique).
Cinematic Designer apporte le point de vue Cinematic Views qui permet de :
- Modéliser des vues et des éléments de vues (les composants graphiques d’une IHM),
- Modéliser la structure de la disposition graphique sous une structure de type " Grid Layout ",
- Modéliser les états et le flot entre les états de l’application,
- Organiser les Flows et les View Elements en packages.
Un assistant de création de modèles Cinematic est accessible via le menu :
File > New > Other … > Cinematic Model (Catégorie IS Designer)
Ou bien le menu contextuel sur un projet :
New > Other … > Cinematic Model (Catégorie IS Designer)
Ou encore le raccourci clavier
Ctrl+N
Cet assistant permet de définir
- le nom du modèle à créer (l’extension du modèle est automatiquement ajoutée à la fin du nom en grisée et en italique s’il n’y a pas d’extension précisée),
- le projet ou répertoire de destination pour cette nouvelle ressource :
La dernière page de l’assistant permet de définir le toolkit à utiliser, et d’initialiser le modèle avec un diagramme de Mockup et un diagramme de flow :
Une fois l’assistant validé, le modèle est créé, ainsi que les représentations Package Diagram et UI Structure. Les représentations demandées en création sont ouvertes pour commencer à modéliser.
Lorsqu’un modèle cinematic est créé à l’aide de ce wizard, les points de vues Cinematic Views et Environment View sont activés.
Le point de vue Cinematic Views permet de visualiser et modifier un modèle cinematic via plusieurs types de diagrammes tel que décrit dans la section suivante. Le point de vue Environment View contient la définition des vues de propriétés avancées (EEF).
Un assistant de création de modèles Toolkits est accessible via le menu :
File > New > Other … > Toolkits Model (Catégorie IS Designer)
Cet assistant permet de définir
- le nom du modèle à créer (l’extension du modèle est automatiquement ajoutée à la fin du nom en grisée et en italique s’il n’y a pas d’extension précisée),
- le projet ou répertoire de destination pour cette nouvelle ressource :
Une fois l’assistant validé, le modèle est créé.
Si le fichier a été créé dans un modeling project, la seule étape nécessaire est l’activation du point de vue Cinematic Views. Pour ceci choisir Viewpoints Selection dans le menu contextuel du modeling project.
Si le projet est d’un autre type, il manque alors un fichier representations file (fichier .aird). L’action de menu contextuel Configure > Convert to Modeling Project permet de remédier à cette situation.
Pour ajouter le modèle Cinematic à un representations file existant, choisir Add Model dans le menu contextuel du Project Dependencies, puis sélectionner la ressource du modèle Cinematic.
L’activation d’un point de vue se fait en choisissant Viewpoints Selection dans le menu contextuel du projet.
Le modeleur Cinematic apporte les représentations suivantes :
| Package Diagram | : diagramme permettant de modéliser les Packages, Flows et ViewContainers. |
| UI Structure | : représentation aborescente permettant de modélise la description statique de l’IHM (écrans, panels, widgets, …). |
| View Container Mockup | : diagramme permettant de modéliser la structure et l’apparence des IHM. |
| Layout Diagram | : diagramme de consultation des composants et composites d’un Layout. |
| Flow Diagram | : diagramme permettant de modéliser la dynamique de l’IHM. |
Les représentations suivantes peuvent être ouverts en mode “Vue Partielle”. Le fonctionnement des Vues Partielles est décrit dans la section ISD – Outillage environnement / Vues Partielles
- Flow Diagram
- Package Diagram
Le Package Diagram est défini sur un objet de type Package, que nous appellerons par la suite package courant.
Sont affichés sur ce diagramme :
- les ViewContainer directement contenus par le package courant,
- les Flows du package courant,
- les sous-packages fils du package courant, et leurs ViewContainers,
- les dépendances entre Flows, ViewContainers et Packages quand elles existent (activables/désactivables par le calque Dependencies).
Pour un ViewContainer, sont affichés :
- son nom,
- une icône représentant son type,
- les View Elements directement contenus ou référencés,
- les View Containers directement contenus ou référencés.
Les outils fournis par la palette sont :
 |
Création d’un Package. |
 |
Création d’un Flow. |
 |
Création d’un View Container. |
Les autres outils disponibles sont
- L’édition directe du label sur tous les éléments (sauf widgets et containers contenus ou référencés par un ViewContainer),
- La suppression des sous-packages, Flow et ViewContainer (mais pas de suppression du contenu d’un ViewContainer),
- Le calque Dependencies pour afficher ou non les dépendances.
La création d’un diagramme sur un Package, un Flow ou un View Container se fait par le menu contextuel New > #Nom du diagramme#.
La navigation vers un diagramme existant lié à un Package, un Flow ou un View Container se fait par le menu contextuel Open > #Nom du diagramme#.
Un double clic sur un Package, un Flow ou un View Container déclenche la création d’un diagramme si il n’existe pas, ou bien son ouverture si il existe.
La représentation UI Structure fournit une vue d’ensemble complète de la structure des écrans de l’application modélisée, sous forme arborescente.
Les écrans sont décrit en termes de View Containers pouvant contenir :
- d’autres View Containers,
- des View Elements représentant les instances de widgets
- des View Container Reference représentant la réutilisation de View Container.
Les View Containers peuvent être contenus dans des Package, permettant une structuration de ces différents éléments.
Cette représentation fournit en outre le moyen d’associer un toolkit au modèle Cinematic. Le toolkit est un modèle externe définissant les widgets utilisables pour la définition des écrans.
Les éléments affichés sont :
- le Package principal et ses sous-packages,
- les View Containers,
- quand un View Container est référencé il apparaît également sous l’élément qui le référence. Ex : AdressePanel apparaît sous DetailPersonne. Dans ce cas, une indication permet de voir que le View Container est simplement référencé et non pas contenu (mention dans le libellé et décorateur d’icône).
- les View Element,
- les Events associés aux View Containers et View Elements,
- les Actions associées aux View Container et View Elements.
Les outils disponibles sont :
- création / suppression de Package,
- création / suppression de ViewContainer,
- création / suppression de ViewElement,
- création / suppression de Event,
- création / suppression de Action,
- modification de ces éléments via des vues de propriétés avancées,
- déplacement et duplication d’élément dans l’arborescence.
Cette représentation vient compléter la représentation UI Structure, apportant la modélisation de la disposition graphique des composants de l’IHM. Elle permet de créer et positionner les View Elements dans les View Containers.
La palette propose un outil de création de View Element ou View Container par widget disponible dans le toolkit utilisé. Son contenu dépend donc du toolkit actif sur le modèle Cinematic courant.
Voici les deux palettes dans le contexte des deux Toolkits fournis avec le studio IS-Designer :
| Toolkit Web | Toolkit Swt | |
 |
 |
Par défaut, le label des éléments présentés sur le View Container Mockup est déterminé de la manière suivante :
- Pour un View Element ou un View Container :
- Si l’attribut label est défini, alors il est utilisé,
- Sinon si l’attribut nom est défini alors il est utilisé,
- Sinon le label est vide.
- Pour un View Container
- Si l’attribut label est défini, alors il est utilisé,
- Sinon si le nom est défini alors il est utilisé,
- Sinon le label du View Container référencé est calculé comme ci-dessus et utilisé.
Le calque Example modifie le label des View Elements, permettant de visualiser l’IHM avec des données d’exemple. Le label est alors calculé tel que défini dans le toolkit, par l’expression AQL " example " du widget.
| Calque Example désactivé | Calque Example activé | |
 |
 |
Chaque repositionnement ou redimensionnement de View Element sur ce diagramme déclenche la mise à jour de la structure de Layout du View Container représenté sur le diagramme :
La structure de Layout porte les positionnements graphiques des éléments du Mockup, organisés en structure de type " Grid Layout ". Un élément de Layout est défini par une position (coordonnées x, y), une taille (largeur, hauteur), une direction (horizontale ou verticale) et une liste de Layout fils.
L’algorithme de mise à jour de la structure de Layout procède à une analyse de l’espace en passes successivement verticales et horizontales. Dans l’exemple ci-dessus, l’espace est découpé verticalement en quatre compartiments, dont le dernier est découpé horizontalement en deux compartiments lors d’une deuxième passe.
Le choix de direction est déterminé par la direction dans laquelle l’espace se découpe le plus, avec en cas d’égalité un choix par défaut en découpage vertical.
Un élément de Layout peut être lié ou non à un View Element suivant qu’il représente le Layout d’un View Element ou bien le Layout d’un espace structurant (tel que le Layout qui englobe les deux boutons de l’exemple ci-dessus).
Le diagram Layout Diagram permet de visualiser cette structure de Layout (décrit dans le chapitre suivant).
Le double clic sur les éléments du diagramme de mockup permet de naviguer vers d’autres diagrammes en les créant à la volée si ils n’existent pas :
- depuis le View Container racine vers le diagramme de Layout
- depuis un View Container vers un sous diagramme de mockup
- depuis un View Container Reference vers le diagramme de mockup du View Container référencé
Lorsque des diagrammes sont créés pour un élément donné, ceux-ci sont navigables via le menu contextuel, dans le sous-menu Open.
Ce diagramme a pour simple but de visualiser une structure de Layout. Il n’a pas vocation à éditer cette structure, et sa palette est vide.
L’action Preview Layout du menu contextuel sur le fond du diagramme permet d’appliquer les données de positionnement contenues dans les objets Layout aux formes affichées sur le diagramme.
IS Designer > Preview Layout
Les Layouts liés à un View Element sont représentés avec une bordure en trait plein, ceux ayant pour rôle de structurer un compartiment de l’espace sont représentés avec une bordure en trait pointillé.
Les Layouts découpant l’espace verticalement sont présentés en rouge, ceux découpant l’espace horizontalement sont présentés en vert.
Le Flow Diagram est défini sur un élément de type Flow.
Sont affichés sur ce diagramme :
- Les états du Flow (InitialState, FinalState, ViewState, ActionState, DecisionState, AsyncEventState, SubflowState).
- Les types d’état sont différenciés par l’utilisation d’icônes et de pictogrammes distinctifs.
- Les transitions du Flow
- Si la transition est déclenchée par un (des) événement(s), le label principal de la transition est de la forme
evenement1,evenement2. - Si une garde est présente elle est affichée en label secondaire sous la forme [guard].
- Si la transition est dirigée vers un View State, elle est représentée par une flèche pleine, sinon elle est représentée par une flèche pointillée.
- Si la transition est déclenchée par un (des) événement(s), le label principal de la transition est de la forme
- Un conteneur flottant nommé FlowEvents présente les FlowEvents génériques du flow de portée globale qui représentent des événement logiques ou métier. Ce conteneur peut être masqué en désactivant le claque Flow Events. Les événements de “Flow Events” portent l’icône
pour les distinguer des événements définis dans le toolkit qui portent l’icône 
. - Les ViewContainers référencés par les ViewState affichés. Ceux-ci peuvent être masqués par la désactivation du calque View Containers.
- Les informations affichées pour les ViewContainer sont les mêmes que pour le diagramme de Package décrit plus haut.
Les outils proposés par la palette sont :
| States | |
 |
Tracée entre deux états, permet de créer une transition. Si la transition est issue d’un View State, déclenche l’ouverture de l’assistant de sélection d’événements déclencheurs. |
 |
Crée un View State. Déclenche l’ouverture de l’assistant de sélection de View Container. |
 |
Crée un Action State. |
 |
Crée un Async Event. |
 |
Crée un Sub Flow State et affiche l’assistant de sélection de Flow existant. |
 |
Crée un Sub Flow State et l’associe à un nouveau Flow créé dans la même action. |
| Ports | |
 |
Crée un Initial State. |
 |
Crée un Final State. |
 |
Crée un Abort State. |
 |
Crée un Decision Node. |
| Events | |
 |
Présent seulement si le calque Flow Events est activé. Crée un Flow Event dans le conteneur Flow Events. |
| View Containers | |
 |
Crée un lien d’association entre un View State et un View Container déjà présent sur le diagramme. |
 |
Crée un lien d’association entre un View State et un View Container existant. Déclenche l’affichage d’un dialogue de sélection de View Container. |
 |
Crée un lien d’association entre un View State et un View Container créé dans la même action. Déclenche l’affichage d’un dialogue de sélection du Widget dont le View Container représentera une instance. |
Autres outils :
| Double clic sur une Transition | : Ouvre le dialogue de sélection et de création d’événements déclencheurs |
| Double clic sur un View State | : Ouvre le dialogue de sélection de View Containers |
| Edition directe des libellés | : Sur les états, les conditions de garde, les Flow Events et les View Containers |
| Reconnexion | : Des transitions |
| Suppression | : Les éléments du diagramme |
Outils de navigation :
- création / navigation vers le diagramme de flux pour un SubFlowState,
- création / navigation vers le diagramme contenant la description d’un ViewContainer (par menu contextuel et par double-clic),
Menu contextuel :
L’apparence d’un ViewState peut prendre celle du diagramme de Mockup du View Container qui lui est associé par l’action Apply Mockup Image du menu contextuel, permettant d’obtenir ce genre de rendu visuel :
L’action Remove Mockup Image a pour effet de réinitialiser l’apparence du View State à son apparence initiale.
Dialogue de séléction d’événements déclencheurs:
Ce dialogue permet de séléctionner des types d’événements. Il présente l’ensemble des types d’événements supportés par les widgets utilisés dans le modèle Cinematic, ainsi que l’ensemble des événements logiques définis dans le Flow.
Les événements des widgets sont classés sous la hiérarchie des View Elements, les événements logiques sont regroupés sous un nœud virtuel « Flow events ».
Les événements déclencheurs de la transition sont cochés.
La zone de filtre textuel permet de réduire le contenu de l’arbre de manière à n’afficher que les éléments dont le label se conforme au filtre. L’affichage d’un élément dont le label se conforme au filtre entraîne cependant l’affichage des éléments parents jusqu’à la racine de l’arbre ainsi que tous ses éléments fils. Le métacaractère ‘*’ est supporté pour correspondre à une chaîne de caractères quelconque et ‘?’ pour correspondre à un caractère quelconque.
La case à cocher « Hide non contextual View Containers » permet de cacher les View Containers qui ne sont pas liés au View State source de la transition. A l’affichage du dialogue elle est cochée si au moins un View Container est lié au View State source.
L’arbre de sélection d’événement permet une sélection multiple. Le dialogue peut donc être validé avec une sélection vide, simple ou multiple.
A la validation du dialogue,
- Pour chaque événement de la transition dont le type est non présent dans la sélection :
- L’événement est retiré de la liste des événements déclencheurs de la transition.
- Si un événement de vue n’est pas utilisé par d’autres transitions il est supprimé.
- Pour chaque type d’événement sélectionné :
- Si l’événement de vue correspondant au type d’événement n’existe pas dans le View Element, il est créé (avec un nom conforme au format _<type d’événement>).
- L’événement correspondant au type d’événement est ajouté à la liste des événements déclencheurs de la transition.
- Si le View State source n’est pas lié au View Container du type d’événement sélectionné, ce lien est créé.
Dialogue de séléction de ViewContainer:
Ce dialogue permet de séléctionner des View Containers. Il présente l’ensemble des View Containers du modèle Cinematic présentés sous leur hierarchie de contenance.
Les View Containers associés au View State concerné sont cochés.
La zone de filtre textuel permet de réduire le contenu de l’arbre de manière à n’afficher que les éléments dont le label se conforme au filtre. L’affichage d’un élément dont le label se conforme au filtre entraîne cependant l’affichage des éléments parents jusqu’à la racine de l’arbre ainsi que tous ses éléments fils. Le métacaractère ‘*’ est supporté pour correspondre à une chaîne de caractères quelconque et ‘?’ pour correspondre à un caractère quelconque.
La case à cocher « Hide View Containers bound to other View States » permet de cacher les View Containers déjà liés à des View States. Elle est cochée à l’affichage du dialogue. Des containers déjà associés peuvent cependant être affichés malgré le filtre.
L’état partiellement coché d’une case indique que des sous éléments sont séléctionnés. Les éléments partiellement cochés ne font pas partie de la séléction prise en compte à la validation du dialogue.
A la validation du dialogue, la liste des éléments associés au View State est mise à jour avec la sélection faite par l’utilisateur.
Un des objectifs du méta-modèle Cinematic est de permettre de créer facilement de nouveaux toolkits.
De manière succincte, la création d’un toolkit consiste en la création de widgets, et sous chaque widget la création des types d’événements qu’il peut déclencher.
Par exemple, un toolkit peut contenir un widget button avec un événement buttonPressed.
La création de toolkits est une tâche réalisée par l’équipe réalisant l’outillage de l’équipe d’analyse / conception / développement.
A ce titre, la définition de toolkits se fait par l’éditeur EMF arborescent classique.
Pour une meilleure expérience utilisateur il est possible d’associer une icône à chaque widget. Cette icône est affichée devant le nom des ViewElement utilisant le widget, et dans la palette du diagramme de Mockup.
Certains attributs du toolkit sont utilisés pour restituer des informations aux utilisateurs finaux
Ainsi :
-
Summary : est exploité en info bulle dans la palette du diagramme Mockup :
-
Documentation : Est affiché dans une aide sur les ViewElements et ViewContainers utilisant le Widget :
- Metadata Definitions : Défini une liste de clés et de valeurs par défaut pour des métadonnées. Ces données sont exploitées à la création d’un View Element pour initialiser autant de meta-data dans le ViewElement qu’il y a de valeurs définies dans l’attribut metadataDefinitions :
- Metadata Help : Défini une aide à l’usage des métadatas pour les ViewElements et ViewContainers utilisant le Widget :
Un Widget peut définir un style. Le style porte les attributs suivants :
- decorator : Chemin vers l’image svg qui décore le widget (cas de combo box, radio button, etc…)
- decoratorPosition : position cardinale du décorateur (east pour combo box, west pour radio button, etc…)
- decoratorVFill : booléen spécifiant si le décorateur doit suivre le redimensionnent vertical (valeur par défaut égale à vrai)
- decoratorHFill : booléen spécifiant si le décorateur doit suivre le redimensionnent horizontal (valeur par défaut égale à faux)
- bordered : booléen spécifiant si une bordure est visible (faux pour link ou pour label)
- roundedCorners : booléen spécifiant si les coins doivent être arrondis (vrai pour button)
- fontColor : couleur de la police de caractère utilisée pour le label. Les couleurs disponibles sont celles définies par la classe
org.eclipse.swt.SWTpar les champs dont le nom commence par « COLOR_ ». Ainsi, une couleur désignée par la chaîne « BLACK » désigne le champorg.eclipse.swt.SWT.COLOR_BLACK. - fontUnderlined : booléen spécifiant si la police de caractère utilisée pour le label est soulignée (vrai pour link)
- labelHAlignment : alignement du texte à gauche, droite, ou centre
- defaultWidth : largeur par défaut utilisée à la création d’un View Element
- defaultHeight : hauteur par défaut utilisée à la création d’un View Element
- exampleExpression : Expression AQL définie dans le contexte du View Element (la variable self est instance de View Element), définissant le label des View Elements sur le diagramme Mockup lorsque le calque Example est activé
- labelHidden : booléen spécifiant si le label du View Element représentant ce Widget doit être caché (utile pour les conteneurs tel que Page, Panel, …)