Creating Rich Internet Applications with ZK 5


With ZK 5, developers only need to maintain a single file format to create attractive interfaces and Ajax-driven rich Internet applications.

By Carsten Zerbst and Nils Magnus

Juliana Maria Villalobos Espinosa, 123RF

Users love rich Internet applications (RIAs). Active content such as sortable lists, and niceties like drag and drop, immeasurably enrich the user experience. RIAs bring Internet applications a step closer to normal applications, while helping the user avoid installation overhead. But developers pay a price for this power: Ajax applications only work as a combination of components from various programming languages.

The page structure is built in HTML, with Cascading Style Sheets (CSS) added for good looks, JavaScript running in the browser, and finally, a programming language such as PHP or Java on the server side. As if this isn't enough, browsers interpret the details of HTML, CSS, and JavaScript in different ways. Developers who want to test an RIA app face considerably more maintenance overhead than programmers of normal desktop applications.

Toolkits such as ZK [1] offer an escape route from this dilemma. The library lets programmers develop RIAs as if they were normal desktop apps. No need to worry about distributing the application between the browser and server sides, and no need to worry about the details of HTML, JavaScript, and CSS. ZK takes care of event handling and offers several features for building websites from individual widgets and layouts.

Selection of Layouts

Elements such as border layouts, boxes, and tables are available for page design. The widget collection includes elements for simple labels or lists, as well as more complex components such as trees, charts, or Google Maps. The ZK demo page [2] provides an overview of the widgets (see Figure 1).

Figure 1: The ZK demo application gives examples of various components and layout options.

ZK is especially useful in the way it handles user input via the mouse or keyboard. For an Ajax application, the programmer has to develop client-side code in JavaScript and server-side code in a different language. In the worst case, the application logic is distributed over the two sides. ZK keeps the application logic where it belongs: on the server. Data transfer and interface refreshes are handled by ZK, and the developer needn't worry about them. Instead, programmers can focus on developing the application logic and binding an interface.


As you can see in Figure 2, a ZK application comprises four layers. The application code resides on the server; it generates the interface with ZK widgets and has the required event handling and application logic. Developers program interfaces in Java or in the ZK User Interface Markup Language (ZUML), an XML-based language based on Firefox's XUL [3]. The ZUML language defines the interface and handles selections, keyboard input, and other events. Programmers can either embed the application logic directly in the ZUML file or include it in separate Java classes. Additionally, ZK also supports other languages, such as JavaScript, Python, or Ruby.

Figure 2: The ZK libraries create browser-based applications from XML or Java descriptions.

In a fashion similar to Swing, the ZK server library follows the MVC principle (Model-View-Controller), focusing on the application view, drawing the interface, and forwarding events. This approach explains why there are no restrictions to the application logic and the underlying model. You can even integrate tried-and-trusted components such as Hibernate or JEE in this way. The ZK library resides between the application and the server. It uses the application for HTTP-based transport to the browser, and it forwards events from the browser to the application code.

This part of the ZK toolkit is written in Java and runs in a servlet container, such as Apache Tomcat [4], or on a JEE server, such as Glassfish [5]. These tools use HTTP to deliver the application to the browser, and the ZK client engine then uses JavaScript to build the website for the application. The client engine also forwards events from the browser to the server and updates the website.

First Choice

When building an application, the developer can just rely on the ZK API and leave the rest up to the library (Figure 3). Displayed on the left is a sortable lift of election districts. The sample data are based on the results of the 2009 German federal election for Hamburg. The application shows detailed information by district based on a selection on the right, and a breakdown of the vote percentages appears as a pie chart.

Figure 3: The demo application shows the election results for a voting district without querying the server. When a user makes a new selection, ZK recalculates the diagram view.

One File for All

The ZUML file in Listing 1 contains part of the application logic, the component layout, and the event handling. For demonstration purposes, the page layout uses several methods; real applications would restrict themselves to a selection. The rough layout with the title and data is defined in line 3, borderlayout, with its children north (line 8) and center (line 12). The code uses horizontal (hbox) and vertical boxes (vbox) for the center container layout with the list and form. The layout of the form is handled in line 42 with a table-style grid layout. Besides these three variants, ZK has more options, even including portal layouts with movable elements.

As of line 16, the code populates the list on the left. The ElectionResults2009 Java class loads the voting counts from a CSV file. The getDistricts() returns a list with a Java object per voting district.

The zscript container in line 16 groups the Java code for loading and runs on the server while the page is being constructed. The listbox container in line 25 describes the left selection widget on the interface. The application uses the model attribute to point to the list loaded previously as a data model and populates it with listitem containers, which each hold a district.

label elements like that in line 49 handle detailed representation of the district. The rightmost element uses the @{variable_name.attribute_name} syntax to bind a district name to a container. In this example, the district variable contains the object; the label contains the value of the voting_district attribute. Due to the selectedItem = "@{district}" definition in line 26, ZK updates the variable whenever the user makes a selection in the listbox. This keeps the details displayed onscreen up to date.

