Folgendes Tutorial soll zeigen wie einfach es ist, mit Flex über BlazeDS auf Java zu zugreifen, welches wiederrum auf die Datenbank (hier: MySql) zugreift. Der Vorgang wird Schritt für Schritt erklärt. Ich habe hier ein Projekt dazu angelegt. Um das Tutorial erfolgreich durchführen zu können benötigen wir folgende Tools:

Vorraussetzungen:

• Eclipse 3.4 Ganymede J2EE
• Subclipse
• Flex 3 (Für Studenten: hier)
• Anleitung für Subclipse unter Flex
• BlazeDS Turnkey - Distribution mit Tomcat, oder den neuesten Tomcat

Die BlazeDS Turnkey-Distribution enthält einen älteren Tomcat, dafür aber ein paar Beispiele. Ihr solltet den neusten Tomcat nur runterladen wenn ihr mein Beispiel benutzt, da ihr sonst nicht die erforderlichen Dateien bekommt.

• Xampp Lite mit MySql DB (oder andere Datenbank, z.B. PostgreSQL)
• SVN Client (Tortoise) (nützlich, aber nicht notwendig)

1. Das Java Projekt:

Wenn alle Tools installiert sind und alles läuft, starten wir zunächst Eclipse und legen dort ein neues Projekt an, welches wir von einem SVN-Repository auschecken:

Eine neue SVN-Repository Location anlegen:

Location angeben:

Projektordner auswählen:

Kurz warten…

Auschecken als Java-Projekt:

Als nächstes passen wir die Einstellungen für das Projekt an. Unter “Create project from existing source” “..\Tomcat 6.0\webapps\myapp\WEB-INF” angeben, da das Java Projekt im webapps Ordner des Tomcats liegen muss.

Hier ist es wichtig, das “Default output folder” von “…/bin” in “…/classes” zu ändern:

Die Frage nach dem Öffnen der Java Perspektive und die darauf folgende Frage mit Ja bestätigen (denn wir wollen ja die Daten aus dem Repository):

Kurz warten…

…und warten…

Das Projekt hat nun mehrere Errors. Das hat den einfachen Grund das die Libaries, die gerade vom SVN-Repository runtergeladen wurden, nicht dem Build Path des Projektes hinzugefügt wurden.

Das kann man aber ganz einfach beheben, indem man den Build Path konfiguriert, und dem Projekt die fehlenden Libraries hinzufügt durch auswählen aller jar-Dateien im lib-Ordner des “TestJava” Projektes.

Fertig!

2. Das Flex Projekt:

Den Flex Builder starten und ein neues Projekt anlegen.

Checkout Projects from SVN, und eine neue Repository Location anlegen.

SVN-Repository Location eintragen und kurz warten:

Dann Projekt Ordner auswählen, und wieder kurz warten:

Danach auschecken als

Nochmal kurz warten und dann auschecken als Flex Project:

Jetzt passen wir die Einstellungen an. Den Projektnamen eingeben, als Application Type “Web application” und als Server Technology “J2EE”.

WICHTIG: Die Server Location. Als Root Folder “…\Tomcat 6.0\webapps\myapp” (bzw. der WEB-INF Ordner in den ihr euer Java-Projekt gepackt habt), als Root URL “http://localhost:8080/myapp” und als Context root “/myapp”. Jetzt den Tomcat starten, sonst kann die Konfiguration nicht validiert werden. Ist der Tomcat gestartet, auf “Validate Configuration” klicken. Wenn oben steht “The web root folder and root URL are valid” habt ihr alles richtig gemacht, wenn nicht ist irgendwo ein Fehler ;)

Hier alles so lassen, Finish und danach Confirm overwrite drücken:

Mal wieder kurz warten…

und fertig :)

3. Die Datenbank:

Damit ihr das Flex-Projekt starten könnt müsst ihr vorher folgendes beachten: Wenn ihr XAMPP richtig installiert habt, müsstet ihr unter http://localhost/xampp/ folgendes angezeigt bekommen (Wenn ihr eine andere DB benutzt dann könnt ihr das überspringen):

