Exemple de mise en oeuvre de SCXML-JS

Introduction

Voici quelques articles que je parle des machines à états SCXML. Il faut dire que j'ai passé pas mal de temps à les étudier. Le cas que j'ai présenté jusqu'à maintenant (Exemple de mise en oeuvre de SCXML - partie 1) simule une application Java/Swing. Il m'arrive souvent de travailler sur des applications réseau. Celles-ci sont basées sur les technologies du Web. J'utilise beaucoup GWT, Google Web Toolkit, (dont je parlerai prochainement) qui produit une application Web HTML/CSS/JavaScript.

Quand j'ai étudié SCXML, j'avais simulé une application Web. Il s'agissait d'une calculatrice quatre opérations. C'est sur la base de cette étude que j'ai écrit les articles précédents.

Calculatrice

Comme expliqué précédemment, ce tutoriel présente une calculatrice. Cette application d'étude a été écrite il y a quelque temps et j'ai repris cette base pour écrire les articles précédents.

La calculatrice est séparée en deux parties

HTML : IHM de l'application Web
JavaScript : Machine à états

Voici l'application elle-même : calculator.html

Machine à états

La machine à états de l'exemple de mise en oeuvre de SCXML - partie 1 a été construite à partir de celle-ci. Elle est donc à 90% identique. Les différences sont au niveau du langage. En Java, les listeners s'occupent de surveiller l'activité de la machine et de réagir en fonction des changements d'état. Cette machine-ci utilise JavaScript, il est donc possible d'inclure le code dans la balise <script> de SCXML.

Étant donné le peu de différence entre cette machine et celle du premier tutoriel, je ne vais pas revenir sur le fonctionnement général. Je vais juste reprendre les états et les transitions qui, selon moi, méritent une petite explication et mettre en évidence les morceaux de JavaScript.

Clear

La balise <log> produit une trace dans la console du browser
<assign> donne une valeur (new String('')) à la variable "result", donc l'initialise avec une chaine vide.
<script> contient le code JavaScript "$('#display').val(0)". C'est un appel à la librairie jquery qui aura pour effet de mettre la valeur "0" dans le input ayant l'id "display".

Reset

Remise à zéro des variables op1, op2 et oper.

operand1 / onDigit

Comme dans la première partie de cette série de tutoriels, la transition "onDigit" est déclenchée dès qu'un chiffre est saisi. Le code présenté ci-dessous permet d'ajouter (concaténer) ce chiffre à la variable "op1".

la balise <log> affiche dans la console l'objet "_event".

Par exemple après un click sur le bouton "1", voici ce que nous pouvons voir dans la console de Firebug :

Object { name="onDigit", data="1"}

operand1 / received_op1

Mise à jour de l'affichage

onOperation

Mise à jour de la variable "oper".

la balise <if> représente le même cas particulier que celui présenté dans l'exemple de mise en oeuvre de SCXML - partie 1

Compute

Cet état contient le coeur de la calculatrice, le calcul lui-même.

La balise <assign> contient le calcul proprement dit. l'expression "eval(op1 + oper + op2)" demande à JavaScript d'interpréter la concaténation de ces trois variables. Avec l'exemple habituel "eval('123' + '+' + '12')" => 135

IHM

L'interface utilisateur de cette application web est réalisée en HTML. Elle est fortement inspirée d'un article de daniweb : A four function calculator (HTML). Par rapport à daniweb, j'ai modifié les points suivants :

utilisation de jquery pour simplifier le code javascript
intégration de "calculator.js"
modification de tous les javascripts pour utiliser la machine à états

Liaison avec la machine à états

Il s'agit maintenant de lier l'interface en HTML avec la machine à états en XML. Pour ce faire, il faut utiliser SCXML-JS.

Télécharger SCXML-JS

Un dépôt SubVersion est mis à disposition et nous devons aller chercher les sources :

svn checkout http://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk commons-scxml-js

"Compiler" la machine à états

./run.sh --backend state --beautify --ie /path/to/calculator.scxml &gt; /path/to/calculator.js

lier la machine à états à l'IHM

D'abord, il faut faire connaitre à l'IHM le scipt généré ci-dessus

   ...
   <!-- Machine à états (calculator.scxml compilée avec scxml-js) --><script type="text/javascript" src="calculator.js"></script>

Ensuite, il faut créer l'instance JavaScript de la machine à états

...
<!-- Initialisation de la machine à états finis --><script type="text/javascript">// <![CDATA[
    sec = new StatechartExecutionContext();
    sec.initialize();
// ]]></script>

Réaliser une transition

Il est maintenant possible d'implémenter l'événement "onClick" d'un bouton de l'IHM pour qu'il demande à la machine à états de réaliser une transition.

<input onclick="sec.onClear()" type="button" name="clear" value=" C " />

Conclusion

L'application est disponible ici : calculator.html
La machine à états est ici : calculator.scxml

Cet article montre comment utiliser SCXML dans un contexte différent d'une application Java/Swing. En rédigeant ces quelques lignes, je me suis aperçu que, malheureusement, le projet SCXML-JS ne sera pas mis à jour. C'est dommage, j'ai fait de très bonnes expériences avec ce projet. Au moins, le projet SCXML-JS est utilisable et le code source est publié, il nous reste à retrousser nos manches et à le faire évoluer nous-mêmes.