Recently we came across an Ajax framework called "zk", the most interesting point about this framework is the promise that developers would not have to deal with JavaScript when using zk. So we started a little evaluation and we were really impressed about this framework, that's the reason we decided to share the results of our development here in the infospace. Below you will find our "Drag & Shop" application, a web shop demo based on zk and some simple Java services. Source is avaliable below as well...

Framework concepts: the major concept behind the framework is an old one known from UI-frameworks pretty well: a meta definition of the UI is created based on XML (which results in a .zul file), the meta definition will be translated to html when the page is requested by the client. In case the request comes from a browser with a Gecko engine the server will return a .xul page instead of html.

In order to put some business logic to your application there is a simple, but genious concept to do so: Java code can be integrated directly when defining & designing the client part of your application! These Java snippets can be bound to components and events which then will trigger the execution of these snippets at runtime (the snippets are executed on the server, not on the client...). In other words: the nightmare of JavaScript coding used to put some simple functions to the client has come to an end, since this is done by the framework which simply triggers your Java Codet! Btw., developers familar with GWT will know a similar approach since GWT was one of the first frameworks offering Java coding for the client part of the application instead of coding JavaScript - but the GWT control libraries unfortunately are not half as powerful as the zk libraries...

We encourage you to have a detailed look into the zk architecture, the goal of this article is to give you the big picture, for details refer to zk directly.

Development: zk ships with a "lightweight" framework approach, basically the framework is a collection of several jars which need to be tied into your web application. The web.xml needs to be modified in order to forward the .zul requests to the corresponding java classes, but besides these two steps (tie in jars, modify web.xml) no further steps are required. We used eclipse as development environment, but a simple text editor would do as well. Unfortunately there is no WYSIWIG or layout editor for visual designing (now), that's one of the biggest disadvantages when designing zk user interfaces, as you need to do everything based on plain xml coding. A visual editor (Zero Kode) is available, but this editor does not realy behave intuitive, that's the reason we switched back to plain xml coding...

But once you are up to speed with coding, cutting and pasting the xml snippets the develoment of user interfaces is really easy. Since the html output (the "what you get" part) is always regenerated as soon as you access a .zul definition the development is pretty close to WYSIWIG.

UI components: zk contains a really large control library, of course all basic controls for UI development such as Button, Field, Grid, Tree etc. are part of this library. But the really great thing about zk is the way these controls can be combined: most of the controls can embed several other controls, which enables you for example to create a tree-grid-mix control which itself contains checkboxes, buttons etc.. The only limitation for these "control-cobis" is the fantasy and creativity of the developer, but usually you can manage a wide range of UI requirments based on these combinations.



Layout controls such as boxes or predefined layouts can be used to arrange the controls within your frontend, from an HTML developers point of view sizing of these layout containers sometimes can be tricky: combining absolute widths and heights with relative ones, for example using a 100% width control in order to shift others to the very left or very right does not really does not work within zk. We recommend to start with predefined zk layouts (BorderLayout, ColumnLayout) before you start creating custom layouts.

An overview of the zk controls can be found here.

Documentation: Documentation can be found on the zk page directly, and the documentation there is a really good starting point. But when you try to implement something which is not one of these "default" scenario it is sometimes a tricky task to find corresponding documentation. As the zk community grows constantly there is hope that this might change soon, but plan some time for googling in case you want to do something fancy based on zk.


Traps & Issues: The whole framework concept is pretty much "straight forward" and you should not have any difficulties to run your first demos. The first time we struggled was when using typed collections in the zk-Java code, this currently does not work. Also make sure to keep track on the Java imports in your .zul file: anything from the "Java-World" used there needs to be imported as you would import in a "normal" Java file as well.

Conclusion: zk really rocks! For a long time we did not evaluate a framework which enables you to create that big results in such a short time. The demo application has been created within one day...and well, we like what has been done there!
zk is framework which pushs Ajax development to the next level. dojo (btw., zk offers integration of 3rd party components such as dojo), scriptaculous & Co are far behind zk, since zk is not "GUI-only" the connection of server side logic is solved in an elegant and easy understandable way.
So if you are heading for a thin client solution we really recommend to have a look into this framework - it might prevent you from weeks of UI engineering, JavaScript debugging an servlet coding...


Our conclusion: a 100% open source solution for implementing cool Ajax apps! And now, get in touch with zk and try our Drag & Shop demo!