In vielen Softwareentwicklungsprojekten muss ein Entscheid für eine passende Client-Technologie getroffen werden. Nicht immer wird der Entscheid durch bereits vorhandene Plattformen vorweggenommen. Oft ist das Projektteam gefragt, eine geeignete Technologie zu identifizieren und für die Umsetzung vorzuschlagen. Usability Experten sollten da-her neben Fähigkeiten in den Kernbereichen des Usability Engineering – darunter zum Beispiel die Anforderungsanaly-se, Gestaltung und Evaluation – auch über ein technisches Basiswissen über verschiedene GUI Frameworks verfügen. Dies ermöglicht ihnen, bereits beim Entscheid für eine Client-Technologie die Sicht des Benutzers einfließen zu lassen und damit die Weichen für die Entwicklung gebrauchstauglicher Software zu stellen.

1. White Paper
Funktionalität, Usability und schönes Design –
Herausforderungen bei der Wahl der Client-Technologie
Thomas Memmel - Thorsten Büring - Nicolas Durville - Olivier Lalive d’Epinay
Abstract
In vielen Softwareentwicklungsprojekten muss ein Entscheid für eine passende Client-Technologie getroffen werden.
Nicht immer wird der Entscheid durch bereits vorhandene Plattformen vorweggenommen. Oft ist das Projektteam ge-
fragt, eine geeignete Technologie zu identifizieren und für die Umsetzung vorzuschlagen. Usability-Experten sollten da-
her neben Fähigkeiten in den Kernbereichen des Usability Engineerings – darunter zum Beispiel die Anforderungsana-
lyse, Gestaltung und Evaluation – auch über ein technisches Basiswissen über verschiedene GUI-Frameworks verfügen.
Dies ermöglicht ihnen, bereits beim Entscheid für eine Client-Technologie die Sicht des Benutzers einfließen zu lassen
und damit die Weichen für die Entwicklung gebrauchstauglicher Software zu stellen.
Ziel dieses Beitrags ist es daher, aus Sicht des Usability Engineerings einen Überblick über verschiedene Client-Ansätze
und -Technologien zu geben.
1.0 Einleitung
Viele Unternehmen, die neue Client-Technologien bei ist letztlich der Leidtragende, wenn Konzepte zum Bei-
der Ablösung älterer Systeme oder zur Entwicklung spiel aufgrund von fehlenden oder unflexiblen GUI Con-
neuer Systeme einsetzen wollen, streben nach einer trols nicht konsequent und konsistent umgesetzt wer-
hohen Usability. Diese ergibt sich aber nicht automa- den können.
tisch allein aus dem Einsatz einer neuen Technologie.
Bei der Auswahl der Client-Technologie sollten daher in
erster Linie nicht die Technik und unternehmensspezifi-
sche Rahmenbedingungen ausschlaggebend sein, son-
dern insbesondere die Benutzer und deren Anforderun-
gen.
Deshalb muss für die Entwicklung des Graphical User
Interface (GUI) eine Client-Technologie verwendet wer-
den, mit der die Usability-Ziele erreicht werden können.
Usability-Experten sollten daher bei der Auswahl der
richtigen Client-Technologie mitwirken, da ein direkter
Zusammenhang zur Konzeption und Modellierung des
GUI besteht. Zum Beispiel müssen die enormen Frei-
heitsgrade bei der GUI-Gestaltung, wie sie etwa gerade
im Umfeld von Rich Internet Applications (RIA) vorherr-
schen, durch Usability-Experten in die richtigen Bahnen
gelenkt werden. Umgekehrt geben manche Client-
Technologien Rahmenbedingungen vor, die wertvollen
Spielraum bei der Gestaltung nehmen oder ein Zurück-
greifen auf Zusatzkomponenten erfordern. Der Benutzer Abbildung: Überblick Client-Technologien (© Zühlke Engineering AG)
©
Zühlke / Dez. 2010

