by November 2, 2007 0 comments



With the advent of Web 2.0, the Web browser has become a platform for
delivering business applications to users and we have ably matched the
functionalities that only thick client software could exhibit.

The benefits of delivering applications over the Web rather than distributing
them as stand-alone desktop applications are aplenty, but for that we need to
write complex client-side JavaScripts.

Ajax technology, as part of Web 2.0, came as a boon to developers to create
dynamic and responsive interfaces, but writing JavaScripts was still an
overhead. The answer to this problem comes as ZK, which is an Open Source Ajax
framework that allows Java Web developers to create rich Web applications, quite
easily.

Direct Hit!
Applies To:
Web developers
USP: Create rich user interfaces for your
applications
Primary Link:
http://www.zkoss
.
org/download/
Keywords: ZK Ajax framework
PCQ Extreme DVD: system/

ZK framework
ZK’s Ajax engine consists of both client and server side components that
communicate with each other. The framework uses JavaScript but the complexity to
implement an Ajax framework has been concealed from the Web developers. ZK has
two sets of interface components, one is based on XUL (XML User interface
Language) and other is based on XUML (XML User interface Markup Language). The
framework has been explained earlier in the March ’07 issue of PCQuest.

In this article, we will see how to develop a Web application, using ZK
framework and how it can be integrated with business logic.

ZK in action
On this month’s PCQ Extreme DVD, we have provided the RC 3 release of the ZK
framework. We will be using Eclipse as IDE and Tomcat 5.5 as the Web server.

Create a new Web project, using Eclipse and name it as ZKdemo. Extract the
zk-bin-3.0.0-RC.zip archive at ZK_DIR. Now, copy the “z*” jar files from ZK_DIR/
dist/lib folder to your application’s WEB-INF/lib folder. You would also be
required to import bsh.jar from ZK_DIR/ dist/lib/ext folder to your
application’s WEB-INF/lob folder. You can also import commons-io.jar, if your
application would be using them to upload files.

We now have to register the ZK framework engine with our Web application. The
ZK engine has servlets for ZK-based pages and also to handle client-server
communications. By inserting the following code snippet into the web.xml file,
we can register the loader that evaluates ZK-based pages and also do the mapping
of .zul and .zhtml pages to the servlet.

ZK jars required by application
are placed in WEB-INF/lib folder


zkLoader
org.zkoss.zk.ui.http.DhtmlLayoutServlet
update-uri /zkau
1


zkLoader
*.zul


zkLoader
*.zhtml

As Ajax does asynchronous communication between client and server, we need to
register the asynchronous update engine for ZK , by inserting following code
snippet into web.xml of our Web app.


auEngine
org.zkoss.zk.au.http.DhtmlUpdateServlet


auEngine
/zkau/*

Now, we can head start with creating our ZUML pages for our app. Create a new
file in the ZKdemo folder and name it as hello.zul. Adding the following code
snippet will make our first page. The first line sets the title for the browser
window, while the code after that creates a window titled ‘Hello’ within the
HTML page.



Hello ZK Demo Page!!!

To test our application, build and place the war file in Tomcat’s webapps
directory. Start the Tomcat server (considering that your server’s listening
port is 8080) and go to http:// localhost:8080/ ZKdemo/hello. zul.

If all is well, that is if we’ve successfully registered the ZK Ajax engine
in web.xml and imported all necessary jar files required by the framework, then
we will see the Hello message on our browser.




Business logic integration
Let’s move ahead and bring some interaction between our interface and the
backend. Say, we have to display a list of cities to our users for selection and
we populate that through a database. We will create a Java Bean named City.java
to represent the city name.

public class City
{
private String _cityName;
public City(String cityName)
{_cityName = cityName;}
public String getCityName()
{ return _cityName; }
public void setCityName(String name)
{ _cityName = name; }
}

Now, we will create a manager for City that will do Add and List operations
for the City instance and name it as CityManager.java.

public class CityManager
{
private List<City> _cities = new LinkedList<City>();
public List<City> listCities() { return _cities; }
public void addCity(City city) { _cities.add(city); }
}

In this script, we will use a POJO retrieved by a “Manager” object, which
will fetch and display the list. If we were supposed to use JavaScript, that
process would have been a bit complex to fetch the list as Java Collection
object and iterating on that to produce the list. But with ZK, we have a
‘forEach’ attribute to do the iterations on the Cities and display that list.

The following code snippet does this task. Here we have hard-coded the city
names into the City object by using the addCity() method of the manager, but in
real application scenarios, the object would be returning the cities list from a
database table.

<window>
<zscript>
import City;
import CityManager;
manager=new CityManager(); manager.addCity(new City("Calcutta"));
manager.addCity(new City("Mumbai")); manager.addCity(new City("New Delhi"));
manager.addCity(new City("Raipur"));
cities = manager.listCities();
</zscript>
Select a City: <listbox mold="select">
<listitem forEach="${cities}" label="${each.cityName}" value="${each}"/>
</listbox>
</window>

Tab1 shows the city list as a
result of the script code we created

The script for ZK is enclosed between <zscript> tags. In the DVD, along with
the ZK binary, you’ll see that we’ve placed this script in a tabbed window. The
final page layout has some examples displayed up from the demo code that ZK
provides. Also it is advisable to download the developers guide from the site as
a handy reference to ZK framework.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

Your data will be safe!Your e-mail address will not be published. Also other data will not be shared with third person.