Rochmat has posted 2 posts at DZone. View Full User Profile

My Story on ZK

12.15.2011
| 3035 views |
  • submit to reddit

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:

<zk>
	<n:table xmlns:n="native" width="100%">
		<n:tr>
			<n:td><n:image src="images/banner.png" width="100%" height="60"/></n:td>
		</n:tr>
		<n:tr>
			<n:td>
				<grid>
					<columns sizable="true">
						<column width="30%" valign="top"><include src="menu.zul"/></column>
						<column valign="top">
							<tabbox>
						        <tabs>
						            <tab label="User Management"/>
						        </tabs>
						        <tabpanels>
						            <tabpanel>
						                <include src="userForm.zul"/>
						            </tabpanel>
						        </tabpanels>
						    </tabbox>
						</column>
					</columns>
				</grid>
			</n:td>
		</n:tr>
		<n:tr xmlns:n="native">
			<n:td>
				<n:image src="images/footer.png" width="100%" height="30"/>
			</n:td>
		</n:tr>
	</n:table>
</zk>
And it supports Spring, jFreeChart, and Jasper too if you happen to create a report-centric application like I did.
0
Average: 5 (2 votes)
Published at DZone with permission of its author, Rochmat Santoso.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Andy Jefferson replied on Sun, 2011/12/18 - 9:18am

Posted under "Announcements" when is clearly an opinion, hence "Article". No editor at Javalobby these days?

Simon Massey replied on Tue, 2011/12/20 - 3:41am


One thing which ZK is really leading the way on is the use of the MVVM pattern (aka Model-View-Binder). They have had great support for MVP (Model-View-Presenter) and also a strong "Desktop MVC" (Model-View-Controller) for a long while. ZK is an open source framework which is really bringing some new things to the table.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.