CodeBlog.ch

Datenaustausch mit Flex

In diesem Beitrag geht es um die Erstellung einer sehr einfachen Applikation, die Daten von einem PHP Script holt und auch wieder zurückgeben kann. Wer noch nie mit Flex gearbeitet hat, sollte vielleicht zuerst diesen Artikel lesen: Einstieg in Adobe Flex. Wie im ersten Artikel arbeiten wir auch hier ohne den Flex Builder – nur das kostenlose Flex SDK wird benötigt.

Wir holen in diesem Fall die Daten von einem PHP Script, theoretisch kann aber auch ASP.NET, JSP, Ruby usw. zum Einsatz kommen. Die Daten die wir anzeigen, werden im XML Format übertragen. Damit dieser Artikel nur zu gross wird, hab ich eine statische XML Struktur in die PHP Datei eingefügt. Der folgende Code zeigt dies. Am Ende des PHP Codes steht auch der Teil, der für das Einfügen von neuen Datenbank-Einträgen verantwortlich ist, aber auch hier kein wirklicher Code, es wird lediglich eine Datei geschrieben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?php
$xmlData = <<<eod
<response>
<data>
<row>
<id>1</id>
<firstName>Hans</firstName>
<lastName>Mustermann</lastName>
<mailAddress>nirgendwo@da.com</mailAddress>
</row>
<row>
<id>2</id>
<firstName>Frida</firstName>
<lastName>Beispielfrau</lastName>
<mailAddress>nirwana@heaven.org</mailAddress>
</row>
</data>
</response>
EOD;
 
if ($_REQUEST['method'] == 'getAll')
{
   echo $xmlData;
}
else if ($_REQUEST['method'] == 'insert')
{
   $fp = fopen('test.log','w');
   fwrite($fp,$_REQUEST['firstName']);
   fwrite($fp,$_REQUEST['lastName']);
   fwrite($fp,$_REQUEST['mailAddress']);
   fclose($fp);
}
?>

Dies ist schon alles was wir serverseitig benötigen, aber wie gesagt dies ist nur ein stark vereinfachter Code. Es werden Daten weder abgespeichert, noch aus einer Datenbank ausgelesen.

Wir erstellen nun also wieder eine MXML Datei mit einem beliebigen Editor.

Da wird zwei Formulare benötigen, für die Ausgabe der Daten in einer Tabelle, und für die Eingabe von neuen Einträgen. Wir verwenden dafür das sogenannte “ViewStack” Control mit dem wir verschieden Controls an einer Stelle platzieren können. Mittels einer Zeile Code können wir ganz einfach das aktive Control bestimmen.

In Zeile 1 steht im Click Ereignis des Buttons ein Code der im untenstehen Viewstack das Canvas Control in den Vordergrund bringt.

1
2
3
4
5
6
7
8
9
10

<mx:Button label="Hinzufügen..." click="{viewstack.selectedIndex = 1}"/>
...
<mx:ViewStack id="viewstack" width="100%" height="100%">
   <mx:Panel label="Personen" width="100%" height="100%">
   ...
   </mx:Panel>
   <mx:Canvas label="Neue Person einfügen" width="100%" height="100%">
   ...
   </mx:Canvas>
</mx:ViewStack>

Wie im vorigen Artikel verwenden wir den HTTPService um Daten vom Server zu holen bzw. zu speichern.

<mx:HTTPService id="httpService"
                url="data.php"
                resultFormat="e4x"
                fault="Alert.show(event.fault.faultString), 'Error'"
                useProxy="false"/>

Dieses HTTPService Objekt kann HTTP Anfragen mit der GET und POST Methode schicken bzw. empfangen. Da wir beim Auslesen der Daten kaum Daten übergeben verwenden wir dort die GET Methode:

httpService.method = "GET";
httpParams['method'] = "getAll";
httpService.send(httpParams);

Beim Abspeichern hingeben kommt die POST Methode zum Einsatz. Der Code ist aber fast identisch:

httpService.method = "POST";
httpParams = {"method":      "insert",
              "firstName":   inputFirst.text,
              "lastName":    inputLast.text,
              "mailAddress": inputMail.text};
httpService.cancel();
httpService.send(httpParams);

