A Components-based application
出自OpenFace
Chapter 36. A Components-based application
Part VI. Examining Applications
Laszlo 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.
目录 |
Overview
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.
Building a Survey Tool
Starting with a radiogroup
We begin constructing the questionaire at the heart of the survey:
Example 36.1. Survey Toolradiogroup radiobutton不能直接使用
<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>
The Data Model
As we've seen above, the submit() on the form causes user responses to be recorded.
Example 36.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>
