© DrHitch/Shutterstock.com
Shortcuts
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!

Shortcut Autorenteam


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 I don’t read – I wait for the MovieSpä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);} So einfach kann man ein Video einbetten. Elegant, nicht wahr? Leider ist es aber doch nicht ganz so simpel, denn unglücklicherweise gibt es noch verschiedene Videoformate, die alles etwas komplizierter machen. Mark Pilgrim vergleicht in seinem Buch HTML5 Up and Running [1] Videoformate mit verschiedenen menschlichen Sprachen. Eine deutsche und eine englische Zeitung transportieren unter Umständen dieselbe Information, verwertbar ist die englische Information aber nur, wenn der Leser der englischen Sprache mächtig ist, sie also interpretieren kann. Genauso kann ein Video nur dann wiedergeben werden, wenn das Videoformat von der Anwendung (dem Videoplayer) inte...

Shortcuts
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!

Shortcut Autorenteam


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 I don’t read – I wait for the MovieSpä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);} So einfach kann man ein Video einbetten. Elegant, nicht wahr? Leider ist es aber doch nicht ganz so simpel, denn unglücklicherweise gibt es noch verschiedene Videoformate, die alles etwas komplizierter machen. Mark Pilgrim vergleicht in seinem Buch HTML5 Up and Running [1] Videoformate mit verschiedenen menschlichen Sprachen. Eine deutsche und eine englische Zeitung transportieren unter Umständen dieselbe Information, verwertbar ist die englische Information aber nur, wenn der Leser der englischen Sprache mächtig ist, sie also interpretieren kann. Genauso kann ein Video nur dann wiedergeben werden, wenn das Videoformat von der Anwendung (dem Videoplayer) inte...

Neugierig geworden?


    
Loading...

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