ZK vs. Ajax JSF Components: Simplicity Matters!

1. Abstract

From the previous article¡X ZK vs. GWT, the importance and advantages of server centric architecture were discussed and outlined. By server-centric approach, developers simply do the programming on the server side using Java. There will be no replication of business logic on client, no hassles of asynchronous programming, and no hazards of exposing business logic on client.

There are more and more Ajax frameworks adapt this architecture like ZK, Backbase, Richface and so on. In this article, ZK will be compared with one of Ajax JSF components sets-ICEfaces.

2. Innovation vs. Refinement

ZK - Innovation:

ZK is an open-source Ajax framework which enables Java developers to create rich Web applications with little programming. With the server-centric architecture and event-driven model, developing Web applications becomes as intuitive as programming desktops. With 170+ Ajax components and mark-up language, designing rich user interfaces becomes as simple as authoring HTML pages. Without declaring each managebean in configuration, ZK provides more flexiable and dynamic mechanism to achieve data accessing, annotation-databinding and variable-resolver. In recent releases of ZK, developers can even bind Java Bean into an Ajax spreadsheet application. This technical breakthrough will bring a new age to web applications developing.

To Know more how ZK works as a server-centric framework, refer to the following:

• More ZK Documentation

Also, for migrating page-based JSF to Ajax JSF, ZK offer its own JSF components set. Refer to:

• ZK JSF Components 2.0 Released

ICEfaces - Refinement:

ICEfaces is a components set for JSF. More than 50 Ajax components for JSF are supported by ICEfaces. As ICESoft mentions in the ICEfaces document, Icefaces framework is only an extension of standard JSF. It is still a traditional page-based architecture. The key difference is that ICEfaces only render the incremental changes in the rendering phrase rather than the standard JSF approach¡Xrender all DOM tree. From this point, ICEfaces's Ajax Bridge, which is a mechanism to communicate between client and server side will modify the DOM tree in client side asynchronously. As a result, the ICEfaces application still needs going through the standard JSF lifecycle.

3. ZK vs. ICEfaces in Action : Google Maps Locator

In the following section a simple Google Maps Locator application will be implemented by ZK and ICEfaces in order to demonstrate the difference between the frameworks. Assuming that you are coding a Google Maps Locator for a client, the requirements might contain:

1. An UI with a text input field, a button and a Google map.
2. When user clicks the button the text in the textbox will be used as a keyword to find the latitude, longitude and description for that location.
3. Displaying the location on the Google Map and display the description as an Info Window.

Let us assume you have already implemented a magical Java class which is called "Locator." It will take a string as input and return the required information. The only work left is implementing the UI and data retrieval parts. Let's see code from both frameworks in real action.

ZK (1 File, 36 Lines of Code)

Gmap.zul:

<?xml version="1.0" encoding="utf-8"?>
<zk> 
 <script src="http://maps.google.com/maps?file=api&v=2&key=KEY"
 type="text/javascript">
 </script>
 <zscript>
 import com.macroselfian.gps.Locator;
 public void locate(){
 String location = tb.getValue();
 double[] pos = Locator.locate(location);
 mymap.panTo(pos[0], pos[1]);
 mymap.setZoom(16); 
 ginfo.setOpen(true);
 ginfo.setLat(pos[0]);
 ginfo.setLng(pos[1]);
 ginfo.setContent(Locator.getInfo(location));
 mymap.openInfo(ginfo); 
 }
 </zscript>
 <window>
 <div align="center">
 <separator spacing="50px" />
 <vbox>
 <label value="Macroselfian Google Map Locator"/>
 <hbox width="600px">
 <textbox width="550px" id="tb"/>
 <button width="50px" onClick="locate();" label="Search"/>
 </hbox>
 <gmaps id="mymap" zoom="16" ...>
 <ginfo id="ginfo"/>
 </gmaps>
 </vbox>
 </div>
 </window>
</zk>

Adapting Direct RIA architecture, ZK is 100% event-driven model which decouples user interface from business logic. From code above, 3 advantages of Direct RIA architecture can be found.

First, developers directly access data without extra backing beans; this offers a more intuitive approach than JSF backing beans.

Second, no extra configuration for each component and controller. It gives developers more flexiblity than traditional page-based application.

Last, ZK offers the zscript element which allows developers script in Java directly on the zul file. By scripting in zscript, developrs directly manipulate components, EJB beans, Java Beans, or even the variables from JRuby interpreter, the interaction within components becomes a straight-forward task.

Icefaces (3 Files, 223 Lines of Code)

Jspx Page:

• gmap.jspx

Java Bean:

• LocatorBean.java

JSF Config File:

• faces-config.xml

Code Snippet:

gmap.jspx:

<f:view xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ice="http://www.icesoft.com/icefaces/component">
 <ice:outputDeclaration doctypeRoot="HTML"
 doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
 doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; /> <link href="xmlhttp/css/xp/xp.css" type="text/css" rel="stylesheet">
 <style>
 .iceGmp {
 
 }
 
 .iceGmpMapTd {
 vertical-align: top;
 }
 
 .iceGmpMapTd div.gmap {
 width: 800px;
 height: 600px;
 }
 </style>
 </link>
 </head>
 <body>
 <ice:form>
 <ice:outputConnectionStatus />
 <ice:inputText value="#{locator.location}" width="200px"
 partialSubmit="true" />
 <ice:commandButton type="submit" value="Submit" />
 <ice:gMap latitude="#{locator.lat}" longitude="#{locator.lng}"
 zoomLevel="16">
 <ice:gMapControl id="largectrl" name="GLargeMapControl" />
 <ice:gMapControl id="scalectrl" name="GScaleControl" />
 <ice:gMapControl id="typectrl" name="GMapTypeControl" />
 <ice:gMapMarker id="gmarker">
 <ice:gMapLatLng id="glatlng" latitude="#{locator.latMark}"
 longitude="#{locator.lngMark}" />
 </ice:gMapMarker>
 </ice:gMap>
 </ice:form>
 </body>
 </html>
</f:view>

LocatorBean.java:

package com.macroselfian.gps;

public class LocatorBean {
Locator _locator;
String _lng ="0.0";
String _lat ="0.0";
String _lngMark ="0.0";
String _latMark ="0.0";
String _title ="";
String _info ="";

public String getLocation() {
return _locator.getKey();
}

public void setLocation(String location) {
_locator = new Locator(location);
_lng = _locator.getLng()+"";
_lat = _locator.getLat()+"";
_lngMark = _locator.getLng()+"";
_latMark = _locator.getLat()+"";
_title = _locator.getTitle();
_info = _locator.getInfo();
}

public LocatorBean() {
setLocation("");
}

public String getLatMark(){
return _latMark;
}

public void setLatMark(String lat){
_latMark = lat;
}

public String getLngMark(){
return _lngMark;
}

public void setLngMark(String lng){
_lngMark = lng;
}

public String getLat(){
System.out.println("getLat"+_lat);
return _lat;
}

public void setLat(String lat){
System.out.println("setLat");
_lat = lat;
}

public String getLng(){
return _lng;
}

public void setLng(String lng){
_lng = lng;
}
public String getTitle() {
return _title;
}

public void setTitle(String title){
_title = title;
}

public String getInfo() {
return _info;
}

public void setInfo(String info){
_info = info;
}

} 

faces-config.xml:

<?xml version="1.0"?>

<!DOCTYPE faces-config PUBLIC
 "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
 "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
 ...
 <managed-bean>
 <managed-bean-name>locator</managed-bean-name>
 <managed-bean-class>com.macroselfian.gps.LocatorBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 <!-- -->
 <application>
 <locale-config>
 <default-locale>en</default-locale>
 </locale-config>
 </application>
 ...
</faces-config>

4. Mobile Solution

What about the devices without browsers?

ZK on Java Phones

Figure 3 - ZK on Java Phone

More articles about ZK Mobile

• Build Zk Mobile Twitter Application in 15 Minutes
• Google Calendar Service on ZK Mobile
• Simple and Reach - The ZK Mobile Computing

ZK on Google Adroid

More articles on ZK Android

• Extend your Web Application to Android - An Example of Google Calendar
• A Preview of ZK Mobile for Android
• Win Android $10 Million Developer Challenge by ZK Mobile for Android ;-)

5. Conclusion

Simplicity Matters!

Comparing to ZK, ICEfaces is more like a JSF components set than an Ajax framework. This tells that Ajax JSF componenets such as ICEfaces doesn't get rid of the JSF complicated lifecycle and configuration. For those who already are JSF experts, Ajax JSF solutions like Richfaces and ICEfaces might be painkiller for adding Ajax to projects. But, for whose get tired of JSF and look for a new Ajax solution suffer from the difficulty of customizing component and its complicated configuration.

From above, one can conclude that comparing to JSF, ZK is much easier to learn by its intuitive programming style. I believe in that JSF is a well-defined standard. But, it is designed for the time when people design application by "page-based" pattern. When Ajax emerges and becomes the must-have, probably it is time to consider about the next generation web application frameworks. Ajax is simple, but people insist making it complicated.