Der neue Hype?

Nicht erst seit der Vorstellung des Apple iPhone im Juli 2007 besteht der Bedarf an mobilen (Web-)Anwendungen. Moderne Geräte wie das Google-Phone unterstützen diesen Trend zwar heute zusätzlich, allerdings gab es schon Ende der 90er Jahre einen echten Boom zum mobile Web. Als Java-Entwickler konnte man so mittels J2ME mobile Web Services erstellen, allerdings musste damals das Telefon des Kunden dazu Java verstehen. Statt nativen iPhone- oder Java-Anwendungen stellt somit das plattformunabhängige, mobile Web heute eine echte Alternative dar. Damit beginnt auch schon das Problem. Fast jedes Gerät hat eine andere Auflösung oder einen anderen Browser, wodurch das Programmieren der mobilen Webanwendung deutlich komplexer wird als bei seinem Desktop-Pendant. Eine Bibliothek, die dem Entwickler einen Großteil der Arbeit abnimmt, ist also notwendig. JavaServer Faces ist dank seines deklarativen Konzpets eine gute Wahl. Eine View enthält lediglich die Beschreibung der Seite und keine direkten Informationen zum Browser.

Android und Kollegen

Das Apache-MyFaces-Trinidad-Framework bietet schon seit längerer Zeit Support für mobile Endgeräte wie z. B. den Palm an. Seit der verstärkten Verbreitung moderner Telefone, wie beispielsweise Android-basierter Geräte, bietet Trinidad seit letzten Jahr auch Unterstützung für Mobiltelefone an. Der Entwickler der mobilen Webanwendung braucht sich dadurch nicht mehr um die spezielle Behandlung der verschiedenen (mobilen) Browser kümmern. Die Trinidad-Komponenten, oder besser gesagt dessen RenderKit, übernehmen diese Aufgabe. Der Entwickler erstellt lediglich den separaten Kanal, für die zusätzliche mobile Unterstützung der eigenen (Web-)Anwendung.

Der mobile Channel

Soll der eigenen Webanwendung nun ein mobiles JavaServer Faces verpasst werden, sollte dies in einem gesonderten mobilen Kanal der Anwendung geschehen. JSF bietet zwar mithilfe des rendered-Attributs ein Mittel, um unterschiedliche Kanäle innerhalb einer View zu vereinheitlichen, allerdings führt ein solches Vorgehen schnell zu schlecht wartbarem Spaghetticode:

1. <lib:myComponent rendered=“#{someCondition}“ ... />
2. <lib:yourComponent rendered=“#{someOtherCondition}“ ... />
3. <lib:specialCaseComponent rendered=“#{someCrazyCondition}“ ... />

Ein weiterer Grund ist, dass der Benutzer vor einem 22“-Bildschirm sicherlich eine andere Auflösung wünscht als der mobile Endbenutzer. Aus genau diesem Grund bieten z. B. das Kicker Magazin oder Amazon eine zusätzliche, mobile Webanwendung an, die auf die Bedürfnisse der Geräte optimiert ist. Auch mit Trinidad ist das möglich. Ein weiterer Vorteil von Trinidad ist sein mächtiges Skinning-Framework. Mithilfe des Skinning-Frameworks kann das Look-and-Feel der Webanwendung zur Laufzeit ausgetauscht werden, je nach gewähltem Gerät. Abbildung 1 zeigt eine Trinidad-Tabelle, die für das Apple iPhone optimiert ist. Der Entwickler erstellt lediglich einen mobilen Kanal der Webanwendung und kann seine Anwendungslogik wiederverwenden. Für jedes Gerät muss dann via CSS das optimale Skinning erstellt werden. Hilfe für die Erstellung eines für das Apple iPhone optimierten Skinnings liefert die Trinidad-Dokumentation.

Abb. 1: Trinidad-Tabelle im iPhone-Look-and-Feel

Integration mit nativen Anwendungen

Neben der reinen Darstellung für die spezifischen Geräte können auch die nativen Dienste der Mobiltelefone in die Webanwendung integriert werden. Ein gängiges Beispiel ist das Anrufen eines Kontakts aus der aktuellen Seite heraus (Abb. 2).

Abb. 2: Direkter Anruf eines Kontakts

Mit einem Fingertip wird die hinterlegte Nummer gewählt:

1. <tr:goLink destination="tel:#{customer.phone}"... />

Viele Geräte haben ebenfalls eine Google-Maps-Anwendung. Damit können Adressen von Kontakten kinderleicht angezeigt werden:

1. <tr:goLink destination="http://maps.google.com/maps?saddr=<Start_Address>"... />

Mobile ist nicht Desktop

Wie bereits weiter oben erwähnt, sollte der mobilen Webanwendung ein eigener, mobiler Kanal spendiert werden. Dabei ist darauf zu achten, dass nicht nur das Skinning und die Menge der dargestellten Informationen auf die Bedürfnisse mobiler Endbenutzer zugeschnitten werden müssen. In der Regel ist es ebenfalls notwendig, viele der vorgegebenen Nutzerprozesse und die damit verbundenen Screen Flows zu optimieren. Während es im normalen Webbrowser zum Beispiel kaum einen User stört, dass er mehrere Links hintereinander anklicken muss, um sein Ziel zu erreichen, besagen Statistiken, dass dies im mobilen Web ein KO-Kriterium bezüglich Ergonomie darstellt. Darüber hinaus ist es wichtig zu verstehen, dass das Look-and-Feel mobiler Webanwendungen in der Regel den Device-spezifischen Style Guides und nicht den eigenen Designvorstellungen angepasst wird.

Fazit

Das Trinidad-Framework erleichtert die Entwicklung von modernen Webanwendungen enorm. Der Entwickler erstellt neben dem mobilen Kanal der Anwendung das CSS-Skinning für die gewünschten Mobiltelefone. Dadurch ist die deklarative View der mobilen Webapplikation leicht wartbar. Die Trinidad-Bibliothek spielt hier geschickt die Stärken von JSF sowie seine eigenen Erweiterungen aus. Dem mobilen Web steht somit nichts mehr im Weg!

Links & Literatur

1. http://www.android.com/
2. http://myfaces.apache.org/trinidad/devguide/mobile.html
3. http://www.kicker.mobi
4. http://www.amazon.de/gp/aw/h.html/279-6200531-5168925
5. http://myfaces.apache.org/trinidad/devguide/skinning.html
6. http://myfaces.apache.org/trinidad/devguide/mobileSkinning.html
7. https://developer.apple.com/safari/