Ajax ist und bleibt ein aktuelles Thema. Die Programmiertechnik für interaktive Webanwendungen setzt voraus, dass sich Entwickler mit den unterschiedlich reagierenden Javascript-Engines der Browser auseinandersetzen – oder die Browser-Abstraktion einer der zahlreichen Ajax-Bibliotheken überlassen.

Ajax-Webanwendungen zeichnen sich durch komfortable Bedienung aus: Während der Browser bei konventionellen Programmen die Seite bei jeder Veränderung neu laden muss, holen auf Ajax (Asynchronous Javascript and XML) basierende Anwendungen im Hintergrund neue Daten und schreiben nur aktualisierte Teile neu.

Neuere Ajax-Implementierungen, zum Beispiel das vor kurzem von Google aufgekaufte Writely [1], nähern sich im Look&Feel immer mehr Desktopprogrammen an: Writely setzt für die Formatierung Dialogfelder ein, die der Anwender wie gewohnt an der Titelleiste verschieben kann (Abbildung 1). Am oberen Fensterrand sitzt, wie bei Textverabeitungen üblich, eine Buttonleiste. Einen Klick auf den Button »fett« setzt das Textfenster verzögerungsfrei um.

Abbildung 1: Dialogfelder verleihen der Webanwendung Writely das Look&Feel einer Desktopanwendung.

Hierfür ist allerdings kein asynchrones Laden im Hintergrund (Ajax) erforderlich: Writely nutzt den so genannten Design Mode des Browsers. Mozilla, Firefox und Opera 9 stellen im Design Mode Texteingabefelder bereit, die anders als normale Formularfelder auch Formatierungen unterstützen. Die Javascript-Engine kann auf markierte Bereiche zugreifen und Schriftattribute verändern. Wer einen so genannten Rich Text Editor für seine Webanwendung benötigt, findet bei dem unter der LGPL stehenden FCK-Editor [2] die wohl leistungsfähigste freie Umsetzung.

Vielfalt

Nicht nur beim Bedienkomfort schließen Ajax-Anwendungen mehr und mehr zu Desktopapplikation auf. Die Entwickler versuchen darüber hinaus auch immer wieder, neue Anwendungstypen über ein Webinterface zu realisieren. So existieren neben Textverabeitungen bereits Tabellenkalkulationen [3] und ein Bitmap-Editor [4].

Selbst Vektorgrafik lässt sich mit HTML und Javascript realisieren: Die Vektorgrafik-Bibliothek von Walter Zorn [5] setzt pixelgroße Div-Layer ein, um auf HTML-Seiten Kurven, Kreise und Rechtecke darzustellen. Obwohl dies kaum etwas mit dem ursprünglichen Zweck der Div-Layers zu tun hat, liefert das Verfahren in der Praxis brauchbare Ergebnisse (Abbildung 2).

Abbildung 2: Die Javascript Vector Graphics Library von Walter Zorn zeichnet Kurven und geometrische Formen. Da statt Bitmapgrafiken pixelgroße Div-Layer zum Einsatz kommen, beeinflussen die Grafikelemente den Textfluss nicht. Die Bibliothek versucht mit möglichst wenigen Elementen auszukommen.

McNeals Traum

Webanwendungen bieten im Vergleich zu jenen für Desktops zwei unbestreitbare Vorteile: Sie laufen unabhängig vom Betriebssystem auf jedem Rechner, auf dem ein Webbrowser installiert ist. Stellt der Anbieter der Ajax-Anwendung zusätzlich auch Online-Speicherplatz zur Verfügung, sind sowohl Daten als auch die zugehörige Anwendung über das Netz erreichbar.

Eine späte Einlösung von Suns Motto “The Network is the Computer”? Zumindest in einem Punkt könnten Realität und Vision, die der langjährige Sun-CEO Scott McNeal bereits vor Jahren öffentlich beschwor (zum Beispiel in der Pressemitteilung [6]), nicht weiter auseinander liegen: Die Absicht von McNeal war es, die “Komplexität zu vermindern”. Hinter Anwendungen wie Writely oder Google Spreadsheets steckt im Vergleich zu Desktopanwendungen mit gleicher Funktionalität jedoch ein stark erhöhter Entwicklungsaufwand: Die zugrunde liegenden Technologien (HTML, XML und Javascript) sind nicht für die Entwicklung komplexer Anwendungen konzipiert. Oft gelangen Entwickler nur über Umwege zum Ziel.

Sollen nicht große Teile der potenziellen Nutzer von vornherein ausgeschlossen sein, müssen die Applikationen Tests auf den drei bis vier verbreitetsten Browsern durchlaufen. Die nicht standardkonforme Javascript-Engine des Internet Explorer zwingt die Entwickler oft dazu, einen guten Teil des Javascript-Code zweimal zu schreiben. Gerade bei Webanwendungen liegt es also nahe, einmal gefundene Lösungen immer wieder zu verwenden. Zum Glück stehen für die Umsetzung der relativ jungen Programmiertechnik bereits zahlreiche Bibliotheken zur Verfügung.

Ausleihe

In der großen Auswahl der Ajax-Bibliotheken sind komplexe Frameworks zu finden, die sich als Grundlage für die Entwicklung umfangreicher Anwendungen eigenen. Mit dem Dojo-Toolkit [7] lassen sich Interface-Elemente einfach realisieren: Dojo stellt Widgets wie Farbwähler, Kalender oder einen Rich-Text-Editor zur Verfügung. Formularelemente wie Checkboxen lassen sich auf der Basis von Bitmaps grafisch ausgestalten, Formularfelder validieren Client-seitig die Eingabe. Ein Tree-Widget bildet die Verzeichnisbäume aus Dateimanagern nach, das Tab-Widget hilft dabei, Bedienelemente mit Reitern nach Themengebieten zu gliedern.

Dojo unterstützt den Entwickler außerdem bei der Umsetzung von Drag&Drop. Auch optische Effekte wie Ein- oder Ausblenden stehen zur Verfügung. Eine Einbindung der JSON-RPC-Library erlaubt es, aus dem Client-seitigen Javascript-Code heraus direkt auf Java-Methoden auf dem Server zuzugreifen.

Das Dojo-Toolkit abstrahiert dabei von den Browsern (Mozilla/Firefox, Internet Explorer, Opera und Safari/Konqueror) und erspart es dem Entwickler, sich auf die Um- und Abwege der einzelnen Javascript-Engines einzulassen. Auch der Testaufwand reduziert sich. Einen Eindruck von der Leistungsfähigkeit des Dojo-Toolkits vermitteln die Demo-Anwendungen unter der Kategorie “See it in Action” [7].

Sprachbarriere

Dojo ist in Javascript implementiert und daher nicht an eine Server-seitige Programmiersprache gebunden. Soll jedoch eine Webanwendung in eine Ajax-Anwendung verwandelt werden, ist es meist effizienter, einen Wrapper für die Sprache, in der bereits Code vorliegt, einzusetzen.

Vor allem für PHP gibt es zahlreiche Frameworks, die Javascript-Code für Ajax-Funktionalität generieren. Wer ein umfangreiches Ajax-Framework für PHP sucht, sollte sich Prado ansehen [8]. Es basiert auf der Model-View-Controller-Architektur [9] und hilft Seitenlayout und Programmierlogik zu trennen. Außer den bereits angesprochenen Toolkits gibt es viele weitere ([10], [11]). Neue Javascript-Libraries schießen wie Pilze aus dem Boden. Doch an dieser Stelle, statt für Verwirrung zu sorgen, lieber ein handfestes Pilzgericht.

Abbildung 3: Tabs, Unterfenster, Menüs und Datumswähler für die verbreiteten Browser: Dojo erspart häufig Entwicklungsaufwand und Cross-Browser-Tests.

Bratkartoffeln mit Pfifferlingen

Zutaten für zwei Portionen: 50g durchwachsener Speck, 1 Zwiebel, 350g Kartoffeln, 10g Butterschmalz, 250g Pfifferlinge, Salz, Pfeffer aus der Mühle,1/2 Bund glatte Petersilie.

Den Speck in feine Würfel schneiden, die Zwiebeln schälen und fein schneiden. Die Kartoffeln schälen, waschen und in dünne Scheiben schneiden. Die Pfifferlinge putzen und waschen. Butterschmalz in einer großen Pfanne zerlassen, den Speck zugeben und knusprig braten. Die Kartoffeln hinzufügen und zugedeckt unter gelegentlichem Schwenken bei mittlerer Hitze zehn Minuten braten. Dann die Zwiebeln zu den Kartoffeln geben und glasig dünsten. Anschließend die Pfifferlinge zugeben, alles mischen und zugedeckt weitere zehn Minuten garen.

Das Ganze mit Salz und Pfeffer würzen und mit gehackter Petersilie bestreuen.