Nur ein einziges Dateiformat müssen Entwickler mit Zk 5 pflegen, um attraktive Oberflächen und Ajax-getriebene Rich Internet Applications zu bauen. Schluss mit separatem HTML, CSS und Javascript .

Bei Anwendern stehen Rich Internet Applications (RIA) hoch im Kurs. Mit aktiven Inhalten wie sortierbaren Listen oder Drag&Drop lassen sie sich ohne Servergedenkminute bedienen. Damit kommen sie im Bedienkomfort normalen Anwendungen immer näher, vermeiden dabei aber die aufwändige Installation beim Anwender. Den Preis dafür bezahlt allerdings der Entwickler, denn Ajax-Anwendungen funktionieren nur im Zusammenspiel von Komponenten aus verschiedenen Sprachen.

Der Seitenrumpf besteht aus HTML, dazu kommen Cascading Style Sheets (CSS) fürs Aussehen, im Browser ablaufendes Javascript und schließlich eine Programmiersprache wie PHP oder Java auf der Server-Seite. Als ob dies nicht genug wäre, interpretieren Browser HTML, CSS und Javascript in Details unterschiedlich. Daher trifft die Entwickler beim Programmieren und Testen von RIAs ein erheblich größerer Verwaltungsaufwand als bei normalen Desktopanwendungen.

Als Ausweg aus diesem Dilemma bieten sich Toolkits wie Zk an. Mit der Bibliothek lassen sich RI-Anwendungen wie normale Desktopanwendungen entwickeln. Um die Verteilung der Anwendungen auf Browser- und Server-Seite und die Details von HTML, Javascript, CSS muss sich der Entwickler nicht kümmern, das Toolkit kapselt diese Arbeit. Es bietet Funktionen, um Webseiten ähnlich wie bei klassischen GUIs aus einzelnen Widgets und Layouts aufzubauen, und kümmert sich um die Eventbehandlung.

Viele Layouts zur Auswahl

Zur Gestaltung der Seiten stehen Anordnungen wie Borderlayout, Boxen oder Tabellen bereit. Sie stellen Widgets von einfachen Labels oder Listen bis hin zu komplexen Komponenten wie Bäumen, Charts oder Google Maps zur Verfügung. Einen Überblick über die Widgets ist auf der Demoseite [1] von Zkoss zu finden (siehe Abbildung 1).

Abbildung 1: Die Zkoss-Demo-Anwendung zeigt die unterschiedlichen Komponenten und Layoutmöglichkeiten.

Der besondere Charme besteht jedoch in der Behandlung von Benutzereingaben durch Maus oder Tastatur. Für Ajax-Anwendungen müssen Entwickler Code für die Client-Seite in Javascript und in einer weiteren Sprache auf der Server-Seite entwickeln. Im schlimmsten Fall verteilen sie die Anwendungslogik auf beide Seiten. Bei Zkoss verbleibt die Anwendungslogik dort, wo sie hingehört: auf dem Server. Der Transfer der erforderlichen Daten und die Aktualisierung der Oberfläche ist Aufgabe von Zkoss und kümmert den Entwickler nicht. Er darf sich darauf konzentrieren, die Anwendungslogik zu entwickeln und an eine Oberflächen zu binden.

Schichten

Wie Abbildung 2 zeigt, besteht eine Anwendung mit Zkoss aus vier Schichten. Auf Server-Seite liegt der Anwendungscode, er baut die Oberfläche aus den Widgets von Zkoss auf und enthält die notwendige Eventbehandlung und Anwendungslogik. Die Oberflächen programmiert der Entwickler in Java oder mit der Zk User Interface Markup Language (ZUML). Diese XML-Sprache baut auf Firefox’ XUL [2]. Sie definiert nicht nur die Oberfläche, sondern behandelt auch Selektionen, Tastatureingaben oder sonstige Ereignisse. Die Anwendungslogik darf der Programmierer entweder direkt in die ZUML-Datei einbetten oder als separate Java-Klassen beilegen. Alternativ versteht Zkoss auch Javascript, Python oder Ruby für das Model.

Abbildung 2: Die Zkoss-Bibliotheken erzeugen Browser-basierte Anwendungen aus XML- oder Java-Beschreibungen. Bindeglieder sind eine Server-seitige Bibliothek und eine Laufzeitumgebung im Browser.

Ähnlich wie Swing konzentriert sich die Serverbibliothek von Zkoss nach dem MVC-Prinzip auf die View einer Anwendung, stellt die Oberfläche dar und leitet Ereignisse weiter. Deshalb gibt es für die Anwendungslogik und das darunterliegende Modell keine Einschränkungen. Bewährte Komponenten wie Hibernate oder gar JEE lassen sich so einbinden. Zwischen der Anwendung und dem Netzwerk liegt Server-seitig die Zkoss-Bibliothek. Sie setzt die Anwendung für den Transport per HTTP zum Browser um und leitet Events vom Browser an den Anwendungscode weiter.

