OpenLaszlo for HTML developers
From OpenLaszlo
Contents |
Hello World
HTML uses the <html> and <body> tags. Text can be wrapped in <p>, <div>, <span>, or left naked.
<html><body>Hello World!</body></html>
LZX uses the <canvas> tag. Text must be inside a <text> tag, or another tag that contains text (such as <inputtext> or <button>).
<canvas><text>Hello World!</text></canvas>
Syntax
LZX is XML. Tags in LZX are case-sensitive, and require close tags. This makes LZX more like XHTML than like HTML 4.0.
Case Sensitivity
Tags in LZX are case-sensitive.
HTML:
<button>one</button> <BUTTON>two</BUTTON> <Button>three</buTToN>
LZX (and HTML):
<button>one</button>
Close Tags
LZX tags require close tags, either like this: <view></view>, or this: <view />.
HTML:
<text>some<br>text</text>
LZX (and HTML):
<text>some<br />text</text>
Rendering
Images
HTML uses the <img> tag. In LZX, images are an attribute (source), not a tag; any LZX view can contain an image.
HTML:
<img src="image.jpg" />
LZX:
<view source="image.jpg" /> <image src="image.jpg" /> // OpenLaszlo 3.1+ only
Layout
HTML lays inline elements out horizontally, and block elements vertically (by default).
<p>one line</p> <p>another</p>
LZX only lays elements out if they're inside a view that contains a layout. These lines will display on top of each other:
<text>one line</text> <text>another</text>
But these won't, because they're inside a view that contains a layout:
<view> <simplelayout /> <text>one line</text> <text>another</text> </view>
and this means the same thing:
<view layout="axis: y"> <text>one line</text> <text>another</text> </view>
Text width
In HTML, elements resize to fit their contents.
In LZX, this is true of view elements, but not text. Text elements stay the size that they're created at, by default, even if the text changes later. To create a resizing text element, set the resize attribute to true.
HTML:
<div>Content that will change</div>
LZX:
<text resize="true">Content that will change</text>
Form Elements
TBD: list vs. combobox.
LZX also has some elements that aren't present in HTML, such as grid, tree, tabbed view, datepicker, and slider.
Scripting
Getting Elements by ID
In LZX, the id attribute automatically creates a global variable with that name.
HTML:
var myElement = document.getElementById('id')
LZX:
var myElement = id;
Handling Events
HTML:
// each of these calls myFunc() when element receives a click event
element.addEventListener("click", myFunc, captureFlag); // W3C DOM
element.attachEvent("onclick", myFunc); // IE5+
element.onclick = myFunc; // IE4+ NN3+
LZX:
var delegate = new LzDelegate(object, "myFunc"); delegate.register(element, "onclick"); // This calls object.myFunc(arg) when element receives a click event.
Both:
<button onclick="myFunc()" />
Javascript language differences
LZX Javascript doesn't support e.g. regular expressions. A complete list of differences can be found in the developer's guide.
W3 DOM
In general, the presentation elements in an LZX program (view, text, and other subclasses of LzNode) don't support the W3 DOM commands. The reference documentation lists the APIs that apply to LZX source and presentation elements.
Beyond HTML
"You can write FORTRAN in any language." You can write HTML in any language too. The sections above explain how to translate some HTML concepts and idioms to LZX, but if you write LZX as though it were HTML, you'll just be frustrated by how unlike HTML LZX is.
LZX has some very powerful features that don't have analogues in HTML. To get the most out of LZX, you will want to learn about data binding, constraints, datasets, states, user defined classes, and animation. Some avenues to do this are to read the reference, the guide (including the tutorials), and to look at the sample programs and demos, to see how they do what they do.
