Das Fehlen moderner Benutzerschnittstellen, durch alle HTML-Spezifikationen hindurch, hat in der Vergangenheit zu einer Reihe von alternativen Ansätzen zur Programmierung von Rich Internet Applications (RIA) geführt. Neben älteren Technologien wie Java, Flash wollen wir neuere Wege wie den HTML-Behaviours und Ajax hinsichtlich ihrer Eignung für die Realisierung moderner Webanwendungen vergleichen. Den Schwerpunkt legen wir dabei auf die Vorstellung der jsComponents - eines schlanken und leicht erweiterbaren Frameworks, welches auch für Webentwickler ohne JavaScript/Java-Kenntnisse von Interesse ist.

Ein historischer Exkurs
In den Anfängen der 70er und 80er Jahre wurde das Internet vor allem im akademischen und im militärischen Bereich genutzt. Der Schwerpunkt lag auf den Inhalten. In den 90er Jahren nahmen mit der Verbreitung von Browsern, welche über multimediale Fähigkeiten verfügen, die Nutzerzahlen im Internet stetig zu. Da der HTML-Standard durch alle Versionen hindurch nur Unterstützung für einfache Formulare vorsah, begann von Seiten der Browser-Hersteller das Anbieten eigener Schnittstellen, um moderne Benutzerelemente implementieren zu können.

So führte die Firma Netscape 1995 die Programmiersprache LiveScript - später in JavaScript umbenannt - in den Netscape Navigator ein. Wegen der zunehmenden Verbreitung von JavaScript hielt 1996 JavaScript als JScript auch in den Internet Explorer Einzug. Beide Hersteller implementierten auf Basis von JavaScript unterschiedliche Erweiterungen von HTML, auch dynamisches HTML (DHTML) genannt. Wegen der fehlenden Standards ("Browserkrieg") und den damit verbundenen hohen Kosten bei der Implementierung anspruchsvoller Webanwendungen, wendeten sich bald viele Firmen und Programmierer von diesen Technologien ab.

Versuchen der Firma Sun mit Java und der Firma Macromedia (später Adobe) mit Flash war nur ein temporärer Erfolg beschieden, die Nische der modernen Benutzerschnittstellen zu besetzen. Gegen beide Technologien spricht, dass sie wie Fremdkörper im Webbrowser agieren, man denke dabei nur an Funktionen wie das Setzen von Lesezeichen oder das Drucken. Die Herstellung von Flash und Java-Applets erfordert vom Entwickler die Benutzung kommerzieller Software (Flash) oder eines gewaltigen Entwicklungssystems (Java), von der Einfachheit und Freiheit des ursprünglichen Internets bleibt nicht viel zu spüren. Desweiteren ist das Neueinstellen von Inhalten mit Flash und Java nun schwierig zu realisieren und erfordert teilweise vom Anwender die gesamte Applikation erneut herunterzuladen.

HTML-Komponenten
Die Krise bei der Entwicklung von fortgeschrittenen Webanwendungen, hervorgerufen durch die Anarchie der Technologieansätze, führte schließlich nach und nach zur Durchsetzung von allgemein gültigen Standards. Insbesondere sind hier die Standardisierung des Dokument-Objekt-Modells (DOM) und der Programmiersprache JavaScript zu nennen. Mit den HTML-Komponenten (HTC) oder auch Behaviours genannt für den Internet Explorer in Version 5.5 (2000) versuchte Microsoft, dem Mangel an modernen Benutzerelementen abzuhelfen. Dabei wird der JavaScript-Code in XML-Dateien ausgelagert, die Komponenten werden über Stylesheet-Attribute deklariert. Allen HTML-Objekten, welche der gleichen CSS-Klasse angehören, wird ein Verhalten zugeordnet.

Die Definition des Verhaltens erfolgt in einer HTC-Datei, welche dann durch den Browser geladen wird. Im Zug der Initialisierung der Webseite werden Ereignisse wie Mausklicks für die Komponenten an bestimmte Funktionen gebunden. Der Ansatz konnte sich jedoch nicht in größerem Umfang durchsetzen, aber die Technologie war so vielversprechend, dass Dean Edwards eine Portierung auf die Mozilla-Browser in Form von Behaviours durchführte. Obwohl die HTML-Komponenten beziehungsweise Behaviours einen wichtigen Schritt in die Richtung moderner Nutzerschnittstellen darstellten, gab es einige Probleme mit dieser Technologie. Die Webseiten ließen sich zum Beispiel oft nicht richtig abspeichern, da die HTC-Dateien nicht heruntergeladen wurden. Die Darstellung beschränkte sich auf die Mozilla-Browser und den Internet Explorer. Wegen der minimalen Verbreitung der HTC-Komponenten oder der HTML-Behaviours implementierten andere Browser-Entwickler diese Technologie nicht.

