前期準備:
點擊 File 菜單 -> New -> MXML Component ,然后彈出一個對話框。
在對話框中輸入組件名,選擇此組件繼承的類型,如: Canvas , DataGrid , ComboBox …… 等。
然后選擇組件的大小,點擊 Finish 即可。
關于組件繼承的類型,假設 Based on Canvas ,那么組件的根元素即為 mx:Canvas ,此元素的含義為空白面板,那么設計人員可以任意在這個面板容器內放置任何東西,就像開發主程序一樣。那么此組件類似一個容器。
如果 Based on ComboBox ,那么根元素即為 mx:ComboBox ,此元素的含義為下拉框,那么設計人員可以在下拉框的的內部任意定制內容或代碼,那么此組件定制了一個下拉框。
例,登錄組件:
制作組件:
首先按照上面的步驟新建一個組件,名為 CLogin.mxml , Based on TitleWindow 。 TitleWindow 元素代表有標題的窗口。
然后切換到 Design 視圖,選擇這個 TitleWindow 窗口,在屬性框里編輯標題( Title 屬性),輸入“用戶登錄”。
此時的代碼大體如下:
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
- width="286" height="208" layout="absolute" title="用戶登錄">
- </mx:TitleWindow>
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="286" height="208" layout="absolute" title="用戶登錄">
</mx:TitleWindow>
然后我們加入 Form 控件并填入內容( FormItem ),然后添加按鈕以便提交,此時代碼如下:
Xml代碼

- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
-
- <mx:Form width="248" height="100" label="Button" x="10" y="10">
-
- <mx:FormItem label="用戶名" fontSize="12">
- <mx:TextInput id="username" width="158" height="28" fontSize="15"
- textAlign="left"/>
- </mx:FormItem>
-
- <mx:FormItem label="密碼" fontSize="12">
- <mx:TextInput id="password" width="159" height="30" fontSize="15"
- textAlign="left" displayAsPassword="true"/>
- </mx:FormItem>
-
- </mx:Form>
-
- <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
-
- </mx:TitleWindow>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用戶名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15"
textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密碼" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15"
textAlign="left" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
上面的登錄只是布局,沒加入事件處理程序,但是這已經可以算是一個登錄組件了(雖然只能看不能用,呵呵)
組件制作完畢,然后就可以使用他了
使用組件:
打開主程序,進入 Design 視圖,查看左下角的組件瀏覽器。
你會發現在 Custom 下多出來一個 CLogin 來,把它拖入設計面板,哈,登錄組件就顯示在面板上了,就這么簡單。
代碼可能會如下:
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
-
- <mx:Script>
-
- <![CDATA[
-
- import mx.controls.Alert;
-
- private function btnClick() : void {
-
- Alert.show("test","Test");
-
- }
-
- ]]>
-
- </mx:Script>
-
- <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
-
- <ns1:CLogin x="107" y="94" width="204" height="117">
-
- </ns1:CLogin>
-
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btnClick() : void {
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<ns1:CLogin x="107" y="94" width="204" height="117">
</ns1:CLogin>
</mx:Application>
修改命名空間 xmlns:ns1 變成你想要的比如 xmlns:widget ,最后的代碼:
示例代碼:Hello.mxml
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
-
- <mx:Script>
-
- <![CDATA[
-
- import mx.controls.Alert;
-
- private function btnClick() : void {
-
- Alert.show("test","Test");
-
- }
-
- ]]>
-
- </mx:Script>
-
- <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
-
- <widget:CLogin x="107" y="94" width="204" height="117">
-
- </widget:CLogin>
-
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btnClick() : void {
Alert.show("test","Test");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<widget:CLogin x="107" y="94" width="204" height="117">
</widget:CLogin>
</mx:Application>
好了,一切完成。
自定義組件的屬性:
看到這里大家也都應該清楚地知道,大部分 Flex 控件都有事件屬性,比如 click、 move 等,自定義組件會繼承他們 Based on 的元素的屬性和事件 ,那么我們的 CLogin 組件(也 可以稱之為自定義元素)就會繼承 mx:TitleWindow 的全部可以繼承的屬性(屬性、事件、 特效、樣式等等),那么它的特有屬性如何來做呢?下面我們來為其加上其特有屬性。
加入自定義屬性:
示例代碼 CLogin.mxml :
Xml代碼

- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
-
- <mx:Script>
- <![CDATA[
-
- [Inspectable]
-
- public var status : String;
-
- ]]>
- </mx:Script>
-
- <mx:Form width="248" height="100" label="Button" x="10" y="10">
-
- <mx:FormItem label="用戶名" fontSize="12">
- <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
- </mx:FormItem>
-
- <mx:FormItem label="密碼" fontSize="12">
- <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
- displayAsPassword="true"/>
- </mx:FormItem>
-
- </mx:Form>
-
- <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
-
- </mx:TitleWindow>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
<mx:Script>
<![CDATA[
[Inspectable]
public var status : String;
]]>
</mx:Script>
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用戶名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密碼" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
首先我們加入一個屬性 status ,修飾這個屬性的元數據標簽 [ Inspectable ] 的意思是,叫編譯器和 Flex Builder 可以看到這個屬性,并自動提示:
加入自定義事件:
首先用元數據標簽給 CLogin 添加自定義事件:
示例代碼 CLogin.mxml :
Xml代碼

- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
-
- <mx:Metadata>
-
- [Event("btnClicked")]
-
- </mx:Metadata>
-
- <mx:Script>
-
- <![CDATA[
-
- [Inspectable]
-
- public var status : String;
-
- ]]>
- </mx:Script>
-
- <mx:Form width="248" height="100" label="Button" x="10" y="10">
-
- <mx:FormItem label="用戶名" fontSize="12">
- <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
- </mx:FormItem>
-
- <mx:FormItem label="密碼" fontSize="12">
- <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
- displayAsPassword="true"/>
- </mx:FormItem>
-
- </mx:Form>
-
- <mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
-
- </mx:TitleWindow>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Inspectable]
public var status : String;
]]>
</mx:Script>
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用戶名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密碼" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
前面提到, MXML 相當于一個類,那么 mx:Metadata 標簽就相當于給這個 CLogin 類加上元數據標簽。
標簽為事件標簽,內容為 [ Event ( "btnClicked" )] ,意思是自定義事件,名稱為 btnClicked 。
然后我們給 CLogin 的登錄按鈕加入 click 事件:
Xml代碼

- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
-
- <mx:Metadata>
-
- [Event("btnClicked")]
-
- </mx:Metadata>
-
- <mx:Script>
- <![CDATA[
-
- [Inspectable]
-
- public var status : String;
-
- private function login (): void {
-
- dispatchEvent(new Event("btnClicked"));
-
- }
-
- ]]>
- </mx:Script>
-
- <mx:Form width="248" height="100" label="Button" x="10" y="10">
-
- <mx:FormItem label="用戶名" fontSize="12">
- <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
- </mx:FormItem>
-
- <mx:FormItem label="密碼" fontSize="12">
- <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
- displayAsPassword="true"/>
- </mx:FormItem>
-
- </mx:Form>
-
- <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
-
- </mx:TitleWindow>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
<mx:Metadata>
[Event("btnClicked")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Inspectable]
public var status : String;
private function login (): void {
dispatchEvent(new Event("btnClicked"));
}
]]>
</mx:Script>
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用戶名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密碼" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
在按鈕被單擊 (click) 的時候,我們設定執行了 login 方法, login 方法執行命令 dispatchEvent( new Event( "btnClicked" )) 意思是 dispatchEvent 發送事 件通知,通知組件你自定義的 btnClicked 事件已經觸發了。
到這里,我們通過自定義組件 CLogin 的登錄按鈕來觸發 btnClicked 事件已經完成。
使用自定義事件:
這樣,我們在主程序里就可以利用這個事件了:
示例代碼 Hello.mxml :
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
-
- <mx:Script>
-
- <![CDATA[
-
- import mx.controls.Alert;
-
- private function btnClick() : void {
-
- Alert.show("test","Test");
-
- }
-
-
-
- private function btnClickHandler(event: Event) : void {
-
- Alert.show("Event btnClicked Called");
-
- }
-
- ]]>
-
- </mx:Script>
-
- <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
-
- <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
-
- </widget:CLogin>
-
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btnClick() : void {
Alert.show("test","Test");
}
private function btnClickHandler(event: Event) : void {
Alert.show("Event btnClicked Called");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
</widget:CLogin>
</mx:Application>
這樣,一但 CLogin 組件里的登錄按鈕被單擊就會觸發 btnClicked 事件,從而執行主程序 的 btnClickHandler 方法,彈出提示框:Event btnClicked Called
加入自定義效果:
效果是與事件不可分割的,比如之前的例子, showEffect 是控件的顯示來出來,也就是說 visible 變為 true 會觸發 showEffect 所設定效果。那么自定義效果也是一樣,與事件緊密聯系在一起,比如 btnClicked 事件發生的時候要產生某種自定義效果,則在 CLogin.mxml 中添加效果標簽:
Xml代碼

- <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
-
- <mx:Metadata>
-
- [Event("btnClicked")]
-
- [Effect(name="btnClickedEffect", event="btnClicked")]
-
- </mx:Metadata>
-
- <mx:Script>
- <![CDATA[
-
- [Inspectable]
-
- public var status : String;
-
- private function login (): void {
-
- dispatchEvent(new Event("btnClicked"));
-
- }
-
- ]]>
- </mx:Script>
-
- <mx:Form width="248" height="100" label="Button" x="10" y="10">
-
- <mx:FormItem label="用戶名" fontSize="12">
- <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
- </mx:FormItem>
-
- <mx:FormItem label="密碼" fontSize="12">
- <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
- displayAsPassword="true"/>
- </mx:FormItem>
-
- </mx:Form>
-
- <mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
-
- </mx:TitleWindow>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用戶登錄">
<mx:Metadata>
[Event("btnClicked")]
[Effect(name="btnClickedEffect", event="btnClicked")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Inspectable]
public var status : String;
private function login (): void {
dispatchEvent(new Event("btnClicked"));
}
]]>
</mx:Script>
<mx:Form width="248" height="100" label="Button" x="10" y="10">
<mx:FormItem label="用戶名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密碼" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" click="login()" label="登錄" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
使用自定義效果:
示例代碼 Hello.mxml :
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
-
- <mx:Script>
-
- <![CDATA[
-
- import mx.controls.Alert;
-
- private function btnClick() : void {
-
- Alert.show("test","Test");
-
- }
-
-
-
- private function btnClickHandler(event: Event) : void {
-
- Alert.show("Event btnClicked Called");
-
- }
-
- ]]>
-
- </mx:Script>
-
- <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
-
- <widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
-
- </widget:CLogin>
-
-
-
- <mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
-
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btnClick() : void {
Alert.show("test","Test");
}
private function btnClickHandler(event: Event) : void {
Alert.show("Event btnClicked Called");
}
]]>
</mx:Script>
<mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
<widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
</widget:CLogin>
<mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
</mx:Application>
加入自定義樣式:
As3代碼

