自定义组件--创建mxml组件

创建简单的mxml组件

Example

components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:dataProvider>
<mx:String>United States</mx:String>
<mx:String>United Kingdom</mx:String>
<!-- Add all other countries. -->
</mx:dataProvider>
</mx:ComboBox>

Main application MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
width="220" height="115"
>
<custom:CountryComboBox/>
</mx:Application>

自定义组件的属性和方法

Example

components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:dataProvider>
<mx:String>United States</mx:String>
<mx:String>United Kingdom</mx:String>
<!-- Add all other countries... -->
</mx:dataProvider>
</mx:ComboBox>

Main application MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
width="270" height="170"
>
<mx:Script>
<![CDATA[
import flash.events.Event;
private function handleCloseEvent(eventObj:Event):void
{
status.text = "You selected: \r" + countries.selectedItem as String;
}
]]>
</mx:Script>
<mx:Panel
title="Custom component inheritance"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
>
<custom:CountryComboBox
id="countries" rowCount="5"
close="handleCloseEvent(event);"
/>
<mx:Text id="status" text="Please select a country from the list." width="136"/>
</mx:Panel>
</mx:Application>

创建复合型mxml组件

Example
components/AddressForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Form
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
>
<mx:FormItem label="Name">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Street">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="City">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="State/County">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Country">
<custom:CountryComboBox/>
</mx:FormItem>
</mx:Form>


components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:dataProvider>
<mx:String>United States</mx:String>
<mx:String>United Kingdom</mx:String>
<!-- Add all other countries... -->
</mx:dataProvider>
</mx:ComboBox>


Main application MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
viewSourceURL="src/MxmlComponentComposite/index.html"
width="400" height="290"
>
<mx:Panel
title="Composite component"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
>
<custom:AddressForm />
</mx:Panel>
</mx:Application>

创建重用mxml组件
Example
components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var countryArrayShort:Array = ["US", "UK"];
private var countryArrayLong:Array = ["United States", "United Kingdom"];
// Determines display state. The inspectable metadata tag
            // is used by Flex Builder 2
            [Inspectable(defaultValue=true)]
private var _useShortNames:Boolean = true;
// Implicit setter
            public function set useShortNames (state:Boolean):void
{
// Call method to set the dataProvider based on the name length.
                _useShortNames = state;
if (state)
{
this.dataProvider = countryArrayShort;
}
else
{
this.dataProvider = countryArrayLong;
}
// Dispatch an event when the value changes
                // (used in data binding.)
                dispatchEvent(new Event("changeUseShortNames"));
}
// Allow other components to bind to this property
            [Bindable(event="changeUseShortNames")]
public function get useShortNames():Boolean
{
return _useShortNames;
}
]]>
</mx:Script>
</mx:ComboBox>


Main application MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
viewSourceURL="src/MxmlComponentAdvanced/index.html"
width="260" height="200"
>
<mx:Panel
title="Advanced custom components"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
>
<!-- Set a custom property on a custom component -->
<custom:CountryComboBox
id="countries"
useShortNames="false"
/>
<!--
Use data binding to display the latest state
of the property.
-->
<mx:Label text="useShortNames = {countries.useShortNames}"/>
<mx:ControlBar horizontalAlign="right">
<mx:Button
label="Toggle Display"
click="countries.useShortNames = !countries.useShortNames;"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>