Table of Contents
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:
Example 5.1. Empty Canvas
<canvas width="100%" height="100" bgcolor="green">
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007-2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.
Example 5.2. Simple_window
<canvas width="100%" height="100">
<window/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007-2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
Example 5.3. Specifying window size
<canvas width="100%" height="300">
<window x="20" y="20" width="200" height="250"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.
Example 5.4. Window Title
<canvas width="100%" height="350">
<window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.
Example 5.5. Window Text
<canvas width="100%" height="350">
<window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
<text>Here is some text.</text>
</window>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
Example 5.6. Overlapping text fields
<canvas width="100%" height="350">
<window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
<text>Here is some text.</text>
<text>I could ramble for hours.</text>
</window>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
Example 5.7. Manually positioning text
<canvas width="100%" height="250">
<window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
<text x="10" y="10">Here is some text.</text>
<text x="10" y="50">I could ramble for hours.</text>
</window>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
Example 5.8. Simplelayout
<canvas width="100%" height="350">
<window x="20" y="20" width="200" height="250" title="Simple Window" resizable="true">
<simplelayout axis="y" spacing="10"/>
<text>Here is some text.</text>
<text>I could ramble for hours.</text>
</window>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.