Eine TYPO3-Benutzerverwaltung auf Basis von Macromedia Flash: TYPO3 geflashed
Applikationen mit Flash entwickeln
Dass Flash zu mehr taugt, als Comic-Filmchen und Banner zu erstellen,
sollte sich inzwischen herumgesprochen haben. Spätestens seit
FlashMX2004 und der aktuellen Version der Skriptsprache ActionScript
(AS 2.0) lassen sich Applikationen strukturiert und effizient aufbauen.
Seine große Stärke spielt Flash vor allem bei der Erstellung und
Steuerung von grafischen Benutzeroberflächen aus, um bestimmte Vorgänge einfacher und
benutzerfreundlicher zu gestalten.
Flash und TYPO3
Auslöser, sich näher mit der Kombination „Flash und TYPO3“ zu befassen, war
der Wunsch des Kunden, die Verwaltung der sog. Frontend-User in TYPO3
komfortabler zu machen. TYPO3 bietet standardmäßig nur sehr
eingeschränkte Möglichkeiten, sich die User auflisten zu lassen und zu
bearbeiten. Ziel war es, Möglichkeiten bereit zu stellen, Userdaten
einfach und schnell anzeigen und editieren zu können, bestimmte User
„live“ zu suchen und alle Userdaten als Excel-Datei exportieren oder
aus einer Excel-Datei importieren zu können.
Die Vorteile
Mit Flash kann die gesamte Anwendung nun als „One-Screen-Application“
umgesetzt werden, so daß alle wesentlichen Funktionalitäten
übersichtlich innerhalb einer einzigen Ansicht Platz finden. Hierdurch
entfällt das
ständige Neuladen der Seite (Request-Response). Features wie
„Echtzeit-Suchen“ und ein besseres User-Feedback, die bei HTML-Anwendungen
aufgrund der Zustandslosigkeit des HTTP-Protokolls nur schwer oder nur
durch Technologie-Kombinationen wie zum Beispiel AJAX umzusetzen sind,
stellen für
Flash-Anwendungen kein größeres Problem dar.
Das richtige Look-and-Feel
Wichtig war, die Benutzeroberfläche an den Look von TYPO3
anzupassen. Die Administratoren und Redakteure sollten vertraute Bedienelemente zur
Verfügung gestellt bekommen. Hierbei spielte insbesondere das „Skinning und
Styling“ der Flash-Komponenten (Comboboxen, Scrollbars, Buttons etc.)
eine wichtige Rolle. Die Macromedia V2 Komponenten werden standardmäßig
im weiß-grünen „Halo-Look“ mitgeliefert, lassen sich aber mit genügend Geduld
z.B. an den Windows XP-Look anpassen.
Welche Technik dahinter steckt
Die gesamte Anwendung wurde mit objektorientiertem ActionScript 2.0
nach dem Model-View-Controller-Pattern programmiert. Bei dieser
Vorgehensweise sind Präsentationsschicht und Datenmodell weitestgehend
voneinander
unabhängig. Die Schnittstelle zur TYPO3-Datenbank läuft über AMFPHP [1],
eine OpenSource Flash-Remoting-Lösung.
Mit AMFPHP lassen sich Result-Sets aus MySQL-Abfragen
direkt nach Flash schicken, die sich dort komfortabel als Objekte oder
Arrays weiterverarbeiten oder als Datenelemente für Komponenten
verwenden lassen.
Die
beiden entscheidenden Vorteile von Flash-Remoting sind also zum einen,
dass sich komplexe Datentypen zwischen MySQL-PHP-Backend und
Flash Frontend problemlos austauschen lassen und zum anderen die
Geschwindkeit: Die Übertragung erfolgt binär im proprietären AMF (Action Message
Format) und ist wesentlich schneller als der Datenaustausch mit XML
oder herkömmlichen Serilisations/Deserilisations-Techniken.
Ein
anderer wichtiger Bestandteil der Anwendung ist das ebenfalls
kostenlos erhältliche Flash JavaScript Integration Kit [2], das für die Steuerung des Excel-Datei-Uploads
verwendet wurde. Da native Upload-/Download-Möglichkeiten leider erst
seit dem neuen Flash Player 8 integriert sind, muss in älteren
Versionen auf eine HTML-JavaScript-Lösung zurückgegriffen werden. Das Javascript
Integration Kit vereinfacht dabei die Kommunikation zwischen Flash und
JavaScript, da von Flash aus JavaScript-Funktionen aufgerufen und alle wichtigen Datentypen
ausgetauscht werden können. Der Excel-Export der Daten aus der
Flash-Datagrid-Komponente (eine Art Tabelle) erfolgt über das PHP-PEAR-Modul „Excel Spreadsheet Writer“ [3].
Das Zusammenspiel mit TYPO3
Der wichtigste Punkt bei der Integration der Flash-Anwendung ins
TYPO3-Backend ist die Authentifizierung. Über den
„FlashVars“-Parameter des Flash-Object-Tags kann der Flash-Datei beim
Einbetten in HTML
die aktive TYPO3-Session-ID mitgegeben werden. Die Flash-Anwendung
gleicht diese ID mit der TYPO3-Datenbank ab und startet die Anwendung
nur, wenn die IDs identisch sind. Ansonsten können alle erforderlichen
Dateien (AMFPHP, JS-Kit, PHP-Dateien, SWFs) über den Extension
Kickstarter von TYPO3 zu einer kompakten t3x-Datei zusammengepackt
werden, die sich genau wie alle anderen Extensions mit wenigen Mausklicks installieren lässt.
Beim Excel-Import werden die Daten automatisch auf Duplikate und fehlerhafte Eingaben überprüft.
Was der Erweiterung zu einer „echten“ TYPO3-Extension noch fehlt, ist
die Unterstützung von mehreren Sprachen. Es wäre allerdings kein großes
Problem, die Daten aus der Datei „locallang.php“, die bei TYPO3-Extensions die
Übersetzungen enthält, an die Flash-Applikation zu schicken und in Textfeldern oder
Buttons anzuzeigen.
Fazit
Durch die Kombination von TYPO3 mit Flash stehen vielfältige
Möglichkeiten zur Verfügung, die Funktionalitäten des TYPO3-Backends zu
erweitern. Denkbar wären beispielsweise auch
komplexe Extensions zur interaktiven Manipulation von Bildern
oder Echtzeit-Workflow-Systeme. Die Erweiterungen nahtlos ins
TYPO3-Backend zu integrieren scheint dabei das kleinste
Problem zu sein. Durch die kürzliche Ankündigung von ActionScript 3 und der
aktualisierten Flex-Produktlinie von Macromedia [4] ergeben sich neue Möglichkeiten, leistungsfähige Web-Anwendungen auf
FlashPlayer-Basis zu entwickeln und es könnte spannend sein an dieser Stelle auch
entsprechende TYPO3-Schnittstellen zu nutzen.
Felix Raab und Christoph Asam arbeiten seit ihrem Abschluss als Digital Media Designer selbstständig unter dem Namen betriebsraum (www.betriebsraum.de) in München. Sie konzeptionieren, gestalten und programmieren On- und Offline-Applikationen für Firmen aus verschiedensten Branchen oder unterstützen als Freelancer-Team andere Agenturen. Als Macromedia Certified Professionals sind sie spezialisiert auf die Flash-Plattform und veröffentlichen regelmäßig Artikel zu fachbezogenen Themen unter www.betriebsraum.de/blog.
