Il nous reste à générer le code pour exécuter notre automate. Nous allons pour cela utiliser une transformation M2T (Model to text) avec l'outil Acceleo.

Cette transformation part du métamodèle CodeStateMachine et doit générer une page HTML avec du code JavaScript qui exécute le comportement de l'automate.

Nous commençons par créer un projet Acceleo avec File > New > Project… > Acceleo Model to Text > Acceleo Project. Dans le dialogue de configuration du projet, il faut indiquer le métamodèle source (pensez à cliquer sur Runtime Version pour voir les métamodèles définis dans cette instance d'Eclipse), l'élément racine auquel s'applique la transformation (menu Type), et indiquer que vous aller générer un fichier et que vous voulez un point d'entrée de transformation (Main template), ce qui donne :

Le code de la transformation se trouve dans le fichier generate.mtl du package main du projet. Le contenu initial décrit un gabarit de transformation pour un objet StateMachine, qui crée un fichier de nom aStateMachine.name. Nous allons commencer par corriger le nom du fichier généré en lui ajoutant l'extension .html :

Ensuite, il est peu pratique de mettre au point le code à générer dans l'éditeur Acceleo. Il vaut mieux écrire le code désiré pour un modèle simple, puis modifier ce code en remplaçant toutes les parties qui dépendent du modèle par des structures Acceleo. Les principales structures que vous aurez à utiliser sont :

• la boucle for, qui permet d'itérer sur une collection :

• la conditionnelle et l'alternative, pour générer du texte différent selon une condition :

Les crochets [ faisant passer dans le contexte Acceleo du modèle, il est nécessaire de les échapper si on doit les inclure dans le texte généré. Par exemple, pour déclarer un tableau d'entier en C, on devra écrire : le crochet ouvrant étant échappé en le plaçant dans une chaîne de caractères Acceleo.

Exemple de code

Pour vous aider à écrire la transformation, considérons l'automate suivant, dont l'état initial est A, et qui a pour événements d'entrée a et b, et pour actions u et v :

On souhaite obtenir une page HTML avec le rendu suivant :

où le bouton vierge dans les inputs correspond à une activation de l'automate sans événement d'entrée.

Le code correspondant est :

Vous pouvez recopier ce code dans la transformation Acceleo (attention aux crochets ligne 53), puis éditer les lignes qui dépendent du modèle. Par exemple, la ligne 5 devrait devenir :

De même, lignes 68 à 92, dans la fonction react(), les différents éléments vont apparaître dans des boucles for qui itèrent sur les entrées de l'automate, ses sorties, ses états, et pour chaque état, sur les transitions. Pour traiter le cas des transitions sans garde, vous pouvez tester si un attribut n'est pas défini avec la méthode oclIsUndefined().

Exécution de la transformation M2T

Pour exécuter la transformation Acceleo, il suffit de faire un clic droit sur le fichier .mtl et de choisir Run As… > Launch Acceleo Application, puis de renseigner le modèle à transformer (Model), et le dossier cible (Target), puis de cliquer sur Run dans le dialogue qui apparaît :

Il ne vous reste plus qu'à tester vos deux transformations sur différents automates !

Résultats

• Code de la transformation Acceleo
• Fichier HTML résultat