RSS PLZ Suche mit Flash und AS3

verfasst 06.01.2009 von MediaCix | kurze URL: /t538 | Kommentar schreiben

PLZ Suche mit Flash und AS3

Wie könnte man eine PLZ-Suche mit Flash und noch mit ActionScript3 machen? Diese Frage habe ich mir gestellt und selber beantwortet. Um mich etwas mit AS3 zu befassen, habe ich ein weiteres Beispiel was auf XML, Senden von Daten, MouseEvent und einer DataGrid Komponente in Verbindung mit DataProvider basiert. Im Beispiel kann nach PLZ und Ort gesucht werden. Angezeigt wird Bundesland, Ort, PLZ und geografische Koordinaten.

Als erstes das Beispiel:



Wie in AS3 so üblich müssen erst externe definierte Klassen und Pakete geladen werden.
Um Daten über eine URL zu senden und das Resultat in ein DataGrid laden zu können, folgender Import:

» Flash ActionScript
import flash.net.URLRequest;
// import flash.net.URLVariables;
import fl.controls.DataGrid;
import fl.data.DataProvider;


flash.net.URLVariables ist erstmal auskommentiert, und wird am Ende von diesem Beitrag noch mal erwähnt. Jetzt wird die URLLoader-Klasse geladen und eine URL definiert die als Schnittstelle zur PLZ-Datenbank darstellt.

» Flash ActionScript
var loader:URLLoader = new URLLoader();
var url:String = 'http://www.meine-domain.de/get.php';


Die 2 Input-Textfelder (Komponenten) bekommen die Intanznamen ?input_ort? und ?input_plz?.
Zudem werden den Input-Feldern erlaubte Zeichen definiert. Bei ?input_plz? können nur Zahlen von 0-9 eingetippt werden, und bei ?input_ort? nur die Kleinbuchstaben a-z,ö,ü,ä und ß.

» Flash ActionScript
// nur erlaubte Zeichen
input_plz.restrict = "0-9";
input_ort.restrict = "a-zöäüß";


Die eingefügte DataGrid-Komponente bekommt den Intanznamen ?grid? und die Spalten werden festgelegt.

» Flash ActionScript
// Spalten hinzufügen
grid.addColumn("Bundesland");
grid.addColumn("Ort");
grid.addColumn("PLZ");
grid.addColumn("GEO_L");
grid.addColumn("GEO_B");


Jetzt kommen wir schon zur ersten Funktion die für zur Orts-Suche eingesetzt wird.

» Flash ActionScript
function get_ort( val ) {
 loader.addEventListener(Event.COMPLETE, completeHandler);
 loader.addEventListener(IOErrorEvent.IO_ERROR, errorListener);
 var url_string:String = url + '?ort=' + escape(val) + '&noCache=' + Math.random();
 loader.load( new URLRequest(url_string) );
}


Ab AS3 läuft fast alles über addEventListener. Es registriert ein Ereignis-Listener-Objekt, sodass der Listener über ein Ereignis benachrichtigt wird. Bei loader.addEventListener(Event.COMPLETE, completeHandler); wird eine Funktion ?completeHandler? aufgerufen, sobald die Daten komplett (Event.COMPLETE) sind. Die Zeile loader.addEventListener(IOErrorEvent.IO_ERROR, errorListener); dient zur Fehlersuche, falls die Verbindung nicht stattfindet. Ist dies der Fall wird eine Funktion ?errorListener? automatisch aufgerufen. Mit loader.load( new URLRequest(url_string) ); werden die Variablen mit der URL an den Server gesendet.

Als nächstes habe ich eine 2 Funktion für die Abfrage der PLZ erstellt. Sie ist ähnliche der Funktion get_ort() aufgebaut, hat aber andere Parameter.

» Flash ActionScript
function get_plz( val ) {
 loader.addEventListener(Event.COMPLETE, completeHandler);
 loader.addEventListener(IOErrorEvent.IO_ERROR, errorListener);
 var url_string:String = url + '?plz=' +  escape(val) + '&noCache=' + Math.random();
 loader.load( new URLRequest(url_string) );
}


Sicher kann man die beiden Funktionen vereinfachen bzw. zusammenlegen. Aber bei den ersten Schritten mit AS3 ist es wichtig erstmal die neue Funktionweise kennenzulernen. Wer in ActionScript recht fit ist, kann aus 2 Funktionen dann eine machen :)