Abgesehen von diesem Code benötigen wir ein paar Kleinigkeiten wie zum Beispiel eine Clear-Methode um die Eingabefelder nach der Eingabe zu löschen. Und natürlich einiges an XML Anweisungen um das GUI aufzubauen. Dies sollte aber zu einem grossen Teil selbsterklärend sein, wenn HTML und XML nicht ganz neu sind.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="fetchData()">
   <mx:Script>
   <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.collections.XMLListCollection;
   import mx.controls.Alert;
 
   private var httpParams:Object = new Object();
 
   [Bindable]private var xmlData:XMLListCollection;
 
   public function resultHandler(event:ResultEvent):void
   {
      var result:XML = XML(event.result);
      var xmlList:XMLList = result.data.children();
      xmlData = new XMLListCollection(xmlList);
   }
 
   public function insertItemHandler(event:ResultEvent):void {
      fetchData();
   }
 
   public function fetchData():void
   {
      httpService.removeEventListener(ResultEvent.RESULT,insertItemHandler);
      httpService.addEventListener(ResultEvent.RESULT,resultHandler);
 
      httpService.method = "GET";
      httpParams['method'] = "getAll";
 
      httpService.cancel();
      httpService.send(httpParams);
   }
   public function insert():void
   {
      httpService.removeEventListener(ResultEvent.RESULT,resultHandler);
      httpService.addEventListener(ResultEvent.RESULT,insertItemHandler);
 
      httpService.method = "POST";
      httpParams = {"method":      "insert",
                    "firstName":   inputFirst.text,
                    "lastName":    inputLast.text,
                    "mailAddress": inputMail.text};
      httpService.cancel();
      httpService.send(httpParams);
 
      viewstack.selectedIndex = 0;
      clearFields();
   }
   public function clearFields(): void
   {
      inputFirst.text = "";
      inputLast.text = "";
      inputMail.text = "";
   }
   public function cancelInsert():void
   {
      viewstack.selectedIndex = 0;
      clearFields();
   }
   ]]>
   </mx:Script>
   <mx:HTTPService id="httpService"
                   url="data.php"
                   resultFormat="e4x"
                   fault="Alert.show(event.fault.faultString), 'Error'"
                   useProxy="false"/>
 
   <mx:ViewStack id="viewstack" width="100%" height="100%">
      <mx:Panel label="Personen" width="100%" height="100%">
         <mx:DataGrid width="100%" height="100%" dataProvider="{xmlData}">
              <mx:columns>
               <mx:DataGridColumn dataField="firstName" headerText="Vorname"/>
               <mx:DataGridColumn dataField="lastName" headerText="Nachname"/>
               <mx:DataGridColumn dataField="mailAddress" headerText="Mail"/>
            </mx:columns>
         </mx:DataGrid>
         <mx:Form>
            <mx:FormItem label="Neue Person einf&#252;gen">
               <mx:Button label="Hinzufügen..." click="{viewstack.selectedIndex = 1}"/>
            </mx:FormItem>
         </mx:Form>
      </mx:Panel>
      <mx:Canvas label="Neue Person einfügen" width="100%" height="100%">
         <mx:Form horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF">
            <mx:FormItem label="Vorname">
               <mx:TextInput id="inputFirst"/>
            </mx:FormItem>
            <mx:FormItem label="Nachname">
               <mx:TextInput id="inputLast"/>
            </mx:FormItem>
            <mx:FormItem label="Mail">
               <mx:TextInput id="inputMail"/>
            </mx:FormItem>
            <mx:ControlBar>
               <mx:Button label="Einfügen" click="insert()" />
               <mx:Button label="Abbrechen" click="cancelInsert()" />
            </mx:ControlBar>
         </mx:Form>
      </mx:Canvas>
   </mx:ViewStack>
</mx:Application>

Bei den Sonderzeichen gibt es noch eine Kleinigkeit zu beachten. Wer gerne Umlaute in seinem Flex GUI anzeigen möchte, sollte darauf achten, dass die MXML Datei im UTF-8 Format gespeichert wird. Bei FlashDevelop einfach bei “File – Encoding – UTF-8” auswählen.



4 Comments

Hallo Laubi,

danke für dein geniales Tutorial. Bist bitte so hilfsbereit und erklärst mir wie ich das ganze mit einer Speicherung der Daten in einer MYSQL DB lösen kann? Ich habe ein ähnliches Beispiel und das PHP dazu sieht so aus:

define( “DATABASE_SERVER”, “localhost” );
define( “DATABASE_USERNAME”, “xxx” );
define( “DATABASE_PASSWORD”, “xxx” );
define( “DATABASE_NAME”, “xxx” );

$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);

mysql_select_db( DATABASE_NAME );

function quote_smart($value)
{
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
if (!is_numeric($value)) {
$value = “‘” . mysql_real_escape_string($value) . “‘”;
}
return $value;
}

if( $_POST[“emailaddress”] AND $_POST[“username”])
{

$Query = sprintf(“REPLACE INTO users VALUES (”, %s, %s, %s, %s, %s, %s, %s, %s)”, quote_smart($_POST[‘anrede’]), quote_smart($_POST[‘username’]), quote_smart($_POST[‘usernachname’]), quote_smart($_POST[’emailaddress’]), quote_smart($_POST[‘plz’]), quote_smart($_POST[‘ort’]), quote_smart($_POST[‘strasse’]), quote_smart($_POST[‘tel_privat’]));

$Result = mysql_query( $Query );
}

$Query = “SELECT * from users”;
$Result = mysql_query( $Query );

$Return = “”;

while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= “”.$User->userid.””.$User->anrede.””.$User->username.””.$User->usernachname.””.$User->emailaddress.””.$User->plz.””.$User->ort.””.$User->strasse.””.$User->tel_privat.””;
}
$Return .= “”;
mysql_free_result( $Result );
print ($Return)

Vielen Dank für deine Hilfe!

Gruß, Mario

Hallo Mario,

dein Kommentar wurde nie gelöscht, ich hab ich schlicht und einfach noch nicht freigegeben. Es gibt leider noch immer ein paar Spam Bots die trotz Captcha Kommentare erstellen, weswegen ich jeden Kommentar manuell freischalte!

Ich hab momentan kein vollständiges Beispiel und aufgrund fehlender Zeit – hab am Samstag Semesterprüfungen, wird dies auch nicht in den nächsten Tagen kommen.

In diesem Tutorial: http://www.codeblog.ch/2008/04/datenaustausch-mit-amfphp-und-flex/ siehst du eine Array-Daten-Struktur welche fast identisch mit deiner MySQL Daten Struktur ist und relativ einfach anzupassen ist.

Mehr Hilfe kann ich dir im Moment nicht anbieten – sorry!

Gruss Laubi

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *



CodeBlog.ch, 2024. Theme Material for Coders