Create a Custom Component

創建自定義組件

建立自定義MXML組件能使用創建復雜程序變得簡單化，把程序打碎成易管理的小部分，你就可以獨立地寫或測試每一個組件，你還可以重復利用你寫好的自定義組件。

本課內容將教你如何在AdobeFlexBuilder中創建一個自定義組件，並且如何把這個組件插入MXML程序文件當中。

本課任務

設置工程

為自定義組件建立一個測試文件

創建自定義組件文件

為自定義組件設計layout

為自定義組件定義一個事件偵聽器

如何使用自定義組件

Set up your project

設定你的工程

在開始課程之前，完成以下任務

保證自動建立選項是允許的，這個選項默認在獨立FlexBuilder配置檔當中，但在Eclipes中卻不是默認的，可以選擇Project > Build Automatically,保證設置正確。

Create a test file for the custom component

為自定義組件創建一個測試文件

You decide to build a login box as a custom MXML component. Before you start, however, you need to create an MXML application file to test it. An MXML application file is an MXML file that contains the <mx:Application> root tag. You can't compile and run an MXML component on its own; you must instead compile and run an MXML application file that uses the component.

在開始之前，你需要創建一個MXML來測試你的自定義組件，一個MXML程序文件是一個含有<mx:Application>根標簽的MXML文件，你不能編譯，不能運行一個自定義組件，你必須用一個含有這個自定義組件的MXML來測試它。

選擇Navigator視窗，建立一個新的MXML程序文件，並命名為Main.mxml

罗湖科技大厦

指定Main.mxml文件是默認編譯文件。

在MXML編輯器的Design模式，在Main.mxml添加一個Panel容器。

選擇Panel容器，然後設置其屬性：

Title: Main Application Window

Width: 375

Height: 300

X: 20

Y: 20

保存文件。

Create the custom component file

創建自定義組件文件

建立自定義組件的第一步是建立一個文件，多數的自定義組件都由已存在的組件派生。這裡創建的是一個login窗體組件，因為要保證用戶基本的登錄界面所以要擴展MXML的Panel組件。

開始之前，建立一個子文件夾用來存儲自定義組件文件。

在Navigator視窗，右擊lessons文件夾，在快捷菜單中選擇New > Folder，新文件夾對話框出現。在對話框中輸入myComponets，再點擊完成。這樣，名為myComponets的子文件夾就建立好了。

在myComponets子文件夾，右擊，選擇File > New > MXML Component.

新的MXML組件對話框出現，如圖所示：

在File Name text內，輸入LoginBox，這個名字也是組件的名字

在Based On彈出菜單，選擇Panel，意思就是要擴展Panel組件。

在Layout 彈出菜單，保證Absolute是已選的，點擊完成。

Flex Builder將把LoginBox.mxml文件存到myComponets文件夾內，並在MXML編輯器中打開其源代碼。

如果你跳至Design模式，你將在Componets視圖上的Custom類別看到，如圖：

如果你在當前工程中或在當前工程的源路徑保存了自定義組件，FlexBuilder會在Componets視窗中顯示你的組件，這樣你就可以馬上把組件插入你的程序當中去運用了。

Design the layout of the custom component

設計自定義組件的layout

下一步是為自定義組件設計layout，在LoginBox組件，需要有username和password文件框還有一個submit按鈕。

在Design模式打開loginBox組件

選擇Panel容器，然後設置其屬性為：

Title: Member Login

Width: 275

Height: 150

Insert two Label controls in the panel and align them vertically.

插入兩個Label控件，並按垂直順序排列。

Insert two TextInput controls to the right of the Label controls and align them vertically.

插入兩個TextInput控件，並按垂直順序排列，然後放在Label控件右邊。

選擇第一個Label然後設置text屬性為Username；

選擇第二個Label然後設置text屬性為Password；

選擇第一個TextInput然後設置ID性為txtUID；

選擇第二個TextInput然後設置ID性為txtPwd；再把它的Display As Password屬性設置為真

在TextInput下面插入Button控件，設置Label屬性為Login;

整個代碼就像下面：

<?xml version="1.0" encoding="utf-8"?>

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login">

<mx:Label x="10" y="12" text="Username"/>

<mx:Label x="10" y="42" text="Password"/>

<mx:TextInput x="74" y="10" id="txtUID"/>

<mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/>

<mx:Button x="178" y="70" label="Login"/>

</mx:Panel>

保存文件。

Define an event listener for the custom component

為自定義組件定義一個事件偵聽器

很多情況下，你想要自定義組件含有能處理用戶動作的行為，在這個LoginBox組件內，當點擊login時，你要讓組件自行驗證用戶名和密碼。

這一小節，將描述如何為login按鈕定義一個簡單的事件偵聽器，事件偵聽器也就是事件處理器，前面的章節有講到。

首先，插入並修改一個Label控件用來測試事件偵聽器在適當時候被調用。

在Design模式，在login按鈕左邊，插入一個Label控件，如圖所示：

選擇Label控件，設置其ID屬性為lblTest，並清空Text屬性。

選擇Button控件，然後在On Click對話框中輸入handleLoginEvent()，當用戶點擊button時，會調用handleLoginEvent函數。

下一步就是寫偵聽函數了。

跳至Source模式，在<mx:Panel>標簽之後輸入<mx:Script>，再按ENTER鍵，會把CDATA代碼塊輸入自動填入。

注意：

所有的<mx:Script>代碼塊都將包在CDATA內。

輸入代碼如下：

private function handleLoginEvent():void {

lblTest.text = "logging in...";

//login logic

}

這段代碼只是個殼，如果是真的程序，handleLoginEvent函數必須提到或者包含驗證和提交的邏輯，但在本課不會涉及到這方面的內容。

關鍵字private指定函數的作用范圍，在這種情況下，此函數只在本組件內有效，如改為public，此函數會在整個程序范圍內都有效。

關鍵字void表示函數的返回類型，所有的ActionScript 函數都要指定返回類型，Void表示沒有返回值。

整個代碼塊就像下面一樣：

<?xml version="1.0" encoding="utf-8"?>

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login">

<mx:Script>

<![CDATA[

private function handleLoginEvent():void {

lblTest.text = "logging in...";

//login logic

}

]]>

</mx:Script>

<mx:Label x="10" y="12" text="Username"/>

<mx:Label x="10" y="42" text="Password"/>

<mx:TextInput x="74" y="10" id="txtUID"/>

<mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/>

<mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/>

<mx:Label x="74" y="72" id="lblTest"/>

</mx:Panel>

保存文件。

Use the custom component

如何使用自定義組件

下一步就是在把自定義組件添加到你的MXML程序文件當中去了。

在Design模式，跳至Main.mxml文件。然後在Componets視窗中的Custom類中找到LoginBox組件。

把LoginBox拖入Main.mxml界面的右邊，然後設置其屬性為：

X: 400

Y: 20

Flex Builder顯示這個自定義組件的屬性就像內置的組件一樣。

跳至MXML編輯器的Source模式，在編輯器上插入以下代碼：

<?xml version="1.0" encoding="utf-8"?>

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

layout="absolute" xmlns:ns1="myComponents.*">

<mx:Panel x="20" y="20" width="375" height="300" layout="absolute"

title="Main Application Window">

</mx:Panel>

<ns1:LoginBox x="400" y="20">

</ns1:LoginBox>

</mx:Application>

當你拖放自定義組件到MXML文件中時，Flex Builder將定義一個新的命名空間叫做ns1，然後將<ns1:LoginBox>插入<mx:Panel>之後。

保存文件，当FlexBuilder完成自动编译后，点击运行按钮，测试。