Listing 1: demo.zuml
001 <?xml version="1.0" encoding="UTF-8"?>
002 <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
003 <borderlayout  xmlns:xsi=''
004                xmlns=''
005                xsi:schemaLocation=' file:/home/cz/Projekte/LinuxMagazin/ZKOSS/Wahl2009/zul.xsd'
006                >
008     <north height="80px">
009         <label value="Election 2009" style="color:gray;font-size:42px" />
010     </north>
012     <center>
013         <hbox spacing="0" >
015             <vbox width="200px">
016                 <zscript>
017                     // Load election resuls in Java
018                     import java.util.List;
019                     import de.groygroy.wahl2009.*;
021                     List election_results = ElectionResults2009.getInstance().getDistricts();
022                     District district=(District) election_results.get(0);
023                 </zscript>
025                 <listbox model="@{election_results}"
026                          selectedItem="@{district}"
027                          onSelect="updatePie()"
028                          rows="25" >
030                     <listhead>
031                         <listheader label="District" sort="auto" />
032                     </listhead>
034                     <listitem self="@{each=st}">
035                         <listcell label="@{st.district}" />
036                     </listitem>
038                 </listbox>
039             </vbox>
041             <vbox>
042                 <grid>
043                     <columns>
044                         <column  />
045                         <column  />
046                     </columns>
047                     <rows>
048                         <row>
049                             <label value="District" /> <label value="@{district.district}"  />
050                         </row>
051                         <row>
052                             <label value="Constituency" /> <label value="@{district.constituency}" />
053                         </row>
055                         <row>
056                             <label value="Eligible Voters" /> <label value="@{district.eligibleVoters}" />
057                         </row>
059                         <row>
060                             <label value="CDU"  id="lCDU" /> <label value="@{district.votesCDU}" />
061                         </row>
063                         <row>
064                             <label value="Die Linke" id="lDIE_LINKE" /> <label value="@{district.votesDIE_LINKE}" />
065                         </row>
067                         <row>
068                             <label value="FDP" id="lFDP" /> <label value="@{district.votesFDP}" />
069                         </row>
072                         <row>
073                             <label value="Grüne / GAL" id="lGAL" /> <label value="@{district.votesGRÜNE_GAL}" />
074                         </row>
076                         <row>
077                             <label value="SPD " id="lSPD" /> <label value="@{district.votesSPD}" />
078                         </row>
080                         <row>
081                             <label value="Others" id="lOther" /> <label value="@{district.votesOthers}" />
082                         </row>
085                         <row spans="2">
086                             <flashchart id="mychart"  width="500" height="250"
087                                         type="pie" >
088                                 <zscript>
089                                     void updatePie(){
090                                     model.setValue( "CDU", new Double(district.getPercentCDU()));
091                                     model.setValue( "Die Linke", new Double(district.getPercentDIE_LINKE()));
092                                     model.setValue( "FDP", new Double(district.getPercentFDP()));
093                                     model.setValue( "GRÜNE / GAL", new Double(district.getPercentGRÜNE_GAL()));
094                                     model.setValue( "SPD", new Double(district.getPercentSPD()));
095                                     model.setValue( "Others", new Double(district.getPercentOthers()));
096                                     }
098                                     PieModel model = new SimplePieModel();
099                                     updatePie();
100                                     mychart.setModel(model);
102                                 </zscript>
103                             </flashchart>
104                         </row>
105                     </rows>
106                 </grid>
107             </vbox>
108         </hbox>
109     </center>
110 </borderlayout>

Live Page Update

Of course, server-side solutions like PHP or JSP can create HTML with object attributes - but once only when they build the page. In contrast, ZK creates an HTML page with live functions and the desired RIA effects. The code just as easily updates the pie chart, binding the updatePie() to the listbox in line 27 and updating the chart whenever the page receives an onSelect event.

From the developer's point of view, ZK is just a normal JSP web project; instead of coding in JSP and Java, developers use ZUML and Java, relying on the ZK libraries [6]. The zk-bin-5.0.1.tar.gz archive contains a number of Java files; the PDF documentation that accompanies the files explains how to install them on an application server. Eclipse users have an even easier option and can simply load the ZK Studio plugin via the Update Manager. A wizard helps set up the development project. ZK Studio also includes a simple WYSIWYG editor.

The software is available in many versions and under several licenses. The basic Version 5 released early this year, known as the Community Edition (CE), is now available under the LGPL [7], whereas version 3 was available under the GPL. ZK CE 5 does not include the full set of components. Calendars, spreadsheets, and more complex layouts are bundled with the Professional (PE) or Enterprise Edition (EE), both of which are available under a proprietary license at a price of around US$ 250 per developer without support or US$ 600 with support. Developers can request a ZK open source License (ZOL), which is not publicly available, from the vendor, Potix, for open source extensions.

Unifying Library for the Web

The ZK library fulfills its claim of offering rich Internet applications. Developers with a background in Swing or Eclipse RCP will immediately feel comfortable with ZK.

The combination of a ZUML file and Java code, in particular, offers an efficient approach to developing applications step by step. The fact that ZK is restricted to the view part of an application is in fact a good thing because ZK does not impose any particular requirements or restrictions on the model and controller. Existing application logic is easy to integrate.

This approach was the one the ZK developers took themselves, integrating widgets such as Google Maps, Simile Timeplots [8], or Astra Charts [9] with ZK. ZK is even useful as a basic library.Professional applications with a great deal of application logic can, thus, be ported to state-of-the-art web interfaces without becoming entangled in an Ajax thorn bush.

[1] ZK Direct RIA:
[2] Demo:
[3] Mozilla XUL:
[4] Apache Tomcat:
[5] Glassfish application server:
[6] Zk 5 CE download:
[7] Zk licenses:
[8] Simile Timeplot:
[9] Astra Flash Components:

Carsten Zerbst works as a project manager and software architect in the CAD and PDM field for the aerospace and ship-building industries.