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.
|
Listing 1: |
|---|
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.
Diesen Artikel als PDF kaufen
Express-Kauf als PDF
Umfang: 4 Heftseiten
Preis € 0,99
(inkl. 19% MwSt.)
Als digitales Abo
Weitere Produkte im Medialinx Shop »
Versandartikel
Onlineartikel
Alle Rezensionen aus dem Linux-Magazin
- Buecher/07 Bücher über 3-D-Programmierung sowie die Sprache Dart
- Buecher/06 Bücher über Map-Reduce und über die Sprache Erlang
- Buecher/05 Bücher über Scala und über Suchmaschinen-Optimierung
- Buecher/04 Bücher über Metasploit sowie über Erlang/OTP
- Buecher/03 Bücher über die LPI-Level-2-Zertifizierung
- Buecher/02 Bücher über Node.js und über nebenläufige Programmierung
- Buecher/01 Bücher über Linux-HA sowie über PHP-Webprogrammierung
- Buecher/12 Bücher über HTML-5-Apps sowie Computer Vision mit Python
- Buecher/11 Bücher über Statistik sowie über C++-Metaprogrammierung
- Buecher/10 Bücher zu PHP-Webbots sowie zur Emacs-Programmierung
Insecurity Bulletin
Im Insecurity Bulletin widmet sich Mark Vogelsberger aktuellen Sicherheitslücken sowie Hintergründen und Security-Grundlagen. mehr...