2. Whitepaper Client-Technologien Seite 2 von 7
Das Ziel für Usability-Experten sollte daher sein, die Vor- Rich Client (Abbildung). Die Benutzeroberfläche sowie
und Nachteile schon vor dem Entscheid für eine Client- die Präsentations- und clientseitige Businesslogik sind
Technologie gegeneinander abzuwägen. Dann kann die dann für die Applikation lokal auf dem Rechner des Nut-
Sicht des Benutzers bereits einfließen und es können zers verfügbar und können ohne Netzwerkanbindung
wichtige Weichen für die GUI-Entwicklung gestellt wer- unmittelbar in den Arbeitsspeicher geladen werden.
den. Usability ist in der Praxis immer ein Kompromiss
Das flüssige Arbeiten des Nutzers wird dabei jedoch
zwischen Bedienqualität und Kosten. Das beste Interak-
über Installationszwang erkauft. Zudem kann sich die
tionsdesign ist wertlos, wenn der Umsetzungsaufwand
Verteilung und Aktualisierung der Software als proble-
aufgrund der gewählten Client-Technologie das Budget
matisch erweisen. Gerade bei großen, verteilt agieren-
übersteigt. Ein Grundverständnis über verschiedene Cli-
den Unternehmen müssen lokale Anwendungen auf-
ent-Technologien ist daher für Usability-Experten von
wändig in die vorhandene IT-Landschaft eingepflegt
Vorteil.
werden. Rich Client-Technologien sind zum Beispiel Java
Swing, Eclipse Rich Client Platform (Eclipse RCP) oder
2.0 Client-Ansätze
Windows Presentation Foundation (WPF).
Die erste und folgenschwerste Weiche bei der Umset-
zung eines GUIs wird mit der Wahl des Client-Ansatzes
2.3 Rich Internet Applications (RIA)
gestellt. Hier unterscheiden wir grundsätzlich drei Arten,
RIAs finden im Zuge immer leistungsfähigerer Browser
wobei die Übergänge fließend sein können.
und Hardware zunehmend Verbreitung bei der Entwick-
lung von Unternehmenssoftware. RIAs werden ebenfalls
über einen Webbrowser angezeigt und bedient. Anders
als bei Thin Clients wird jedoch eine höhere Dynamik
der Benutzeroberfläche erzielt, indem zur Laufzeit neben
der Visualisierung auch Teile der Präsentations- und Bu-
sinesslogik auf den Computer des Nutzers geladen wer-
den – zumeist als Client-seitige Skriptsprachen. Auf Nut-
zereingaben kann die Applikation unmittelbar, d. h.
meist ohne Kommunikation mit dem Server, reagieren.
Bei RIA-Technologien, die ein Plug-in erfordern, steht
der Nutzer zunächst vor der Herausforderung, die not-
wendige Installation zu bewältigen. Leider ist dieser Vor-
gang für viele Benutzer nach wie vor eine Hemmschwel-
le. Der Nutzer muss Sicherheitsabfragen und krypti-
schen Lizenzvereinbarungen zustimmen, sich durch ei-
Abbildung: Zusammenspiel Client-Technologien und Schichtenarchi-
tektur (© Zühlke Engineering AG)
nen Installations-Dialog arbeiten, unter Umständen ei-
nen Speicherort auswählen und den Browser neu star-
2.1 Thin Clients ten. Der größte Nachteil von RIA-Technologien, die auf
Die Benutzungsoberfläche wird zur Laufzeit der Interak- Plug-ins basieren, ist jedoch nicht die holprige Installati-
tion in einem Webbrowser angezeigt (Abbildung). Die on. Viele Mitarbeiter in Unternehmen verfügen nicht
verschiedenen Applikationskomponenten sind auf ei- über die nötigen Administrationsrechte, um überhaupt
nem Server gespeichert. Dieser Ansatz eignet sich für Software auf ihren Computern zu installieren. Dies be-
einfache Anwendungen mit hoher Verbreitung. deutet, dass die Plug-ins zur IT-Strategie gehören und
zentral ausgerollt werden müssen. Dementsprechend
Durch den weitgehenden Verzicht auf lokale Verarbei- kommen Silverlight und Flash unserer Erfahrung nach
tung der Nutzerinteraktion lassen sich die Anforderun- gerade im Umfeld von Business-to-Business-
gen an die Hardware und Software des Nutzers minimie- Applikationen noch eher selten zum Einsatz.
ren. Auf der anderen Seite können bestimmte Visualisie-
rungen und Interaktionen nur bedingt umgesetzt wer- Für die Entwicklung zu beachten ist, dass die Umsetzung
den. Beispiele für Thin Client-Technologien sind Active individueller Bedienelemente sehr aufwändig sein kann.
Server Pages (ASP, ASP.NET), PHP, Ruby, Java Server Umständlich aus Sicht des Nutzers kann sich auch der
Faces (JSF). Austausch und die Kollaboration zwischen RIA und dem
Betriebssystem gestalten, genauso wie die Kollaboration
2.2 Rich Clients mit anderen Anwendungen (z. B. Kopieren von Dateien
Sollen hochinteraktive Anwendungen mit ausgeprägten zwischen Anwendungen oder vom Desktop). RIAs kön-
Grafikanforderungen entwickelt werden, so empfiehlt nen den Nutzer auch irritieren, da viele Mechanismen,
sich nach wie vor die klassische Implementierung als die er von Desktop-Anwendungen kennt, nicht mehr
©
Zühlke / Dez. 2010

