Let's finish this example WiLh a bit of fun by adding some LZX animation effects to our Open Laszlo 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 liP (shrink), pause, and Lhen roll back down again (grow). To make this work, we need to wrap the onclick handler code with calls to our animaLors:
c 1 ieri+- _ ",rlfu inShr Ink. doStarl () ;
client_info.darapatt .. setFromP01Elter( this.datapath );
Specifying animation with LZX involves writing XML.
Here's the shrinking and growing LZX code for this application (which I've called client3Izx). This code is added to the second window's XML:
<a.nimator atr.ribute:.o"hei.ght" to::::"5U"/> <anlinator a::.tribule:::."height" tc=="50" /> <I.n .mator gro~p>
<anlrMlOr at t:" ibute=-"heiqh r.o="2JO" /> <animator att:ribute="height" to:"200" I> <I animatorgroup>
I def1ne 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 La 200 pixels. When combined, the visual effect is thaL 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 Lry 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 def1ne the behaviour I wanted in LZX.



Reply With Quote
Bookmarks