Dort geht ihr auf Sicherheitscheck …

… klickt unten auf den Link und setzt ein Passwort für root. Da ich bereits ein Passwort gesetzt habe, sieht es bei mir wahrscheinlich ein wenig anders aus, als bei euch. Dieses Passwort gut merken, da ihr es gleich benötigt!

Wenn ihr ein Passwort gesetzt habt, geht ihr auf:

Und legt eine neue Datenbank an, z.B. testDB mit der folgenden Codierung:

Als nächstes müsst ihr das root Passwort und ggf. den DB-Namen unter Eclipse in src/META-INF/persistence.xml anpassen (Zeile 20: DB-Name; Zeile 22: Passwort):

Jetzt die DBTest.java als Java Application in Eclipse ausführen.

Checkt unter PHPMyAdmin, ob die Daten reingeschrieben wurden:

WICHTIG: Bevor ihr jetzt das Flex-Projekt startet müsst ihr in der persistence.xml die Zeile 18 auskommentieren (Zeile 18 anklicken und dann Source > Add Block Comment), da sonst bei der ersten Transaction mit der DB der Inhalt dieser überschrieben wird. NUR wenn ihr die Datenbank neu aufsetzen wollt müsst ihr den Comment wieder entfernen!
Jetzt den Tomcat starten und unter Flex das TestFlex Projekt starten. Danach freuen das es alles klappt :)

4. Erläuterungen:

Java: Der im Java-Projekt enthaltene „flex“ Ordner enthält mehrere xml-Dateien, welche nötig sind damit die Übertragung zwischen Java und Flex reibungslos funktioniert. Dazu vor allem die remoting-config.xml beachten, da ich diese erweitert habe:

1
2
3
4
5
6

<destination id="service">
     <properties>
          <source>tutorial.model.service.Service</source>
          <scope>session</scope>
     </properties>
</destination>

Ich hab ein für Flex erreichbares Ziel eingefügt. Dieses wird dann auch über die id „service“ von Flex aus angesprochen. Das Property source verweist auf die Klasse Service welche die von Flex aufzurufenden Methoden enthält. Diese Methoden können direkt von Flex aus angesprochen werden. Das Property scope kann 3 verschiedene Scopes enthalten: application, session und request. Ihr solltet hier natürlich eure Klassen angeben, welche ihr für den Austausch der Daten zwischen Flex und Java benötigt.

Flex: Um von Flex aus auf die Java-Methoden zugreifen zu können, müsst ihr nur ein RemoteObject instanzieren, sei es in MXML oder in ActionScript:

MXML:

1
2
3
4

<mx:RemoteObject id="accessmanager" destination="service" fault="faultHandler(event)" >
	<mx:method name="login" result="userLoginHandler(event)" />
        <mx:method name="register" result="userRegisterHandler(event)" />
</mx:RemoteObject>

gehört auch noch zur MXML-Möglichkeit; Aufruf der Methode über ActionScript in Java:

1
2
3
4

function login():void
{
accessmanager.login(email.text, password.text);
}

ActionScript:

1
2
3
4
5
6

var remoteLogin:RemoteObject = new RemoteObject();
remoteLogin.destination = "service";
remoteLogin.addEventListener("result", userLoginHandler);
remoteLogin.addEventListener("fault", faultHandler);
//Aufruf der Login-Methode in Java
remoteLogin.login(email.text, password.text);

Für beide Möglichkeiten (AS und MXML) gilt:
Wenn die aufgerufene Methode einen Rückgabewert hat, dann kann der mithilfe des angegeben ResultHandlers aufgefangen und verwertet werden:

1
2
3
4
5
6
7
8

public function userLoginHandler(event:ResultEvent):void {
	var yesOrNo:String = String(event.result);
	if (yesOrNo == "NO") {
		Alert.show( "Login fehlgeschlagen! ");
	} else if (yesOrNo == "YES") {
		currentState = 'Startpage';
	}
}

Dieser ResultHandler wurde oben bei der Instantiierung angegeben. Er wurde dem RemoteObject als EventHandler übergeben.

Bookmark It

Hide Sites