OpenLaszlo for HTML developers
HTML uses the <html> and <body> tags. Text can be wrapped in <p>, <div>, <span>, or left naked.
LZX uses the <canvas> tag. Text must be inside a <text> tag, or another tag that contains text (such as <inputtext> or <button>).
LZX is XML. Tags in LZX are case-sensitive, and require close tags. This makes LZX more like XHTML than like HTML 4.0.
Tags in LZX are case-sensitive.
<button>one</button> <BUTTON>two</BUTTON> <Button>three</buTToN>
LZX (and HTML):
LZX tags require close tags, either like this: <view></view>, or this: <view />.
LZX (and HTML):
HTML uses the <img> tag. In LZX, images are an attribute (source), not a tag; any LZX view can contain an image.
<img src="image.jpg" />
<view source="image.jpg" /> <image src="image.jpg" /> // OpenLaszlo 3.1+ only
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>
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.
<div>Content that will change</div>
<text resize="true">Content that will change</text>
TBD: list vs. combobox.
LZX also has some elements that aren't present in HTML, such as grid, tree, tabbed view, datepicker, and slider.
Getting Elements by ID
In LZX, the id attribute automatically creates a global variable with that name.
var myElement = document.getElementById('id')
var myElement = id;
// 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+
var delegate = new LzDelegate(object, "myFunc"); delegate.register(element, "onclick"); // This calls object.myFunc(arg) when element receives a click event.
<button onclick="myFunc()" />
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.
"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.