自訂群組件–建立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:Applicationxmlns: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:Applicationxmlns: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:Paneltitle="Custom component inheritance"paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"><custom:CountryComboBoxid="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:Formxmlns: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:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns:custom="components.*"viewSourceURL="src/MxmlComponentComposite/index.html"width="400" height="290"><mx:Paneltitle="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:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns:custom="components.*"viewSourceURL="src/MxmlComponentAdvanced/index.html"width="260" height="200"><mx:Paneltitle="Advanced custom components"paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"><!-- Set a custom property on a custom component --><custom:CountryComboBoxid="countries"useShortNames="false"/><!--Use data binding to display the latest stateof the property.--><mx:Label text="useShortNames = {countries.useShortNames}"/><mx:ControlBar horizontalAlign="right"><mx:Buttonlabel="Toggle Display"click="countries.useShortNames = !countries.useShortNames;"/></mx:ControlBar></mx:Panel></mx:Application>