© Henryk Olszewski, Fotolia

Das Openlaszlo-Framework bildet eine leicht zu bedienende Grundlage für Flash-Anwendungen, die vielen aktuellen Ajax-Applikationen in puncto Optik und Stabilität nach wie vor den Rang ablaufen. Seine Befehlssyntax lehnt sich an Standards wie Javascript, HTML und DOM an.

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.

Client-seitige Anwendungslogik

Für die Programmlogik, die auf dem Clientrechner abläuft, nutzt Openlaszlo Javascript. Zum Starten des Javascript-Code dienen oft Event-Handler, die ebenfalls Javascript-Standards übernehmen. Das folgende Codebeispiel, das einen Button nach Klick um fünf Pixel nach rechts verschiebt, vermittelt einen Eindruck davon, wie Openlaszlo mit Benutzereingaben umgeht: Das Button-Tag definiert einen Onklick-Handler, der die Funktion »moveHoriz()« mit dem Argument »5« aufruft. Nach der Beschriftung »Move me« folgt im Codebeispiel die Implementierung der Methode »moveHoriz«, die nach ebenfalls aus Javascript entlehnter Syntax die Position in x-Richtung verändert:

<button onclick="moveHoriz(5);">
  Move me
  <method name="moveHoriz" args="moveAmount">
     this.setAttribute("x", this.x+moveAmount);
  </method>
</button>

Die so genannten Constraints in der Form »${DOM-Pfad zum Eingabefeld}« bieten eine weitere Möglichkeit, um auf Benutzereingaben zu reagieren:

<checkbox id="cbox"  text="Show Window" U
   x="10" y="10" />
<window visible="${cbox.value}" />

Der Wert des Window-Attributs »visible« ist durch den Constraint an den aktuellen Wert der Checkbox »cbox« gebunden. Aktiviert oder deaktiviert der Benutzer die Checkbox, dann passt Openlaszlo die Sichtbarkeit des Fensters entsprechend an, ohne dass hierzu ein Event-Handler nötig ist.

Umgang mit Daten

Die Kernaufgabe vieler Webanwendungen besteht im Anzeigen oder Bearbeiten Server-seitig gespeicherter Daten. Die Openlaszlo-XML-Sprache integriert hierzu leistungsfähige Verfahren: Das Grid-Anzeigeelement aus Abbildung 3 bezieht die angezeigten Datensätze aus dem darüber stehenden Dataset-Element. Das »dataset«-Tag kann XML-formatierte Daten enthalten:

<forecast>
  <day label="TODAY" desc="Rain Likely" temp="Hi  60&#176;F "/>
  <day label="Tonight" desc="Breezy" temp="Lo  34&#176;F "/>
     [...]
</forecast>

Alternativ kann das »dataset«-Element diese, wie in dem zu Abbildung 3 gehörigen Codebeispiel zu sehen ist, auch über das HTTP-Protokoll vom Server beziehen. So lassen sich aktuelle Daten on the Fly aus der Datenbank auf dem Server extrahieren. Openlaszlo verarbeitet diese nach dem Xpath-Prinzip [4], einer vom W3C-Konsortium entwickelten Technologie zur Adressierung von Teilen eines XML-Dokuments: Im Beispiel adressiert »/forecast/day« im »contentdatapath«, also der Datenquelle, alle gleichgeordneten »day«-Knoten der Kategorie »forecast«. Die bearbeiteten Daten stehen unter dem Xpath »weatherdate:/weather« zur Verfügung.

Zusammenspiel von Client und Server

Typisch für umfangreichere Webanwendungen ist das Zusammenspiel von Client- und Server-seitiger Programmlogik. Häufig erfordert der Zugriff mehrerer Clients auf eine gemeinsame Datenbasis einen Rückgriff auf Server-seitig umgesetzte Funktionalität, oft zielt er darauf ab, die Clientapplikation schlank zu halten. Das schont die Ressourcen des Clients und erspart den Download großer Mengen von Programmcode beim Start der Internetanwendung.

Openlaszlo bietet über den Zugriff auf Daten hinaus auch mehrere Möglichkeiten, Server-seitige Prozesse in den Ablauf der Clientanwendung einzubeziehen. Ein Weg, im Hintergrund eine Verbindung zum Server aufzubauen, bietet die »XMLHttpRequest«-Klasse, die Openlaszlo in »script«-Blöcken genau wie aktuelle Javascript-Implementationen der Browser bereitstellt. Anders als bei Javascript-Code, der im Browser abläuft, kennt der sonst sehr ähnliche LZX-Code keine Probleme mit Browser-Inkompatibilitäten: Openlaszlo setzt den Javascript-Code in Flash-Bytecode um, den der Flashplayer ausführt.

