Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dr. Detlef Groth 22. April 2007

Moderne Benutzerschnittstellen für die Webseite mit den jsComponents

Kein Beitragsbild

Das Fehlen moder­ner Benutzerschnittstellen, durch alle HTML-Spezifikationen hin­durch, hat in der Vergangenheit zu einer Reihe von alter­na­ti­ven Ansätzen zur Programmierung von Rich Internet Applications (RIA) geführt. Neben älte­ren Technologien wie Java, Flash wol­len wir neue­re Wege wie den HTML-Behaviours und Ajax hin­sicht­lich ihrer Eignung für die Realisierung moder­ner Webanwendungen ver­glei­chen. Den Schwerpunkt legen wir dabei auf die Vorstellung der jsComponents – eines schlan­ken und leicht erwei­ter­ba­ren Frameworks, wel­ches auch für Webentwickler ohne JavaScript/Java-Kenntnisse von Interesse ist.

Ein his­to­ri­scher Exkurs
In den Anfängen der 70er und 80er Jahre wur­de das Internet vor allem im aka­de­mi­schen und im mili­tä­ri­schen Bereich genutzt. Der Schwerpunkt lag auf den Inhalten. In den 90er Jahren nah­men mit der Verbreitung von Browsern, wel­che über mul­ti­me­dia­le Fähigkeiten ver­fü­gen, die Nutzerzahlen im Internet ste­tig zu. Da der HTML-Standard durch alle Versionen hin­durch nur Unterstützung für ein­fa­che Formulare vor­sah, begann von Seiten der Browser-Hersteller das Anbieten eige­ner Schnittstellen, um moder­ne Benutzerelemente imple­men­tie­ren zu kön­nen.

So führ­te die Firma Netscape 1995 die Programmiersprache LiveScript – spä­ter in JavaScript umbe­nannt – in den Netscape Navigator ein. Wegen der zuneh­men­den Verbreitung von JavaScript hielt 1996 JavaScript als JScript auch in den Internet Explorer Einzug. Beide Hersteller imple­men­tier­ten auf Basis von JavaScript unter­schied­li­che Erweiterungen von HTML, auch dyna­mi­sches HTML (DHTML) genannt. Wegen der feh­len­den Standards (“Browserkrieg”) und den damit ver­bun­de­nen hohen Kosten bei der Implementierung anspruchs­vol­ler Webanwendungen, wen­de­ten sich bald vie­le Firmen und Programmierer von die­sen Technologien ab.

Versuchen der Firma Sun mit Java und der Firma Macromedia (spä­ter Adobe) mit Flash war nur ein tem­po­rä­rer Erfolg beschie­den, die Nische der moder­nen Benutzerschnittstellen zu beset­zen. Gegen bei­de Technologien spricht, dass sie wie Fremdkörper im Webbrowser agie­ren, man den­ke dabei nur an Funktionen wie das Setzen von Lesezeichen oder das Drucken. Die Herstellung von Flash und Java-Applets erfor­dert vom Entwickler die Benutzung kom­mer­zi­el­ler Software (Flash) oder eines gewal­ti­gen Entwicklungssystems (Java), von der Einfachheit und Freiheit des ursprüng­li­chen Internets bleibt nicht viel zu spü­ren. Desweiteren ist das Neueinstellen von Inhalten mit Flash und Java nun schwie­rig zu rea­li­sie­ren und erfor­dert teil­wei­se vom Anwender die gesam­te Applikation erneut her­un­ter­zu­la­den.

HTML-Komponenten
Die Krise bei der Entwicklung von fort­ge­schrit­te­nen Webanwendungen, her­vor­ge­ru­fen durch die Anarchie der Technologieansätze, führ­te schließ­lich nach und nach zur Durchsetzung von all­ge­mein gül­ti­gen Standards. Insbesondere sind hier die Standardisierung des Dokument-Objekt-Modells (DOM) und der Programmiersprache JavaScript zu nen­nen. Mit den HTML-Komponenten (HTC) oder auch Behaviours genannt für den Internet Explorer in Version 5.5 (2000) ver­such­te Microsoft, dem Mangel an moder­nen Benutzerelementen abzu­hel­fen. Dabei wird der JavaScript-Code in XML-Dateien aus­ge­la­gert, die Komponenten wer­den über Stylesheet-Attribute dekla­riert. Allen HTML-Objekten, wel­che der glei­chen CSS-Klasse ange­hö­ren, wird ein Verhalten zuge­ord­net.

Die Definition des Verhaltens erfolgt in einer HTC-Datei, wel­che dann durch den Browser gela­den wird. Im Zug der Initialisierung der Webseite wer­den Ereignisse wie Mausklicks für die Komponenten an bestimm­te Funktionen gebun­den. Der Ansatz konn­te sich jedoch nicht in grö­ße­rem Umfang durch­set­zen, aber die Technologie war so viel­ver­spre­chend, dass Dean Edwards eine Portierung auf die Mozilla-Browser in Form von Behaviours durch­führ­te. Obwohl die HTML-Komponenten bezie­hungs­wei­se Behaviours einen wich­ti­gen Schritt in die Richtung moder­ner Nutzerschnittstellen dar­stell­ten, gab es eini­ge Probleme mit die­ser Technologie. Die Webseiten lie­ßen sich zum Beispiel oft nicht rich­tig abspei­chern, da die HTC-Dateien nicht her­un­ter­ge­la­den wur­den. Die Darstellung beschränk­te sich auf die Mozilla-Browser und den Internet Explorer. Wegen der mini­ma­len Verbreitung der HTC-Komponenten oder der HTML-Behaviours imple­men­tier­ten ande­re Browser-Entwickler die­se Technologie nicht.

Ajax und der XMLHttpRequest
2005 war ein Meilenstein für die Entwicklung von moder­nen Webanwendungen im Browser. Jesse Garnet mach­te mit sei­nem Artikel Ajax: A New Approach to Web Applications mit einem Schlag eine Technologie popu­lär, die schon seit län­ge­rem in den bedeu­ten­de­ren Browsern imple­men­tiert war. Der Marke Ajax – “Asynchrones JavaScript und XML” ver­half Google mit der Veröffentlichung von Gmail und Google Maps end­gül­tig zum Durchbruch. Nun wur­de der XMLHttpRequest auch in Browsern wie Opera und Safari imple­men­tiert. Vorteil beim dyna­mi­schen Nachladen von Bestandteilen der Anwendung mit­tels XMLHttpRequest ist das ver­min­der­te Datenaufkommen auf dem Server und die damit wesent­lich kür­ze­re Antwortzeiten beim Benutzen der Anwendung. Nachteilig ist, daß sich der Zustand einer Ajax-Webanwendung wesent­lich schwie­ri­ger wie­der­her­stel­len läßt als der einer tra­di­tio­nel­len Webanwendung, das heißt es las­sen sich zum Beispiel schlecht Lesezeichen set­zen. Dieses Problem tei­len Ajax-Anwendungen mit Desktop-Anwendungen. Auch funk­tio­nie­ren die Vor- und Zurück-Knöpfe oft­mals nicht in der beab­sich­tig­ten Weise. Für die­se Probleme gibt es aller­dings bereits ver­schie­de­ne Lösungsansätze.

Ajax-Frameworks
In den letz­ten zwei Jahren hat es eine wah­re Flut bei der Entwicklung von Frameworks für die Erstellung von Benutzerschnittstellen auf Basis von Ajax gege­ben . So lis­tet Ajaxpatterns.org der­zeit über 150 Frameworks auf. Allerdings sind die anspre­chen­den 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] bezie­hungs­wei­se das Dojotoolkit nicht gera­de als leicht­ge­wich­tig zu bezeich­nen. Die meis­ten Toolkits ver­lan­gen zudem vom Benutzer umfang­rei­che JavaScript bzw. Java- (GWT) Kentnisse was den Einstieg erschwert.

jsComponents
Für sehr ambi­tio­nier­te Anwender mit Java- bzw. JavaScript-Kenntnissen sind die im vor­her­ge­hen­den Abschnitt genann­ten Toolkits eine her­vor­ra­gen­de Möglichkeit, um moder­ne Benutzerschnittstellen zu imple­men­tie­ren.

Screenshot

Für den Webentwickler, der sei­ne bestehen­de Webseite nur schnell um eini­ge anpre­chen­de Benutzerschnittstellen erwei­tern will,sind die­se Toolkits aller­dings zu auf­wän­dig. Basierend auf den Erfahrungen mit den bereits erwähn­ten HTML-Behaviours oder HTML-Komponenten und der Verfügbarkeit des XMLHttpRequest in allen moder­nen Browsern wur­den die jsComponents ent­wi­ckelt.

  • HTML zur Definition der Benutzerelemente
  • leicht­ge­wich­ti­ger Kern < 50 kb
  • ein­fa­che Benutzung
  • leich­te Erweiterbarkeit
  • selbst­er­klä­ren­de Beispiele als Dokumentation
  • ein­fa­ches Nachladen von Inhalt und Komponenten

HTML als Sprache zur Deklaration der Komponenten erlaubt den Zugriff durch prak­tisch jede Technologie und auch die Verwendung durch weni­ger erfah­re­ne Webprogrammierer. Die ein­zel­nen Schnittstellen-Elemente wer­den dabei über DIV-Tags mit dem Class-Attribut. Diese Technologie, wel­che HTML, Cascading Stylesheets (CSS) und JavaScript/DOM ver­wen­det, wird auch als Dynamisches HTML (DHTML) bezeich­net. Der Begriff DHTML ist lei­der durch schlech­te Programmiertechniken in der Vergangenheit zu Unrecht ein wenig in Verruf gera­ten. Mit der zuneh­men­den Unterstützung der moder­nen Browser für die W3-Spezifikation des DOM , der Standardisierung von JavaScript als ECMAScript und dem XMLHttpRequest ist es nun aber mög­lich , Plattform- und Browser- (IE, Mozilla, Opera) unab­hän­gi­ge Anwendungen zu schrei­ben. Im Folgenden wol­len wir eini­ge der durch die jsComponents bereit­ge­stell­ten Benutzerelemente und deren Einbinden in die eige­ne Webseite vor­stel­len.

Grundlagen der Benutzung der jsComponents
Bei allen Komponenten muss im Dokumentkopf die JavaScript-Datei “jsComponents.js” und das Stylesheet “jsComponents.css” ein­ge­bun­den wer­den. Die ein­zel­nen Komponenten wer­den dann durch ein Div-Tag und Vergabe eines bestimm­ten Class-Attributes defi­niert. Der HTML-Code, wel­cher sich inner­halb die­ses Div-Tags befin­det, wird dann für die Komponentendarstellung genutzt. Nach dem voll­stän­di­gen Laden des Dokumentes wird für alle Div-Tags, die über ein Class-Attribut ver­fü­gen, wel­ches mit den Buchstaben “JS” beginnt, ver­sucht eine Komponente zu initia­li­sie­ren und bestimm­te Ereignisse für die­se Komponente wie Mausklicks zu bin­den. Fehler für nicht vor­han­de­ne Konstruktorfunktionen mit dem Prefix “JS” wer­den dabei abge­fan­gen. Dieses Verfahren macht es leicht mög­lich, eige­ne Komponenten zu erstel­len. Der Entwickler kann eige­ne Klassen mit dem Bezeichnungschema “JSMeineKomponente” erstel­len und die­se wer­den nach dem Einbinden der ent­spre­chen­den JavaScript-Datei initia­li­siert. Nun zu eini­gen Beispielen für Standard-Komponenten.

JSTree und JSCollapse-Komponente
Eine Baumkomponente wird durch eine nor­ma­le ver­schach­tel­te Liste reprä­sen­tiert. Durch das Umschließen der Liste mit dem Div-Tag und einem Class-Attributwert von “JSTree” wird die Komponente als Baum erkannt und ent­spre­chend dar­ge­stellt.

 <!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 erwei­ter­ba­re Bäume
Oft ist es ein Problem, grö­ße­re Bäume zu über­tra­gen. Hier bie­tet es sich an, nur die obers­ten Ebenen sofort und wei­te­re Ebenen erst auf Anforderung des Nutzer zu über­tra­gen. Diese wer­den dann in den vor­han­de­nen Baum ein­ge­hängt. Um einen sol­chen Knoten zu erzeu­gen, muß ledig­lich der ent­spre­chen­de Li-Knoten mit dem Class-Attribut “inclu­de” aus­ge­zeich­net wer­den. Außerdem ist die URL anzu­ge­ben, von wo der Inhalt die­ses Knotens nach­zu­la­den ist. Da laut XHTML-Standard ein Li-Element kei­ne Datasrc-Eigenschaft haben darf, wird inner­halb des Li-Tags ein lee­res Div-Tag mit dem ent­spre­chen­den Datasrc-Attribut erzeugt. Dieses etwas umständ­li­che Verfahren könn­te umgan­gen wer­den, wenn man eine eige­ne “Dokument Typ Definition” (DTD) für die jsComponents erzeu­gen wür­de.

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

Screenshot

Da die dyna­misch gela­de­nen Knoten erneut ande­re Knoten ein­schlie­ßen kön­nen, ist es mög­lich, mit die­sem Verfahren unend­lich tief ver­schach­tel­te Bäume zu erzeu­gen. Dabei wird die Bandbreite auf Server- und auf Client-Seite nur im not­wen­di­gen Maße belas­tet.

Tabboxen
Moderne Anwendungen ver­fü­gen über soge­nann­te Tabboxen, bei denen Bereiche der Anwendung durch Klicken auf einen Tabbox-Eintrag selek­tiv ange­zeigt wer­den kön­nen. Bei den jsComponents wer­den Tabboxen durch ein Div-Tag der Klasse “JSTabBox” und die ent­spre­chen­den Dokumententabs durch Div-Tags der Klasse “JSTabPanel” erzeugt. Der Titel des Tabs wird durch das Title-Attribut und der aktu­ell geöff­ne­te Tab durch das Current-Attribut fest­ge­legt. Das letz­te­re Attribut ist zwar kein durch den XHTML-Standard defi­nier­tes Attribut, wird aber durch die aktu­el­len Browser im Gegensatz zu dem bereits erwähn­ten Datasrc-Attribut des Li-Tags akzep­tiert.

 <!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 nach­ge­frag­te Komponente ist eine HTML-Tabelle, die sich durch das Klicken auf die Spaltenköpfe sor­tie­ren läßt. Die jsComponents defi­nie­ren eine sol­che Tabelle über ein Div-Tag mit dem Class-Attribute “JSTableSort”. Im Class-Attribut der Spaltenköpfe wird außer­dem der Modus der Sortierbarkeit fest­ge­legt. Zur Auswahl ste­hen dabei “SortNumber” und “SortString”.

Weitere Benutzerelemente
Neben den bereits vor­ge­stel­len Komponenten ver­fü­gen die jsComponents eben­falls über Komponenten für gestreif­te Tabellen sowie Tooltip-, Drag- und Suchlisten-Komponenten. Außerdem wer­den auf der Wiki-Seite der jsComponents noch optio­na­le Komponenten wie der JSDebugger oder eine Barchart-Komponente beschrie­ben.

Zusammenfassung
Die jsComponents sind ein leicht­ge­wich­tes Framework für Webentwickler, die auf kur­ze Einarbeitungszeiten, Erweiterbarkeit, Anpassungsfähigkeit und ein anspre­chen­des Äußeres Wert legen. Kenntnisse von JavaScript sind für den Einsatz der jsComponents nicht not­wen­dig. Anwender mit JavaScript-Kenntnissen kön­nen leicht eige­ne Komponenten erstel­len und in das Framework ein­bin­den. (tm)

Erstveröffentlichung, 22.04.2007

Dr. Detlef Groth

Dr. Detlef Groth, von Beruf Biochemiker und IT-Konsultant, arbeitet als Bioinformatiker und Autor in Potsdam und Umgebung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.