3. Whitepaper Client-Technologien Seite 3 von 7
erlaubt sind oder nicht verwendet werden. Beispielswei- 3.2 Eclipse RCP (Rich Client)
se funktioniert die Navigation mittels Vor- und Zurück- Eclipse RCP ist eine häufig verwendete Alternative zur
Schaltflächen des Browsers nicht bei allen RIA- Implementierung von Rich Client Anwendungen in Java
Technologien automatisch. Beispiele für RIA- Swing. Eclipse RCP bietet dazu einen eigenen Standard
Technologien sind Google Web Toolkit (GWT), ASP Widget Toolkit (SWT). Dieser bringt als GUI-Baukasten
.NET mit AJAX, JSF mit AJAX, JavaFX, Microsoft Silverlight bereits sehr viel Funktionalität mit. Die GUI-Elemente der
oder Adobe Flash / Flex (Abbildung). erstellten GUI-Applikationen sind nativ, d.h. sie werden
durch das Betriebssystem gezeichnet und sind durch
3.0 Client-Technologien dessen Look & Feel geprägt. So ergeben sich mitunter
Basierend auf der Kategorisierung der Client-Ansätze Geschwindigkeitsvorteile gegenüber Java Swing GUIs.
stellen wir für jeden Ansatz ausgewählte Implementie-
Daneben steht ein GUI-Editor zur Verfügung, mit dessen
rungstechnologien vor. Im Rahmen dieses Beitrags kon-
Hilfe sich GUI-Elemente hinzufügen und anordnen las-
zentrieren wir uns dabei auf Technologien aus dem Be-
sen. Der entstehende Code muss in der Regel noch
reich der Rich Client-Technologien und der Rich Internet
überarbeitet werden. Dennoch bietet Eclipse RCP so
Applications. Zu diesen haben wir Interviews mit Exper-
eine Möglichkeit zum GUI Prototyping, wobei Program-
ten, darunter zum Beispiel GUI-Entwickler, Tester und
mierkenntnisse notwendig sind, sobald der im GUI-
Requirements Engineers, geführt. Dabei haben wir unter
Editor gebaute Prototyp auch interaktives Verhalten zei-
anderem das modellierbare interaktive Verhalten, die
gen soll. Im GUI-Editor können optische Anpassungen
Möglichkeiten zum GUI Prototyping, die Gestaltung von
vorgenommen werden. Eine Schnittstelle zum medien-
eigenen GUI-Elementen und Controls, oder die Flexibili-
bruchfreien Einbinden von Design-Artefakten, wie z.B.
tät bei der Integration neuer Usability Anforderungen
Bitmap- oder Vektorgrafiken, fehlt jedoch.
beleuchtet.
Ein großer Vorteil von Eclipse RCP ist die Vielzahl von
3.1 Java Swing (Rich Client) Bibliotheken, wie zum Beispiel „Nebula“ (Eclipse Foun-
Die Entwicklung von Rich Clients mit Java Swing ist sehr dation, 2010), mit deren Hilfe die Auswahl an GUI-
etabliert. Die Performance Probleme bei der Verwen- Elementen stark erweitert werden kann. Mit Eclipse RCP
dung von interaktiven Java Swing GUIs haben sich ins- können somit auch aufwändige GUIs gebaut werden.
besondere seit Java EE 6 weitestgehend aufgelöst. Neu- Zusätzlich ist das Erstellen von Custom Widgets auf Ba-
artige GUI Controls, wie etwa Ribbons, sind inzwischen sis von Eclipse SWT möglich, jedoch zum Teil mit viel
auch für Java Swing verfügbar (Flamingo, 2010). Neue Aufwand. Die Nachteile von Eclipse RCP liegen zum Bei-
Java Look & Feels wie „Synthetica BlackEye“ (Zitzels- spiel in der Schwierigkeit, dass nicht alle bereit gestell-
berger, 2009) verleihen Java Swing Applikationen ein ten GUI-Elemente einfach angepasst und einwandfrei
neues, modernes Aussehen, wie es die Nutzer insbe- kontrolliert werden können. Der GUI-Editor kann noch
sondere von GUIs aus Microsoft 7 gewohnt sind. Mo- verbessert werden: Es ist zum Beispiel für die Entwick-
derne GUIs können somit auch problemlos mit Java lung komplexer Applikationen wünschenswert, dass ein-
Swing entwickelt werden. zelne GUI-Elemente in Gruppen zusammengefasst wer-
Vielleicht deshalb ist Java Swing unter Entwicklern immer den können, die dann direkt im Editor als mächtige Con-
noch die beliebteste Technologie, wenn es um die Im- trols zur Verfügung stehen.
plementierung von Java-basierten GUIs geht. Die rele-
3.3 Windows Presentation Foundation (Rich Client)
vantesten Entwicklungsumgebungen sind Eclipse oder
WPF ist ein Präsentationssystem für die Entwicklung und
NetBeans. Mit Werkzeugen wie dem JFormsDesigner
Darstellung von Windows Clients. Ist die Plattformab-
(FormDev, 2010) lassen sich auch mit Java Swing sehr
hängigkeit für ein Projekt kein Problem, dann steht mit
schnell auch ästhetische GUIs entwickeln. Der JForms-
WPF ein Werkzeug bereit, das alle denkbaren Features
Designer steht darum als Eclipse Plug-in zur Verfügung.
für die Entwicklung moderner Rich Clients bietet. Eine
Mithilfe eines solchen GUI Builder lassen sich GUIs un-
umfangreiche GUI-Bibliothek, 2D- und 3D-Zeichnen,
abhängig von der Programmierung als Prototypen ent-
Hardware-Beschleunigung, Unterstützung von Vektor-
werfen. Diese sind auch im Rahmen von formativen
und Bitmapgrafiken, Animationseffekte, Data-Binding,
Usability Evaluationen verwendbar.
Darstellung von Dokumenten, OpenType Typographie,
Inzwischen existieren sehr interessante Plug-ins, wie das Multi-Touch, Globalisierung und Lokalisierung sowie In-
„Napkin Look & Feel“ (Arnold et al., 2009), mit dessen tegration von Audio und Video sind nur einige der ent-
Hilfe in Java Swing programmierte GUIs den Eindruck haltenen Funktionen. WPF ist Teil des Microsoft .NET
eines Papier Prototypen erwecken. Für das Umsetzen Frameworks, das momentan in Version 4 vorliegt.
von interaktivem Verhalten sind Programmierkenntnisse
Bei der Entwicklung von WPF Clients setzt Microsoft auf
jedoch unbedingt erforderlich.
die durch HTML und JavaScript vertraute Separierung
©
Zühlke / Dez. 2010

4. Whitepaper Client-Technologien Seite 4 von 7
von Präsentations- und Logik-Code. Mit der Markup- Neben einfachen Controls wie Buttons und Listen fin-
Sprache XAML wird das Aussehen des GUI definiert, mit den sich in der Standard GUI-Bibliothek von Silverlight
einer der .NET Sprachen das Verhalten. Die Möglichkeit, auch die üblichen Elemente zum Anzeigen von Daten
dass durch diese Trennung Designer und Programmie- wie TreeView und Datagrid. Beide können mit wenig
rer gleichzeitig an einer Applikation arbeiten können – Aufwand um Features wie Drag & Drop, Sortierung, in-
die Designer mit XAML, die Entwickler mit einer Pro- dividuelles Kontextmenü und Copy & Paste erweitert
grammiersprache – hat sich jedoch bislang nicht durch- werden. Weitere GUI-Komponenten können von
gesetzt. Anders als HTML ist XAML nach unseren Re- Drittanbietern bezogen werden. Hervorzuheben ist das
cherchen bei Gestaltern noch weitgehend unbekannt. Silverlight Toolkit von CodePlex (Codeplex/Microsoft,
2010), das unter anderem Elemente wie AutoComple-
Ähnlich verhält es sich mit den neuen Entwicklungs-
teBox, Accordion, Ratings und TreeMap enthält.
werkzeugen. Neben Visual Studio, der Standard-Ent-
wicklungsumgebung für Windows Programmierer, bietet Gerade für kreative und neuartige GUIs bietet Silverlight
Microsoft seit 2007 mit Expression Blend und Expression mit seinen vielen grafischen Effekten, der Einbindung
Design auch Werkzeuge für Gestalter an. Letztere ziehen von Mikrofon und Webcam, sowie dem Audio- und
aber nach wie vor die klassischen Grafik-Editoren von Video-Streaming zahlreiche Möglichkeiten. Mit Deep
Adobe wie Photoshop, Illustrator und Fireworks vor. Zoom können zum Beispiel zoombare GUIs aus hoch-
Dennoch ist zumindest Expression Blend ein Erfolg, da auflösenden Bildern erstellt und damit ein Benutzungs-
viele Programmierer es verwenden. Microsoft hat dar- erlebnis abseits der 2D Fenster-Metapher geschaffen
über hinaus den Import der Adobe Bild-Formate in Ex- werden. Leider wird Hardwarebeschleunigung für grafi-
pression Blend vorgesehen. sche Inhalte bisher nur teilweise unterstützt.
Die Gestaltung von WPF GUIs wird mittels Styles, Temp- Silverlight Applikationen können seit Version 4 auch
lates und Themes angepasst. Bei der Neuentwicklung außerhalb des Browser laufen. Aus der RIA wird mit ge-
von Komponenten können Entwickler oft auf vorhande- ringem Aufwand ein Rich Client, der gegenüber der
nen Bedienelementen aufsetzen und somit den Pro- Webvariante erweiterte Funktionalität ermöglicht. Dazu
grammieraufwand erheblich reduzieren. Der User Expe- gehören der (eingeschränkte) Zugriff auf lokale Dateien,
rience Guide von Microsoft (Microsoft, 2010) hilft an- vollständige Tastaturunterstützung, Drag & Drop vom
hand von Beispielen beim korrekten und Windows kon- Desktop sowie der Aufruf anderer Programme aus der
formen Einsatz von Fenstern, Dialogen und Bedien- Applikation heraus. Auch kann der Zugang zu externen
elementen. Die hohe Anzahl an gestalterischen Frei- Geräten wie z.B. Scanner oder USB-Stick implementiert
heitsgraden birgt jedoch auch die Gefahr, dass GUIs ab- werden.
seits der Standards entwickeln werden, ohne dass aus-
Silverlight hat in kurzer Zeit an Popularität gewonnen.
reichend Usability-Evaluationen stattfinden.
Das Framework profitiert dabei unter anderem von der
Expression Blend bietet seit Version 3 eine spezielle Er- Einbindung in den Entwicklungskontext von WPF und
weiterung für Prototyping namens „SketchFlow“ an. Mit .NET. Entwickler können ihr einmal für WPF erworbenes
SketchFlow können skizzenhaft wirkende GUIs mit we- Know-how für Silverlight wieder verwenden.
nig Aufwand zusammengeklickt und als Online-Applika-
tion inklusive Feedback- Funktion exportiert werden. 3.5 Adobe Flash und Flex (RIA)
Adobe Flash zählt zu den ersten RIA-Technologien und
3.4 Silverlight (RIA) bietet bereits seit über einem Jahrzehnt eine auf einem
Silverlight ist ein RIA-Framework von Microsoft, das sich Plug-in basierte Web-Technologie für die Darstellung
aus Teilen von WPF zusammensetzt und in direkter von Multimedia-Inhalten im Internet an. Die traditionelle
Konkurrenz zur etablierten Flash-Technologie steht. Wie Stammklientel von Flash und der gleichnamigen Autho-
Flash benötigt Silverlight eine Laufzeitumgebung, die der ring-Umgebung hat sich lange Zeit nahezu ausschließlich
Nutzer in Form eines Webbrowser Plug-ins installieren aus Designern und anderen Kreativarbeitern zusammen-
muss. Microsoft stellt das Plug-in für Windows, Mac und gesetzt. Mit dem Entwicklungs-Framework Flex und dem
Windows Phone 7 bereit. Auch für Linux existiert mit Flex Builder (Eclipse Plug-in) will der Hersteller nun auch
Mono ein Plug-in, das von Novell in Kooperation mit verstärkt Programmierer von der Ausgereiftheit der
Microsoft entwickelt wird. Fast alle gängigen Browser Technologie überzeugen.
werden unterstützt, einzig Opera bildet derzeit eine
Entgegen der Vermutung vieler Softwareentwickler las-
Ausnahme. Silverlight steht in der Version 4 zur Verfü-
sen sich mit Flash und insbesondere Flex beliebig kom-
gung. Momentan wird von einer Verbreitung des Silver-
plexe sowie datengetriebene GUIs umsetzen. Wie WPF
light Plug-ins von ca. 40-60% ausgegangen. Bei Arbeits-
folgt das SDK dabei dem Prinzip der Trennung von Prä-
platzrechnern dürfte diese Quote jedoch weitaus gerin-
sentation und Logik: mit einer XML-Sprache namens
ger ausfallen.
MXML wird das GUI strukturiert und mit ActionScript die
©
Zühlke / Dez. 2010

5. Whitepaper Client-Technologien Seite 5 von 7
Dynamik implementiert. Flex wird von Adobe in der 3.6 JavaFX (RIA)
Version 4 zum Download angeboten. Das Plug-in, der JavaFX gehört zur Java Produktfamilie. Als Technologie
Flash Player, liegt momentan in der Version 10.1 vor. zur RIA-Entwicklung steht JavaFX in direkter Konkurrenz
zu Adobe Flash und Microsoft Silverlight. Zur Ausfüh-
Flash und Silverlight bieten für das GUI-Design einen
rung von JavaFX-Anwendungen wird die Java Runtime
sehr ähnlichen Funktionsumfang (vollständige GUI-
benötigt. Nach einmaliger Installation können beliebige
Bibliothek, Multi-Touch-Unterstützung, Druckanbindung,
JavaFX Anwendungen ausgeführt werden. Diese werden
Offline-Fähigkeit, Lokalisierung, Input-Validierung, etc.),
vorwiegend über Java Web Start auf dem Desktop oder
unterliegen jedoch auch denselben Browser-bedingten
als Java Applet gestartet.
Einschränkungen. Dazu zählt neben dem Zugriff auf lo-
kale Dateien und der Nutzung von durch den Browser Die Auswahl an GUI Controls reicht erst seit der Version
vorbelegten Tastenkombinationen auch das Navigieren 1.3 aus, um ansprechende GUIs zu entwickeln (vgl.
mittels der History-Buttons des Browsers. Bei „klassi- Redko, 2010). Zur Gestaltung stehen GUI Builder zur
schen“ Webseiten reflektiert die URL den Status der Verfügung, zum Beispiel auf Basis der NetBeans-
Webseite. Der Nutzer kann somit die Vor- und Zurück- Entwicklungsumgebung (NetBeans, 2010). Die Integra-
tasten des Browsers verwenden, um zwischen einzelnen tion von Design-Artefakten ist nach Installation der neu-
bereits besuchten Bestandteilen einer Webapplikation en JavaFX 1.3 Production Suite zum Beispiel aus Adobe
zu wechseln (Deep Linking). Mit RIAs ist dies nur einge- Illustrator und Adobe Photoshop heraus möglich. Das
schränkt und jeweils nur für bestimmte Plattformen und Produkt unterstützt auch 3D-Grafiken und weist eine
Browser möglich. Deep Linking mit Flex funktioniert zum bessere Performance auf. Animationen laufen flüssiger
Beispiel nur für Internet Explorer, Firefox (Windows und ab und GUI Controls werden schneller gezeichnet, der
Mac) und Safari (Mac). Speicherbedarf ist geringer als bei früheren Versionen.
Ähnlich sieht es auch bei der Umsetzung von Barriere- Oracle verweist gerne auf JavaFX Beispielimplementie-
freiheit aus. Während es bei Tastatursteuerung und indi- rungen, wie etwa auf der Webseite der Olympischen
vidueller Anpassung der Schriftgröße in den letzten Jah- Winterspiele (2010). Allerdings kommt auch bei diesem
ren große Fortschritte bei den RIAs gegeben hat, werden beworbenen Internetauftritt JavaFX nur in einzelnen Be-
Screen Reader nur teilweise und abhängig vom Betriebs- reichen zum Einsatz, während Adobe Flash dominiert.
system unterstützt. Der Flash Player (ab Version 9) ist Obwohl JavaFX davon profitiert, dass die Java-
vor allem auf den Screen Reader JAWS (Freedom Scien- Laufzeitumgebung auf ca. 75% der internetfähigen
tific, 2010) abgestimmt und setzt ein Windows-Betriebs- Computer installiert ist (RiaStats, 2010), sind ver-
system voraus. gleichsweise wenige RIAs auf Basis von JavaFX im Inter-
net anzutreffen. Es bleibt somit abzuwarten, ob Oracle
Ein wesentlicher Unterschied zwischen Flash und Silver-
mit JavaFX im Vergleich zu Adobe und Microsoft im RIA-
light ist, dass Flash beim Rendering - außer bei der Dar-
Umfeld aufholen kann.
stellung von Videos und ausgenommen mobile Geräte
mit OpenGL ES 2.0 - derzeit nicht auf Hardware-
3.7 Google Web Kit (RIA)
Unterstützung zugreifen kann. Dafür wird von einer
Die Besonderheit am Google Web Kit (GWT) ist die Pro-
deutlich größeren Verbreitung des Flash Plug-ins (ca.
grammierung in Java. Durch den GWT Compiler wird der
3.5 MB) ausgegangen: ca. 90% aller Nutzer haben das
Java Code in eine Web-Anwendung bestehend aus HTML,
Plug-in installiert, 75% aller Online-Videos werden im
CSS und JavaScript/AJAX umgewandelt. Mit GWT ent-
Flash Player abgespielt. Der Player ist für alle Plattfor-
stehen auf diese Weise dynamische GUIs, die mehr an
men (inklusive Linux und Solaris) und alle gängigen
Desktop-Anwendungen erinnern als an Web-
Browser erhältlich. Für mobile Geräte bietet Adobe je-
Applikationen.
doch nur eine Beta-Version für Android an (Adobe,
2010). Eine Version für das iPhone wird es aufgrund des Im Gegensatz zu anderen RIA-Technologien wie Silver-
Widerstands von Apple vermutlich vorerst nicht geben. light oder Flex benötigt GWT kein Browser Plug-in und
basiert einzig auf den vom Browser unterstützten Stan-
Flash ist ebenso wie Silverlight eine erstklassige Wahl für
dards HTML, Javascript und CSS. Dies ist sowohl ein
GUI Prototyping. Anwender, die mit der Technologie
großer Vorteil als auch die größte Einschränkung von
und der Flex Builder-Entwicklungsumgebung vertraut
GWT. Während Plug-in basierte RIA-Technologien auch
sind, können mit wenig Aufwand interaktive UIs zusam-
Vektorgrafiken, Animationen und Video Streaming out-
menstellen und bei Bedarf auch Custom Controls entwi-
of-the-box unterstützen, ist dies mit GWT nur beschränkt
ckeln. Ein Prototyping Werkzeug wie SketchFlow wird
möglich. Auch Events können nicht wie bei RIAs verar-
jedoch für Flash nicht angeboten.
beitet werden. Die Möglichkeiten, eine visuell anspre-
chende und stark interaktive Benutzeroberfläche zu
entwickeln, sind somit mit GWT deutlich eingeschränkt.
©
Zühlke / Dez. 2010

6. Whitepaper Client-Technologien Seite 6 von 7
Dennoch ist es möglich, in GWT eigene GUI-Elemente nur „GWT pur“ tatsächlich browserunabhängig. Werden
zu erstellen. Dazu steht eine Vielzahl an GWT Bibliothe- eigene GUI-Elemente mit Hilfe von CSS und HTML gestal-
ken zur Verfügung. Sie können verwendet werden, ohne tet, muss der GUI-Designer die Browser-Kompatibiliät
dass zum Beispiel JavaScript/AJAX Kenntnisse erforder- sicherstellen.
lich sind. Bei der Gestaltung eigener GUI-Elemente set-
zen allerdings HTML und CSS die Grenzen. Bei GWT 4.0 Ausblick: HTML5
findet das GUI Rendering stets in HTML statt. So kann Mit HTML5 kündigt sich eine neue Client-Technologie im
ein Tab zum Beispiel auch durch ein Bild dargestellt RIA-Umfeld an. HTML5 macht mit CSS3 und JavaScript
werden, aber nicht in beliebiger Form, so wie dies bei moderne RIAs ohne Plug-in noch attraktiver und leis-
Adobe Flash oder Microsoft Silverlight möglich wäre. tungsfähiger. Das neue Canvas-Objekt ermöglicht das
Hier erlauben Vektor-basierte GUI-Elemente nahezu un- Zeichnen von Grafiken mit Hilfe von JavaScript direkt im
endliche Freiheitsgrade. Im Zusammenspiel mit HTML5 Browser. Gerade im Enterprise Umfeld, wo Plug-ins
und dem neuen Canvas, besteht aber auch neues Po- meist nicht erlaubt sind, können mit HTML5 moderne
tential in Richtung 2D- und 3D-Grafiken im Zusammen- Web-Applikationen entstehen. Insofern wird HTML5 in
spiel mit JavaScript und GWT. vielen Fällen eine Alternative zu Adobe Flash bzw. Flex
und Microsoft Silverlight sein.
Durch die Trennung von HTML und AJAX auf der einen
Seite und CSS auf der anderen Seite können Entwick-
HTML5 ist jedoch nicht nur für den Desktop, sondern
lung und Design teilweise parallel arbeiten. Der vom
auch für „Apps“ auf mobilen Geräten relevant. Das Po-
GWT Compiler generierte HTML-Code ist jedoch oft
tenzial für eine plattformübergreifende Entwicklung mo-
sehr unübersichtlich, so dass das Design in CSS den
biler Anwendungen ist gerade wegen der Chance auf
Designer auch vor Herausforderungen stellt. Er muss
geringere Entwicklungskosten und einfachere Verbrei-
den kryptischen Code zumindest soweit verstehen, dass
tung gross. Die Offline-Fähigkeiten und die Möglichkei-
er die richtigen Elemente im CSS gestaltet.
ten zur lokalen Datenspeicherung (z.B. Web Storage
Grundsätzlich gibt es natürlich die Möglichkeit, Wire- und Web SQL Database) verleihen HTML5 eine hohe
frames mit statischem HTML zu erstellen. Mit GWT kön- Flexibilität und Reichhaltigkeit.
nen dann verschiedene Teile aus dem statischen HTML
durch dynamischen Inhalt ersetzt werden. Eine weitere Neben Apple haben auch Microsoft und Adobe eine
Möglichkeit zum GUI Prototyping bieten GUI Builder für breite Unterstützung für HTML5 angekündigt. Es ist zu
GWT. Der Aufwand bei GUI Prototyping mit GWT steigt erwarten, dass aktuelle GUI-Entwicklungswerkzeuge für
jedoch relativ schnell an, da für interaktives Verhalten Flex und Silverlight einen HTML5-Export zulassen wer-
immer Code programmiert werden muss. Wenn kein den. Auf diese Weise werden HTML5-Entwickler künftig
interaktives Verhalten gezeigt werden muss, sind Proto- auf eine vielfältige und etablierte Werkzeugkette zurück-
typen in Form von Wireframes (z.B. erstellt in Microsoft greifen können, in der sich auch GUI-Designer wohl füh-
Visio) oft die bessere Wahl. Zur Programmierung in len. Es lohnt sich, die Entwicklung von HTML5 genauer
GWT muss allerdings spätestens dann gegriffen werden, zu beobachten.
wenn die Machbarkeit bewiesen werden muss. Insge-
samt ist ein GUI Prototyping direkt in GWT daher relativ 5.0 Zusammenfassung
umständlich und vergleichsweise teuer. Eine entscheidende Weiche bei der Umsetzung eines
GUIs wird mit der Wahl des Client-Ansatzes gestellt:
Per Google Gears können GWT-Anwendungen auf lokale
Thin Client, Rich Client oder RIA? Angesichts der Viel-
Ressourcen des Clients zugreifen, ähnlich der Sandbox
zahl an verfügbaren Client-Technologien stellt der Ent-
von Java Applets. So ist zum Beispiel der Zugriff auf eine
scheid für eine Technologie eine Herausforderung dar.
lokale Datenbank und das Dateisystem möglich. Das
Die Möglichkeiten bei der Gestaltung interaktiver An-
entsprechende Plug-in macht GWT-Anwendungen dann
wendungen erfordern ein besonderes Gespür für die
reinen Desktop Anwendungen noch ähnlicher.
Benutzer und deren Bedürfnisse. Wegen der grossen
Die in GWT erstellten Anwendungen glänzen durch Anzahl neuer Client-Technologien und der sich daraus
schnelle Reaktionszeiten aufgrund der durch AJAX opti- ergebenden Varianten bei der Gestaltung des GUI müs-
mierten Kommunikation mit dem Server. Es sind keine sen Usability-Expertise und Client-Technologie-Know-
kompletten Client-Server-Roundtrips notwendig; das how kombiniert werden. Für Unternehmen ist jetzt ein
GUI kann partiell neu geladen werden und der Kontext guter Zeitpunkt, sich mit verschiedenen Client-
bleibt erhalten. Im Zusammenspiel mit älteren Browsern, Technologien auseinanderzusetzen. Viele der vorgestell-
wie IE 6, kann es bei GWT-Anwendungen aber zu Per- ten Client-Technologien werden in den kommenden
formance-Problemen kommen. Des Weiteren ist auch Jahren verstärkt Einzug halten.
©
Zühlke / Dez. 2010

