Table of Contents
OpenLaszlo components are high-level objects that implement common user-interface functions.
They range from relatively simple objects such as <button>
to complex objects
such as <form>
and <grid>
.
Components that are written by Laszlo Systems, Inc., and supplied with the OpenLaszlo Server are called LZ components.
This tutorial introduction is intended to show you the variety of OpenLaszlo components and demonstrate how to use their basic features. Later chapters explain how to use advanced features of components and how to create your own components.
The simplest way to build an OpenLaszlo application is to use LZ components "out of the box" with their default behaviors. This chapter includes a few such examples. It also includes a few examples that use concepts that have not yet been introduced. Don't worry if you don't understand exactly how they work. The idea here is to get aquainted with the general "feel" of an OpenLaszlo application that is built mostly from components. The subsequent tutorials present the concepts you'll need in order to create your own applications.
Before reading this chapter about how to use components to build an OpenLaszlo application, you should take a few moments to get familiar with the range of components that ship with OpenLaszlo.
The example below shows a miscellaneous collection of components. It's an abreviated version of the sampler in the OpenLaszlo Explorer, which contains a visual tour of all the components. The code that implements these components may look a little intimidating if you have not worked with this kind of language before, but don't be put off. In fact you may not even want to look at the code yet. Your goal here is to start thinking about the kinds of things you can do in an OpenLaszlo application, and components provide your quickest route to productivity.
The LZX Reference documents all the tags, attributes and methods associated with each component.
Example 6.1. Components miscellany
<canvas width="800" height="500">
<silverstyle name="silvercolors"/>
<greenstyle name="greencolors"/>
<bluestyle name="bluecolors"/>
<view id="s1" x="20" y="20">
<view layout="spacing:20">
<text>Choose a style to change colors...</text>
<view name="stylechooser" layout="axis:x; spacing:4">
<text>Style:</text>
<combobox width="120" editable="false">
<handler name="onselect">
var colorchoice = this.getText();
canvas[colorchoice+'colors'].setAttribute("isdefault", true);
</handler>
<textlistitem text="silver"/>
<textlistitem text="green"/>
<textlistitem text="blue" selected="true"/>
</combobox>
</view>
<tabslider width="250" height="200">
<tabelement text="holiday cheer" selected="true">
<radiogroup>
<radiobutton text="peace on earth"/>
<radiobutton text="joy to the world"/>
<radiobutton text="happy new year"/>
</radiogroup>
</tabelement>
<tabelement text="housewares">
<simplelayout axis="y" spacing="10"/>
<checkbox text="stainless steel"/>
<checkbox text="glassware"/>
</tabelement>
<tabelement text="isotope">
<text multiline="true" width="${immediateparent.width}">
Atoms that have the same number of protons but a different number of neutrons. They are atoms of the same element that have different masses. The isotope number is the number of protons plus the number of neutrons.
</text>
</tabelement>
</tabslider>
<tabs>
<tabpane>Insecticides
<simplelayout spacing="10" inset="10"/>
<radiogroup>
<radiobutton>Yes, I want to know more</radiobutton>
<radiobutton>No, I prefer to remain blissfully unaware</radiobutton>
<radiobutton>Please tell my neighbor, who may tell me</radiobutton>
</radiogroup>
</tabpane>
<tabpane text="Subliminal">
<button height="22">Submit</button>
</tabpane>
</tabs>
</view>
<window text="test window" width="250" height="250" x="410" y="180" resizable="true" id="fw" title="A Simple Window">
<menubar name="mbar" placement="menubar">
<menu name="file" id="mfile" width="80">File
<menuitem text="item 1"/>
<menuseparator/>
<menuitem id="MWS" text="item 3">
<menu name="subedit">subedit
<menuitem text="subitem 1"/>
<menuitem text="subitem 2"/>
</menu>
</menuitem>
</menu>
<menu name="Options">Document
<menuitem text="option 1"/>
<menuitem text="option 2"/>
</menu>
</menubar>
<scrollbar/>
</window>
<view layout="spacing:14">
<button height="22">Submit</button>
<button height="22" enabled="false">disabled</button>
<combobox width="100">
<textlistitem text="pistachio" selected="true"/>
<textlistitem text="chocolate chip"/>
</combobox>
<radiogroup>
<radiobutton text="tension"/>
<radiobutton text="distance"/>
</radiogroup>
</view>
<view layout="spacing:20">
<view layout="spacing:10">
<checkbox text="I want to take a weekend flight"/>
<checkbox text="Also search airports within 70 miles"/>
</view>
<view layout="spacing:5">
<edittext width="200" text="text entry here"/>
<edittext width="200" text="disabled" enabled="false"/>
</view>
</view>
<simplelayout axis="x" spacing="20"/>
</view>
</canvas>
You will
notice that the OpenLaszlo Explorer groups components into "form components" and "general components." This is merely a
heuristic grouping of those components that usually appear within a <form>
tag and those
that don't. There is no essential difference; for example, the <button> tag can be contained in a
<view>
or <window>
— it does not have to be contained in a <form>.
Depending on your background in building web applications, you may be inclined to use the <form> in place of the HTML <form> tag. This is often a mistake; OpenLaszlo applications are based on a different interaction model
than HTML-based applications and overuse of the <form> tag results in LZX programs that fail to exploit OpenLaszlo's range
of options.
The <form> tag is, generally speaking, not a widely used tag in LZX applications. It is intended to be used in situations in which the
client-server interaction is simple, and there is a 1:1 mapping between the returned server data and the form elements. When
the server interaction is more complicated, more advanced databinding techniques should be used, as explained in later chapters.
In this section we'll explore the various ways to use components in OpenLaszlo applications:
-
using tags
-
using script APIs
-
using databinding
As mentioned above, the concepts of scripting and databinding are presented in later chapters. Don't worry if you're not completely comfortable with these topics.
The simplest way to use the components is in an application that has tags only—no script. The following trivial example shows what this looks like.
Example 6.2. Componentes example-tags only
<canvas height="100">
<simplelayout axis="x" spacing="10" inset="10"/>
<list shownitems="4">
<textlistitem>judy</textlistitem>
<textlistitem>ann</textlistitem>
<textlistitem>betsy</textlistitem>
<textlistitem>sarah</textlistitem>
<textlistitem>carol</textlistitem>
<textlistitem>danah</textlistitem>
</list>
<radiogroup>
<radiobutton text="apple"/>
<radiobutton text="cherry"/>
<radiobutton text="key lime"/>
</radiogroup>
</canvas>
As a practical matter, you will usually need to use some script, whether in a method, or, less
frequently, to create a component within a <script>
element.
In addition to declaring components in tags, you can create and manipulate components from script.
The following example shows how you can create buttons using tags and script.
Example 6.3. Creating components from script
<canvas height="150">
<simplelayout/>
<!--Here is a button created with a tag -->
<button name="framitz" width="50">
hello
</button>
<script>
//And here is a button created with using script
var b = new button();
b.setAttribute("width", 50);
b.setAttribute("height", 50);
</script>
</canvas>
In the example below,
the onclick method procedurally adds an item to the <list >
component.
Example 6.4. Component APIs
<canvas height="150">
<simplelayout spacing="10"/>
<list id="mylist" height="82">
<textlistitem text="something"/>
</list>
<view layout="axis:x;spacing:4" >
<edittext id="item" text="new item"/>
<button text="Add" isdefault="true">
<handler name="onclick">
mylist.addItem(item.getText());
</handler>
</button>
</view>
</canvas>
A third way to create components is through databinding. In the example below, a new component textlistitem is created
for each matching node in the "mydata" dataset.
Example 6.5. Data-Driven Components
<canvas height="200">
<dataset name="mydata" src="../contacts.xml" request="true"/>
<simplelayout axis="x" spacing="10" inset="10"/>
<list id="a">
<textlistitem datapath="mydata:/contacts/person"
text="$path{'@firstname'}"/>
</list>
<list id="b" shownitems="4">
<textlistitem datapath="mydata:/contacts/person"
text="$path{'@firstname'}"/>
</list>
</canvas>