Introducing OpenLaszlo 4

 in
Toward desktop-like rich Internet applications with OpenLaszlo 4.
Adding Interactivity

Although of interest, this list would be made more useful if a single click on the client name produced another window within the browser containing the rest of the client's data. Arranging for this behaviour is not difficult. The first thing we need to do is provide some visual feedback to our users as they select a client name from the first window. Add this code to the window's <text> element:


<handler name="onclick">
   client_info.datapath.setFromPointer( this.datapath );
</handler>

<handler name="onmouseover">
   this.setBGColor( 0xBBBBFF );
</handler>

<handler name="onmouseout">
   this.setBGColor( null );
</handler>

This snippet of LZX highlights OpenLaszlo's ability to embed JavaScript within XML elements. What this code instructs the browser to do is to set the data pointer for something called client_info to the currently selected datapath once users click a name on the list. It also changes the background color as users move their mouse over the client names, providing nice, desktop-like visual feedback. But, what's this client_info thing, and what does it refer to? It's another OpenLaszlo window defined with the following LZX code:


<window name="client_info" 
        x="300" y="100"
        width="300" height="200"
        title="Client Specifics">

  <datapath/>
    <text datapath="../address/text()"
          width="100%" 
          multiline="true" />
    <text datapath="../contact_tel_no/text()"
          fontsize="16"/>
    <text datapath="../email_address/text()"
          fontsize="14"/>
    <simplelayout/>

</window>

This window has its own name and title values, as well as x, y, width and height values that position it initially to the right of the client listing window. It also has a datapath tag, together with three text elements that reference (using an appropriate XPath specification) the other data elements within our database table. We've specified that the address uses the entire width of the client_info window and can word wrap, while the other two pieces of data are displayed in differently set font sizes. When this LZX application (called clients2.lzx) is loaded into the browser, the client list appears in the original window, and as each client name is clicked, the second window refreshes to display the address, telephone number and e-mail address of the currently selected client. If you are following along, note how the user receives visual feedback as each client name is clicked. Figure 4 shows an example, with one client name highlighted (clicked) and the associated details appearing in the second window.

Figure 4. Displaying Specific Details for a Selected Client

Adding Animation

Let's finish this example with a bit of fun by adding some LZX animation effects to our OpenLaszlo application. Specifically, whenever users click on a client name in the first window, in addition to refreshing the data, we want the second window to roll up (shrink), pause, and then roll back down again (grow). To make this work, we need to wrap the onclick handler code with calls to our animators:


<handler name="onclick">
  client_info.winShrink.doStart();
  client_info.datapath.setFromPointer( this.datapath );
  client_info.winGrow.doStart();
</handler>

Specifying animation with LZX involves writing XML. Here's the shrinking and growing LZX code for this application (which I've called client3.lzx). This code is added to the second window's XML:


<animatorgroup name="winShrink" 
               start="false" 
               duration="0">
    <animator attribute="height" to="50"/>
    <animator attribute="height" to="50"/>
</animatorgroup>

<animatorgroup name="winGrow" 
               start="false" 
               duration="200">
    <animator attribute="height" to="200"/>
    <animator attribute="height" to="200"/>
</animatorgroup>

I define two animatorgroups and give each of them a name. Note how the animatorgroup name is referenced within the onclick handler, above. Within each animatorgroup, I provide some timing data (duration) and new attribute values for the height of the window. When the window shrinks, the height drops to 50 pixels. When the window grows, the height rises to 200 pixels. When combined, the visual effect is that of the window rolling up, pausing, then rolling back down to display the updated client details. Unfortunately, I can't show this in a screenshot, so you'll have to try it to see the effect in action (or take my word for it). The main point, of course, is that the visual effect has been realised without writing code, per se. All I did was define the behaviour I wanted in LZX.

______________________

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState