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 which 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 <radiobutton>
and <radiogroup>
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 building an application. It's simply a way of explaining how the application works from the inside out.
We begin constructing the questionnaire at the heart of the survey:
Example 41.1. Survey tool radiogroup
<canvas width="100%" 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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
As discussed above, the <form>
element provides a structure for grouping various related components.
By handling layout and common functions, <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 41.2. Survey tool simple form
<canvas width="100%" 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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
As we've seen above, the submit() on the form causes user responses to be recorded.
Example 41.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>
Note the <submit>
tag in the example (just below the <form> tag.)
<submit id="surveysubmit" dataset="${surveydataset}"/>
The function of this tag is to associate the form with the dataset. Later, when the submit() is invoked,
the data will be sent to the server.
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 41.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>