headermask image

header image

Interaction Javascript/OpenLaszlo

J’ai souvent traité dans ce blog des différents concepts de programmation d’application en OpenLaszlo seul, mais, comme c’est souvent le cas en informatique et par conséquent en programmation web, il est rare que l’on utilise qu’une seule technologie pour mener à bien un projet. Il est donc peu courant de voir une application OpenLaszlo seule.

Le cas rencontré le plus fréquemment est l’insertion d’une application OpenLaszlo dans une page web (HTML+CSS+Javascript) pour renforcer le dynamisme et profiter des capacités du langage. Seulement, il est difficile de trouver un intérêt à cette mise en place si l’application OpenLaszlo est incapable d’interagir avec son environnement (la page HTML et le navigateur).

Dans cet article je vais donc tenter de regrouper toutes les méthodes qui nous permettent de faire communiquer OpenLaszlo avec l’environnement client (les communications serveurs sont déjà traitées dans les sections AJAX, post…).

Cet article concerne principalement l’utilisation du runtime FLASH, l’utilisation du runtime DHTML étant moins problématique étant donné que l’application n’est plus exécutée dans un environnement à part (le lecteur flash), cela dit il est problématique sur d’autres points qui dépassent le cadre de cet article (même espace mémoire pour les variables…).

1 – Insérer l’application OpenLaszlo

Pour insérer une application OpenLaszlo dans une page HTML il existe 2 méthodes, la méthode propre, utiliser les composants Lz fournit avec OpenLaszlo et la crado, compiler l’appli en fichier .SWF et le coller dans la page avec un tag <EMBED/>, il n’est pas nécessaire de préciser que je n’aborderais pas la 2eme solution même si je m’autorise à l’utiliser sur ce blog (c’est mon blog, je fais ce que je veux bla bla bla…).

Donc, l’insertion d’une application OL dans une page web (communément appelé « wrapper page ») se fait à l’aide de la classe Javascript « Lz » fournie avec OL. Ce processus d’intégration est automatique lorsque l’on choisit de déployer l’application à partir de la console de développement (celle qui permet de choisir le type de runtime, swf7, swf8, DHTML et le type de déploiement Server ou SOLO).

Dans un premier temps, il faut récupérer le script Javascript qui contient la déclaration de la classe Lz, celui-ci se trouve dans le répertoire :

…/OpenLaszlo Server 4.x.x/Server/lps-4.x.x/lps/includes/embed-compressed.js

Ce script doit être accessible depuis la page HTML qui contiendra l’application, habituellement, il est placé dans le répertoire /lps/includes à la racine du projet, pour la suite du projet c’est depuis cet endroit que nous l’appellerons.

Ensuite nous devons référencer le script dans notre page, ce que nous ferons en ajoutant la ligne suivante dans notre page HTML, entre les balises .

  1.  <script type="text/javascript" src="lps/includes/embed-compressed.js"></script>

Il est maintenant possible d’insérer l’application avec la ligne suivante placée entre les balises <BODY></BODY>.

Dans le cas d’un déploiement avec le runtime Flash:

  1.  <script type="text/javascript">
  2.                Lz.swfEmbed({url: 'http://serveur:8080/lps-4.0.5/my-apps/monappli/monappli.lzx?lzt=swf&lzr=swf8&debug=false&lzbacktrace=false', bgcolor: '#ffffff', width: '1000', height: '1000', id: 'lzapp'});
  3.   </script><noscript>Please enable JavaScript in order to use this application.</noscript>

les paramètres de la méthode swfEmbed sont les suivants :

url : indique l’url vers l’application à insérer, dans l’exemple on utilise une application lzx en lui précisant que l’on souhaite utiliser le runtime flash8 ( lzt=swf&lzr=swf8 ). Dans le cas d’un déploiement SOLO on indiquera le chemin vers le fichier swf.

width, height et id : permets de préciser les paramètres du tag <EMBED> généré.

Un détail intéressant à noter est la présence des balises <noscript></noscript> qui contiennent les informations à afficher au navigateur en cas d’absence d’interpréteur Javascript, le cas se présente rarement, ceci dit les moteurs de recherche index particulièrement bien ce qui se trouve entre ces balises, contrairement au flash, ce qui permet de placer du contenu en format HTML qui ne sera pas visible par le visiteur, mais bien par les moteurs de recherche, j’ai expérimenté cette technique avec succès pour mon CV en OpenLaszlo.

2 Passage de paramètre au lancement de l’application

Il est possible de passer des paramètres à l’application en les ajoutant dans l’url, renseignée dans la méthode embed.
Par exemple:

  1.  Lz.swfEmbed({url: 'monappli.swf?param=machin', bgcolor: '#ffffff', width: '1000', height: '1000', id: 'lzapp'});

Au lancement de l’application, une variable globale « param » sera initialisée avec la valeur « machin », il est possible de passer autant de paramètres souhaités par ce biais.

La valeur sera utilisable ainsi :

  1.  <canvas>
  2.      <text text= "${param}"></text>
  3.  <canvas>

