Dynamik mit Flash und Cold Fusion
Online-Quiz

Von statisch zu dynamisch

Dynamik mit Flash und Cold Fusion

Die Entwicklung von Web-Anwendungen unterliegt einem stetigen Wandel. Vor einigen Jahren bestand die Mehrzahl der Web-Applikationen noch aus statischen HTML-Seiten, und erst mit zunehmender Reife des WWW setzten sich Server- und Client-seitige Technologien wie Cold Fusion, J2EE oder Javascript durch, um Inhalte und HTML-Seiten auch dynamisch zu erzeugen und den Bedienkomfort Internet-basierter Anwendungen zu erhöhen. Gleichzeitig hielt die Multimedia-Welt Einzug ins Internet. Dabei spielt Macromedia Flash neben klassischen Audio- und Videoformaten die zentrale Rolle für Animationen und Bewegung im Web.

Rich Internet Applications verknüpfen die beiden Entwicklungslinien, indem sie Server-seitige Anwendungsentwicklung mit Flash-Frontends kombinieren. Flash MX und Flash MX 2004 Professional ermöglichen mit Remote Procedure Calls über Flash-Remoting erstmals den Zugriff auf Applikationsserver oder XML-basierte Webservices. Macromedia hat Flash MX 2004 Professional im Herbst des vergangenen Jahres mit einem deutlichen Schritt in Richtung einer ernst zu nehmenden Developer-IDE neu auf den Markt gebracht und liefert eine Vielzahl von GUI- und Databinding-Komponenten mit, die die Erstellung von Anwendungen erheblich vereinfachen.

Architektur einer RIA

Dynamik mit Flash und Cold Fusion

Die Beispielanwendung, die Sie fertig auf der Heft-CD finden, ist ein interaktives Ratespiel, das aus einer animierten Flash-Bedienoberfläche und einer MySQL-Datenbank im Backend besteht. Die Datenbank speichert Quizfragen und deren Antworten im Stil der Fernsehsendung »Wer wird Millionär?«. Die Kommunikation zwischen dem Frontend und dem Backend verläuft mit Hilfe einer Cold-Fusion-Komponente, deren Methoden vom Flash-Client aus über eine WSDL-Beschreibung aufgerufen wird. Die Cold Fusion Component (CFC) greift wiederum auf die Datenbank zu, um jeweils eine Frage und deren Multiple-Choice-Antworten zu entnehmen und später die vom Benutzer gewählte Antwort zu überprüfen. Bei jeder richtig beantworteten Frage erhöht sich der Level, und bei korrekter Beantwortung der Eine-Million-Euro-Frage ist das Spiel zu Ende. Die Beispielanwendung macht von der eingebauten Unterstützung von Webservices in Flash MX 2004 Professional Gebrauch. Durch das neue Web Services-Bedienfeld ist Flash in der Lage, eine WSDL-Datei zu parsen und deren Methoden, Input- und Output-Parameter als Hierarchie im Web Services-Bedienfeld darzustellen.

MySQL als Datenbank

Dynamik mit Flash und Cold Fusion

MySQL bildet die Grundlage der Architektur der Beispielanwendung. Die benötigten Daten befinden sich auf
die drei Tabellen antworten, fragen und fragenlevel verteilt in einer relationalen Datenbank. Diese Tabellen sind über Primär- und Fremdschlüsselbeziehungen miteinander verknüpft. Die Tabelle fragenlevel hat dabei nur die Funktion einer Zuordnungstabelle einer ID des gerade aktuellen Fragenlevels zu einer Gewinnsumme. In der Tabelle fragen ist jeweils pro Zeile eine Frage mit Text und Verweis auf ihren Schwierigkeitsgrad gespeichert, und in der Tabelle antworten wird für jede Frage eine Kollektion von vier Antwortmöglichkeiten bereitgehalten, wobei die korrekte Antwort durch den Wert 1 im Feld ANT_EVAL gekennzeichnet wird.

Die Anbindung der MySQL-Datenbank erledigen Sie mit Hilfe des Cold-Fusion-Administrators, Macromedia liefert mit Cold Fusion MX 6.1 einen MySQL-JDBC-Treiber mit. Beim Anlegen der Datenquelle für Cold Fusion vergeben Sie neben einem möglichst sprechenden Namen auch Parameter wie Server-Name, User und Passwort für den Zugriff auf die MySQL-Datenbank.

Applikationslogik in einer CFC

Dynamik mit Flash und Cold Fusion

Die eigentliche Anwendungslogik der Beispielapplikation wird in Form einer Cold-Fusion-Component bereitgestellt. Die CFC millionaire.cfc definiert zwei Methoden, die als XML-basierter Webservice zur Verfügung gestellt werden:

-Selektion einer Frage zu einem vorgegebenen Schwierigkeitsgrad von 1 bis 15 mitsamt der vier hinterlegten Antwortmöglichkeiten und Rückgabe der Ergebnisse an den Flash-Client

-Selektion der korrekten Antwort zu einer Frage

Die erste Aufgabe wird durch eine Methode getQuestion(numeric: nLevel) abgebildet, die zweite Aufgabe durch die Methode checkAnswer(numeric: nID).

CFC-Methoden umschließen Sie mit einem CFFUNCTION-Tag-Paar. Das öffnende Tag enthält dabei die wesentlichen Eigenschaften der Methode:

Wichtig für die Verwendung der Methode als XML-Webservice ist die Angabe des Parameters remote für das Attribut access. Mit der hier dargestellten Methodendefinition beschreiben Sie weiterhin, dass Cold Fusion das Ergebnis der Abarbeitung in Form des Datentyps struct zurückliefert. Dabei handelt es sich um eine Art Array, bei dem sich die einzelnen Felder über String-Keys ansprechen lassen. Die Methode hat einen Pflichtparameter nLevel vom Typ numeric, den Sie mit Hilfe des Tags beschreiben:

Im Inneren der Methode definieren Sie zunächst ein leeres Structure-Objekt und legen in diesem die benötigten Zugriffsschlüssel an:

stReturn = StructNew();
stReturn.ID = 0;
stReturn.Frage = "";
stReturn.AntwortAID = 0;
stReturn.AntwortA = "";
...

Mit Hilfe der Datenbankabfrage qGetQuestionIDsforLevel selektieren Sie daraufhin zunächst alle Einträge der Tabelle fragen, die dem in der Variable arguments.nLevel übergebenen Schwierigkeitsgrad entsprechen. Um ein gewisses Zufallselement im Spiel unterzubringen, nutzen Sie verschiedene Cold-Fusion-Funktionen, um aus dieser gegebenenfalls mehrere Einträge umfassenden Liste eine Frage auszuwählen.

Mit den Abfragen qGetQuestionText sowie qGetQuestionAnswers selektieren Sie nun auf Basis der Variablen nQuestionList
Element den Text der Frage sowie Texte und IDs der Antworten. Diese schreiben Sie abschließend in die zu Beginn der Methode angelegte Struktur stReturn, die an den Aufrufer der Methode zurückgegeben wird.

Prüfen der Antwort

Dynamik mit Flash und Cold Fusion

Im Rahmen der zweiten Methode check
Answer stellen Sie nun eine Funktionalität bereit, um die korrekte Antwort zu einer vorgegeben Frage an den aufrufenden Client ausliefern zu können.

Die Methodendefinition unterscheidet sich auf den ersten Blick zunächst nur durch die Vereinbarung eines anderen Rückgabetyps: numeric.

Den Pflichtparameter nID nutzen Sie im Methodenrumpf, um im nächsten Schritt über eine SQL-Abfrage die korrekte Antwort-ID der entsprechenden Frage zu selektieren:



SELECT ANT_ID
FROM antworten
WHERE ANT_FRA_ID = #arguments.nID#
AND ANT_EVAL = 1

Abschließend geben Sie die Variable qGetCorrectAnswer.ANT_ID an den Aufrufer zurück.

CFC-Konstruktor

Dynamik mit Flash und Cold Fusion

Cold Fusion MX 6.1 interpretiert jeglichen Quellcode außerhalb eines CFFUNCTION-Tag-Paars als impliziten Konstruktor der CFC und führt diesen Code beim Erzeugen der Instanz der Komponente aus. Für die CFC millionaire.cfc befindet sich der Konstruktor-Code in einem CFSCRIPT-Block:

variables.sDatasource = "millionaireDS";
r = randomize(second(now()));

Dort setzen Sie eine Variable mit dem Namen der Datenquelle im Cold-Fusion-Administrator. Diese Variable wird in jedem CFQUERY-Tag der CFC verwendet, um die zukünftige Rich-Internet-Anwendung möglichst flexibel und unabhängig von der konkreten Systemumgebung zu halten.

Die zweite Zeile des Konstruktors initialisiert den Zufallszahlengenerator von Cold Fusion MX.

Webservice in Flash vorbereiten

Dynamik mit Flash und Cold Fusion

