Developing an OpenLaszlo App
by Sreekumar Parameswaran Pillai | Pages: 1, 2, 3, 4

Code Walk-through

addressbook.lzx

The include statements compile these two classes into the main file. They have been put in separate .lzx files for the sake of readability.

<include href="contactdetails.lzx" />
<include href="newcontact.lzx" />
<include href="datasets.lzx" />

The onclick() event handler hides the phonelist and the contactallinfo views and brings the Add New Contact screen to visibility.

<text x="10" text="Add a New Contact" fontstyle="bold" bgcolor="#F2F2F2">
<handler name="onclick">
messagetext.setText("");
if(phonelist.visible){phonelist.setVisible(false);}
if(contactallinfo.visible){contactallinfo.setVisible(false);}
newperson.setVisible(true);
newperson.resetForm();
newperson.title.setAttribute('text','New Contact');
</handler>
</text>

The onclick() event handler hides the other views and calls the listAllContacts() method.

<text x="10" text="List all contacts in the book" fontstyle="bold" bgcolor="#F2F2F2">
<method event="onclick">
messagetext.setText("");
if(newperson.visible){newperson.setVisible(false);}
parent.parent.listAllContacts();
contactallinfo.setVisible(false);
phonelist.setVisible(true);
</method>

</text>

The grid component in OpenLaszlo lists the data in an XML path in a table format. The component also allows for sorting from the frontend on any of the columns listed.

<grid id="contactsgrid" width="570" height="140" datapath="listcontactsDS:/addressbook" >
<gridcolumn width="40"  >No
<text x="5" datapath="position()"/>
</gridcolumn>
<gridcolumn width="100"> First Name
<text datapath="firstname/text()"/>
</gridcolumn>
<gridcolumn width="120" sortable="true"> Last Name
<text datapath="lastname/text()"/>
</gridcolumn>
<gridcolumn width="100" sortable="false"> Phone
<text datapath="phone/text()"/>
</gridcolumn>
<gridcolumn width="200" sortable="false"> Email Id
<text datapath="@email" onmouseover="setAttribute('fgcolor',red)"
onmouseout="setAttribute('fgcolor',black)">

The ondblclick() event is handled from the text that shows the email ID of a person. On the double-click event, the getContactdetailsMore() method will be called passing in the text value of this component, which is nothing but the email ID. The following is the process:

1. The email ID that is the primary key to the contact information is passed to the web application that is currently represented by the JSP.
2. The JSP returns the detailed information of a contact as a single person node.
3. The path of the contactallinfo window is set to the new path that holds the detailed information on the above contact. Thus, this window displays the detail information about a particular contact.

<handler name="ondblclick">
phonelist.setVisible(false);
contactallinfo.setVisible(true);
contactallinfo.getContactdetailsMore(this.text);
contactallinfo.setDatapath("contactdetailsDS:/addressbook/person");
contactallinfo.title.setAttribute('text','View/ Update contact details');
</handler>
</text>
</gridcolumn>
</grid>

The listAllContacts() method

1. Gets the reference to the listcontactsDS from the canvas
2. Creates an LzParam object, which allows us to add the parameters as name=value pairs as required for an HttpRequest.
3. The string action=getall is added to the LzParam object, which is associated with the dataset.
4. The HttpRequest is made by calling the doRequest() method on the LzParam object.

The HttpResponse from xmlfetcher.jsp will populate the listcontactsDS dataset with the entire list of contacts present currently in the database. Also:

1. The "getall" action returns only four pieces of information pertaining to the contacts in the database: first name, last name, telephone number, and the email address. This information should be sufficient in most cases.
2. By limiting the amount of data that is fetched during the initial listing, the response time can be made faster.
3. If the user requires additional information on a particular contact, it can be requested by double-clicking the email ID for the contact.

<method name="listAllContacts" >
var ds=canvas.datasets.listcontactsDS;
var p=new LzParam();
p.addValue("action","getall",true);
ds.setQueryString(p);
ds.doRequest();
</method>

This datapointer points to the result node in the listcontactsDS (dataset) and if there is any change in data of the dataset, the ondata() event will be triggered. If there is an exception or validation error in the application layer, the application (JSP) will put the exception message in this result node of this dataset. At the ondata() event, the datapointer checks for the value of its <result> node; if it is successful, it initiates the GUI update process. If the <result> is a failure, it prints an exception message for the user.

<datapointer xpath="listcontactsDS:/addressbook">
<method event="ondata">
if (this.xpathQuery("listcontactsDS:/addressbook/result[@action='exception']/text()") == "failure") {
messagetext.setText("There is an exception!");
}else{
messagetext.setText("");
}
</method>
</datapointer>

Contactdetails.lzx

The getContactdetailsMore() method gets the entire details on a person based on his email ID. This is loaded to the contactdetailsDS dataset. It is interesting to note the contents of the contactdetailsDS dataset at different stages. Because of the request for update, this dataset will contain detailed information on a contact. When an update is executed, this dataset will have the updated information and as soon as the action is complete, it will hold the exception or success messages. As you will see with the execution of the updateContact method, this dataset will only have information on the status of the update call to the xmlfetcher.jsp.

<method name="getContactdetailsMore" args="email_id " >
var ds=canvas.datasets.contactdetailsDS;
var p=new LzParam();
p.addValue("action","getcontactdetails",true);
p.addValue("emailid",email_id, true);
ds.setQueryString(p);
ds.doRequest();
</method>

The updateContact() method:

1. Caches the current data from the form fields to class attributes. This is required when the GUI needs to be updated based on the update status.
2. Persists the new information on a contact to the database.
3. The dataset contactdetailsDS has the entire details of one contact whose email was passed to the xmlfetcher.jsp.

At different stages, the content of this dataset also keeps on changing. With the execution of the updateContact method, this dataset will only have information on the status of the update call to the xmlfetcher.jsp.

<method name="updateContact">
setAttribute('emailid',hb_1.email_in.getText());
setAttribute('firstnm',hb_2.fname_in.getText());
setAttribute('lastnm',hb_2.lname_in.getText());
setAttribute('phonenmbr',hb_4.pnumber_in.getText());

var ds=canvas.datasets.contactdetailsDS;
var p=new LzParam();
p.addValue("action","updatecontact",true);
p.addValue("emailid",emailid, true);
p.addValue("firstname",firstnm,true);
p.addValue("lastname",lastnm,true);
p.addValue("phonenumber",phonenmbr,true);
p.addValue("housename",hb_3.hname_in.getText(),true);
p.addValue("streetname",hb_3.sname_in.getText(),true);
p.addValue("cityname",hb_4.cname_in.getText(),true);
ds.setQueryString(p);
ds.doRequest();
</method>

Pages: 1, 2, 3, 4

Next Page