Dieser Teil des Zkoss-Toolkits ist in Java geschrieben und läuft in einem Servlet-Container wie Apache Tomcat [3] oder in einem JEE-Server wie Glassfish [4]. Sie liefern die Anwendung per HTTP an den Browser, wo die Zkoss-Client-Engine dann mit Javascript die Webseite für die Anwendung aufbaut. Die Client-Engine leitet auch Events vom Browser zum Server und aktualisiert die Webseite.

Erste Wahl

Bei der Entwicklung einer Anwendung muss sich der Entwickler darum jedoch nicht kümmern, er programmiert mit Hilfe des Zkoss-API und überlässt den Rest der Bibliothek. Ein Beispiel dafür zeigt Abbildung 3. Es enthält auf der linke Seite eine sortierbare Liste mit Stadtteilen. Als Beispieldaten dienen die Ergebnisse der deutschen Bundestagswahl 2009 in Hamburg. Detailinformationen zu einem Stadtteil zeigt die Anwendung nach der Selektion auf der rechten Seite an und stellt neben einfachen Textfeldern die Stimmverteilung in einem Tortendiagramm dar.

Abbildung 3: Die Beispielanwendung zeigt die Wahlergebnisse für einen Wahlkreis ohne Rückfrage beim Server an: Sobald der Anwender eine neue Auswahl trifft, berechnet Zk die Ansicht des Diagramms neu.

Eine Datei für alles

Die ZUML-Datei aus Listing 1 enthält Teile der Anwendungslogik, das Layout der Komponenten sowie die Eventbehandlung. Zur Demonstration benutzt das Seitenlayout mehrere Methoden, reale Anwendungen beschränken sich auf eine Auswahl. Den groben Aufbau mit Titel und Datenteil definiert ab Zeile 3 ein »borderlayout« mit seinen Kindern »north« (Zeile 7) und »center« (ab Zeile 11). Für das Layout des »center«-Containers mit der Liste und dem Formular nutzt der Code Boxen in horizontaler (»hbox«) und vertikaler (»vbox«) Ausrichtung. Zum Feinlayout des Formulars kommt ab Zeile 40 ein tabellenähnliches »grid«-Layout zum Einsatz. Neben diesen drei Varianten enthält Zkoss weitere Möglichkeiten bis hin zu Portallayouts mit verschiebbaren Elementen.

01 ?xml version="1.0" encoding="UTF-8"?>
02 <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
03 <borderlayout  xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
04                xmlns='http://www.zkoss.org/2005/zul'
05                xsi:schemaLocation='http://www.zkoss.org/2005/zul'>
06 
07    <north height="80px">
08       <label value="Wahl 2009" style="color:gray;font-size:42px" />
09    </north>
10 
11    <center>
12       <hbox spacing="0" >
13          <vbox width="200px">
14             <zscript>
15                // Laden der Liste mit den Ergebnissen in Java
16                import java.util.List;
17                import de.groygroy.wahl2009.*;
18 
19                List wahlergebnisse =
20                        Wahlergebniss2009.getInstance().getStadtteile();
21                Stadtteil stadtteil = (Stadtteil)wahlergebnisse.get(0);
22             </zscript>
23 
24             <listbox model="@{wahlergebnisse}"
25                      selectedItem="@{stadtteil}"
26                      onSelect="updatePie()"
27                      rows="25" >
28 
29                <listhead>
30                   <listheader label="Stadtteil" sort="auto" />
31                </listhead>
32 
33                <listitem self="@{each=st}">
34                   <listcell label="@{st.stadtteil}" />
35                </listitem>
36 
37             </listbox>
38          </vbox>
39          <vbox>
40             <grid>
41                <columns>
42                   <column />
43                   <column />
44                </columns>
45                <rows>
46                   <row>
47                      <label value="Wahlkreis" />
48                      <label value="@{stadtteil.wahlkreis}" />
49                   </row>
50 
51                   <row spans="2">
52                      <flashchart id="mychart" type="pie"
53                                  width="500" height="250">
54                         <zscript>
55
56                            void updatePie(){
57                               model.setValue("CDU", new
58                                 Double(stadtteil.getProzentCDU()));
59                               [...]
60                               model.setValue( "Sonstige", new
61                                 Double(stadtteil.getProzentSonstige()));
62                            }
63 
64                            PieModel model = new SimplePieModel();
65                            updatePie();
66                            mychart.setModel(model);
67 
68                         </zscript>
69                      </flashchart>
70                   </row>
71                </rows>
72             </grid>
73          </vbox>
74       </hbox>
75    </center>
76 </borderlayout>

