在介紹過我們的 FLEX on ColdFusion 後，雖然可以正常進行後端的資料處理，但是老師總是告誡我們學程式語言不要押寶，在 CF 的資源在台灣仍然取得困難的情況下，還是先轉戰 PHP 陣營吧 ! 今天就來介紹一下 FLEX 如何透過 AMFPHP Remoting 與後端的 PHP 做整合。

感謝 ♣梅問題‧教學網【Minwt】♣ 贈圖一張

這篇將會是長篇大論，請各位做好起飛的準備，抓穩方向盤，拉緊手煞車。

公寓善其生，必先利其器，先來準備好我們所需要的軟體吧

Adobe FlexBuilder 3		FLEX IDE 工具
Eclipse PHP Tools		PHP IDE 工具
amFphp		Remoting gateway
XAMPP for Windows		Apache server PHP 編譯套件 MySQL 資料庫

請各位先確認好以上的東西都準備好了，當然如果你是進階 USER 也可以使用其他工具代替，只是以上我所使用的，未來範例也會都用以上軟體來執行。安裝的部分我會省略 FLEX BUILDER 的安裝，基本上這是最基礎了。

SETP 1 : 安裝 XAMPP for Windows

XAMPP 是一套免安裝的 Apache 網頁伺服器，他已經包含可以執行 PHP 能力，並且包含 MySQL 與 MAIL SERVER 與 FTP SERVER，雖然我們範例用不到，但是因為他免安裝的份上，還是很好用的，首先先將下載回來的檔案解壓縮，並且執行 setup_xampp.bat ，當完成後執行 xampp-control.exe 便可以開出 XAMPP 控制台，這時候我們只要啟動 Apache Server 即可。

預設的網頁位置在 \xampp\htdocs\ 底下，這時你可以放上一個你自己的 PHP 檔案測試是否成功，不過相信我，趕快進行下一步設定吧 !

STEP 2 : 安裝 AMFPHP 並檢視結果

第二階段就是把我們下載好的 AMFPHP 的壓縮檔解壓縮裡面會有一個 AMFPHP 的資料夾，我們將這個 AMFPHP 資料夾放入網頁的執行目錄 \xampp\htdocs\ 底下，接下來我們利用瀏覽器打開 http://127.0.0.1/amfphp/browser/ 我們會看到一個也是由 FLEX 寫好的檢查程式，這個介面可以幫助我們查看我們的方法是不是有錯，第一次開啟時我們要設定 gateway 的位置。

如果你跟我一樣是本機開啟，那只要安心的按下 SAVE 就可以囉，接下來執行看看預設的測試方法，依照順序點擊，如果正確出現方法就算安裝完成 AMFPHP 了。

但是我想你這麼聰明，應該不會有太大的問題，繼續進行下一步吧。

STEP 3 : 安裝 PHP IDE 工具 PDT

選用這套的理由是因為他是基礎於 Eclipse ，他跟 FLEX BUILDER 是同一個老爸，所以啦，在開發起來會比較有順心的感覺，一樣免安裝，在解壓縮完後執行，執行後程式會要你設定一個 workspace 任意設定即可，進入程式後你會看到以下的畫面。

接下來我們要建立 AMFPHP 所使用的 PHP CLASS 因此我們在專案中建立一個 Folder 連結到 AMFPHP 的 Services 資料夾中

 

當你建立好了資料夾，我們變可以新增第一隻 PHP CLASS 的程式讓 Remoting 來使用，當然不免俗的，第一隻程式永遠都是 HelloWorld 囉

HelloWorld.php

^?View Code PHP

1 2 3 4 5 6 7

<?php class HelloWorld{ function sayHello(){ return "Hello Flex3 from PHP !"; } } ?>

當建立好類別檔後，我們可以回到 AMFPHP 的檢視界面看看是否這隻類別可以被正常執行。http://127.0.0.1/amfphp/browser/

建立完成後可以正確顯示 HelloWorld !! 回傳字串囉，我們開始進行 FLEX 端的設定與撰寫囉。

STEP 4 : 設定 FLEX 專案進行 Remoting 連接

已經可以在 AMFPHP 檢視到自己寫的 PHP CLASS 代表已經完成一半了，但是不要開心的太早，FLEX BUILDER 這邊還是要設定一下呢。首先我們先開啟 FLEX 專案，伺服器語言的部分我們設定 PHP ，並且設定 webroot 位置。如下圖。

設定好之後我們就可以開始第二步設定 services-config.xml 一開始很納悶，這個東西到底要從哪邊來，網路上的分享也沒說要怎麼寫，只說在根目錄建立一個 service-config.xml 檔案，後來才找到這隻檔案它放在 AMFPHP 的 \browser 資料夾底下就會看到了，我們把它 COPY 到 FLEX 專案中並且打開來修改一下。

接下來我們要在專案的設定內容上做編譯設定，在專案內容的 compiler 部分加上以下參數 -services services-config.xml 便完成 FLEX 端設定。

接下來我們終於可以開始寫 FLEX 程式了，我們來做個簡單的範例，按下按鈕取得 SERVER 端的 HelloWorld 類別的 sayHello 方法，並且將回傳資料放入 TEXTAREA 區塊中，很簡單的 FLEX 程式碼，我們來試試看吧。

amfphpTest.mxml

^?View Code FLEX

1 2 3 4 5 6 7

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="18"> <mx:TextArea width="400" height="100" text="{this.amfphpRemoting.sayHello.lastResult}"/> <mx:Button label="取得 AMFPHP 端資料" click="this.amfphpRemoting.sayHello()"/> <mx:RemoteObject id="amfphpRemoting" destination="amfphp" source="flex3.HelloWorld"/> </mx:Application>

寫好了，最後只要將它執行就可以啦 ! 我們來看看結果吧 !

Random Posts

相關文章 :

• FLEX on PHP , use AMFPHP 取得資料庫資料
• FLEX on PHP , 使用 ZendAMF remoteObject
• FLEX on PHP , use AMFPHP 中文 UTF-8 編碼的對話
• FLEX on PHP , ZendAMF 設定讓 CLASS 更方便
• FLEX on PHP , ZendAMF 的魔力 ValueObject 對應

Ausir FLEX, PHP Actionscript, amfphp, FLEX 3, PHP, RemoteObject, Remoting