自定义组件--创建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>