ZK.. the next best thing

I read about ZK in Matt Raible blog. This is one of the site i frequently read for new information about Java world other than theserverside.
So after taking a small look in their site, i decide to try it. I download the zk-bin-3.0.0-RC.zip package and ZK-devguide-3.0.0-RC.pdf yesterday and try it this morning.
I create a new project using eclipse, add source folder, create web content,WEB-INF and classes folder. For the web.xml, i use the example on the tutorial page.

<!-- ZK -->
<listener>
<description>Used to clean up when a session is destroyed</description>
<display-name>ZK Session Cleaner</display-name>
<listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
</listener>

<servlet>
<description>ZK loader for ZUML pages</description>
<servlet-name>zkLoader</servlet-name>
<servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
<init-param>
<param-name>update-uri</param-name>
<param-value>/zkau</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.zul</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>zkLoader</servlet-name>
<url-pattern>*.zhtml</url-pattern>
</servlet-mapping>

<servlet>
<description>The asynchronous update engine for ZK</description>
<servlet-name>auEngine</servlet-name>
<servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>auEngine</servlet-name>
<url-pattern>/zkau/*</url-pattern>
</servlet-mapping>

I create todo.zul file as my web page in web content and fill it with code from the developer guide.

<window title=”To do list” width=”640px” border=”normal”>
<grid width=”500px” height=”100px”>
<columns>
<column label=”Head 1″/>
<column label=”Head 2″ align=”center”/>
<column label=”Head 3″ align=”right”/>
</columns>
<rows>
<row>
<listbox mold=”select”>
<listitem label=”Faster”/>
<listitem label=”Fast”/>
<listitem label=”Average”/>
</listbox>
<datebox/>
<textbox rows=”2″/>
</row>
<row>
<checkbox checked=”true” label=”Option 1″/>
<checkbox label=”Option 2″/>
<radiogroup>
<radio label=”Apple”/>
<radio label=”Orange” checked=”true”/>
<radio label=”Lemon”/>
</radiogroup>
</row>
<row>
<checkbox checked=”true” label=”Option 1″/>
<checkbox label=”Option 2″/>
<radiogroup orient=”vertical”>
<radio label=”Apple”/>
<radio label=”Orange” checked=”true”/>
<radio label=”Lemon”/>
</radiogroup>
</row>
</rows>
</grid>
</window>

I start the jetty server and try run it..and the result is great.. I like it.
It’s fast.. and we don’t have to restart the web server if we change the page.
I add a chart sample below the grid,

<chart id=”mychart” type=”pie” width=”400″ height=”200″ threeD=”true” fgAlpha=”128″>
<zscript><![CDATA[
PieModel model = new SimplePieModel();
model.setValue("C/C++", new
Double(17.5));
model.setValue("PHP", new Double(32.5));
model.setValue("Java", new Double(43.2));
model.setValue("VB", new Double(10.0));
mychart.setModel(model);
mychart.setTitle("Chart in ZK");
]]></zscript>
</chart>

Refresh the browser..and it’s there..
The scrollable grid and a pie chart

And i’m thinking maybe this can be my other tool option other than tapestry.
Looking forward to explore this great framework.

Powered by ScribeFire.

---

Possibly related posts: (automatically generated)

• Using CSS to Style Radiobuttons and Checkboxes for Safari and Chrome
• FriendFeed
• Free Music For All