Les 2 approches Objet

La
programmation orientée objet avec OpenLaszlo peut se concevoir sous 2
aspects. Le premier la création d’application LPS avec la syntaxe XML+ JavaScript et la seconde, entièrement JavaScript.
La deuxième méthode, plus complexe et moins « lisible » que la première
est pourtant très efficace lorsque l’on a besoin d’intégrer un objet
OpenLaszlo dans une procédure.

Pour l’exemple, je crée une fenêtre qui contiendra un carré rouge contenant le texte “HELLO”.
Un évènement Onclick est associé au carré rouge qui déclenchera une translation vers la droite de celui-ci.

Voilà tout d’abord la version XML+ JavaScript

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <canvas proxied="false">
  3. <window width="200" height="200">
  4. <view x="50" y="50" bgcolor="0xff0000" width="100" height="100">
  5. <method event="onclick">
  6. anim.doStart();
  7. </method>
  8. <animator name="anim" attribute="x" to="100" duration="200" start="false"/>
  9. <text>HELLO</text>
  10. </view>
  11. </window>
  12. </canvas>

Rien de compliqué dans ce code, un évènement est déclaré lors du
click sur le carré rouge qui déclenche la méthode “doStart()” de
l’objet animator “anim”.
l’objet animator est paramétré pour effectuer une animation de 100 pixels sur l’axe des X en 200 millisecondes.

Pour la création de la même application JavaScript uniquement, tout
se passe dans le canevas qui appellera une méthode à sont
initialisation (oninit).
Pour utiliser les fenêtres dans les scriptes, il est nécessaire d’intégrer la librairie “lz/window.lzx“.
Vous trouverez la liste des composants qui nécessitent l’ajout d’une librairie externe dans le fichier ” WEB-INF/lps/misc/lzx-autoincludes.properties“.

script JavaScript

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <canvas proxied="false" debug="true" oninit="creation()">
  3. <include href="lz/window.lzx"/>
  4. <method name="creation">
  1. // création de la fênetre
  2. var fenetre = new window(canvas, {width:200, height:200});
  4. // création du carré rouge
  5. var carre = new LzView(fenetre, {x:50, y:50, bgcolor:"0xff0000", width:100, height:100, clickable:true});
  7. // création de l'animation
  8. var anim = new LzAnimator( carre, {attribute:"x", to:100, duration:200, start:false} );
  10. // création de l'évenement onclick
  11. var Del_OnClick = new LzDelegate(anim, "doStart", carre, "onclick");
  13. // création du texte
  14. var text = new LzText(carre, {text:"HELLO"});
  1. </method>
  2. </canvas>

Ce code mérite quelques précisions, tout d’abord sur la création des objets.

La syntaxe pour la création d’objet est la suivante: var id = new class( contexte, {paramètre1:valeur, paramètre2:valeur,…});.

Pour résumer sans rentrer dans les détailles de la POO (Programmation Orienté Objet), on crée un objet à qui on attribuera un id,
cela nous permettra d’utiliser l’objet en passant par son id
(id.fonction(), id.width=100, ….), il est possible de créer un objet
sans id (le système en attribut alors un par défaut) et lui donner un
nom en paramètre, cependant il est plus laborieux d’utiliser cette
méthode, car on sera obligé d’appeler cet objet avec le chemin complet
qui mène à lui (canvas.nom.fonction(), canvas.nom.width=100,…).

Cette objet est créer à partir d’une classe (un moule, pour la
fenêtre c’est un ensemble de composants de base LZX et d’éléments
graphiques pour dessiner le contour, les ombres…) déjà programmée, on
bénéficie alors de toutes les possibilités offertes par la classe
(fenêtre redimensionnable, titre positionné en haut à gauche,…).

Le contexte est celui dans lequel l’objet sera créé (son parent), pour la fenêtre, ce sera “canvas“,
car la fenêtre sera dans le canevas de l’application OpenLaszlo. La
fenêtre sera alors fille du canevas de l’application. Dans l’exemple
précédent, cela revient à créer un composant entre les balises d’un
autre (&lt;canvas&gt;&lt;window/&gt;&lt;/canvas&gt;).

Il est ensuite possible de passer des paramètres pour préciser les
informations de construction de notre objet, ici la largeur et hauteur
de la fenêtre, la couleur de fond du carré ou sa position en X et Y.

Le carré est ensuite dessiné en prenant comme contexte, la fenêtre. Vous noterez que j’ai ajouté le paramètre “clickable:true“, pour le définir explicitement comme clickable.

L’animation sur la fenêtre sera un objet nommé anim qui est basé sur la classe LzAnimator. Le contexte est le carré (c’est lui que l’on va animer) et la syntaxe des paramètres est la même que dans l’exemple XML.

La création de l’évènement OnClick est assez spéciale, en
OpenLaszlo, un événement est rattaché à un composant appelé Delegate,
qui fait le lien entre une fonction et un évènement. Si l’évènement est
déjà déclaré dans la classe de l’objet (c’est le cas avec « onclick »)
il n’est pas nécessaire de la recréer et il suffit de créer un lien
entre l’action (le click sur le carré) et la conséquence ( on démarre
l’animation en exécutant la fonction doStart de l’objet anim). Si
l’évènement n’existe pas, il est possible de le créer avec la classe LzEvent (voir la doc).

Il est impératif de créer les composants qui interagissent avec le Delegate (carrée et animation) avant de créer celui-ci.

La création d’un texte se fait ensuite simplement en utilisant l’objet LzText dans le contexte carre.

Pour retrouver la liste des classes LPS vous pouvez vous référer au manuel de référence LZX, onglet Classes.

Il est intéressant de noter que le fichier flash généré par le 2eme
exemple est plus lourd que le premier (97Ko pour le premier et 187Ko
pour le second). Je n’ai pas vraiment d’explication sur ce qui en est
la cause si ce n’est peut-être l’ajout du fichier window.lzx.