Neben dem »XMLHttpRequest« aus Javascript-Code heraus unterstützt Openlaszlo auch das SOAP-Protokoll. Listing 3 zeigt Code, der eine Verbindung zum SOAP-Interface von Amazon herstellt und die zur Verfügung gestellten Methoden in einem Debugfenster ausgibt. SOAP ist dafür in die Kritik geraten, dass es selbst für einfach Aufrufe große Mengen an XML-Daten verschickt. Als Alternative unterstützt Openlaszlo daher auch das XML-RPC-Protokoll.

Der Openlaszlo-Server

Openlaszlo setzt auf Tomcat 5 auf. Das Openlaszlo-SDK enthält einen Tomcat-Servlet-Container. Voraussetzung für einen vollwertigen Openlaszlo-Server ist ein Java-Runtime-Environment in Version 1.4 oder höher. Ein Vorteil, der sich aus dem Java-Unterbau ergibt, ist die Möglichkeit, von der Clientanwendung direkt auf Java-Methoden zuzugreifen.

Das Aufsetzen eines Openlaszlo-Servers ist einfach: Nach der Installation des Java-SDK genügt es, das Openlaszlo-Tar-Archiv [5] zu entpacken und »Pfad/zum/entpackten/Verzeichnis/Server/tomcat-5.0.24/bin/startup.sh« aufzurufen. Die im Archiv enthaltenen Beispielanwendungen sind dann bereits unter »http://localhost:8080/lps-Openlaszlo-Version« zu erreichen. Auf Produktivservern sorgt eine Rewirte-Regel in der Apache-Konfiguration dafür, dass der Webserver das Openlaszlo-Verzeichnis als Proxy an Port 80 bereitstellt:

RewriteEngine on
RewriteRule ^/Verzeichnis(.*)$ http://localhost:8080/lps-Openlaszlo-Version$1 [p]

Weitere Informationen zur Serveradministration sind auf der Openlaszlo-Webseite unter [6] zu finden.

01 <canvas debug="true" height="530">
02   <debug x="15" y="15" width="415" height="500" />
03   <soap name="amazon"
04       wsdl="http://soap.amazon.com/schemas3/AmazonWebServices.wsdl">
05    <handler name="onload">
06         Debug.write('Amazon soap service loaded');
07         Debug.write('Amazon WSDL at ' + this.wsdl);
08         Debug.write('proxy:');
09         Debug.inspect(this.proxy);
10    </handler>
11   </soap>
12 </canvas>

Openlaszlo ohne Java

In Umgebungen ohne Java-Runtime-Environment, zum Beispiel beim Shared Web-Hosting ohne Root-Zugriff, lässt sich Openlaszlo im so genannten Solo-Modus dennoch einsetzen: Ein voll ausgerüsteter Openlaszlo-Server kann die Anwendungen als eigenständig lauffähige SWX-Dateien kompilieren, die die gesamte Funktionalität im Client-seitig ablaufenden Flash-Code enthalten. Ein Webserver ohne Java-Unterstützung kann diese im Internet zur Verfügung stellen. RPC-Funktionen stehen in diesen vorkompilierten Anwendungen dann allerdings nicht mehr bereit.

Verständlich und vielseitig

Die XML-Sprache von Openlaszlo lehnt sich in vielen Punkten an Standards an, die den meisten Webentwicklern geläufig sind, und erleichtert damit den Einstieg: Die XML-Tags zur Definition von Anzeigeelementen ähneln HTML-Tags. Die Client-seitige Programmlogik greift nach gewohnter DOM-Syntax auf diese zu. Als Programmiersprache kommt Javascript 1.4 zum Einsatz. Die Anzeigeelemente gestaltet Openlaszlo optisch ansprechend, außerdem lassen sie sich leicht animieren.

Neben dem in der Webprogrammierung üblichen Verfahren, Client-Programmcode in der Server-Sprache zu generieren, bietet Openlaszlo weitere leistungsfähige Methoden zur Client-Server-Interaktion: Außer dem »XMLHttpRequest« bietet das Framework Unterstützung für SOAP und XML-RPC sowie einen direkten Zugriff auf den Server-seitigen Java-Programmcode.

Dass Openlaszlo-Anwendungen im proprietären Flashplayer ablaufen, mag macher als Nachteil werten. Immerhin garantiert dies Browser-übergreifende Kompatibilität, die Tests mit den verschiedenen gängigen Browsern weitgehend überflüssig machen. Kommende Versionen von Openlaszlo werden die Anzeige und die Client-Programmlogik alternativ auch auf Basis von Ajax umsetzten können.