Ajax und der XMLHttpRequest
2005 war ein Meilenstein für die Entwicklung von modernen Webanwendungen im Browser. Jesse Garnet machte mit seinem Artikel Ajax: A New Approach to Web Applications mit einem Schlag eine Technologie populär, die schon seit längerem in den bedeutenderen Browsern implementiert war. Der Marke Ajax - "Asynchrones JavaScript und XML" verhalf Google mit der Veröffentlichung von Gmail und Google Maps endgültig zum Durchbruch. Nun wurde der XMLHttpRequest auch in Browsern wie Opera und Safari implementiert. Vorteil beim dynamischen Nachladen von Bestandteilen der Anwendung mittels XMLHttpRequest ist das verminderte Datenaufkommen auf dem Server und die damit wesentlich kürzere Antwortzeiten beim Benutzen der Anwendung. Nachteilig ist, daß sich der Zustand einer Ajax-Webanwendung wesentlich schwieriger wiederherstellen läßt als der einer traditionellen Webanwendung, das heißt es lassen sich zum Beispiel schlecht Lesezeichen setzen. Dieses Problem teilen Ajax-Anwendungen mit Desktop-Anwendungen. Auch funktionieren die Vor- und Zurück-Knöpfe oftmals nicht in der beabsichtigten Weise. Für diese Probleme gibt es allerdings bereits verschiedene Lösungsansätze.

Ajax-Frameworks
In den letzten zwei Jahren hat es eine wahre Flut bei der Entwicklung von Frameworks für die Erstellung von Benutzerschnittstellen auf Basis von Ajax gegeben . So listet Ajaxpatterns.org derzeit über 150 Frameworks auf. Allerdings sind die ansprechenden Toolkits wie das Google Web Toolkit (GWT) mit der Notwendigkeit einer Java- und Eclipse-Installation oder das optisch sehr schöne Qooxdoo - ein 17 Mb-Download und mit jeweils 4Mb die Yahoo! User Interface Library (YUI) [10] beziehungsweise das Dojotoolkit nicht gerade als leichtgewichtig zu bezeichnen. Die meisten Toolkits verlangen zudem vom Benutzer umfangreiche JavaScript bzw. Java- (GWT) Kentnisse was den Einstieg erschwert.

jsComponents
Für sehr ambitionierte Anwender mit Java- bzw. JavaScript-Kenntnissen sind die im vorhergehenden Abschnitt genannten Toolkits eine hervorragende Möglichkeit, um moderne Benutzerschnittstellen zu implementieren.

Für den Webentwickler, der seine bestehende Webseite nur schnell um einige anprechende Benutzerschnittstellen erweitern will,sind diese Toolkits allerdings zu aufwändig. Basierend auf den Erfahrungen mit den bereits erwähnten HTML-Behaviours oder HTML-Komponenten und der Verfügbarkeit des XMLHttpRequest in allen modernen Browsern wurden die jsComponents entwickelt.

• HTML zur Definition der Benutzerelemente
• leichtgewichtiger Kern < 50 kb
• einfache Benutzung
• leichte Erweiterbarkeit
• selbsterklärende Beispiele als Dokumentation
• einfaches Nachladen von Inhalt und Komponenten

HTML als Sprache zur Deklaration der Komponenten erlaubt den Zugriff durch praktisch jede Technologie und auch die Verwendung durch weniger erfahrene Webprogrammierer. Die einzelnen Schnittstellen-Elemente werden dabei über DIV-Tags mit dem Class-Attribut. Diese Technologie, welche HTML, Cascading Stylesheets (CSS) und JavaScript/DOM verwendet, wird auch als Dynamisches HTML (DHTML) bezeichnet. Der Begriff DHTML ist leider durch schlechte Programmiertechniken in der Vergangenheit zu Unrecht ein wenig in Verruf geraten. Mit der zunehmenden Unterstützung der modernen Browser für die W3-Spezifikation des DOM , der Standardisierung von JavaScript als ECMAScript und dem XMLHttpRequest ist es nun aber möglich , Plattform- und Browser- (IE, Mozilla, Opera) unabhängige Anwendungen zu schreiben. Im Folgenden wollen wir einige der durch die jsComponents bereitgestellten Benutzerelemente und deren Einbinden in die eigene Webseite vorstellen.

