<?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>

<?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>