L’exemple s’appuie sur un déploiement solo mais fonctionne aussi en serveur.

En utilisant ce principe, il sera possible de passer directement les valeurs passées dans l’url d’appel à la page HTML

exemple :

  1.  Lz.swfEmbed({url: 'monappli.swf?'+window.location.search.substring(1), bgcolor: '#ffffff', width: '1000', height: '1000', id: 'lzapp'});

ainsi, à l’appel de la page HTML « index.html » contenant l’application « monappli.swf » de cette façon :

http://monserveurweb.com/index.html?param1=truc&param2=muche

En utilisant la méthode embed ci-dessus, il sera possible d’utiliser les variables param1 et param2 dans l’application OL.

Prenez garde de bien contrôler la fin de la chaîne de l’url de la méthode embed, car la fonction javascript utilisée pour récupérer les paramètres de l’URL du navigateur renvoi uniquement la partie contenant les paramètres, ainsi dans l’exemple la chaîne est terminée par un « ? » car on attend les premiers paramètres, mais si vous avez déjà précisé des paramètres de manière statique, il faudra terminer la chaîne par « & » pour permettre l’ajout de ceux de l’URL du navigateur.

Exemple :

  1.  Lz.swfEmbed({url: 'http://serveur:8080/lps-4.0.5/my-apps/monappli/monappli.lzx?lzt=swf&lzr=swf8&debug=false&lzbacktrace=false&'+window.location.search.substring(1), bgcolor: '#ffffff', width: '1000', height: '1000', id: 'lzapp'});

3 Récupération d’une variable Javascript depuis OpenLaszlo

Il est possible, dans une application Ol, de récupérer la valeur d’une variable utilisée dans un script Javascript. Les mécanismes mis en places avec OL sont relativement puissants, mais peu s’avérer lourd à utiliser dans ce cas présent (c’est un peu comme les regexp, tout le monde trouve ça surpuissant, mais personne n’aime les utiliser ;) ), c’est pour cela que je détaillerais une opération plus simple en utilisant directement une fonction de la bibliothèque flash.

1er méthode, intégrée à OL

La LFC possède une classe appelée LzBrowser qui à justement pour but de communiquer avec le navigateur, pour le chapitre actuel je détaillerais l’utilisation de la méthode callJS(), qui comme son nom l’indique permettent d’appeler une procédure Javascript depuis du code OL.

Donc, nous allons appeler une procédure Javascript, et la vous me dites « ce n’est pas le sujet du chapitre », et vous avez raison, mais comme OpenLaszlo est un langage orienté objet et que Javascript aussi, pourquoi ne pas rester dans la philosophie et programmer proprement jusqu’au bout. Ainsi, dans notre code Javascript, nous allons déclarer une variable et obtenir sa valeur par l’intermédiaire d’une fonction appelée communément « getter » (la fonction permettant de modifier la valeur d’une variable s’appellera un « setter »)

donc, nous déclarerons un bloc script suivant dans notre page HTML

  1.  <script type="text/javascript">
  2.      var varJS = 'variable JS';
  3.     
  4.      function getVarJS(){
  5.          return varJS
  6.      }
  7.  </script>

L’appel à la fonction getVarJS() retournera la valeur de la variable varJS.

Avant de donner la solution à notre problème directement, je vais faire une rapide explication de la fonction callJS(), car son utilisation est, disons, peu commune.

Donc voilà la syntaxe de la commande dans la documentation (modifié par moi, car il manque les paramètres optionnels…) :

static public function callJS(js : String, callback : Function, );

Donc, la fonction prend 2 paramètres obligatoires, une chaîne contenant le nom de la fonction Javascript à exécuter et une fonction de callback (OpenLaszlo) qui sera appelée à la fin de la fonction Javascript.
Il est possible de passer des arguments à la fonction Javascript en les spécifiant justes après la fonction de callback.

On peut s’affranchir de l’utilisation d’une fonction de callback, dans le cas où l’on ne souhaite pas utiliser le retour d’une fonction. Dans ce cas, il est préférable de mettre le mot clef « null ».

Le fonctionnement est le suivant, la procédure Javascript nommée dans le paramètre 1 est exécutée (éventuellement avec les paramètres 3,4,5,…). une fois la procédure Javascript terminée, le résultat est renvoyé à la fonction de callback spécifié dans le paramètre 2. l’originalité du paramètre 2 est que la fonction de callback doit être déclaré au sens informatique du terme, c’est-à-dire que l’on va écrire tout le code de la fonction dans le paramètre 2, c’est le seul moyen de traiter le retour de la procédure Javascript.
(Vous n’avez rien compris, regardez le code qui suit et si vous avez une meilleure définition, faites-le-moi savoir en commentaire ;) )

