Pour exécuter votre programme, chargez-le simplement dans votre navigateur. L'URL exacte dépend de la configuration de votre serveur, mais devrait ressembler à quelque chose comme :

http://localhost:8080/lps-3.2/chemin vers votre répertoire

Le Serveur OpenLaszlo vérifie la syntaxe des fichiers source, les compile, met en cache les exécutables et rend l'application immédiatement visible dans le navigateur :

Le compilateur séparé est appelé lzc. Il se situe dans le dossier $LPS_HOME/WEB-INF/lps/server/bin/lzc.

Voici les paramètres de compilation disponibles :

Options:

Options de sortie :

Options de Log :

A l'intérieur des applications LZX, vous pouvez inclure un nombre indéfini de fonctions JavaScript en les plaçant dans la balise <script>. C'est très utile pour définir des fonctions (globales) qui seront utilisées par différentes classes. La balise <script> doit être une balise fille de <canvas>. C'est à dire que,

<canvas>
  <script>
    var Constant = 1;
  </script> 
</canvas>

est autorisé alors que

<canvas> 
  <view> 
    <script> 
      var Constant = 1;
    </script> 
  </view> 
</canvas>

Interdit ! La balise <script> n'est pas autorisée à l'intérieur d'une vue !

est interdit.

Avec LZX, l'attribut id d'un objet est un identifiant global qui est visible depuis l'ensemble du programme, tandis que name est un attribut comme un autre, l'objet devant alors être appelé en utilisant le chemin complet (avec une exception pour les noeuds fils de canvas, comme précisé ci-dessous). Considérons :

<canvas> 
  <view id="v1" name="outer_view"> 
    <view id="v2" name="inner_view" bgcolor="blue"/> 
  </view> 
</canvas>

La valeur de la couleur de fond de la vue externe peut être référencée par v1.bgcolor ou outer_view.bgcolor. La couleur de fond de la vue interne peut être référencée par v2.bgcolor de n'importe où dans l'application. Pour utiliser le nom pour la référencer en dehors de inner_view il faut indiquer outer_view.inside_view.bgcolor.

Les objets qui sont des noeuds fils de canvas peuvent être appelés simplement. Par exemple, dans :

<canvas>
  <view name="artichoke">
  <!-- on peut rajouter du code -->
</canvas>

La vue artichoke peut être référencée de n'importe où dans l'application en tant que artichoke. C'est à dire qu'il n'est pas nécessaire de la référencer comme canvas.artichoke.

Une vue est seulement visible si elle a une couleur, du texte ou une image associée, et si la hauteur et la largeur de la vue sont supérieurs à zéro. Par exemple, le code suivant n'affiche qu'une vue, même si trois vues sont définies. La seconde et la troisième vue existent mais sont complètement invisibles. La seconde n'a pas de couleur et la troisième a une largeur de zéro. Par contre, elle affectent toujours l'arrangement des autres.

Exemple 4.8. vues visibles ou invisibles

<canvas height="100"> <!-- affiche un carré rouge --> <view width="50" height="50" bgcolor="red"/> <!-- rien n'est affiché, mais la vue existe quand même--> <view width="50" height="50"/> <!-- rien n'est affiché, mais la vue existe quand même --> <view width="0" height="50" bgcolor="blue"/> </canvas>

Des vues peuvent aussi contenir d'autres vues, ce qui vous permet de créer des effets visuels complexes. Chaque vue 'mère' peut avoir un nombre indéfini de filles. Par défaut, chaque vue fille est positionnée relativement au coin supérieur gauche de sa vue mère.

Bien qu'il soit toujours possible de positionner la valeur horizontale (x) et verticale (y) de l'origine en pixels, relativement à sa mère, il est souvent plus simple de laisser le système positionner les éléments pour vous. Différents types de gestionnaires de mise en page (layouts) sont inclus par défaut dans le système : <simplelayout>, <stableborderlayout>, <constantlayout>, <resizelayout> et <wrappinglayout>.

Soit l'applications suivante :

Exemple 4.9. Dimensions des parents et enfants

<canvas height="200"> <view bgcolor="red" x="50" y="50" width="100" height="100"> <view bgcolor="yellow" x="50" y="50" width="60" height="105"/> </view> </canvas>

En faisant fonctionner l'exemple ci-dessus, on voit que la largeur et la hauteur d'une vue peuvent être différentes de la zone entourant les vues filles. Aucun découpage ne s'est effectué pour la vue "jaune" (yellow), même si elle sort de la zone définie par sa mère. 

