Le code source d'une application OpenLaszlo est un ensemble de fichiers XML et d'éléments multimédia (tels que des images, du son et des polices de caractères). Chaque application a un "The source code to an OpenLaszlo application is a set of XML files, and media asset files (such as image, sound, and font files). Each application has a fichier canvas", qui est un fichier XML contenant la balise <canvas>.

Par convention, les fichires LZX se terminent avec l'extension By convention, LZX files end with the extension .lzx. Chaque fichier LZX est un fichier XML, donc si votre éditeur a un mode XML, configurez-le pour travailler avec les fichiers LZX.

La balise fermante de toute application OpenLaszlo est la balise The enclosing tag of every OpenLaszlo application is the <canvas>. La toile (canvas) est une vue (comme tous les autres éléments affichables à l'écran) mais il possède quelques propriétés particulières. Par exemple, des ressources ne peuvent être associées directement à la balise canvas.

Voici un fichier lzx simple :

Dans cet exemple simple, nous avons défini la couleur d'arrière plan à vert pour mettre en évidence la zone. Si vous ne spécifiez pas de couleur pour la balise canvas, elle sera blanche par défaut. (A travers le reste de ce tutoriel aucune couleur d'arrière plan ne sera définie pour la toile). Maintenant, ajoutons une fenêtre sur la toile blanche.

Remarquez le format de la balise XML vide <window>.

En utilisant les attributs de la fenêtre, paramétrons-la un peu. Comme dans HTML, les balises Laszlo peuvent avoir des attributs :

Dans ces exemples simples, toutes les mesures sont en pixels. (Le In these simple examples, all measurements are in pixels. (A later Chapitre 23, Vues explique comment on peut changer les unités de mesure dans les situations plus compliquées).

Remarquez comment la fenêtre est maintenant placée de façon absolue par rapport au coin supérieur gauche de votre navigateur. 

Nous avons maintenant une fenêtre qui possède un titre et peut être redimensionnée. 

Remarquez comment nous avons sauté des lignes pour garder le code lisible. 

Plaçons quelque chose dans cette fenêtre.

Nous avons placé dans l'élément We've given the <window> un élément fils (text), qui contient le texte que nous voulons afficher.

Remarquez que le texte est placé dans le coin supérieur gauche.

Supposons que nous voulions ajouter une nouvelle ligne de texte. Nous pourrions ajouter une autre balise text, comme dans l'exemple ci-dessous :

Zut! Les deux champs texte se superposent. C'est parce que la position par défaut pour placer des éléments est le coin supérieur gauche. Pour corriger ceci, nous pourrions positionner les deux éléments text de façon absolue, comme dans la fenêtre suivante :

Remarquez que le texte est maintenant positionné de façon relative par rapport à la balise mère Notice how the text is now positioned relative to its parent element, the <window>.

Cela fonctionne correctement et s'avère très pratique pour positionner des éléments dans tout l'espace. Mais cela n'est pas très joli comparé à des éléments qui glissent les uns par rapport aux autres. 

OpenLaszlo fournit une solution pour cela :

Maintenant, le premier champ texte est positionné en fonction du second. La balise Now the first text field is positioned relative to the second. The <simplelayout> dit à OpenLaszlo que tout ce que contient cette vue (dans ce cas la fenêtre tag tells OpenLaszlo that everything in that view (in this case the <window>) sera positionné de façon relative entre eux, et l'attribut Here, the axis property makes everything align vertically, and the spacing définit l'espace entre les éléments.

Mais qu'est-ce qu'on appelle une vue ? Pour plus d'informations là-dessus, rendez-vous dans le tutoriel "Introduction aux vues'".