Der Code füllt ab Zeile 16 die Liste auf der linken Seite. Die Java-Klasse »Wahlergebniss2009« lädt die Stimmenzahlen aus einer CSV-Datei. Die Methode »getStadtteile()« gibt eine Liste mit einem Java-Objekt pro Wahlbezirk zurück. Die Quellen des Projekts der Anwendung lassen sich vom Server des Linux-Magazins herunterladen [5].

Der Container »zscript« ab Zeile 14 verbindet den Java-Code zum Laden und läuft während des Seitenaufbaus auf dem Server. Der Container »listbox« ab Zeile 24 beschreibt das linke Auswahlwidget der Oberfläche. Die Anwendung verweist über das Attribut »model« auf die vorher geladene Liste als Datenmodel und füllt sie ab Zeile 33 mit »listitem«-Containern, die jeweils einen Stadtteil aufnehmen.

Die Dateildarstellung eines Stadtteils übernehmen »label«-Elemente wie in Zeile 48. Jeweils das rechte von ihnen bindet dabei über die Syntax »@{Variablenname.Attributname}« einen Bezirksnamen an ein Container-Attribut: Im Beispiel enthält die Variable »stadtteil« das Objekt, das Label enthält den Wert des Attributs »wahlkreis«. Wegen der Definition »selectedItem = “@{stadtteil}”« in Zeile 25 aktualisiert Zk die Variable bei jeder Auswahl eines Anwenders in der »listbox«. Damit bleibt auch die Anzeige der Details immer auf neuestem Stand.

Seiten live auffrischen

Das Beispiel zeigt den Vorteil von Zkoss: Server-seitige Lösungen wie PHP oder JSP erzeugen natürlich auch HTML mit Objektattributen – aber nur einmalig dann, wenn sie die Seite aufbauen. Zkoss erzeugt hingegen eine HTML-Seite mit Live-Funktion und den damit gewünschten RIA-Effekten. Ähnlich bequem aktualisiert der Code das Tortendiagramm. Er bindet die Funktion »updatePie()« in Zeile 26 an die »listbox« und aktualisiert das Diagramm, sobald die Seite ein »onSelect«-Event empfängt.

Für die Entwickler verhält sich Zkoss dagegen wie ein normales JSP-Webprojekt, statt in JSP und Java schreiben sie eben ZUML und Java. Dazu benötigen sie die Zkoss-Bibliotheken [6]. Das Archiv »zk-bin-5.0.1.tar.gz« enthält eine Reihe von Java-Dateien, deren Installation in einem Applikationsserver eine beigelegte PDF-Dokumentation erläutert. Eclipse-Anwender haben es noch bequemer und laden sich das Zk-Studio-Plugin über den Update-Manager. Dann hilft ein Wizard beim Setup eines Entwicklungsprojekts. Außerdem enthält ZK Studio einen einfachen Wysiwyg-Oberflächeneditor.

Die Software kommt in einer großen Vielfalt an Zusammenstellungen und unter mehreren Lizenzen: Die Anfang dieses Jahres erschienene Version 5 der Basis, die der Anbieter Community Edition (CE) nennt, steht neuerdings unter der LGPL [7]. Für die bisherige Version 3 galt die GPL. Zk CE 5 enthält jedoch nicht alle Komponenten, so sind Kalender, Spreadsheets oder auch die aufwändigeren Layouts in der Professional (PE) beziehungsweise Enterprise Edition (EE) gebündelt. Sie stehen unter einer proprietären Lizenz, die mit rund 250 US-Dollar ohne oder 600 US-Dollar mit Support pro Entwickler zu Buche schlagen. Projekte dürfen für Open-Source-Erweiterungen beim Anbieter Potix um eine nicht öffentlich zugängliche ZK Open Source License (ZOL) anfragen.

Einende Bibliothek fürs Web

Den Anspruch, Rich Internet Applications mit sinnvollem Aufwand und Server-seitiger Anwendungslogik zu bieten, erfüllt die Bibliothek weitgehend. Vor allem Entwickler mit einem Hintergrund in Swing oder Eclipse RCP fühlen sich in Zkoss sofort zu Hause. Gerade die Kombination von ZUML-Datei und Java-Code bietet einen effizienten Weg, Anwendungen Schritt für Schritt vom Prototyp zur fertigen Anwendung weiterzuentwickeln. Positiv gefällt die Beschränkung auf den View-Teil einer Anwendung: Zkoss stellt keine besonderen Anforderungen oder Einschränkungen an Model und Controller. Bereits vorhandene Anwendungslogiken integrieren sich leicht.

Den Ansatz verfolgen die Zkoss-Entwickler auch selbst: Widgets wie Google Maps, Simile Timeplots [8] oder Astra Charts [9] haben sie in Zkoss integriert. Und selbst mit der reinen Basisbibliothek lohnt sich der Einsatz von Zkoss. Gerade Fachanwendungen mit umfangreicher Anwendungslogik kommen damit in den Genuss aktueller Weboberflächen, ohne dass sich die Entwicklung im Gestrüpp von Ajax verheddert.