<?xml version="1.0"?>
<!-- menus/PopUpMenuButtonControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="srcview/index.html"
    styleName="application" 
    initialize="onInit()">

    <mx:Script>
        <![CDATA[
            import flash.utils.setTimeout;
            import mx.events.DropdownEvent;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;
            import mx.controls.Menu;
            
            import com.modernista.swffocus.SWFFocus;

            // this helps Firefox capture and release keyboard focus
            private function onInit():void {
                SWFFocus.init(systemManager.stage as Stage);
            }
            
            private var selectedIndex:int = 2;
            private var menu:Menu;
            
            // The initData function sets the initial value of the button 
            // label by setting the Menu subcontrol's selectedIndex property.
            // You must cast the popUp property to a Menu.
            private function initData():void {
                menu = Menu(popUpMenuButton.popUp);
                menu.selectedIndex = selectedIndex;
                popUpMenuButton.addEventListener(MenuEvent.ITEM_CLICK, itemClickHandler);
            }
            
            // restores the popUpMenu selectedIndex
            private function restoreSelectedIndex(event:MenuEvent):void {
                menu.selectedIndex = selectedIndex;
                    popUpMenuButton.setFocus();
            }
            
            private function itemClickHandler(event:MenuEvent):void {
                selectedIndex=menu.selectedIndex;
                menu.setFocus();
                // we wait a frame and then restore the selectedIndex
                // to test get_accValue method
                flash.utils.setTimeout(restoreSelectedIndex, 10, event);
            }          
            
        ]]>
    </mx:Script>

    <mx:XML format="e4x" id="dataProvider">
        <root>
            <editItem label="Cut"/>
            <editItem label="Copy"/>
            <editItem label="Paste"/>
            <separator type="separator"/>
            <editItem label="Delete"/> 
        </root>
    </mx:XML>
    
    <mx:Style>
        .application {
            fontSize: 20px;
            horizontalAlign: center;
            verticalAlign: middle;
        }
        .searchInput {
            editable: false;
            focusThickness: 4;
            paddingTop: 2;
            paddingBottom: 2;
        }
        .popUpMenuButton {
            paddingTop: 4;
            paddingRight: 4;
            paddingBottom: 4;
            paddingLeft: 4;
            focusThickness: 4;
        }
    </mx:Style>
       
    <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"> 
       <mx:HBox width="540">
           <mx:TextInput 
                   id="searchInput"
                   styleName="searchInput" 
                   width="100%"
                   height="100%"
                   tabIndex="1"
                   editable="false"
                   text="{'Selected Action: '+popUpMenuButton.label}" />
           
           <mx:PopUpMenuButton 
                   id="popUpMenuButton"
                   styleName="popUpMenuButton" 
                   width="30%"
                   tabIndex="2"
                dataProvider="{dataProvider}" 
                labelField="@label"
                creationComplete="initData()"
                showRoot="false" />
                
        </mx:HBox>
    </mx:HBox>
        
</mx:Application>