[原創]Flex和PHP指令碼的整合(1)–XML篇

文章目錄

• 一，系統要求：
• 五，使用FLEX建立使用者介面

本文章最新版本請參見：http://www.deepcast.net/wiki/ow.asp?Flash和PHP的整合

本文將使用Adobe Flex
Builder2和PHP建立一個小型應用程式執行個體，從MYSQL資料庫相應表中讀出包括姓名和郵件地址等資料並顯示給使用者，使用者還可以添加新的姓名和郵件地址進入資料庫。

注意：http://www.adobe.com/devnet/flex/articles/flex2_php.html 官網上有Mike Potter提供的Flex 2 Beta 3. I
的例子，但是其中有一些代碼可能是抄漏抄錯，所以我在學習完後，特地把自己驗證過的代碼貼出來，供大家參考使用。

一，系統要求：

1，請先安裝Flex Builder 2 (包括了SDK)

2, PHP

3, MYSQL和APACHE（IIS也可）

二，預備知識：

對簡單的PHP開發和XML基礎比較熟悉即可。

三，MYSQL的準備工作
先在Mysql上建立資料庫Sample，然後運行如下SQL代碼sample.rar以建立表Users。

四，PHP指令碼

然後，你就要開始寫添加使用者和輸出XML(給FLEX程式使用的)的PHP指令碼了。該指令碼比較簡單，只有25行。請注意，其中，quote_smart
函數是符合PHP.Net
官網的規範來驗證使用者輸入安全所用。function as a best practice to help verify user input,
according to the PHP.Net

以下是放在Apache根目錄下的getuser.php檔案：
<?php
Define( "DATABASE_SERVER", "localhost" );//資料庫伺服器地址
Define( "DATABASE_USERNAME", "root" );//資料庫登入名稱
Define( "DATABASE_PASSWORD", "123456" );//資料庫登入密碼
Define( "DATABASE_NAME", "sample" );//資料庫名
//串連資料庫
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//驗證使用者輸入的姓名和地址是否安全
function quote_smart($value)
{
   // Stripslashes
   if (get_magic_quotes_gpc()) {
       $value = stripslashes($value);
   }
   // Quote if not integer
   if (!is_numeric($value)) {
       $value = "'" . mysql_real_escape_string($value) . "'";
   }
   return $value;
}
if( $_POST["emailaddress"] AND $_POST["username"])
{
      //add the user
      $Query = sprintf("INSERT INTO users VALUES (NULL, %s, %s)", quote_smart($_POST["username"]), quote_smart($_POST["emailaddress"]));
      $Result = mysql_query( $Query );
}
//return a list of all the users
$Query = "SELECT * from users";
$Result = mysql_query( $Query );
$Return = "<users>";
while ( $User = mysql_fetch_object( $Result ) )
{
      $Return .= "<user><userid>".$User->userid."</userid><username>".$User->username."</username><emailaddress>".$User->emailaddress."</emailaddress></user>"; 
}
$Return .= "</users>";
mysql_free_result( $Result );
print ($Return)
?>

請注意，$_POST ["變數名"]形式用來表示從Flex程式中傳遞到PHP指令碼中的變數。在上例中就是FLEX中傳來的emailaddress 和
username。使用者輸入符合驗證安全規範的上述emailaddress 和
username之後，PHP就把它們添加入資料庫以添加新使用者，然後PHP會輸出XML格式的使用者列表。

你是無法直接從PHP向FLEX傳遞變數的，你可以先把變數輸出成XML，然後FLEX讀取XML取得傳回的資料，這樣就最終改變了FLEX表現層中的資料。同樣的，你也可以用上面同樣的PHP指令碼作為背景程式，把資料從PHP中輸出到行動電話上，你只需要改寫一下前端的顯示就可以了。

到此為止，涉及的PHP指令碼和MYSQL資料庫都是舊的內容。之後我們就要開始建立應用程式的介面了。

五，使用FLEX建立使用者介面

Flex 應用程式把 ActionScript 3.0和MXML結合使用。ActionScript是基於ECMAScript
(類似於JavaScript)的,
因此它對於WEB開發人員來說應該是很熟悉的。MXML是基於XML的FLEX應用程式的表現層。從本質上來看，就是用XML定義使用者介面的布局，用ActionScript.來對使用者介面進行指令碼編程。本文所用到的MXML也僅有26行代碼：

<!-- 第一行是XML檔聲明。-->
<?xml version="1.0"
encoding="utf-8"?>

<!--
第二行是應用程式聲明，提供MX組件的命名空間，布局方式是絕對位置，最後是聲明調用id為userRequest的對象的send()函數-->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute"
creationComplete="userRequest.send()">

<!--
設定HTTPService和前例所建立的PHP指令碼之間發送和接收資料。設定了HTTPService的id為userRequest，設定了PHP指令檔所在的URL，設定了不使用Proxy 伺服器，設定了提交方式是POST，當然也可以用GET方式，不過相應要修改PHP指令碼的變數名-->
  
<mx:HTTPService id="userRequest" url="http://localhost/getuser.php"
useProxy="false" method="POST">
      <mx:request
xmlns="">

<!--
設定了username的值為ID為username的元素的text屬性的值(username.text)
，也設定了傳遞到PHP的變數 _POST["emailaddress"]
的值為ID為emailaddress的元素的text屬性的值(emailaddress.text)。大括弧把變數綁定到了介面元素的值上，這就是說，如果把<username>改成<user_name>,
那麼相應地傳遞到PHP的變數就改為_POST["user_name"]，而相反地，如果把(username.text)
改成{user_name.text}了，那麼你就必須修改MXML中的<username>改成<user_name>。-->
        
<username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress>
     
</mx:request>
   </mx:HTTPService>

<!--
然後建立一個簡單的表單，其中按鈕點擊則激發userRequest.send()調用。-->
   <mx:Form x="22" y="10"
width="493">
      <mx:HBox>
         <mx:Label
text="Username"/>
         <mx:TextInput id="username"/>
     
</mx:HBox>
      <mx:HBox>
         <mx:Label text="Email
Address"/>
         <mx:TextInput id="emailaddress"/>
     
</mx:HBox>
      <mx:Button label="Submit"
click="userRequest.send()"/>
   </mx:Form>

<!-- 建立一個DataGrid組件來顯示userRequest
HTTPService取回的資料。請注意必須綁定它到user元素而非其上層的users外包元素。而DataGrid組件內建有很方便的列排序和高亮當前行功能。
最後，是一個顯示和目前使用者相對應的郵件地址dgUserRequest.selectedItem.emailaddress的文字框。-->
  
<mx:DataGrid id="dgUserRequest" x="22" y="128"
dataProvider="{userRequest.lastResult.users.user}">
     
<mx:columns>
         <mx:DataGridColumn headerText="User ID"
dataField="userid"/>
         <mx:DataGridColumn headerText="User Name"
dataField="username"/>
      </mx:columns>
  
</mx:DataGrid>
   <mx:TextInput x="22" y="292"
id="selectedemailaddress"
text="{dgUserRequest.selectedItem.emailaddress}"/>
</mx:Application>

從PHP取回的XML內容如下:
<users>
<user>
<userid>1</userid>
<username>Joe
Schmoe</username>
<emailaddress>joe@schmoe.com</emailaddress>
</user>
<user>
<userid>2</userid>
<username>Betty
Schmoe</username>
<emailaddress>betty@schmoe.com</emailaddress>
</user>
</users>

整個使用PHP後台來添加和取回MYSQL資料的小FLASH應用程式就到處為止了。所有的代碼檔案flexphp.rar在此提供下載。

本文章最新版本請參見：http://www.deepcast.net/wiki/ow.asp?Flash和PHP的整合