Introducing OpenLaszlo 4
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>
<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.
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.
|Using Salt Stack and Vagrant for Drupal Development||May 20, 2013|
|Making Linux and Android Get Along (It's Not as Hard as It Sounds)||May 16, 2013|
|Drupal Is a Framework: Why Everyone Needs to Understand This||May 15, 2013|
|Home, My Backup Data Center||May 13, 2013|
|Non-Linux FOSS: Seashore||May 10, 2013|
|Trying to Tame the Tablet||May 08, 2013|
- Using Salt Stack and Vagrant for Drupal Development
- Making Linux and Android Get Along (It's Not as Hard as It Sounds)
- New Products
- Validate an E-Mail Address with PHP, the Right Way
- Drupal Is a Framework: Why Everyone Needs to Understand This
- A Topic for Discussion - Open Source Feature-Richness?
- The Pari Package On Linux
- Home, My Backup Data Center
- New Products
- Developer Poll
- This is the easiest tutorial
4 hours 5 min ago
- Ahh, the Koolaid.
9 hours 44 min ago
- git-annex assistant
15 hours 44 min ago
- direct cable connection
16 hours 6 min ago
- Agreed on AirDroid. With my
16 hours 16 min ago
- I just learned this
16 hours 21 min ago
16 hours 51 min ago
- not living upto the mobile revolution
19 hours 42 min ago
- Deceptive Advertising and
20 hours 17 min ago
- Let\'s declare that you have
20 hours 18 min ago
Enter to Win an Adafruit Prototyping Pi Plate Kit for Raspberry Pi
It's Raspberry Pi month at Linux Journal. Each week in May, Adafruit will be giving away a Pi-related prize to a lucky, randomly drawn LJ reader. Winners will be announced weekly.
Fill out the fields below to enter to win this week's prize-- a Prototyping Pi Plate Kit for Raspberry Pi.
Congratulations to our winners so far:
- 5-8-13, Pi Starter Pack: Jack Davis
- 5-15-13, Pi Model B 512MB RAM: Patrick Dunn
- Next winner announced on 5-21-13!
Free Webinar: Linux Backup and Recovery
Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.
In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.