<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:mccune="com.dougmccune.controls.*"
    creationComplete="initCollections();" >
    
    <mx:Style>
        Panel { 
           headerHeight: 17;
           borderThickness: 0;
           roundedBottomCorners: true;
           backgroundAlpha: 1;
           borderAlpha: 1;
           highlightAlphas: 0.73, 0;
           
           headerColors: #000000, #000000;
           footerColors: #000000, #000000;
           borderColor: #000000;
           titleStyleName: "myTitleStyle";
        } 

        .myTitleStyle {
               color: #ffffff;
           }
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            import mx.events.MenuEvent;
            import mx.controls.Alert;
            import mx.collections.*;

            [Bindable]
            public var menuBarCollection:XMLListCollection;
    
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1">
                        <menuitem label="MenuItem 1-A" data="1A"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2">
                        <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
                        <menuitem type="separator" />
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 2-B-A" type="radio"
                                groupName="2one" data="2-B-A"/>
                            <menuitem label="SubMenuItem 2-B-B" type="radio"
                                groupName="2one" data="2-B-B"/>
                        </menuitem>
                    </menuitem>
                    <menuitem label="Menu3">
                        <menuitem label="MenuItem 3-A" type="check"  data="3A"/>
                        <menuitem type="separator" />
                        <menuitem label="MenuItem 3-B" >
                            <menuitem label="SubMenuItem 3-B-A" type="radio"
                                groupName="3one" data="3-B-A"/>
                            <menuitem label="SubMenuItem 3-B-B" type="radio"
                                groupName="3one" data="3-B-B"/>
                        </menuitem>
                    </menuitem>
                </>;

            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(event:MenuEvent):void  {
                Alert.show("Label: " + event.item.@label + "\n" + 
                    "Data: " + event.item.@data, "Clicked menu item");
            }

            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }
            
            
         ]]>
    </mx:Script>

    <mx:VBox width="90%" height="90%">

        <mx:Panel title="Normal MenuBar Control" width="100%" height="200"
             paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
           <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
                dataProvider="{menuBarCollection}" width="100%" /> 
        </mx:Panel>
        
        <mx:Panel title="Vertical MenuBar Control" width="100%" height="100%">

            <mx:HBox width="100%" height="100%">
                
                <mccune:VerticalMenuBar height="100%" direction="right" labelField="@label" itemClick="menuHandler(event);"  
                    dataProvider="{menuBarCollection}"  />
                
                <mx:Spacer width="100%" />
                
                <mccune:VerticalMenuBar height="100%" direction="left" labelField="@label" itemClick="menuHandler(event);"  
                    dataProvider="{menuBarCollection}"  />
                    
            </mx:HBox>

        </mx:Panel>

    </mx:VBox>
</mx:Application>