OpenLaszlo

StickyBits

Verfasst von Kai Surendorf am 17. Juli 2007 - 1:59

Schwerpunkt

»Web 2.0« und »Rich Media« sind seit einiger Zeit die Trends im Web. Dabei ist die Entwicklung solcher kleinen Programme im Browser alles andere als trivial und der Entwickler muss wenigstens fortgeschrittene Kenntnisse in JavaScript, XML und / oder Flash und viel Geduld mitbringen sowie einiges an Handarbeit leisten. OpenLaszlo stellt eine Entwicklungsumgebung für »Rich Media«-Anwendungen im Web bereit, bedient sich dabei eines leicht zu erlernenden XML-Dialekts und erzeugt sowohl Flash-Dateien als auch dynamisches HTML (DHTML) mit JavaScript. Das Beste: OpenLaszlo ist Open Source.

OpenLaszlo ist eine Server-Anwendung. Der Anwender oder Entwickler installiert den Server und ist dann in der Lage, über diesen Server die Anwendung im Browser auszuprobieren, zu bearbeiten und zu exportieren. OpenLaszlo beruht auf Apache Tomcat (mehr). Im Installationspaket für Mac OS X, das auf der Webseite des Herstellers herunter geladen werden kann, ist eine vollwertige Tomcat-Installation bereits enthalten. Die bisweilen etwas komplizierte Installation von Tomcat selbst entfällt. Der Server kann auch auf einem Webserver zum Einsatz kommen, sofern dort Tomcat installiert ist. Dies macht die Anbindung an eine Datenbank natürlich sehr viel leichter. Für den Heimgebrauch kann man die mit OpenLaszlo realisierten Projekte sowohl als eigenständige Flash- oder HTML-/JavaScript-Dateien exportieren und mit FTP auf einem beliebigen Webserver hochladen.

Installation

Nach dem Download und dem Aktivieren des Disk Images wird OpenLaszlo wie andere Programme auch mit dem Installationsprogramm von Mac OS X in ein beliebiges Verzeichnis installiert. Das Zielverzeichnis kann dabei frei gewählt werden. In dem Verzeichnis finden sich dann neben den fast schon obligatorischen Erläuterungen ein Ordner Server, der den OpenLaszlo-Server enthält. Ein Alias My Apps verweist auf den Ordner, in dem später die eigenen Projekte abgelegt werden können. Mit den Skripten Start OpenLaszlo Server und Stop OpenLaszlo Server wird der Server gestartet oder beendet. Das Skript OpenLaszlo Explorer startet sowohl den Server und ruft anschließend im Standard-Browser die Verwaltungsoberfläche von OpenLaszlo auf.

Im Order der Installation befinden sich zwei Terminal-Skripten (Stop OpenLaszlo Server und Start OpenLaszlo Server) zum Starten und Stoppen des Servers.

Erster Start und der Laszlo Explorer

Wird OpenLaszlo über das Skript Start OpenLaszlo Server gestartet, dann kann im Browser unter dem URL http://127.0.0.1:8080/lps-4.0.2/laszlo-explorer/ der integrierte Explorer aufgerufen werden. (Abhängig von der installierten Version von OpenLaszlo kann die URL sich ändern, also zum Beispiel auch http://127.0.0.1:8080/lps-4.1.5/laszlo-explorer/ lauten.) Der Explorer ermöglicht unter anderem den direkten Zugriff auf die Dokumentation und einige Beispielprogramme, die die Fähigkeiten von OpenLaszlo demonstrieren. Das kurze Tutorial OpenLaszlo in 10 Minutes ist für einen ersten, kursorischen Einstieg unabdingbar.

Der integrierte Laszlo Explorer erleichtert die Navigation in der Dokumentation und den angelegten Projekten.

Eigene Projekte und Anwendungen können im Ordner My Apps angelegt werden. Dieser steht im Browser zur Verfügung, wenn man in dem URL laszlo-explorer durch my-apps ersetzt. Hier sollten sowohl die nachfolgend beschriebenen *.lzx-Dateien als auch weitere Elemente wie Bilder oder Sounds gespeichert werden.

Im Ordner My Apps werden die Projekte angelegt.

Die Sprache: LZX

