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