In Flash MX Professional 2004 ist das Web Services-Bedienfeld unter dem Menü Fenster, Entwicklungsbedienfelder zu finden. Ein Klick auf den Globus und ein darauf folgender Klick auf das Pluszeichen zeigt die Bedienoberfläche zum Hinzufügen eines neuen Webservices an. Nachdem Sie den WSDL-URL für den Millionär-Webservice eingegeben haben, bestätigen Sie den Eintrag durch den Ok-Button. Als URL verwenden Sie den Pfad zur CFC, ergänzt durch den Querystring ?wsdl (zum Beispiel http://localhost/millionaire.cfc?wsdl). Nach Verarbeitung des WSDL zeigt das Bedienfeld Web Service nun einen neuen Webservice an, dessen Methoden und Parameter inspiziert werden können.

Das Menü Datei, Neu präsentiert eine Liste von Dateitypen. Der Typ Formularanwendung erstellt eine neue Bildschirm-basierte Datei mit einem untergeordneten Formular. Für die Beispielanwendung werden drei weitere Formulare benötigt.

Fügen Sie ein Formular hinzu, indem Sie mit der rechten Maustaste auf das oberste Formular klicken und Formular einfügen wählen. Im Eigenschafteninspektor erhalten die Formulare ihre Instanznamen: Die Anwendung soll quiz_anwendung heißen und die vier Formulare laden, frage, ergebnis und ende. Formulare in Flash MX 2004 Professional bieten sich an, wenn es in einer Anwendung mehrere konkret definierbare Zustände gibt, die ein- und ausgeblendet werden sollen.

In das Formular quiz_anwendung kommen alle die Elemente, die durchgängig in der Anwendung gebraucht werden. Für das Quiz benötigen Sie die beiden Webservice-Methoden der vorher erstellten CFC. Ziehen Sie daher zwei Instanzen der WebServiceConnector-Komponente vom Komponentenbedienfeld zur Bühne. Geben Sie diesen die Instanznamen fragenruf und antwortruf. Im Eigenschafteninspektor geben Sie jeweils für den WSDLURL-Parameter den URL des Webservices ein. Im Fall des operation-Parameters wählen Sie getQuestion für den fragenruf-Connector und checkAnswer für den antwortruf-Connector. In diesem Formular platzieren Sie auch die Überschrift und andere stilistische Elemente sowie das gesamte Actionscript.

Das UI des Flash-Frontends

Dynamik mit Flash und Cold Fusion

Im laden-Formular erstellen Sie eine Animation, die bei jedem Aufruf des Webservices gezeigt wird. Diese Animation ist Ihrer Fantasie überlassen ? ein Beispiel finden Sie auf der Heft-CD.

Das ende-Formular wird nur dann gezeigt, wenn der Benutzer die letzte Frage richtig beantwortet hat.

Das frage-Formular enthält ein dynamisches Textfeld für die Frage, außerdem vier RadioButton-Komponenten und vier weitere Textfelder für die Antworten. Die Instanzen der RadioButton-Komponenten sind nach den Antworten A, B, C und D benannt, und die Textfelder haben als Instanznamen frage_txt, antwort_txtA, antwort_txtB und so weiter. Eine Button-Komponente mit Instanznamen antwort_btn ist ebenfalls vorhanden.

Das ergebnis-Formular besteht aus einigen Textfeldern, die dem Benutzer vermitteln, ob er die Frage richtig beantwortet hat, und falls nicht, wie die richtige Antwort lautet. Außerdem finden Sie dort eine Button-Komponente, die beim Klicken die nächste Frage mit Hilfe des Webservices aufruft.

Der Code, der alles zusammenhält

Dynamik mit Flash und Cold Fusion

Das Formular quiz_anwendung enthält das gesamte Actionscript. Der Code ist auf einer Ebene namens code enthalten und besteht aus mehreren Funktionen und einem einmaligen Aufruf von init(), um die Anwendung zu initialisieren. Die init-Funktion definiert das anfängliche Level und einige andere Variablen, die durchgängig gebraucht werden. Schließlich ruft sie auch die Funktion frageHolen() auf, um die erste Quizfrage vorzubereiten.

Auch wenn die params-Eigenschaft der WebServiceConnector-Komponente in diesem Fall nur einen einzigen Parameter erwartet, muss diese dennoch als Array angegeben werden. Es ist hingegen nicht nötig, den WSDL-URL oder die Operation zu bestimmen, da diese Angaben bereits im Eigenschafteninspektor festgelegt wurden.

Die Abarbeitung des Webservices wird durch fragenruf.trigger() angestoßen. Zuletzt teilen Sie dem fragenruf-Connector ein result-Ereignis und der antwort_btn-Komponente ein onRelease-Ereignis zu, um beim Klicken auf den Button die Antwort zu überprüfen.


frageHolen = function (dasLevel) {
fragenruf.params = [dasLevel];
fragenruf.trigger();
fragenruf.addEventListener("result", fragenOnResult);
frage.antwort_btn.onRelease = function() {
antwortHolen(fragenID);
}
}