© DrHitch/Shutterstock.com
HTML 5 meets GWT

1 GWT meets HTML5


HTML5 bringt eine Fülle von beeindruckenden, neuen Möglichkeiten für Applikationen im Web. Das Ziel des Google Web Toolkits ist es, die Erstellung von Webanwendungen zu vereinfachen. Daher ist es höchste Zeit, sich die Kombination von HTML5 und GWT genauer anzusehen. Also starten Sie Ihren Webbrowser, es geht los!

Ziel dieses zweiteiligen Tutorials ist es, die Erstellung von HTML5-Anwendungen mit GWT zu demonstrieren. Der erste Teil des Tutorials wird sich ausschließlich mit dem Canvas-Element befassen. Es stellt eines der interessantesten, aber aufgrund der vielfältigen Einsatzmöglichkeiten auch eines der komplexesten neuen Elemente dar. Im zweiten Teil werden die Audio- und Videoelemente, die Möglichkeit des LocalStorage sowie der HTML5 Application Storage näher betrachtet und erläutert.

HTML5 beschränkt sich großteils auf die Clientseite von Webanwendungen – dieses Tutorial wird selbiges tun. Das entwickelte Tutorial-Beispiel benötigt keine Kommunikation mit einem Server, keinen Austausch von Objekten – es läuft zu 100 % auf der Clientseite, sprich im Webbrowser ab. Selbstverständlich ist es aber möglich, den Code zu einer vollwertigen Client/Server-Anwendung zu erweitern. Darüber hinaus finden sich zahlreiche Tutorials zu GWT sowie GWT Best Practices im Internet. Als besten Einstiegspunkt hierfür empfehle ich die offizielle GWT-Seite [1] sowie die als Videomitschnitte zur Verfügung gestellten Technical Talks der Google-I/O-Konferenzen [2].

GWT und HTML5

Seit seiner Veröffentlichung 2006 ermöglicht GWT-Webanwendungen auf einfache Art und Weise in Java zu entwickeln. Es besteht keine Notwendigkeit mehr sich mit JavaScript oder HTML zu ärgern – dies bleibt dem geduldigen GWT-Cross-Compiler vorbehalten.

HTML5 ist das Schlagwort für das moderne Web. Mit HTML5 eröffnen sich Perspektiven für die Erstellung von Webanwendungen, die bis dato nur durch die Verwendung von Plug-ins (Flash, Silverlight, Java …) realisierbar waren. Eine standardisierte Einbettung von Video- und Audiodateien? Mit HTML5 kein Problem. Die clientseitige Erstellung von komplexen Visualisierungen? Kein Problem für das HTML5-Canvas-Element.

Seit Februar 2011 stellt Google mit der GWT-Version 2.2 erste APIs für die einfache Integration von HTML5-Elementen zur Verfügung. In der zum Zeitpunkt der Textlegung aktuellen GWT-Version 2.4 stehen APIs für die folgenden HTML5-Elemente zur Verfügung:

  • Canvas
  • Audio und Video
  • Client-Side Storage (LocalStorage sowie SessionStorage)

Auf der diesjährigen Google I/O in San Francisco wurde GWTs HTML5-Unterstützung von der Community sehr positiv aufgenommen. Deswegen ist stark anzunehmen, dass Google bereits eifrig daran arbeitet, weitere nützliche HTML5-Elemente wie zum Beispiel GeoLocation oder WebWorkers in GWT zu integrieren.

Als begleitendes Beispiel wird in diesem Tutorial ein simples „Whiteboard“ entwickelt – ein virtuelles Zeichenbrett. Wie in jedem Zeichenprogramm soll es möglich sein einfache, grafische Formen zu erstellen und die Zeichenfläche wieder zu löschen. Zusätzlich soll das Whiteboard das Anbringen, Löschen und Abändern von Post-its unterstützen. In Zeiten von „Green Companies“ ist diese Art von Post-its ein optimaler Beitrag zum Umweltschutz (Abb. 1.1). Der erste Teil des Tutorials wurde auf die Google App Engine deployt und ist unter http://jm-whiteboard-simple.appspot.com/ verfügbar. Der komplette Quellcode findet sich in Form eines Eclipse-Projekts zum Download unter http://www.entwickler-press.de/shortcuts. Für die Erstellung des Tutorials wurden folgende im Web frei verfügbare Tools bzw. Bibliotheken verwendet:

  • Eclipse 3.7 (Indigo)
  • Google Web Toolkit Eclipse Plug-in
  • Google Web Toolkit 2.4 RC 1
  • Mozilla Firefox 5.0
  • Google Web Toolkit Color Picker [3]
  • Fatcow Free Icons [4]
