By Carsten Zerbst and Nils Magnus
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.
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).
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.
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.
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.
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='http://www.w3.org/2001/XMLSchema-instance'
004 xmlns='http://www.zkoss.org/2005/zul'
005 xsi:schemaLocation='http://www.zkoss.org/2005/zul file:/home/cz/Projekte/LinuxMagazin/ZKOSS/Wahl2009/zul.xsd'
006 >
007
008 <north height="80px">
009 <label value="Election 2009" style="color:gray;font-size:42px" />
010 </north>
011
012 <center>
013 <hbox spacing="0" >
014
015 <vbox width="200px">
016 <zscript>
017 // Load election resuls in Java
018 import java.util.List;
019 import de.groygroy.wahl2009.*;
020
021 List election_results = ElectionResults2009.getInstance().getDistricts();
022 District district=(District) election_results.get(0);
023 </zscript>
024
025 <listbox model="@{election_results}"
026 selectedItem="@{district}"
027 onSelect="updatePie()"
028 rows="25" >
029
030 <listhead>
031 <listheader label="District" sort="auto" />
032 </listhead>
033
034 <listitem self="@{each=st}">
035 <listcell label="@{st.district}" />
036 </listitem>
037
038 </listbox>
039 </vbox>
040
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>
054
055 <row>
056 <label value="Eligible Voters" /> <label value="@{district.eligibleVoters}" />
057 </row>
058
059 <row>
060 <label value="CDU" id="lCDU" /> <label value="@{district.votesCDU}" />
061 </row>
062
063 <row>
064 <label value="Die Linke" id="lDIE_LINKE" /> <label value="@{district.votesDIE_LINKE}" />
065 </row>
066
067 <row>
068 <label value="FDP" id="lFDP" /> <label value="@{district.votesFDP}" />
069 </row>
070
071
072 <row>
073 <label value="Grüne / GAL" id="lGAL" /> <label value="@{district.votesGRÜNE_GAL}" />
074 </row>
075
076 <row>
077 <label value="SPD " id="lSPD" /> <label value="@{district.votesSPD}" />
078 </row>
079
080 <row>
081 <label value="Others" id="lOther" /> <label value="@{district.votesOthers}" />
082 </row>
083
084
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 }
097
098 PieModel model = new SimplePieModel();
099 updatePie();
100 mychart.setModel(model);
101
102 </zscript>
103 </flashchart>
104 </row>
105 </rows>
106 </grid>
107 </vbox>
108 </hbox>
109 </center>
110 </borderlayout>
|
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.
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.
| INFO |
|
[1] ZK Direct RIA: http://www.zkoss.org/
[2] Demo: http://zkoss.org/zkdemo/userguide [3] Mozilla XUL: https://developer.mozilla.org/En/XUL [4] Apache Tomcat: http://tomcat.apache.org [5] Glassfish application server: https://glassfish.dev.java.net [6] Zk 5 CE download: http://www.zkoss.org/download/zk.dsp [7] Zk licenses: http://zkoss.org/license/ [8] Simile Timeplot: http://simile.mit.edu/timeplot/ [9] Astra Flash Components: http://developer.yahoo.com/flash/astra-flash |
| AUTHOR |
|
Carsten Zerbst works as a project manager and software architect in the CAD and PDM field for the aerospace and ship-building industries. |