復合組件是指包含多個組件的組件。這些組件可以是圖形資源或者是圖形資源同組件類的合并。比如，創建包括按鈕和文本域（text field）的組件，或者，組件包含一個按鈕，一個
文本域以及一個校驗器（validator） 。
在創建復合組件時，應當在組件類的內部實例化這些控件。假設這些控件有圖形資源，那就必須在類文件中規劃所引入的控件的布局，以及設置一些屬性，諸如缺省值之類。必須確保
引入符合組件所需的所有類。
如果組件類是從比較基礎的類擴展，比如UIComponent，而不是從像Button這樣的控件類擴展的，那么就必須實例化自定義組件中的每個子控件，并管理它們在屏幕上的顯示。
復合組件中單個組件的屬性不能從MXML 制作環境中訪問，除非設計上允許這么做。例如，如果創建一個從UIComponent擴展的組件，并在這個組件中使用了一個Button 和一個TextArea組件，那么就不能在 MXML 標記中設置 Button 控件的 label 文本，原因就是這個組件不是直接從 Button 類擴展的。
創建組件
這個例子組件被稱為 ModalText，在 ModalText.as 文件中定義，組合了一個 Button 控件和一個TextArea 控件。用Button 控件來控制是否允許在 TextArea 控件中進行輸入。
為復合組件定義時間監聽器
自定義組件通過實現 createChildren()方法來創建子組件，如下面代碼所示：
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()方法的調用，用這個方法為TextArea 控件所產生的 change 事件以及 Button 控件所產生的 click 事件注冊監聽器。這些事
件監聽器定義在 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;
}
可在復合組件中處理子組件所分發的事件。在這個例子中，Button 控件的 click 事件的事件監聽器被定義在復合組件類中，用來控制 TextArea 控件的 editable 屬性。
但是，
如果子組件分發了一個事件，并且希望在組件之外可以有時機來處理這個事件，那么就要在組件定義中增加邏輯來廣播這個事件。注意，TextArea 控件的 change 事件監聽器中重新廣播了這個事件。這就使運用這個組件的應用也能處理這個事件，如下面的例子所示：
<?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>
創建ModalText 組件
下面的例子代碼實現了 ModalText 組件的類定義。
ModalText 組件是一個包含一個Button 控件和一個 TextArea 控件的復合組件。 這個控件有以下特性：
1. 缺省情況下不能在TextArea 中進行編輯。
2. 通過點擊Button控件去控制TextArea控件的編輯。
3. 通過使用控件的textPlacement 屬性來控制TextArea顯示在控件的左邊還是右邊。
4. 編輯控件的textPlacement屬性將會分發placementChanged 事件。
5. 在程序中使用text 屬性可以向TextArea 控件寫入內容。
6. 編輯控件的text屬性將會分發一個textChanged事件。
7. 編輯TextArea控件的文本將會分發change事件。
8. textPlacement 和text 屬性都可以作為數據綁定表達式的源。
9. 可以有選擇性地為Button的up,down和over狀態設置皮膚。
下面的例子在MXML文件中使用ModalText控件， 并且將其textPlacement屬性設置為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 屬性何時被修改，如下面的例子所示：
<?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;
}
}
}