Si aucune largeur ou hauteur n'est spécifiée pour une vue, alors elle prendra pour valeur de largeur et hauteur celles de la zone entourant les vues filles. Si un découpage est souhaité, alors l'attribut clip="true" peut être ajouté au parent, ce qui donnerait ceci :

Example 4.10. clipping

<canvas height="200"> <view bgcolor="red" x="50" y="50" width="100" height="100" clip="true"> <view bgcolor="yellow" x="50" y="50" width="60" height="105"/> </view> </canvas>

En plus d'afficher du texte et des couleurs, les vues peuvent être utilisées pour afficher ou jouer des médias dans différents formats tels que .gif, .jpeg, .png, .swf et .mp3 par exemple. Ces ressources peuvent être compilées dans l'application ou importées pendant l'exécution; elles peuvent être sur le serveur OpenLaszlo ou sur un serveur distant, et peuvent être référencées en utilisant des chemins relatifs ou des ids absolus.

Cette balise vous permet de spécifier le nom d'un fichier à inclure à n'importe quel endroit de votre application. Le fichier à inclure peut être une bibliothèque, une vue ou du texte. 

Quand la cible est un fichier bibliothèque (un fichier XML dont le noeud racine est <library>), le contenu du fichier bibliothèque est inclus dans l'application. Tout le contenu tel que les vues, scripts, polices de caractères, ressources, fichiers sons, sources de données, groupes de données, définitions de classes, ... est inclus dans l'application. Un fichier bibliothèque peut aussi inclure d'autres bibliothèques, mais une bibliothèque est incluse dans l'application une seule fois, quel que soit le nombre de balises <include> la référençant. Par exemple,

<canvas> 
  <include href="library.lzx"/> 
  <mywindow/> 
</canvas> 

<library> 
  <class name="mywindow" extends"window" 
         title="Mon Titre"> 
    <button> Appuyez! </button> 
  </class> 
</library> 

La sémantique pour inclure des vues et du texte est analogue mais légèrement différente. Contrairement aux bibliothèques, à chaque fois que le fichier décrivant le texte ou la vue est inclus, il est ajouté.

Ils s'écrivent

<!--  commentaire -->

et peuvent apparaître entre (mais pas à l'intérieur) les balises XML. Le XML n'a pas de syntaxe particulière pour les lignes de commentaires, et ne permet pas de commentaires imbriqués. 

Souvent pendant le débogage, vous devrez commenter des sections de code. Comme il est interdit d'imbriquer des commentaires XML à l'intérieur de commentaires XML, cette technique ne fonctionne pas pour des zones déjà commentées de code LZX. Une bonne façon de contourner ce problème est d'utiliser les instructions d'exécution XML de la forme :

<?ignore

?>

Ainsi, pour commenter les vues bleue et verte ci-dessous,

Exemple 4.14. Commenter du code

<canvas height="100"> <simplelayout/> <!-- Voici une vue rouge --> <view bgcolor="red" width="100" height="20"/> <?ignore <!-- Voici une vue bleue --> <view bgcolor="blue" width="100" height="20"/> <!-- Voici une vue verte --> <view bgcolor="green" width="100" height="20"/> ?> <!-- Voici une vue jaune --> <view bgcolor="yellow" width="100" height="20"/> </canvas>

	Les lignes entre <?ignore et ?> sont ignorées
	Fin de la zone ignorée

Dans le script, les zones de commentaires sont de la forme

/* commentaire */

Les lignes de commentaires commencent par // et continuent jusqu'à la fin de la ligne :

// ligne de commentaire

<script> 
  /* les commentaires de script ressemblent à cela */ 
  some.method() // C'est un exemple de syntaxe de commentaire
  <!-- ERREUR!  ne pas inclure de commentaires XML dans le script ! --> 
</script>  // ERREUR! Ne pas inclure de commentaires script dans le XML !

Le Serveur OpenLaszlo contient un visualiseur de code que vous pouvez utiliser pour inspecter n'importe quel fichier XML du dossier lps, dont bien sûr les fichiers source .lzx. Quand il affiche les fichiers .lzx, le visualiseur colorise le code en fonction de la syntaxe, et donne une liste des références croisées telles que les classes, les bibliothèques et les éléments graphiques. Pour invoquer le visualiseur, taper dans un navigateur l'URL /lps-3.2/lps/utils/viewer/viewer.jsp en précisant le nom du fichier à visualiser avec le paramètre file=, comme dans l'exemple suivant :

http://localhost:8080/lps-3.2/lps/utils/lps/viewer.jsp?file=/my-apps/copy-of-hello.lzx