Das zentrale Element von OpenLaszlo ist eine LZX genannte XML-Variante. Um eine neue Anwendung zu schreiben, wird einfach im Ordner My Apps eine neue Textdatei mit der Endung .lzx angelegt. In dieser Datei wird mit Hilfe einer Reihe von Tags beschrieben, was das Programm vornehmen soll. In einem Texteditor wie TextMate sollte, um die Bearbeitung des Codes zu erleichtern, das Syntax Highlighting für XML angewandt werden.

Obligatorisch in einer LZX-Datei ist ein <canvas>-Tag, das die Zeichenfläche definiert. In dem Tag kann die Breite und Höhe sowie auch eine Hintergrundfarbe definiert werden. Innerhalb des <canvas>-Tag, das mit dem gleichnamigen von Safari (mehr) technisch nichts gemein hat, können dann die eigentlichen Elemente definiert und positioniert werden. Ein einfaches Beispiel:

<canvas width="300" height="200" bgcolor="green">
<text color="white">Hallo Welt!</text>
</canvas>

Hier würde einfach nur eine Zeichenfläche mit 300 Pixeln Breite, 200 Pixeln Höhe sowie einem grünen Hintergrund definiert, auf der sich der Text Hallo Welt! befindet.

Die Stärke von LZX besteht darin, dass mit einigen Tags auch Befehle realisiert werden können. So würde ein Tag <animation> zusammen mit einigen Werten automatische für eine Animation sorgen, indem man zum Beispiel die X- und Y-Koordinaten eines Objekts manipuliert. Verfügt man über grundlegende Kenntnisse in JavaScript, dann dürfte die Befehlsstruktur von LZX keine größeren Probleme bereiten. Ein Clou von LZX besteht darin, dass man in der XML-Datei auch auf JavaScript zurückgreifen kann. Es ergibt sich so die Möglichkeit, die Animationen und / oder Abfragen in einer Mischung aus JavaScript und speziellen XML-Tags zu steuern.

Jede Menge Komponenten

OpenLaszlo bringt eine ganze Reihe von Elementen mit, die auf der Zeichenfläche platziert werden können. Dazu gehören neben Schaltflächen und Textboxen auch Fensterelemente, die beim Start des Programms vom Anwender auf der Zeichenfläche bewegt werden können. Das klingt zunächst nicht sonderlich spektakulär, kann aber den Entwicklungsprozess durchaus beschleunigen, weil eine ganze Reihe von Aufgaben bereits mit hauseigenen Mitteln erledigt werden können.

Gute Dokumentation

Anders als bei vielen Open Source Projekten wurde bei OpenLaszlo Wert auf eine gute und vor allem vollständige Dokumentation gelegt. So findet sich sowohl auf der Webseite des Projektes als auch im integrierten OpenLaszlo Explorer neben einem kurzen, aber prägnanten Tutorial auch ein komplettes Verzeichnis der enthaltenen und verwendbaren Befehle, die in der Regel auch durch aufschlussreiche Beispiele illustriert werden.

Ein Beispiel: Bilder ein- und ausblenden

Ein Beispiel soll einfach nur zwei Bilder nacheinander ein- und wieder ausblenden. Dabei liegen die Bilder als JPG-Dateien vor, die als externe Ressourcen eingebunden werden sollen. Zunächst wird im Ordner My Apps ein Unterordner bilder erstellt, in dem die Grafikdateien abgelegt werden. Dann wird im Texteditor eine leere Datei bilder.lzx angelegt. Diese hat folgenden Inhalt:

Die siebzehn Zeilen Quellcode führen zu einer vollständigen Animation, die die beiden eingebunden Bilder nacheinander ein- und wieder ausblendet. Zuerst wird hier mit dem Tag <canvas width="500" height="480"> eine 500 Pixel breite und 480 Pixel hohe Zeichenfläche definiert. Dann werden mit den beiden Anweisungen <resource name="Bild1" ... die beiden extern vorliegenden Bilder in die OpenLaszlo-Anwendung importiert und über die Namen Bild1 und Bild2 kann auf die Grafiken zurück gegriffen werden. Um die Grafiken auf der Zeichenfläche anzuzeigen wird mit dem Tag view eine Anzeige der eingebundenen Ressourcen vorgenommen. Bei der ersten Grafik wird über die Zeile <view id="Bild1" resource="Bild1" opacity="0"> eine Ansicht mit der eindeutigen Identifikation (id) Bild1 erzeugt, die auf die zuvor importierte Ressource Bild1 zurück greift. Dabei wird mit der Angabe opacity=0 die Transparenz der Grafik auf 100% gesetzt, die Grafik ist also zunächst voll durchsichtig, ergo nicht sichtbar. Ebenso wird einige Zeilen weiter dann mit Bild2 verfahren.

Innerhalb der view-Tags wird jeweils eine Animations-Gruppe definiert. OpenLaszlo erlaubt es, mehrere Anweisungen von <animation> in einer Gruppe zusammen zu fassen. Die Animationen werden so nacheinander ausgeführt. Das Tag <animation> ermöglicht es, in einem vorgegebenen Zeitraum (duration) den Wert eines Attributes (wie eben mit opacity die Transparenz) zu ändern. Dementsprechend wird mit der Zeile <animator attribute="opacity" from="0" to="1" duration="5000" motion="linear" repeat="infinity"/> der Wert für die Transparenz langsam von 0% auf 100% hoch gesetzt. Das Bild wird langsam sichtbar. Mit der darauf folgenden Zeile wird der Wert wieder auf 0% reduziert und das Bild wiederum unsichtbar. Animationen werden ohne weitere Anweisungen in OpenLaszlo einmal durchlaufen, also nicht automatisch wiederholt.

Um nun zu erreichen, dass die Bilder nacheinander ein- und ausgeblendet werden, kann auf die integrierten Anweisungen von OpenLaszlo zurück gegriffen werden. So findet sich bei der ersten Animations-Gruppe die Anweisung start="false". Diese Anweisung bewirkt, dass die Animation nicht automatisch gestartet wird. Anders hingegen bei der zweiten Animations-Gruppe, denn dort findet sich die Anweisung start="true". Mit der Anweisung onstop="Bild1.anm.doStart()" wird erreicht, dass nach dem erfolgten Ablauf der Animation die Animation der anderen Gruppe angestossen wird. Da sich auch hier eine Anweisung onstop="Bild2.anm.doStart()" befindet, ergibt sich eine Endlosschleife. Die Ähnlichkeit des Befehlsaufbaus zu JavaScript dürfte eindeutig sein.

Die Anwendung kann über Open Laszlo direkt im Browser ausprobiert werden.

Wenn die Datei nun vorliegt, dann kann sie direkt im Browser durch den Aufruf des URL http://127.0.0.1:8080/lps-4.0.2/my-apss/bilder.lzx ausprobiert werden. OpenLaszlo zeigt dann die fertige Animation an und am unteren Rand des Fenster werden etwaige Fehlermeldungen ausgegeben. Unter Compile Options kann vorgegeben werden, in welchem Format (Flash 7, Flash 8 oder DHTML) die OpenLaszlo-Anwendung angezeigt werden soll.

In dem ZIP-Archiv finden sich die fertigen Flash-Filme.

Um die erstellte Anwendung der Öffentlichkeit zugänglich zu machen, kann über die Punkte Server und SOLO die Anwendung exportiert werden. Wird die Option SOLO ausgewählt, dann erstellt OpenLaszlo ein ZIP-Archiv, das herunter geladen und entpackt werden kann. Darin befinden sich dann zwei Flash-Dateien sowie das gesamte Programm realisiert mit JavaScript und HTML.

Die fertige, mit siebzehn Zeilen Quellcode erzeugte Animation

Fazit

OpenLaszlo ist ein vollwertiges, professionelles, leicht zu erlernendes und gut dokumentiertes Werkzeug für umfangreichere Anwendungen, die auf neuere Web-Technologien setzen. Der Grundansatz von OpenLaszlo, eine eigene Auszeichnungssprache zu verwenden, von der aus in verschiedene Formate (zur Zeit Flash und DHTML) exportiert werden kann, dürfte die mit OpenLaszlo vorgenommenen Entwicklungen ausreichend zukunftssicher machen. Dabei ist OpenLaszlo für die meisten Web-Worker leicht zu erlernen und führt schnell zu professionellen Ergebnissen. Dass OpenLaszlo noch dazu Open Source ist, dürfte seiner Verbreitung in den nächsten Monaten sicher dienlich sein.