Suche

Spring und HTML5: Frühling für den Browser

Was ist mit IE?

Auch wenn neuere Browser HTML5 bereits in weiten Teilen unterstützen, treffen Entwickler in weiten Teilen auf den Internet Explorer in Version 7 oder 8 als Browser in ihren Projekten. Dadurch können diese Funktionalitäten nicht ohne Weiteres eingesetzt werden. In der Vergangenheit hat man sich in der Entwicklung von Webanwendungen auf den geringsten Funktionsumfang der Browser geeinigt und die Seite bei Verwendung eines aktuellen Browser mit neuen Funktionen aufgewertet („progressive enhancement“). Da aber nicht HTML5-kompatible Browser mehr und mehr in die Minderheit geraten, bietet es sich an, die Anwendung auf aktuelle Browser hin zu entwickeln und fehlende Aspekte über JavaScript-Bibliotheken nachzuliefern („polyfilling“). Durch dieses Vorgehen spricht man also von einer regressiven Erweiterung der Anwendung falls der Browser nur einen limitierten Funktionsumfang liefert.

Es existieren dabei Libraries wie Modernizr [2], um die Erkennung von vorhandenen und vor allem nicht vorhandenen Funktionen durchzuführen. Für alle nicht vorhandenen aber benötigten Funktionen müssen neben Modernizr weitere Bibliotheken geladen werden. Damit das in Listing 1 gezeigte Beispiel auch mit einem Internet Explorer 8 funktioniert, muss also zum Beispiel die Webshims Library [3] nachgeladen werden. Diese rüstet alle fehlenden Validierungen und Widgets im Browser nach. In Listing 2 wird die Verwendung von Modernizr, Webshims mit ihren Abhängigkeiten aufgezeigt.

Listing 2
    
Grafiken

Die grafische und meist aggregierte Darstellung von Informationen ist in den meisten Enterprise-Anwendungen ein wichtiger Bestandteil. Da die Grafiken Daten aus dem laufenden Betrieb der Anwendung enthalten, müssen diese zeitnah vor der Anzeige erstellt werden. Mangels Alternativen zur Anzeige von dynamischen Grafiken abseits von Browser-Plug-ins wie Flash, werden die Daten häufig auf dem Server gerendert und anschließend zum Client als browserkompatible Grafik übertragen. Dies beansprucht vor allem die Server sowie Netzwerkressourcen, was sich vor allem bei mobilen Clients mit einer limitierten Internetanbindung negativ bemerkbar macht.

Auf Grundlage des HTML5-canvas-(„Leinwand“-)Elementes lassen sich grafische Daten nativ im Browser per JavaScript visualisieren. Dadurch können auf Basis der canvas-Arbeitsfläche einfache sowie komplexe grafische Elemente per JavaScript definiert werden. In Listing 3 wird die Arbeitsweise eines canvas Tags illustriert.

Listing 3

 

var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
context.fillRect(0, 0, 150, 100);

Damit mit den, zugegebenermaßen sehr einfachen, Mitteln auch ansprechende Visualisierungen dargestellt werden können, existieren bereits freie (Processing.js) sowie kommerzielle (RGraph) Lösungen, um gängige Diagramme einfach darzustellen. Die Daten für die Diagramme können bereits beim Erzeugen der HTML-Seite durch Spring MVC dem JavaScript mitgegeben werden. Alternativ können die Daten über den Aufruf eines Controllers und dem Austausch von JSON-Datenstrukturen nachgeladen werden. So können die Daten auch vom Client periodisch angefordert werden und das Diagramm dementsprechend aktualisiert werden.

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.