7. Whitepaper Client-Technologien Seite 7 von 7
Über Zühlke
Zühlke steht als unabhängiges Technologie- und Beratungsunternehmen für maßgeschneiderte Softwarelösungen, Pro-
duktinnovation und Managementberatung. Erfahrene Spezialisten beraten, entwickeln und integrieren ganzheitlich und
innovativ. Projekte werden effizient abgewickelt, Lösungen funktionsbereit realisiert. Die vor über 40 Jahren
gegründete Zühlke ist eine international anerkannte Lösungsanbieterin mit Teams in Deutschland, Großbritannien,
Österreich und der Schweiz. Im Jahr 2009 erzielte die Zühlke Gruppe mit 350 Mitarbeiter-/innen einen Umsatz
von 65 Millionen Schweizer Franken.
Danksagung
Wir bedanken uns bei den Entwicklerinnen und Entwicklern von Zühlke Schweiz sowie den Mitgliedern des Zühlke
Competence Center für Client-Technologien für die Mitwirkung an diesem Artikel: Christian Abbegg, Mark Dettinger,
Nikolaos Kaintantzis, Christian Moser, Romano Roth, Martin Steiger und Sandro Strebel.
Literatur
Adobe (2010): Flash Player 10.1 Beta für Android. Online unter:
http://labs.adobe.com/downloads/flashplayer10.html#android, letzter Zugriff 18.06.2010
Arnold, K. et al (2009): The Napkin Look & Feel. Online unter http://napkinlaf.sourceforge.net/, letzter Zugriff
18.06.2010
CodePlex/Microsoft (2010): Silverlight Toolkit. Online unter: http://groups.google.com/group/silverlight-toolbox/,
letzter Zugriff 18.06.2010
Eclipse Foundation (2010): Nebula Project. Online unter http://www.eclipse.org/nebula, letzter Zugriff 18.06.2010
Flamingo Swing Component Suite. Online unter https://flamingo.dev.java.net/, letzter Zugriff 18.06.2010
FormDev (2010): JformsDesigner. Online unter http://www.jformdesigner.com/, letzter Zugriff 18.06.2010
Freedom Scientific (2010): JAWS Screen reader. Online unter: http://www.freedomscientific.com/products/fs/jaws-
product-page.asp/, letzter Zugriff 18.06.2010
DIN, Deutsches Institut für Normung e. V. (2010): DIN EN ISO 9241-210: Ergonomie der Mensch-System-Interaktion -
Teil 210: Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme (ISO 9241-210:2010); Deutsche Fassung
FprEN ISO 9241-210:2010
DIN, Deutsches Institut für Normung e. V. (2008): Ergonomie der Mensch-System-Interaktion - Teil 151: Leitlinien zur
Gestaltung von Benutzungsschnittstellen für das World Wide Web (ISO 9241-151:2008); Deutsche Fassung EN ISO
9241-151:2008
Netbeans (2010): JavaFX Composer. Online unter http://wiki.netbeans.org/JavaFXComposer, letzter Zugriff 18.06.2010
Olympische Winterspiele (2010): GeoView. Online unter http://www.vancouver2010.com/olympic-medals/geo-view/,
letzter Zugriff 18.06.2010
Redko, Alla (2010): JavaFX User Interface Controls Overview. Online unter
http://javafx.com/docs/articles/UIControls/overview.jsp, letzter Zugriff 18.06.2010
RiaStats (2010): Rich Internet Application Statistics. Online unter http://www.riastats.com/, letzter Zugriff 18.06.2010
Microsoft (2010): Windows User Experience Interaction Guidelines. Online unter: http://msdn.microsoft.com/en-
us/library/aa511258.aspx /, letzter Zugriff 18.06.2010
Zitzelsberger, W. (2009): Synthetica BlackEye Highlights. Online unter
http://weblogs.java.net/blog/wzberger/archive/2009/11/22/synthetica-blackeye-highlights, letzter Zugriff 18.06.2010
Keywords
Usability Engineering, User Experience Design, User Interface Entwicklung, Client-Technologie, RIA
Kontakt:
Thomas Memmel - Thorsten Büring - Nicolas Durville - Olivier Lalive d’Epinay
WP Client-Technolgien V1
Zühlke Engineering AG
Wiesenstrasse 10a ,8952 Schlieren (Zürich), Schweiz
info@zuehlke.com - www.zuehlke.com
©
Zühlke / Dez. 2010