顯示具有 FLEX 標籤的文章。 顯示所有文章
顯示具有 FLEX 標籤的文章。 顯示所有文章

2009年3月3日 星期二

FLEX中自定義組件

  有了Flex Builder的幫助,自定義一個Flex組件非常簡單,所以不用多講了,但如何提高組件的重用性,這才是我們製作組件的目的。

緊耦合元件與松耦合元件

  為了使元件在程式中可以配置和重用,你可能會想要創建可以接受屬性,創建方法以及分派事件的MXML元件。為了做到這樣,元件必須不依賴于特定的程 序(緊耦合),包括它們的變數名或標籤實例的名字。緊耦合情況下如果程式或者元件的代碼改變了,相應的代碼就不能再工作,我們必須修改緊耦合的元件來相應 這些變化。
  一種更清晰也更好的方式是開發松耦合的元件,它可以分派傳播返回資料給程式的事件並且包含一些屬性使得可以從程式傳送資訊給它。
這種方式可以讓你像創建“黑盒子”一樣創建MXML元件,並且有以下好處:

•它們容易重用和維護
•除了內部的元件它們不瞭解其他的東西
•它們不依賴於一個變數名和標籤實例的名字

  如我們所說的那樣,為了創建一個松耦合的元件我們需要屬性來存儲資訊,需要一個事件模型來分派包含有返回資料的事件。

  屬性經常在ActionScript中定義(儘管你可以在MXML中定義它們)並且放在一個<mx:Script>塊中:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var lista:ArrayCollection;
]]>
</mx:Script>

定義MXML元件的方法也是一樣:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var lista:ArrayCollection;


public function justWrite():String
{
return "This is a method of the component";
}
]]>
</mx:Script>

設計一個松耦合元件的最後一步是處理包含返回資料的事件的分派。每個自定義MXML元件都可分派事件,事件可以通過三個簡單的步驟自定義:

•使用[Event]元資料標籤
•創建一個事件物件
•分派事件並創建一個函數來處理該事件

[Event]元資料標籤定義了元件可以分派的事件。可以在一個ActionScript類中包定義之後類定義之前聲明[Event]元資料標籤:

Package com.casario
{
[Event(name=“changeBlog”, type=“flash.events.Event”)]
public class custComp
{


}
}

或者在MXML檔中的<mx:Metadata>標籤中:

<mx:Metadata>
[Event(name=“changeBlog”, type=“flash.events.Event “)]
</mx:Metadata>

一旦[Event]元資料標籤創建,元件就可以使用dispatchEvent()方法來分派該事件。dispatchEvent()方法將事件物件作為參數,如下面的代碼中所示:

dispatchEvent(new Event(“changeBlog”));

FLEX中使用AMFPHP 1.9的相關設定

  AMFPHP在Linux系統中基本上是不用安裝的,下載後直接解壓就可以了。一般來說可以把它放在web的根目錄下,這可以一份AMFPHP給多個APP使用,但對於APP的移植帶來了不便的地方,每次都一定要記得把對應的service文件copy下來,APP移植後還得重新設定一次AMFPHP,並且把service文件copy回去。這對APP的發佈是不可行的,所以最好是把AMFPHP放到APP專案文件夾內,這樣就可以把AMFPHP連同專案一同發佈了。下面來說一下AMFPHP的相關設定:
假設我們的專案文件夾為APP1,放在 web的根目錄下,把AMFPHP放到APP1中,其目錄結構為"WEBROOT\APP1\AMFPHP",首先要在設定"WEBROOT\APP1\AMFPHP\gateway.php":

//gateway.php文件設定
efine("PRODUCTION_SERVER", false);
include "globals.php";
include "core/amf/app/Gateway.php";
$gateway = new Gateway();
$gateway->setClassPath("services/"); //自己編寫的數據服務文件就是放在這裡
$gateway->setClassMappingsPath($voPath);   //上面的基本不用改了
//主要是下面這一句,如果數據庫是用UTF8的就按這個寫法,注意你的PHP要支持iconv
$gateway->setCharsetHandler("iconv", "UTF-8", "UTF-8");
//否則自己根據需要改 $gateway->setCharsetHandler("iconv", "數據庫文字編碼", "輸出文字編碼");

接着是FLEX端的設定:

  1. 在flex專案中加入一名為services-config.xml的文件,注意不能是services_config.xml,內容如下:
    <?xml version="1.0" encoding="UTF-8"?>
    <services-config>
    <services>
    <service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
    <destination id="amfphp">
    <channels><channel ref="my-amfphp"/></channels>
    <properties><source>*</source></properties>
    </destination></service></services>
    <channels>
    <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
    <endpoint uri="http://YOUR_SERVER/APP1/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
    </channel-definition></channels>
    </services-config>
    注意粗體部份的內容因自己的情況按需更改
    另外,endpoint的URL可以使用相對地址,但不是相對本文件的地址,而是相對於WebRoot的地址,例如:"/APP1/amfphp/gateway.php",這一點搞暈了很多人。

  2. 設定Flex Builder的Compiler Arguments
    在Flex Builder Navigator Panel(即列出目前開發中專案的Panel),在flexTree旁Right Click選Properties,選Flex Compiler,在Additional compiler arguments加-services services-config.xml,因為兩個XML files是在index.mxml放在同一個Folder,所以不用加路徑。

    -locale en_US -services services-config.xml

    如果在services-config.xml用了{context.root},則要再加-context-root flexTree,否則不用了。

  3. 編寫PHP數據服務文件放到"WEBROOT\APP1\AMFPHP\services"文件夾中