復(fù)合組件是指包含多個(gè)組件的組件。這些組件可以是圖形資源或者是圖形資源同組件類的合并。比如，創(chuàng)建包括按鈕和文本域（text field）的組件，或者，組件包含一個(gè)按鈕，一個(gè)
文本域以及一個(gè)校驗(yàn)器（validator） 。
在創(chuàng)建復(fù)合組件時(shí)，應(yīng)當(dāng)在組件類的內(nèi)部實(shí)例化這些控件。假設(shè)這些控件有圖形資源，那就必須在類文件中規(guī)劃所引入的控件的布局，以及設(shè)置一些屬性，諸如缺省值之類。必須確保
引入符合組件所需的所有類。
如果組件類是從比較基礎(chǔ)的類擴(kuò)展，比如UIComponent，而不是從像Button這樣的控件類擴(kuò)展的，那么就必須實(shí)例化自定義組件中的每個(gè)子控件，并管理它們在屏幕上的顯示。
復(fù)合組件中單個(gè)組件的屬性不能從MXML 制作環(huán)境中訪問，除非設(shè)計(jì)上允許這么做。例如，如果創(chuàng)建一個(gè)從UIComponent擴(kuò)展的組件，并在這個(gè)組件中使用了一個(gè)Button 和一個(gè)TextArea組件，那么就不能在 MXML 標(biāo)記中設(shè)置 Button 控件的 label 文本，原因就是這個(gè)組件不是直接從 Button 類擴(kuò)展的。
創(chuàng)建組件
這個(gè)例子組件被稱為 ModalText，在 ModalText.as 文件中定義，組合了一個(gè) Button 控件和一個(gè)TextArea 控件。用Button 控件來控制是否允許在 TextArea 控件中進(jìn)行輸入。
為復(fù)合組件定義時(shí)間監(jiān)聽器
自定義組件通過實(shí)現(xiàn) createChildren()方法來創(chuàng)建子組件，如下面代碼所示：
override protected function createChildren():void {
super.createChildren();
// Create and initialize the TextArea control.
if (!text_mc) {
text_mc = new TextArea();
text_mc.addEventListener("change", handleChangeEvent);
addChild(text_mc);
}
// Create and initialize the Button control.
if (!mode_mc) {
mode_mc = new Button();
mode_mc.addEventListener("click", handleClickEvent);
addChild(mode_mc);
}
}
createChildren()方法中也包含對 addEventListener()方法的調(diào)用，用這個(gè)方法為TextArea 控件所產(chǎn)生的 change 事件以及 Button 控件所產(chǎn)生的 click 事件注冊監(jiān)聽器。這些事
件監(jiān)聽器定義在 ModalText 類中，如下面例子所示：
// Handle events that are dispatched by the children.
private function handleChangeEvent(eventObj:Event):void {
dispatchEvent(new Event("change"));
}
// Handle events that are dispatched by the children.
private function handleClickEvent(eventObj:Event):void {
text_mc.editable = !text_mc.editable;
}
可在復(fù)合組件中處理子組件所分發(fā)的事件。在這個(gè)例子中，Button 控件的 click 事件的事件監(jiān)聽器被定義在復(fù)合組件類中，用來控制 TextArea 控件的 editable 屬性。
但是，
如果子組件分發(fā)了一個(gè)事件，并且希望在組件之外可以有時(shí)機(jī)來處理這個(gè)事件，那么就要在組件定義中增加邏輯來廣播這個(gè)事件。注意，TextArea 控件的 change 事件監(jiān)聽器中重新廣播了這個(gè)事件。這就使運(yùn)用這個(gè)組件的應(yīng)用也能處理這個(gè)事件，如下面的例子所示：
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*">
<mx:Script>
<![CDATA[
import flash.events.Event;
function handleText(eventObj:Event)
{
}
]]>
</mx:Script>
<MyComp:ModalText change="handleText(event);"/>
</mx:Application>
創(chuàng)建ModalText 組件
下面的例子代碼實(shí)現(xiàn)了 ModalText 組件的類定義。
ModalText 組件是一個(gè)包含一個(gè)Button 控件和一個(gè) TextArea 控件的復(fù)合組件。 這個(gè)控件有以下特性：
1. 缺省情況下不能在TextArea 中進(jìn)行編輯。
2. 通過點(diǎn)擊Button控件去控制TextArea控件的編輯。
3. 通過使用控件的textPlacement 屬性來控制TextArea顯示在控件的左邊還是右邊。
4. 編輯控件的textPlacement屬性將會(huì)分發(fā)placementChanged 事件。
5. 在程序中使用text 屬性可以向TextArea 控件寫入內(nèi)容。
6. 編輯控件的text屬性將會(huì)分發(fā)一個(gè)textChanged事件。
7. 編輯TextArea控件的文本將會(huì)分發(fā)change事件。
8. textPlacement 和text 屬性都可以作為數(shù)據(jù)綁定表達(dá)式的源。
9. 可以有選擇性地為Button的up,down和over狀態(tài)設(shè)置皮膚。
下面的例子在MXML文件中使用ModalText控件， 并且將其textPlacement屬性設(shè)置為left：
<?xml version="1.0"?>
<!-- asAdvanced/ASAdvancedMainModalText.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*" >
<MyComp:ModalText textPlacement="left" height="40"/>
</mx:Application>
通過處理 placementChanged 事件，來確定 ModalText.textPlacement 屬性何時(shí)被修改，如下面的例子所示：
<?xml version="1.0"?>
<!-- asAdvanced/ASAdvancedMainModalTextEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*" >
<mx:Script>
<![CDATA[
import flash.events.Event;
private function placementChangedListener(event:Event):void {
myEvent.text="placementChanged event occurred - textPlacement = "
+ myMT.textPlacement as String;
}
]]>
</mx:Script>
<MyComp:ModalText id="myMT" textPlacement="left" height="40" placementChanged="placementChangedListener(event);"/>
<mx:TextArea id="myEvent" width="50%"/>
<mx:Label text="Change Placement" />
<mx:Button label="Set Text Placement Right" click="myMT.textPlacement='right';" />
<mx:Button label="Set Text Placement Left" click="myMT.textPlacement='left';" />
</mx:Application>
下面的例子顯示定義控件的 ModalText.as 文件源碼：
package myComponents
{
// Import all necessary classes.
import mx.core.UIComponent;
import mx.controls.Button;
import mx.controls.TextArea;
import flash.events.Event;
import flash.text.TextLineMetrics;
// ModalText dispatches a change event when the text of the child
// TextArea control changes, a textChanged event when you set the text
// property of ModalText, and a placementChanged event
// when you change the textPlacement property of ModalText.
[Event(name="change", type="flash.events.Event")]
[Event(name="textChanged", type="flash.events.Event")]
[Event(name="placementChanged", type="flash.events.Event")]
/*** a) Extend UIComponent. ***/
public class ModalText extends UIComponent {
/*** b) Implement the class constructor. ***/
public function ModalText() {
super();
}
/*** c) Define variables for the two child components. ***/
// Declare two variables for the component children.
private var text_mc:TextArea;
private var mode_mc:Button;
/*** d) Embed new skins used by the Button component. ***/
// You can create a SWF file that contains symbols with the names
// ModalUpSkin, ModalOverSkin, and ModalDownSkin.
// If you do not have skins, comment out these lines.
[Embed(source="Modal2.swf", symbol="blueCircle")]
public var modeUpSkinName:Class;
[Embed(source="Modal2.swf", symbol="blueCircle")]
public var modeOverSkinName:Class;
[Embed(source="Modal2.swf", symbol="greenSquare")]
public var modeDownSkinName:Class;
/*** e) Implement the createChildren() method. ***/
// Test for the existence of the children before creating them.
// This is optional, but we do this so a subclass can create a
// different child instead.
override protected function createChildren():void {
super.createChildren();
// Create and initialize the TextArea control.
if (!text_mc)
{
text_mc = new TextArea();
text_mc.explicitWidth = 80;
text_mc.editable = false;
text_mc.text= _text;
text_mc.addEventListener("change", handleChangeEvent);
addChild(text_mc);
}
// Create and initialize the Button control.
if (!mode_mc)
{ mode_mc = new Button();
mode_mc.label = "Toggle Editing Mode";
// If you do not have skins available,
// comment out these lines.
mode_mc.setStyle('overSkin', modeOverSkinName);
mode_mc.setStyle('upSkin', modeUpSkinName);
mode_mc.setStyle('downSkin', modeDownSkinName);
mode_mc.addEventListener("click", handleClickEvent);
addChild(mode_mc);
}
}
/*** f) Implement the commitProperties() method. ***/
override protected function commitProperties():void {
super.commitProperties();
if (bTextChanged) {
bTextChanged = false;
text_mc.text = _text;
invalidateDisplayList();
}
}
/*** g) Implement the measure() method. ***/
// The default width is the size of the text plus the button.
// The height is dictated by the button.
override protected function measure():void {
super.measure();
// Since the Button control uses skins, get the
// measured size of the Button control.
var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth();
var buttonHeight:Number = mode_mc.getExplicitOrMeasuredHeight();
// The default and minimum width are the measuredWidth
// of the TextArea control plus the measuredWidth
// of the Button control.
measuredWidth = measuredMinWidth = text_mc.measuredWidth + buttonWidth;
// The default and minimum height are the larger of the
// height of the TextArea control or the measuredHeight of the
// Button control, plus a 10 pixel border around the text.
measuredHeight = measuredMinHeight = Math.max(mode_mc.measuredHeight,buttonHeight) + 10;
}
/*** h) Implement the updateDisplayList() method. ***/
// Size the Button control to the size of its label text
// plus a 10 pixel border area.
// Size the TextArea to the remaining area of the component.
// Place the children depending on the setting of
// the textPlacement property.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Subtract 1 pixel for the left and right border,
// and use a 3 pixel margin on left and right.
var usableWidth:Number = unscaledWidth - 8;
// Subtract 1 pixel for the top and bottom border,
// and use a 3 pixel margin on top and bottom.
var usableHeight:Number = unscaledHeight - 8;
// Calculate the size of the Button control based on its text.
var lineMetrics:TextLineMetrics = measureText(mode_mc.label);
// Add a 10 pixel border area around the text.
var buttonWidth: Number = lineMetrics.width + 10;
var buttonHeight:Number = lineMetrics.height + 10;
mode_mc.setActualSize(buttonWidth, buttonHeight);
// Calculate the size of the text
// Allow for a 5 pixel gap between the Button
// and the TextArea controls.
var textWidth:Number = usableWidth - buttonWidth - 5;
var textHeight:Number = usableHeight;
text_mc.setActualSize(textWidth, textHeight);
// Position the controls based on the textPlacement property.
if (textPlacement == "left") {
text_mc.move(4, 4); mode_mc.move(4 + textWidth + 5, 4);
}
else {
mode_mc.move(4, 4);
text_mc.move(4 + buttonWidth + 5, 4);
}
// Draw a simple border around the child components.
graphics.lineStyle(1, 0x000000, 1.0);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
}
/*** i) Add methods, properties, and metadata. ***/
// The general pattern for properties is to specify a private
// holder variable.
private var _textPlacement:String = "left";
// Create a getter/setter pair for the textPlacement property.
public function set textPlacement(p:String):void {
_textPlacement = p;
invalidateDisplayList();
dispatchEvent(new Event("placementChanged"));
}
// The textPlacement property supports data binding.
[Bindable(event="placementChanged")]
public function get textPlacement():String {
return _textPlacement;
}
private var _text:String = "ModalText";
private var bTextChanged:Boolean = false;
// Create a getter/setter pair for the text property.
public function set text(t:String):void {
_text = t;
bTextChanged = true;
invalidateProperties();
dispatchEvent(new Event("textChanged"));
}
[Bindable(event="textChanged")]
public function get text():String {
return text_mc.text;
}
// Handle events that are dispatched by the children.
private function handleChangeEvent(eventObj:Event):void {
dispatchEvent(new Event("change"));
}
// Handle events that are dispatched by the children.
private function handleClickEvent(eventObj:Event):void {
text_mc.editable = !text_mc.editable;
}
}
}