Table of Contents
OpenLaszlo components are high level objects that implement common user-interface functions.
They range from relatively simple objects like <button>
to complex objects
like <form>
and <grid>
.
Sources for LZ components are here.
This chapter is a tutorial explains how components are used to create a simple survey tool.
The following short tutorial shows how the vacation survey application works. In this tutorial we show how various components
such as <radiobuttons>
and <radiogroup>
s nest inside the <form> component, and how these and other components can be bound to data to collect
and display survey results.
Please note that the methodology that we're using to explain how this application is constructed is not necessarily the best way to go about builing an application. It's simply a way of explaining how the application works from the inside out.
We begin constructing the questionaire at the heart of the survey:
Example 40.1. Survey Toolradiogroup
<canvas height="200" >
<view>
<radiogroup x="20" layout="class: simplelayout; axis: y; spacing:6" name="vote">
<radiobutton value="'hawaii'" selected="true">Hawaii</radiobutton>
<radiobutton value="'paris'">Paris</radiobutton>
<radiobutton value="'jamaica'">Jamaica</radiobutton>
<radiobutton value="'trenton'">Trenton</radiobutton>
</radiogroup>
</view>
</canvas>
As discussed above, the <form>
element provides a structure for grouping various related components.
By handling layout and common funtions, <form> allows you to concentrate on behavior. In the code below, we've
added a button and associated it with the form's submit().
Example 40.2. Survey Tool—Simple Form
<canvas height="200" >
<view>
<form name="myform" bgcolor="#c0c0c0" spacing="33">
<submit id="surveysubmit" />
<view height="20">
<text>What is your favorite vacation spot?</text>
</view>
<radiogroup x="20" layout="class: simplelayout; axis: y; spacing:6" name="vote">
<radiobutton value="'hawaii'" selected="true">Hawaii</radiobutton>
<radiobutton value="'paris'">Paris</radiobutton>
<radiobutton value="'jamaica'">Jamaica</radiobutton>
<radiobutton value="'trenton'">Trenton</radiobutton>
</radiogroup>
<button isdefault="true">Vote
<handler name="onclick">
surveysubmit.submit();
</handler>
</button>
</form>
</view>
</canvas>
As we've seen above, the submit() on the form causes user responses to be recorded.
Example 40.3. data model
<dataset name="surveydataset" type="http" src="http:survey.jsp"/>
<node id="resultdata">
<attribute name="hawaii" value="$path{'surveydataset:/response/summary/option[1]/text()'}"/>
<attribute name="paris" value="$path{'surveydataset:/response/summary/option[2]/text()'}"/>
<attribute name="jamaica" value="$path{'surveydataset:/response/summary/option[3]/text()'}"/>
<attribute name="total" value="$path{'surveydataset:/response/summary/@total'}"/>
<attribute name="vote" value="$path{'surveydataset:/response/vote/text()'}"/>
</node>
As explained above, sometimes you can create your own new component by subclassing, or "extending" an existing component.
Here
the <alert>
class is extended to create a new component called "myalert". It is trivially different
from the default <alert>; its only difference is that it centers nicely over the survey box.
Example 40.4. extending a component
<class extends="alert" name="myalert" x="${Math.max(survey.width - this.width, 0)/2}" y="${Math.max(survey.height - this.height, 0)/3}">
</class>