Nun wird die Funktion completeHandler() benötigt. Die Daten werden (wie üblich) mittels XML übertragen. Die Funktion completeHandler() wertet diese XML-Daten aus und füttert einen DataProvider (stellt Methoden und Eigenschaften bereit) mit den Daten aus dem XML.

» Flash ActionScript
function completeHandler(event:Event):void {
 var xmlData:XML = new XML(loader.data);
 var xmlList:XMLList = xmlData.item.children();
 var dp:DataProvider = new DataProvider();
 var myText:String = "";
 if ( xmlList.length() > 0 ) {
   for (var i:Number = 0; i < xmlList.length(); i++) {
   if ( xmlData.item.ort[i] ) {
    dp.addItem({ 
     Bundesland:xmlData.item.bundesland[i], 
     Ort:xmlData.item.ort[i], 
     PLZ:xmlData.item.plz[i], 
     GEO_L:xmlData.item.geol[i],
     GEO_B:xmlData.item.geob[i]
    });
   }
  }
  lader.visible = false;
  myText += String(dp.length) + ' Einträge gefunden';
 } else {
  myText += "<p><b> kein Eintrag gefunden ... </b></p>";
 }
 grid.dataProvider = dp;
 output.htmlText = myText;
}


Was passiert ?
Zunächst muss eine XML-Klasse erstellt werden, damit man ünerhaupt das XML auswerten kann - logisch :) Die XMLList-Klasse ist ein nützliches Werkzeug um auf einzelne Elemente zugreiffen zu können - mal grob gesagt. Mit children() wird auf einen untergeordneten Knoten des XML-Objekts zugegriffen. Bei meinen XML-File ist dies ?item?.

Hat jetzt mein XMLList-Objekt Daten erhalten, so wird dann einfach mittels einer for-Schleife das XML-File ausgelesen und der DataProvider wird mit den Inhalten gefüttert. Mittels grid.dataProvider = dp; werden die Daten vom DataProvider dem DataGrid übergeben.

Nun kann es passieren, dass die Verbindung nicht aufgebaut wird. Mehr oder weniger beim erstellen vom Flash-File dient diese Funktion:

» Flash ActionScript
function errorListener(event:Event):void {
 var fehler:String = String(loader.data);
 trace(fehler);
}


Natürlich fehlen jetzt noch 2 Buttons. Dazu habe ich auch Komponenten genommen. Allerdings bin ich erstmal auf die Fresse geflogen - das altbekannte onPress() gibt es in AS3 nicht mehr. Hier gibt es dafür ein Mausereignisses als MouseEvent-Objekt. Im Prinzip ist es nichts anders, nur neue ungewohnte Schreibweise :)

Für die Button PLZ Suche und Ort Suche folgt dann dieser Code:

» Flash ActionScript
btn_plz.addEventListener(MouseEvent.CLICK,click_plz);
function click_plz(event:MouseEvent) {
 if ( input_plz.text.length >= 3 ) {
  input.text = 'Suche nach PLZ ' + input_plz.text;
  get_plz( input_plz.text );
 }
}

btn_ort.addEventListener(MouseEvent.CLICK,click_ort);
function click_ort(event:MouseEvent) {
 if ( input_ort.text.length >= 3 ) {
  input.text = 'Suche nach Ort ' + input_ort.text;
  get_ort( input_ort.text );
 }
}


Auch hier muss wieder erst ein addEventListener erstellt werden der auf Maus-Clicks (MouseEvent.CLICK) reagiert. Weitere Möglichkeiten wären MOUSE_DOWN, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_UP, MOUSE_WHEEL und noch viele andere, die die bisherigen AS2 Funktionen ersetzen.

Zum Schluss noch die Sache mit import flash.net.URLVariables; ...
Mit dieser URLVariables-Klasse können Variablen zwischen Flash und Server übertragen werden. Mir war allerdings das Handling zu umständlich, weshalb ich darauf jetzt erstmal verzichtet habe und die Parameter als String an die URL angehangen habe.

Im Prinzip war es das schon und ich konnte einen kleinen Einblick in AS3 mit einer praktischen Anwendung liefern.

neuen Kommentar schreiben

Ich möchte automatisch eine E-Mail bei neuen Kommentaren erhalten.



Themen mit ähnlichen Inhalten


Tags zum Beitrag

datagrid     dataprovider     addeventlistener