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 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 acquainted 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 abbreviated 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="100%" 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.text;
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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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. Components example-tags only
<canvas height="100" width="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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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" width="100%">
<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 lz.button();
b.setAttribute("width", 50);
b.setAttribute("height", 50);
</script>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
In the example below, the onclick method procedurally adds an item to
the <list > component.
Example 6.4. Component APIs
<canvas height="150" width="100%">
<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.text);
</handler>
</button>
</view>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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" width="100%">
<dataset name="mydata" src="resources/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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->