Embedding Flash into ZK applications.
Bernd Will, Project Leader for OpenPavilion
June 5, 2008
Applicable to ZK 3.0.5 and later
installation
ZK is an excellent server-centric framework for createing AJAX applications. To incorporate film snippets or animated movies into ZK application, Adobe Flash can be used to enhance ZK’s power. This article will guide you through how to integrate ZK with Flash. First of all, you need to install ZK and the zk flash components. And then, unzip the attached “instruments.zip” file into the {TOMCAT}\ZKFLASH\instruments folder. You can see the folder structure as following:
The example of Flash instrument in pure HTML
Now, we simply open the HTML page http://localhost:8080/zkflash/instruments/Glas.html to understand how HTML and Flash collaborate:
Look into the HTML file source; the section “…” is responsible for loading the flash movie.
...
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100" height="135" id="Glas"
align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Glas.swf?currentValue=33&min=0&lo=10&li=20&hi=50&ho=90&
max=100" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="Glas.swf?currentValue=33&min=0&lo=10&li=20&hi=80&ho=90&max=100" quality="
high" bgcolor="#ffffff" width="100" height="135" name="Glas" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
...
When opening the HTML file, the flash file “Glas.swf” is loaded and its parameters are passed to the flash movie (currentValue, min, lo, li, hi, ho, max). This is how ZK communicates with
Flash – by passing parameters using the URL syntax.
The Flash instrument in ZK source
Now we open the same application, but written in ZK http://localhost:8080/zkflash/instruments/ZKGlas.zul :
The most obvious difference is the complicity of the source code. By ZK, you achieve the same functionality as Html tags with much less lines of code. Since ZK generates and encodes HTML tags automcatically, use the encoded “&” instead of “&”.
<?xml version="1.0" encoding="utf-8"?>
<hbox>
<flash id="myInstrument" src="Glas.swf?currentValue=33&min=0&
amp;lo=10&li=20&hi=80&ho=90&max=100"
width="128" height="128" />
</hbox>
Interactive Flash in ZK pages
Now we come to the final question: How can we change the values of the flash movie programmatically? The solution is simple: Create some event handlers in ZK and change the URL of the Flash movie component ! Open the page http://localhost:8080/zkflash/instruments/ZKGlasInteractive.zul and move the slider to change the charge of the glass:
<?xml version="1.0" encoding="utf-8"?>
<window id="window" title="ZK Flash Instrument" style="width:100%"
border="normal">
<zscript>
int instrumentValue=0; int instrumentMax = 100; String
showGlasBorder="false";
public void changeValue(aValue) { instrumentValue = aValue;
slider.setCurpos( instrumentValue ); drawGlas(); } public void
setInstrumentBorder() { showGlasBorder=
(instrumentCheckbox.isChecked()).toString(); drawGlas(); }
public drawGlas() { String url =
"Glas.swf?currentValue="+instrumentValue+"&border="+showGlasBorder+"&
min=0&lo=10&li=20&hi=80&ho=90&max=100";
myInstrument.src = url; }
void zoom(Slider slider) { changeValue( event.getPos() ); }
</zscript>
<hbox>
<flash id="myInstrument"
src="Glas.swf?currentValue=0&min=0&lo=10&li=20&hi=80&ho=90&
amp;max=100"
width="128" height="128" />
</hbox>
<vbox>
<label value="Fill glas:" />
<slider id="slider" onScroll="zoom(slider)" />
<checkbox id="instrumentCheckbox" label="Show Borders on Glas"
onCheck="setInstrumentBorder()" />
</vbox>
</window>
Investigating the source, there are some important aspects to note:
- All event handlers have been written in the ZSCRIPT section
- The function “drawGlas” creates the new URL by joining the URL string and setting the SRC attribute of the flash movie
- The SRC-attribute in the ZK flash component section is relevant to create the initial view with reasonable data (such as startValue, maxValue, minValue etc.)
The Flash Movie component
Now finally we are drilling down the Flash movie to understand how the variables are being passed and consumed. First of all, I have used Flash Macromedia 8 (Actionscript2, Flash Player 8 export) to create that example. It also would work with AS3 and Flash Player 9 or 10. Inside the Flash movie, you need to create an Actionscript routine on stage level to consume the variables being passed over by the HTML page.
- Move to the root movieclip level in your Flash Movie
- Make sure that you enter the Actionscript code on root level
- The variable names in your Flash Movie must be syntactically identical to the variable names being passed in the URL (e.g. min = min, max=max, currentValue = currentValue etc.) Don’t forget to cast the variables in your Actionscript source to INTEGER or BOOLEAN, because all variables being passed using the URL syntax are string variables !
More examples
To demonstrate some more options of flash integration, you can check http://localhost:8080/zkflash/instruments/ZKFlash.zul.
The “Widget” components presented here are flash movie components written in Actionscript classes. Its details aren’t important here. In this tutorial, we concentrate on the transfer of data from ZK to the Flash Movie itself. ( If you want to research the components in detail feel free to check the OpenSource project http://www.openpavilion.org )
Download
About Author
Bernd Will is the project leader of OpenPavilion project. OpenPaviliion is is a free surveillance suite made for observing, monitoring and benchmarking your applications and networks. He lives in Germany, Bavaria. He is a senior project manager at "Siemens Industry" sector. Also, he is a father of two daughters. Triathlon races are what he likes to do at the weekends
Following is the short interview with him:
- How did u start openPavilion project?
- The idea about OpenPavilion was born, since no user friendly business process and application dashboard was available on the market; the idea of OpenPavilion is to create a framework for modeling easy dashboards for technical and business applications
- Where did you first hear ZK?
- I first heard of ZK by surfing through Wikipedia; ZK was presented as an "alternative" to Struts, JSF, OpenLaszlo, Flex and all the other AJAX and RIA tools out there, so I was curious
| Copyright © Bernd Will. This article is licensed under GNU Free Documentation License. |