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 canvas file, which is an XML file that contains the <canvas> tag.

By convention, LZX files end with the extension .lzx. Every LZX file is an XML file, so if your editor has an XML mode, set it to that for working with LZX files.

The enclosing tag of every OpenLaszlo application is the <canvas> tag. The canvas is a view (like every other displayable object on the screen) but it has some special properties. For instance, resources can't be attached directly to the canvas.

Here is a simple lzx file:

For this simple example we have set the background color to green, just to show that it's there. If you don't set a background color for the canvas, it will be rendered white. (Throughout the rest of this tutorial no background color will be specified for the canvas.) Now let's put a window on a white canvas.

Note the XML empty tag format we're using: <window> .

Using the attributes of that window, let's customize it a bit. Just as in HTML, LZX tags can have attributes:

In these simple examples, all measurements are in pixels. (A later Chapter 26, Views explains how units of measurement may vary in more complicated situations.)

Notice how the window is now absolutely positioned relative to the top-left corner of the canvas.

Now we've got a window, which both has a title, and can be resized.

Notice how we're breaking the code up across lines to keep it neat.

Let's stick something in that window.

We've given the <window> element a child (text), which contains the text we want written out.

Notice how the text gets put in the top-left hand corner.

Suppose we want to add another line of text? Why not just add another text tag, below the existing one:

Eugh! The two text fields are sitting on top of each other. That's because the default place to put content is in the top-left hand corner. To correct this, we could position both text elements absolutely, as we did with the window:

Notice how the text is now positioned relative to its parent element, the <window>.

This worked great, and is extremely useful for positioning elements all over the place. But it's not very elegant when you think about the way elements flow relative to each other.

OpenLaszlo provides a solution to this:

Now the first text field is positioned relative to the second. The <simplelayout> tag tells OpenLaszlo that everything in that view (in this case the <window>) will be positioned relative to its siblings. Here, the axis property makes everything align vertically, and the spacing specifies how far apart the elements should be.