Sliding Menu Bar

The following code is used to display the Sliding  Menu Bar.Here Menus can be viewed when needed and hidden when not.......


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               width="100%" height="100%" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.ListEvent;
           
             [Embed (source="/../Img/Plus.gif")]
            public var Plus:Class;

            [Embed (source="/../Img/Minus.gif")]
            public var Minus:Class;

            [Embed (source="/../Img/bar_arrow_right.png")]
            public var barright:Class;
           
            [Embed (source="/../Img/bar_arrow_left.png")]
            public var barleft:Class;

           
            [Bindable]
            private var ArrCol:ArrayCollection = new ArrayCollection
                ([
                    {item:'Master', children:['AccountCodeGrouping','AdvancedDataGrid']},
                    {item:'Charts', children:'FusionCharts'}
                ]); 
           
            private function showPanel():void
            {
                currentState=(currentState == 'PanelExpanded') ? 'allCollapsed' : 'PanelExpanded';

                if (pin.source == barleft)
                    pin.source = barright;
                else
                    pin.source = barleft;
            }

            protected function pin_clickHandler(event:MouseEvent):void
            {   
                showPanel();
            }
           
            private function load(event:MouseEvent):void
            {
                var a:int;

                if(Tree.selectedItem.toString() == 'AdvancedDataGrid')
                    a = 0;
                else if(Tree.selectedItem.toString() == 'AccountCodeGrouping')
                    a = 1;
                else if(Tree.selectedItem.toString() == 'FusionCharts')
                    a = 2;
                Stack.selectedIndex = a;
            }
           
            private function tree_itemClick(event:ListEvent):void
            {
                var item:Object = (event.currentTarget).selectedItem;
                if(Tree.dataDescriptor.isBranch(item))
                {
                    Tree.expandItem(item, !Tree.isItemOpen(item), true);
                }
            }
                   
        ]]>
    </fx:Script>

    <s:transitions>
        <s:Transition toState="PanelExpanded">
            <s:Parallel >
                <s:Resize target="{leftPanel}" duration="500"/>
                <s:Fade target="{leftPanel}"  duration="500" startDelay="250"/>
            </s:Parallel>
        </s:Transition>
    <s:Transition toState="allCollapsed">
            <s:Parallel>
                <s:Fade target="{leftPanel}" duration="500"/>
                <s:Resize target="{leftPanel}" duration="500" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:states>
        <s:State name="allCollapsed"/>
        <s:State name="PanelExpanded"/>
    </s:states>

    <s:VGroup width="100%" height="100%" gap="0" horizontalAlign="center" verticalAlign="middle">   
            <s:Group width="100%" height="100%" depth="2" >
            <s:Group width="100%" height="100%">
                <s:VGroup width="100%" height="100%" top="10" left="25" right="25">
                    <s:HGroup width="100%" height="100%" gap="1">
                        <s:VGroup width="175" height="100%" id="leftPanel" alpha.allCollapsed="0" width.allCollapsed="0"> <!--width.allCollapsed="0"-->
                                    <s:Group  bottom="10" height="100%" width="100%" >
                                        <mx:Tree id="Tree" dataProvider="{ArrCol}" labelField="item" width="200" height="100%" borderSkin="{null}"
                                                 folderClosedIcon="{null}" folderOpenIcon="{null}" click="load(event)" defaultLeafIcon="{null}"
                                                  useHandCursor="true" buttonMode="true" itemClick="tree_itemClick(event);" itemRenderer="ProComp.lblItem">
                                        </mx:Tree>
                                                 <!-- defaultLeafIcon="{Minus}" disclosureOpenIcon="{Minus}" disclosureClosedIcon="{Plus}" labelFunction="{fnTreeLable}" itemRenderer="ProComp.lblItem"-->       
                                    </s:Group>                   
                        </s:VGroup>
                        <s:VGroup width="7" height="100%" verticalAlign="middle" gap="0" horizontalAlign="center">
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true" />
                            <mx:Image source="{barright}" click="pin_clickHandler(event)"
                                      id="pin" width.allCollapsed="10" x.allCollapsed="0" useHandCursor="true" buttonMode="true"/>
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true"/>
                        </s:VGroup>
                        <s:VGroup width="100%" height="100%" paddingLeft="-1" top="5" bottom="5" right="10" gap="0">
                            <!--<s:HGroup id="HRptLink" width="100%" height="0%" />-->
                            <s:HGroup id="grpDGrid" width="100%" height="100%" width.allCollapsed="1168" height.allCollapsed="493">
                                <mx:ViewStack width="100%" height="100%" id="Stack" width.allCollapsed="1168" height.allCollapsed="495">
                                    <local:AdvanceDataGrid width="250%" height="100%"/>
                                    <local:AccountCodeGrouping width="250%" height="100%"/>
                                    <local:Charts width="250%" height="150%"/>
                                </mx:ViewStack>                           
                            </s:HGroup>
                        </s:VGroup>
                    </s:HGroup>
                </s:VGroup>       
            </s:Group>
        </s:Group>
</s:VGroup>
</s:Application>



Output: