ZkApplet

Author
David Chen, Engineer, Potix Corporation

Date
October 14, 2008

Version
ZK 3.6.0

Introduction

Before ZK Applet component is released, developer has to use html tag and javascript in ZUL files to insert or invoke their java applet.
Now, by using ZK Applet Component, ZK developers will be away from this kind of mass.

In this small talk, I will introduce how to add a common java applet ticker effect into ZK application by using ZK Applet component.
User not only could set applet params, and invoke applet method as they have done before, but also can control their applet in Server side easily by supported invoke and setField method.

Live Demo

<zk>
<hbox>
	<applet code="ticker.class" msg="ZK is Simple and Rich!" id="ticker"
		width="400px" style="border: 1px" />
	<listbox width="200px">
		<attribute name="onSelect">
		<![CDATA[			 
			Map params = ticker.getParams();
			params.put("msg",self.getSelectedItem().getLabel());
			ticker.setParams(params);
		]]>
		</attribute>
		<listgroup>
			<listcell label="Simple and Rich!" />
		</listgroup>
		<listitem>
			<listcell label="Rich Ajax Component" />
		</listitem>
		<listitem>
			<listcell label="Xml Style Layout" />
		</listitem>
		<listgroup>
			<listcell label="Better Ajax Framework" />
		</listgroup>
		<listitem>
			<listcell label="Rich User Experience" />
		</listitem>
		<listitem>
			<listcell label="Open Source" />
		</listitem>
	</listbox>
</hbox>
<hbox>
	<toolbarbutton label="Stop" onClick='ticker.invoke("stop");' />
	<toolbarbutton label="Start" onClick='ticker.invoke("start");' />
	<textbox id="textbox" value="ZK Applet is Great" />
	<toolbarbutton label="Change Message"
		onClick='ticker.setField("message", textbox.value);' />
</hbox>
</zk>

In the above example, the default params "msg" are setted as "ZK is Simple are Rich" by dynamic properties.
When onSelect event is triggered by clicking, the java code within the attribute closure tag will be executed to modify the init parmas of applet and restart it automatically.
On the other hand, "change message" button change applet's public field directly.
So the message shown will be changed without restarting applet. In addition, the "Stop", "Start" buttons invoke applet's public method.
Developers do not have to write any javascript for this kind of purpose.

ZK Applet Component

How to embed an applet class into a ZUL file by ZK Applet component

...
<applet code="APPLET/ticker.class" height="320" width="620"></applet>
...

By the code sample, inserting a ZK applet into ZUL file is straight forward. It works the same as original object-embed tag, but neater and simpler.

ZK applet attribute / method specification table:

Attribute:

Attribute	Usage
code	Specifies the applet (*.class) of the applet to be loaded.
name	Specifies the name attribute of the applet to be loaded.

Method:

Method	Usage
Map getParams()	Get Params Map, it will effect the initialize variable of applet.
void setParams(Map params)	Set Params Map, it will effect the initialize variable of applet.
void invoke(String function) void invoke(String function, String[] argument)	Invoke public method of Applet
void setField(String field, String value)	Set public field of Applet

How to initialize applet in ZK.

Usually Applet have many params to initialize (<params>). User could use getParams() and setParams() methods to change the initial variable of Applet. In this case, Applet will change their params and restart itself automaticlly.

...
Map params = ticker.getParams();
params.put("msg","ZK is Simple and Rich!");
ticker.setParams(params);
...

or, You can use dynamic properities supported by ZK Applet to make it simple and easy.

...
<applet code="ticker.class" msg="ZK is Simple and Rich!" />
..

How to invoke applet method in ZK.

Another common usage is trying to invoke public method or change field value of the applet. This kinds of tasks usually need working with client side javascript before.
By invoke and setField method supported by ZK Applet component, It can be done easily on server side (of course JAVA).

...
// invoke stop / start method of applet
<toolbarbutton label="Stop" onClick='ticker.invoke("stop");' /> 
<toolbarbutton label="Start" onClick='ticker.invoke("start");' />
// set message attribute of applet
<toolbarbutton label="Set Message" onClick='ticker.setField("message", "ZK Applet Component is great!!");' />
...

Download

• applet-demo.zip

Conclusion

ZK developers can show applet directly by using Applet component now. Set the applet source and parameters as same as what you do with html tag, then the component can show it easily.
And you can also control your applet in Server side. If you have any question, please feel free to leave comment here or post to ZK forum.

Notice: setField() constraints

The public field in applet can be accessed by Javascript like document.applets[0].fieldName... so cannot use fieldname conflict with applet html element default tags like id/code/codebase/style

Copyright © David Chen. This article is licensed under GNU Free Documentation License.