© DrHitch/Shutterstock.com
HTML 5 meets GWT

2 HTML5-Webanwendungen mit GWT


HTML5 ermöglicht erstmals die native Einbindung von audio-visuellen Elementen in Webanwendungen. Auch das Persistieren von Informationen auf der Clientseite, ja sogar der Betrieb von Webanwendungen komplett ohne Netzwerkverbindung ist plötzlich möglich. Hier greift das Google Web Toolkit (GWT) dem Entwickler bei der Realisierung tatkräftig unter die Arme. Way to go Google!

Im ersten Teil des Tutorials wurde das HTML5-Canvas-Element behandelt. Dabei wurde eine erste Version der exemplarischen, virtuellen Whiteboard-Anwendung realisiert. Doch einige Funktionalitäten fehlen noch, daher wird der zweite Teil dieses Tutorials auf der hoffentlich schon liebgewonnenen Whiteboard-Anwendung aufbauen. Für drei weitere HTML5-Elemente werden in der Folge die theoretischen Grundlagen sowie deren Einbindung in bestehende GWT-Anwendungen erläutert:

  • Das Video- bzw. Audioelement
  • Client-Side Storage (LocalStorage und SessionStorage)
  • Der Application Cache

Auch dieses Tutorial-Beispiel wurde auf die Google App Engine deployt und ist unter http://jm-whiteboard-advanced.appspot.com verfügbar. Den komplette Sourcecode finden Sie unter http://www.entwickler-press.de/shortcuts.

starke_abb2.1.png

Abbildung 2.1: HTML5 Whiteboard mit Videoelement

I don’t read – I wait for the Movie

Spätestens seit dem Erfolg von Videoportalen wie YouTube oder Vimeo sollte jedem Entwickler klar sein, dass die Einbindung von Videoinhalten in eine Webanwendung zum aktuellen Stand der Technik gehört. Aus Sicht der Benutzerfreundlichkeit macht es Sinn, bisher textuell dominierte Teile einer Anwendung (z. B. das Handbuch) um audio-visuelle Alternativen zu ergänzen. Ohne Plug-ins von Drittanbietern, wie etwa Apple QuickTime oder Adobe Flash, war es bisher unmöglich, Videoinhalte direkt – nativ – in eine Webanwendung einzubetten. Mit dem HTML5-Videoelement steht nun aber eine Möglichkeit zur Verfügung, Videos auf der Clientseite ohne Installation zusätzlicher Plug-ins wiederzugeben. Das Whiteboard bedient sich des Videoelements um das langweilige textbasierte Hilfemenü durch bewegte Bilder zu ersetzen. Listing 2.1 stellt die Einbettung eines Videos, inklusive einer bereits bekannten Legacy-Behandlung, schematisch dar.

//Does the browser support a HTML5 Video Element? 
Video video = Video.createIfSupported();
if (video != null) {
video.getVideoElement().setSrc("someVideo,mp4");
pnlMain.add(video);
}
else {
Label lblError = new Label("Please update your browser!");
pnlMain.add(lblError);
}

Listing 2.1

So einfach kann man ein ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang