Interaktive Internetanwendungen mit Openlaszlo

Flash hat unter Verfechtern freier Standards im Internet nicht nur Freunde. Denen, die dem Einsatz des kommerziellen Flashplayer jedoch offen gegenüberstehen, bietet das Framework Openlaszlo [1] eine leistungsfähige und leicht programmierbare Plattform für grafisch anspruchsvolle, interaktive Internetanwendungen: Es erzeugt Flash-Bytecode auf Basis einer XML-Sprache, die HTML-ähnliche Tags für das Interfacedesign nutzt und für die Client-seitige Anwendungslogik gewöhnliches Javascript einsetzt. Die unter Linux verfügbare Version 7 des Flashplayer reicht aus, um die Anwendungen auszuführen.

In der als frühe Preview vorliegenden Version 4 setzt Openlaszlo die Anwendungen alternativ in Ajax-Code um. Dies funktioniert allerdings noch nicht für das ganze Leistungsspektrum. Bisher zeigen außerdem erst Firefox/Mozilla und der Internet Explorer 6 die Openlaszlo-Ajax-Anwendungen zuverlässig an.

Flash weist in technischer Hinsicht einige Vorteile gegenüber Ajax auf: Auch wer den Zahlen des Herstellers Adobe [2] misstraut, nach denen über 95 Prozent aller Browser das Flash-Plugin installiert haben, sollte davon ausgehen, dass es eventuell mehr Seitenbesucher gibt, die Javascript abschalten, als solche, deren Browser Flash nicht unterstützt.

Ein echtes Plus für die Flash-Technologie ist, dass sie Kompatibilitätsprobleme der Browser umgeht: Selbst wenn Ajax-Anwendungen auf Bibliotheken oder Frameworks aufsetzen, die von den unterschiedlichen Verhaltensweisen der Browser abstrahieren, ist eine vergleichbare Robustheit erst nach aufwändigen Tests sichergestellt: Zu ausgeprägt sind die Eigenheiten der Javascript-Engines der verschiedenen Browser und Browserversionen.

Freier Flash-Generator

Openlaszlo-Anwendungen basieren auf XML-Dateien: Die Openlaszlo-eigene Sprache LZX legt die Gestaltung des Userinterface fest und bietet die Grundlage für die Client-seitige Anwendungslogik. Sie hält die Hürden für Einsteiger niedrig, indem sie Elemente aus HTML und CSS übernimmt. Die Sprache ist XML-konform und objektorientiert. Bereits geschriebener Code lässt sich effektiv wiederverwenden.

Listing 1 erzeugt die Anzeige aus Abbildung 1: Am Anfang steht die Definition der Klassen »box« und »borderedbox«, die sich durch den Aufruf »<Klassenname>« im Quelltext beliebig oft anzeigen lassen. »borderedbox« beerbt dabei zwar die Klasse »box«, definiert ihr Aussehen auf Basis der geerbten Attribute jedoch neu.

01 <class name="box" height="100" width="100" bgcolor="red"/>
02 
03 <class name="borderedbox" extends="box">
04  <view bgcolor="yellow"
05     x="3" y="3"
06     width="${parent.width-6}"
07     height="${parent.height-6}"/>
08 </class>
09 
10   <box/>
11   <borderedbox/>
12   <borderedbox/>

Abbildung 1: Objektorientierung im Interfacedesign: Die unteren Quadrate in der Abbildung erben die Größe des oberen, legen jedoch Hintergrund- und Rahmen neu fest.

Formulare und Widgets

Der Leistungsumfang der XML-Sprache für das Interfacedesign lässt sich am besten an konkreten Beispielen demonstrieren: »<datepicker></datepicker>« reicht aus, um einen grafisch anspruchsvollen Datumswähler wie in Abbildung 2 (links) zu erzeugen. Auch zuverlässig auf allen Browsern funktionierende Menüs (Abbildung 2, rechts) bedeuten kaum mehr Aufwand. Listing 2 zeigt den XML-Code für ein Dropdown-Menü.Eine mehrspaltige Liste (Grid), bei der ein Klick auf die Spaltentitel die Einträge umsortiert und die das Editieren der Einträge oder eine Auswahl der Zeilen erlaubt (Abbildung 3), erfordert ebenfalls nur wenige Zeilen Code:

<canvas height="250">
 <dataset name="weatherdata" request="true"
   src="http://www.laszlosystems.com/cgi-pub/weather.cgi?zip=10022"/>
 <grid datapath="weatherdata:/weather" contentdatapath="forecast/day"/>
</canvas>

Einen Überblick über die in der stabilen Version von Openlaszlo verfügbaren Formularelemente bietet [3].

Abbildung 2: Grafisch anspruchsvolle Widgets mit nur wenigen Zeilen XML-Code: Die Openlaszlo-Plattform nutzt die grafischen Fähigkeiten von Flash als Basis für Rich-Internet-Applikationen.

01 <menubar width="200" >
02   <menu text="Menü 1" width="100">
03    <menuitem text="Menüpunkt 1" onselect="canvas.whichOne(this);"/>
04    <menuitem text="Menüpunkt 2" onselect="canvas.whichOne(this);"/>
05    <menuitem text="Menüpunkt 3" onselect="canvas.whichOne(this);"/>
06    <menuseparator/>
07    <menuitem text="Menüpunkt 4" onselect="canvas.whichOne(this);"/>
08   </menu>
09   <menu text="Menü 2" width="100">
10    <menuitem text="More items..." onselect="canvas.whichOne(this);"/>
11   </menu>
12 </menubar>

Abbildung 3: Openlaszlo setzt Daten im XML-Format automatisch in editierbare und sortierbare Tabellen um. Die XML-Daten lassen sich Server-seitig on the Fly aus Datenbankinhalten generieren.

Auch wenn Interface-Puristen Animationen als unnötige Spielerei ablehnen: Für den Benutzer ist es oft angenehm, wenn er den Übergang zwischen Zustand 1 und Zustand 2 visuell nachvollziehen kann. Am Aufwand scheitern die Effekte in Openlaszlo jedenfalls nicht: Um eine fließende Bewegung zu erzeugen genügt es, die in den Display-Elementen eingebaute »animate«-Methode aufzurufen. Im folgenden Codebeispiel übernimmt dies der »onclick«-Handler für das Element »box«:

<canvas>
  <view id="box" width="200" height="20" <bgcolor="red"/>
    
      hier klicken
    
</canvas>

Die Zuweisung »box.height=20?200:20« bewirkt, dass das Element vom Typ »view« - ein rechteckiges Fenster mit einer anfänglichen Höhe von 20 Pixeln - in 500 Millisekunden auf eine Höhe von 200 Pixeln anwächst. Ein erneuter Klick verkleinert die Box wieder auf die ursprüngliche Größe. Der Parameter »500« bestimmt die Dauer der Animation.