Maintenant que la méthode vous a été présentée, je vais tout de suite vous donner un code OL d’exemple.

  1.  <canvas>
  2.      <text id="letext">rien</text>
  3.     
  4.      <button>set varJS
  5.          <method event="onclick">
  6.              LzBrowser.callJS('getVarJS',function(res){letext.setText(res)});
  7.          </method>
  8.      </button>
  9.      <simplelayout axis="y" spacing="5"/>
  10.  </canvas>

Donc, pas grand chose d’original, un texte qui porte l’id « letext » et un bouton pour modifier la valeur du texte avec la valeur du paramètre varJS.

Donc lorsque le bouton est pressé, on exécute la procédure Javascript getVarJS(), qui renvoie en retours la valeur de varJS, à savoir la chaîne ‘variable JS’.

Lorsque l’on réceptionne le retour de la procédure, le code du paramètre 2 est exécuté, à savoir la création d’une fonction qui prendra un paramètre, ici appelé « res », qui sera en faite la valeur retours de la procédure Javascript, le code de cette procédure est ensuite défini entre les accolades, en l’occurrence on remplace le texte « rien » par la valeur de retour de la procédure Javascript.

FACILE !!! :D

2eme méthode, la méthode directe flash (attention, ne fonctionne qu’à partir de flash8 )

Cette méthode contourne le framework OpenLaszlo en utilisant directement une méthode de la bibliothèque flash8. Son utilisation est beaucoup plus rapide que la précédente et peut dépanner si on est sûr de n’utiliser que le runtime flash à partir de la version 8.

Son utilisation est la suivante :

var retours = flash.external.ExternalInterface.call(js : String, )

Le fonctionnement est très simple, la procédure Javascript passée en paramètre 1 est exécutée avec les arguments éventuels puis le retour est stocké dans la variable retour.

Voilà un exemple d’utilisation (le code Javascript dans la page HTML ne change pas) :

  1.  <canvas>
  2.      <text id="letext">rien</text>
  3.     
  4.      <button>set varJS
  5.          <method event="onclick">
  6.              var txt = flash.external.ExternalInterface.call("getVarJS")
  7.              letext.setText(txt)
  8.          </method>
  9.      </button>
  10.      <simplelayout axis="y" spacing="5"/>
  11.  </canvas>

Dans cet exemple la valeur de la variable varJS retournée par la procédure getVarJS() est stockée dans la variable locale à OpenLaszlo txt.

4 Récupération d’une variable OpenLaszlo depuis Javascript

Comme la plupart des opérations qui s’effectuent depuis la page HTML, l’accès à une variable OL se fait avec le composant Lz, plus particulièrement la méthode Lz._getCanvasAttributeSWF(), qui permet de récupérer la valeur d’une variable globale au projet OL.

Son utilisation est la suivante :

Nous allons créer un bouton dans notre page HTML qui affichera une boîte d’alerte en affichant le contenu d’une variable de notre application OpenLaszlo.

  1.  <input type="button" onclick="alert(Lz._getCanvasAttributeSWF('varOL'))" value="getVarOL"/>

et voilà le code que contiendra l’application OpenLaszlo (très très simple)

  1.  <canvas>
  2.      <script>
  3.          canvas.varOL = "variable OL"
  4.      </script>
  5.  </canvas>

Rien de très compliqué, la fonction _getCanvasAttributeSWF() prend en paramètre le nom de la variable et retourne la valeur.

5 Exécution d’une procédure Javascript depuis OpenLaszlo

Là pour le coup je vais faire le fainéant et je vous redirigerais vers le point numéro 3 :D

6 Exécution d’une procédure OpenLaszlo depuis Javascript

Ici encore, comme il est d’usage dans notre page HTML, nous utiliserons le composant Lz, la méthode _callMethodSWF(), qui nous permet, comme son nom l’indique, d’appeler une méthode OpenLaszlo.

Pour illustrer son fonctionnement, nous créerons un bouton dans la page HTML qui exécutera une procédure de notre appli OL en lui passant le nouveau texte à afficher.

Le code de notre bouton HTML sera le suivant :

  1.  <input type="button" onclick="Lz._callMethodSWF('test(machin)')" value="set machin"></input>

et voilà le code de notre appli OpenLaszlo :

  1.  <canvas debug="true">
  2.      <method name="test" args="txt">
  3.          letext.setText(txt)
  4.      </method>   
  5.     
  6.      <text id="letext">rien</text>
  7.  </canvas>

Le code est très simple, lorsque la méthode test() est appelée, le texte est modifié avec la valeur passée en argument.

7 Conclusion

En combinant ces techniques, il est possible d’intégrer parfaitement une application OpenLaszlo dans une page HTML avec l’avantage de pouvoir bénéficier de la puissance et des capacités graphiques du moteur flash. Les 2 technologies se combinant parfaitement on n’est plus obligé de choisir de n’utiliser que Flash ou qu’HTML.

Je n’irais pas plus loin dans les possibilités d’interaction avec le navigateur, car les classes LzBrowser et Lz fourmillent de possibilités, de plus il est aussi possible de gérer le bouton « retours » du navigateur, mais ce sera probablement le sujet d’un autre article.