- package
- {
- import mx.core.UIComponent;
-
- [Style(name="borderColor",type="uint",format="Color",inherit="no")]
-
- [Style(name="fillColor",type="uint",format="Color",inherit="no")]
-
- public class CustomCircle extends UIComponent
- {
- public function CustomCircle()
- {
- super();
- }
-
- override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
- {
- super.updateDisplayList(unscaledWidth, unscaledHeight);
-
- graphics.lineStyle(1, getStyle("borderColor"), 1.0);
-
- graphics.beginFill(getStyle("fillColor"),1.0);
-
- graphics.drawEllipse(0,0,100,100);
- }
- }
- }
package
{
import mx.core.UIComponent;
[Style(name="borderColor",type="uint",format="Color",inherit="no")]
[Style(name="fillColor",type="uint",format="Color",inherit="no")]
public class CustomCircle extends UIComponent
{
public function CustomCircle()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.lineStyle(1, getStyle("borderColor"), 1.0);
graphics.beginFill(getStyle("fillColor"),1.0);
graphics.drawEllipse(0,0,100,100);
}
}
}
之前舉的例子都是 MXML 的,那么這次就換為 AS 的例子,事實上都是相等的,如果是 MXML 的話則在 mx:Metadata m 內寫入元數據標記 [ Style (name="fillColor",type="uint",format="Color",inherit="no")] 等。
使用自定義樣式:
Xml代碼

- <?xml version="1.0" encoding="utf-8"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
-
- xmlns:comps="*"
-
- backgroundColor="#FFFFFF">
-
- <mx:Panel title="Style Sample" width="200" height="200"
-
- paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
-
- <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />
-
- </mx:Panel>
-
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
backgroundColor="#FFFFFF">
<mx:Panel title="Style Sample" width="200" height="200"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
<comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />
</mx:Panel>
</mx:Application>
posted on 2009-12-24 16:06
北國狼人的BloG 閱讀(456)
評論(0) 編輯 收藏