Over a million developers have joined DZone.

My Story on ZK


Weeks ago I had a chance to play around with ZK Framework. I went to its website here and happily found out that it has eclipse plugin which they call ZK Studio. I don't know about you, but for me, eclipse plugin is very important as I work all the time using eclipse. So I  downloaded it, and put it in my Helios (at this time of writing there is no ZK Studio for Indigo yet), and tried to run a Hello World project on Tomcat. Everything worked perfect even though the ZK Studio is shipped with the evaluation copy of ZK EE (which I replaced with the CE version; but still get the evaluation warning on existing project; not a new one created after replacement).

To start digging at ZK's features I need tutorials, documents, or any how-to. Fortunately, documentation on ZK is quite complete. The website provides live demo too. The live demo is as good as SmartGWT and Vaadin provide and it also contains the source code.

Some questions come up when trying a new framework, questions like how to bind the view layer and controller, can we create our own already-exist-theme?, bla bla bla. Unlike SmartGWT and Vaadin which inherit GWT, it uses zul - an XML formatted document - to hold its views. I like the way it binds the zul page and Composer through component's id just like Tapestry 3.x did (last Tapestry version I used). All you have to do is giving the component an id that has the same name with a variable (with the same type too) in the Composer.

<textbox id="textUserName">
private Textbox textUserName;

Theme was also a big question on a framework that has its own collection of theme. Fortunately replacing default ZK's CSS is easy. There are some approaches explained on their documentation, but I like a way that we can override ZK's CSS class with our own. The following CSS will replace your ZK default button style:

.z-button-os {
	color: white;
	cursor: pointer;
	cursor: hand;
	font: bold verdana;
	border: 1px solid #006;
    background: #9370DB;

Another requirement for my project was to mix html and ZK. There are some approaches too on their documentation but I prefer giving a prefix on the tag as shown below:

	<n:table xmlns:n="native" width="100%">
			<n:td><n:image src="images/banner.png" width="100%" height="60"/></n:td>
					<columns sizable="true">
						<column width="30%" valign="top"><include src="menu.zul"/></column>
						<column valign="top">
						            <tab label="User Management"/>
						                <include src="userForm.zul"/>
		<n:tr xmlns:n="native">
				<n:image src="images/footer.png" width="100%" height="30"/>
And it supports Spring, jFreeChart, and Jasper too if you happen to create a report-centric application like I did.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}