Grundlagen der Benutzung der jsComponents
Bei allen Komponenten muss im Dokumentkopf die JavaScript-Datei "jsComponents.js" und das Stylesheet "jsComponents.css" eingebunden werden. Die einzelnen Komponenten werden dann durch ein Div-Tag und Vergabe eines bestimmten Class-Attributes definiert. Der HTML-Code, welcher sich innerhalb dieses Div-Tags befindet, wird dann für die Komponentendarstellung genutzt. Nach dem vollständigen Laden des Dokumentes wird für alle Div-Tags, die über ein Class-Attribut verfügen, welches mit den Buchstaben "JS" beginnt, versucht eine Komponente zu initialisieren und bestimmte Ereignisse für diese Komponente wie Mausklicks zu binden. Fehler für nicht vorhandene Konstruktorfunktionen mit dem Prefix "JS" werden dabei abgefangen. Dieses Verfahren macht es leicht möglich, eigene Komponenten zu erstellen. Der Entwickler kann eigene Klassen mit dem Bezeichnungschema "JSMeineKomponente" erstellen und diese werden nach dem Einbinden der entsprechenden JavaScript-Datei initialisiert. Nun zu einigen Beispielen für Standard-Komponenten.

JSTree und JSCollapse-Komponente
Eine Baumkomponente wird durch eine normale verschachtelte Liste repräsentiert. Durch das Umschließen der Liste mit dem Div-Tag und einem Class-Attributwert von "JSTree" wird die Komponente als Baum erkannt und entsprechend dargestellt.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <html> <head> <title>JS Components: Tree Example</title> <script type="text/javascript" src="jsc/jsComponents.js"></script> <link rel="stylesheet" type="text/css" href="jsc/jsComponents.css" /> </head> <body> <div class="JSTree"> <ul> <li>Ordner 1 <ul> <li><a href="#">Unterordner 1.1</a> <ul> <li><a href="#">Knoten 1.1.1</a></li> <li><a href="#">Knoten 1.1.2 </a></li> </ul> </li> <li><a href="#">Knoten 1.2</a></li> <li><a href="#">Knoten 1.3</a></li> </ul> </li> <li class="opened">Ordner 2 <ul> <li class"leaf" style="list-style-image : url(jsc/file-xml2.gif);"> <a href="#">Knoten 2.1</a></li> <li><a href="#">Knoten 2.2</a></li> </ul> </li> </ul> </div> </body> </html>

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JS Components: Tree Example</title> <script type="text/javascript" src="jsc/jsComponents.js"></script> <link rel="stylesheet" type="text/css" href="jsc/jsComponents.css" /> </head> <body> <h3>JSCollapse Beispiel</h3> <div class="JSCollapse"> <ul> <li>Ordner 1 <ul> <li><a href="#">Knoten 1.1</a></li> <li><a href="#">Knoten 1.2</a></li> <li><a href="#">Knoten 1.3</a></li> </ul> </li> <li class="opened">Ordner 2 <ul> <li><a href="#">Knoten 2.1</a></li> <li><a href="#">Knoten 2.2</a></li> </ul> </li> <li>Ordner 3 <ul> <li><a href="#">Knoten 3.1</a></li> <li><a href="#">Knoten 3.2</a></li> </ul> </li> </ul> </div> </body> </html>

Dynamisch erweiterbare Bäume
Oft ist es ein Problem, größere Bäume zu übertragen. Hier bietet es sich an, nur die obersten Ebenen sofort und weitere Ebenen erst auf Anforderung des Nutzer zu übertragen. Diese werden dann in den vorhandenen Baum eingehängt. Um einen solchen Knoten zu erzeugen, muß lediglich der entsprechende Li-Knoten mit dem Class-Attribut "include" ausgezeichnet werden. Außerdem ist die URL anzugeben, von wo der Inhalt dieses Knotens nachzuladen ist. Da laut XHTML-Standard ein Li-Element keine Datasrc-Eigenschaft haben darf, wird innerhalb des Li-Tags ein leeres Div-Tag mit dem entsprechenden Datasrc-Attribut erzeugt. Dieses etwas umständliche Verfahren könnte umgangen werden, wenn man eine eigene "Dokument Typ Definition" (DTD) für die jsComponents erzeugen würde.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <html> <head> <title>JS Components: Tree Example</title> <script type="text/javascript" src="jsc/jsComponents.js"></script> <link rel="stylesheet" type="text/css" href="jsc/jsComponents.css" /> </head> <body> <div class="JSTree"> <ul> <li>Ordner 1 <ul> <li><a href="#">Unterordner 1.1</a> <ul> <li><a href="#">Knoten 1.1.1</a></li> <li><a href="#">Knoten 1.1.2 </a></li> </ul> </li> <li><a href="#">Knoten 1.2</a></li> <li><a href="#">Knoten 1.3</a></li> </ul> </li> <li class="include"> <div datasrc="inc-list.xhtml"></div>Dynamic Folder</li> <li class="include"> <div datasrc="inc-nested-list.xhtml"></div>Dynamic Folder 2</li> <li class="include"> <div datasrc="inc-nested-nested-list.xhtml"></div>Dynamic Folder 3</li> </ul> </div> </body> </html>

Da die dynamisch geladenen Knoten erneut andere Knoten einschließen können, ist es möglich, mit diesem Verfahren unendlich tief verschachtelte Bäume zu erzeugen. Dabei wird die Bandbreite auf Server- und auf Client-Seite nur im notwendigen Maße belastet.

Tabboxen
Moderne Anwendungen verfügen über sogenannte Tabboxen, bei denen Bereiche der Anwendung durch Klicken auf einen Tabbox-Eintrag selektiv angezeigt werden können. Bei den jsComponents werden Tabboxen durch ein Div-Tag der Klasse "JSTabBox" und die entsprechenden Dokumententabs durch Div-Tags der Klasse "JSTabPanel" erzeugt. Der Titel des Tabs wird durch das Title-Attribut und der aktuell geöffnete Tab durch das Current-Attribut festgelegt. Das letztere Attribut ist zwar kein durch den XHTML-Standard definiertes Attribut, wird aber durch die aktuellen Browser im Gegensatz zu dem bereits erwähnten Datasrc-Attribut des Li-Tags akzeptiert.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>TabBox-Komponente</title> <script src="jsc/jsComponents.js" type="text/javascript"> </script> <link rel="stylesheet" type="text/css" href="jsc/jsComponents.css" /> </head> <body>

 <div class="JSTabBox"> <div class="JSTabPanel" title="first item" current="false"> <p> first text first text first text first text </p>  </div> <div class="JSTabPanel" title="second item" current="true"> <p> second text second text second text second text </p>  </div> <div class="JSTabPanel" title="third one" current="false"> <p> third text third text third text third text </p>  </div> </div> </body> </html>

Sortierbare Tabellen
Eine oft nachgefragte Komponente ist eine HTML-Tabelle, die sich durch das Klicken auf die Spaltenköpfe sortieren läßt. Die jsComponents definieren eine solche Tabelle über ein Div-Tag mit dem Class-Attribute "JSTableSort". Im Class-Attribut der Spaltenköpfe wird außerdem der Modus der Sortierbarkeit festgelegt. Zur Auswahl stehen dabei "SortNumber" und "SortString".

Weitere Benutzerelemente
Neben den bereits vorgestellen Komponenten verfügen die jsComponents ebenfalls über Komponenten für gestreifte Tabellen sowie Tooltip-, Drag- und Suchlisten-Komponenten. Außerdem werden auf der Wiki-Seite der jsComponents noch optionale Komponenten wie der JSDebugger oder eine Barchart-Komponente beschrieben.

Zusammenfassung
Die jsComponents sind ein leichtgewichtes Framework für Webentwickler, die auf kurze Einarbeitungszeiten, Erweiterbarkeit, Anpassungsfähigkeit und ein ansprechendes Äußeres Wert legen. Kenntnisse von JavaScript sind für den Einsatz der jsComponents nicht notwendig. Anwender mit JavaScript-Kenntnissen können leicht eigene Komponenten erstellen und in das Framework einbinden. (tm)

Erstveröffentlichung, 22.04.2007

Verwandte Artikel

• YUI - ein AJAX-Riese startet - Teil 3 (0)
• YUI - ein AJAX-Riese startet - Teil 2 (0)
• YUI - ein AJAX-Riese startet - Teil 1 (0)
• Sortierbare Tabellen - Datagrids mit AJAX und Javascript (11)
• Rich Internet Applications: Die Verschlimmbesserer - Teil 2 (0) €
• Rich Internet Applications: Die Verschlimmbesserer (0) €
• Graphic User Interfaces bei Scale Nine (0)