starke_abb1.png

Abbildung 1.1: HTML5 Whiteboard

Am I ready?

Vor der eigentlichen Entwicklung einer HTML5-Webanwendung stellt sich selbstverständlich die Frage nach der technischen Unterstützung. Allerdings kann die Frage: „Spricht mein Webbrowser HTML5?“ nicht mit einem eindeutigen Ja oder Nein beantwortet werden. Die Frage an sich ist bereits irreführend. HTML5 ist nicht ein großes allgemeines Paket sondern eine Sammlung von neuen, einzelnen Elementen. Daher kann nur spezifisch festgestellt werden, ob ein Webbrowser ein bestimmtes, neues Element – wie zum Beispiel das Canvas- oder das Videoelement – unterstützt.

Zu diesem Zweck stellt GWT für jedes HTML5-Element eine isSupported()- bzw. eine createIfSupported()-Methode zur Verfügung. Damit kann überprüft werden, ob der Webbrowser des Anwenders ein neues Element bereits unterstützt und es somit verwendet werden kann, oder ob eine Legacy-Behandlung notwendig ist. Darunter verstehe ich eine alternative Darstellung eines bestimmten Teils einer Webanwendung für den Fall, dass ein HTML5-Element von dem Webbrowser nicht unterstützt wird. Ein Beispiel verdeutlicht den Bedarf für diese Technik am Besten.

Angenommen, Sie zählen zu der Gruppe der Retro-Anwender und „durchpflügen“ das World Wide Web noch immer mit dem lieb gewonnenen Internet Explorer 6, dem treuen Kumpanen aus alten Tagen, so wird die Abfrage nach der Unterstützung für das HTML5-Canvas-Element Canvas.isSupported() den Wert false und die Methode createIfSupported den Wert null retournieren. Für diesen Fall kann man sich als Entwickler eine adäquate Reaktion überlegen. Von der Aufforderung an den Anwender, den Webbrowser zu aktualisieren, bis zum Einbinden einer alternativen Ansicht auf Basis von Flash ist alles denkbar. Listing 1.1 stellt eine solche Legacy-Behandlung schematisch dar.

//Does the browser support an HTML5 Canvas? 
Canvas canvas = Canvas.createIfSupported();
if (canvas != null) {
pnlMain.add(canvas);
}
else {
Label lblError = new Label("Please update your browser!");
pnlMain.add(lblError);
}

Listing 1.1

Um vorab herauszufinden welcher Webbrowser ein bestimmtes HTML5-Element unterstützt, lohnt sich ein Blick auf die HTML5-Readiness-Tabelle [5].

<canvas>

Vereinfacht gesagt definiert das Canvas-Element einen rechteckigen Bereich in einer Webseite als pixelbasierte Zeichenebene, in den man mithilfe von JavaScript zeichnen kann. Der Komplexität der Grafiken ist hierbei keine Grenze gesetzt. Basierend auf einfachen, grafischen Objekten wie Linien, Kreisen und Rechtecken können komplexe Visualisierungen, ja sogar dynamische Spielegrafiken erstellt werden. Auch das Einfügen von Texten und Bildern ist selbstverständlich möglich. Simple Einsatzszenarien für die Verwendung des Canvas-Elements sind die Erstellung von Diagrammen bzw. Charts oder die Erstellung von Animationen.

Das Koordinatensystem des Canvas-Elements startet in der linken oberen Ecke mit dem Nullpunkt und kennt nur positive Koordinaten. Horizontal nach rechts nimmt der x-Wert zu, vertikal nach unten der y-Wert (Abb. 1.2).

starke_abb2.png

Abbildung 1.2: Canvas Koordinatensystem

Ein wichtiges Detail ist, dass sich dieses Koordinatensystem von der Größe des Canvas-Elements innerhalb der Webseite – also von der Größe im DOM (Document Object Model) – unterscheidet. Das interne Koordinatensystem wird automatisch skaliert damit es mit der Größe im DOM übereinstimmt. Daraus resultiert, dass ein kleines Koordinatensystem eine höher...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang