[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

先前已經大致上介紹Flex的外觀設計該怎處理後,接下來我們就要進行後端的程式碼部分,否則你的Flex可能只有外觀而毫無作用。Flex要輸入程式碼的部份,首先要導入一些函數,就像Java一樣,在開頭的部份需要import一些東西,才能使用特定功能。


因為PHP比較簡單,所以就利用Flex結合PHP並且透過HTTPService來接收表單的值,然後在回傳到Flex中並顯示出來,當然這部份教學,梅干大師已經寫過了,不過為了延續先前的教學,就再寫一下,這樣感覺比較有一體成型的FU。

在處理Flex透過PHP傳送與接收表單值之前,首先要確定已經完成好Flex表單雛型,接下來我們要替各個表單內的元件設定名稱,當名稱命名完成後,這就表示每一個表單內的物件都有名稱,之後透過Form傳值時,PHP在接收的時候才會知道哪一個值是由哪一個表單物件所傳出來的,最後才能做PHP端的運算,產生出正確的結果,當然命名個物件欄位名稱時,要小心Flex的保留字,像是「class」就是保留字囉!

第1步 首先在Flex中,設計區塊請切換到「Design」,接著將滑鼠點在物件上,例如點在「ComboBox」(其它的請依此類推),但千萬別連同前面的Lable一起選取,不然會出問題。選取好後,切換到右下方的區塊,找到「Common」中的「ID」,在ID內請輸入你要定義的名稱,請小心保留字。

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第2步 如果你都將各欄位的ID輸入好後,切換到「Source」介面中,可以看到在「ComboBox」或是「TextInput」等等之中多了一個id,這就表示新增正確囉!

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第3步 接下來我們要輸入一些Script語法,透過Script語法來處理表單內的值,大概在程式碼第二行後加入一串語法,當然語法裡面要做一些修正,否則欄位對應會有問題。

找到

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

在下方加上以下語法:

<mx:Script>
          <![CDATA[
              import flash.events.MouseEvent;    //監聽滑鼠發生的事件
              import mx.controls.Alert;        //使用Alert             
              import mx.rpc.events.ResultEvent;//遠端程式呼叫資料
              private const NL:String = "\r";    //換行
              private function button_click(event:MouseEvent):void
                 {                   

                    var obj:Object = new Object();
                    obj.year = this.year.text;
                    obj.semester = this.semester.text;
                    obj.teacher_id = this.teacher_id.text;
                    obj.teacher_name = this.teacher_name.text;
                    obj.major = this.major.text;
                    obj.grade = this.grade.text;
                    obj.course_id = this.course_id.text;
                    obj.class_no = this.class_no.text;
                    obj.day = this.day.text;
                    obj.course_name = this.course_name.text;
                    this.phpflex.send(obj);//最後用send()的方法將資料傳出去                                           
                  }//end buttonclick
             private function resulthandler(event:ResultEvent):void{
                        mx.controls.Alert.show(event.result.toString(),"Resonse Info");
                }
          ]]>
      </mx:Script>

其中的語法「obj.year = this.year.text;」,裡面的「year」是裡的欄位ID,請依照您的欄位ID輸入,有幾個欄位ID就要有幾串該語法。其它的語法就請大家自行研究看看囉!

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第4步 接著請在剛剛的「</mx:Script>」後方加入我們要使用的傳值方法的語法,我們要透過「HTTPService」來聯繫PHP並能傳值與接收值。在語法中,有一個「id =”phpflex“」其中的「phpflex」名稱必須和前面的Script語法「this.phpflex.send(obj);」中的「phpflex」相對應。

而「url=”http://127.0.0.1/flex.php”」這個則是我們待會要建立的PHP檔案,是個用來接收表單值與回傳值的PHP檔案,至於檔案路徑您可以隨意變更,但請確保可以正確連線,否則一樣無法接收與傳送值。至於「method=”POST“」這則是說明傳送方法透過「POST」方式來傳送表單內的值。

<mx:HTTPService         
        id ="phpflex"
        url="http://127.0.0.1/flex.php"
        method="POST"
        resultFormat="text"
        result="resulthandler(event)"
        />

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第5步 接著請開啟純文字文件並輸入以下語法,然後將此檔案儲存成「flex.php」並且放在伺服器的根目錄。您可自定義檔案名稱與放置的路徑,若有變動的話,要與第4步語法中的「url=”http://127.0.0.1/flex.php”」相對應。

<?php
  $year = $_POST["year"];                    //學年
  $semester = $_POST["semester"];            //學期
  $teacher_id = $_POST["teacher_id"];        //教師代碼
  $teacher_name = $_POST["teacher_name"];    //教師姓名
  $major = $_POST["major"];                  //系別
  $grade = $_POST["grade"];                  //年級
  $course_id = $_POST["course_id"];          //課程代碼
  $class_no = $_POST["class_no"];            //班別
  $day = $_POST["day"];                    //星期
  $course_name = $_POST["course_name"];     //課程名稱

 echo "學年:".$year."\r";
 echo "學期:".$semester."\r";
 echo "教師代碼:".$teacher_id."\r";
 echo "教師姓名:".$teacher_name."\r";
 echo "系級:".$major."\r";
 echo "年級:".$grade."\r";
 echo "課程代碼:".$course_id."\r";
 echo "班別:".$class_no."\r";
 echo "星期:".$day."\r";
 echo "課程名稱:".$course_name."\r";

?>

以「$year = $_POST[“year”];」為例:「$_POST[“year“]」這是接收Flex表單其中的「year」欄位並透過POST方式來接收值(因為在第4步驟最後有提到我們是透過POST方式傳值,所以接收時也要透過POST才能接收)。而接收到的值則存入一個字定義的變數「$year(為了避免名稱太多混亂,建議字定義變數就和Flex中的ID名稱一樣會比較好判斷)。當然你有多少個欄位就要宣告多少個變數來接收值。

至於語法後半段「echo “學年:”.$year.”\r”;」:這是說明利用「echo」印出值,非PHP的東西要印出必須採用「””」才能印出,若要將非PHP與PHP的東西結合列印出,那要透過「.」來連結,例:「”學年:”.$year.“\r”」。其中的「\r」輸出就是「\r」而已,但因為我們是將php的輸出結果回傳到Flex中,而在Flex中,「\r」的意思是換行,所以最後顯示的「\r」會變成換行的效果,並不會顯示「\r」。

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第6步 當PHP部分處理完後,最後我們回到Flex中,找到你的按鈕,並在按鈕的lable語法後方加上:

click="button_click(event)"

這語法中的「button_click」是和第3步語法中建立的函式是相呼應的,簡單說就是當程式偵測到滑鼠有點擊了「Button」,然後就會呼叫程式中相對應的函式來處理表單內的值。

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第7步 當前面步驟都完成後,請記住在執行前記得將您的TWAMP啟動,接著請點擊右上角的綠色播放按鈕或是按﹝Ctrl﹞+﹝F11﹞來編譯Flex。

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第8步 當編譯後,會自動開啟瀏覽器並秀出您的Flex製作後的成果。您可以試用看看能否傳送與接收值?

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?

第9步 若確定可以傳送與接收,那您應該會看到以下畫面,Flex會跳出一個小框框並秀出您剛選取的值。

[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值?