Comunidad de diseño web y desarrollo en internet online

Menú dinámico Flex3

Citar            
MensajeEscrito el 20 Abr 2009 03:08 pm
Alguien sabe como puedo hacer un menú vertical dinámico con Flex???? como por ejemplo, MenúA
->SubMenúA1,SubMenúA2,SubMenúA3; MenúB->SubMenúB1
Se puede hacer esto con Flex y llamar a un viewstack?
Gracias!!! :)

Por xchacalx

Claber

133 de clabLevel



 

msie7
Citar            
MensajeEscrito el 21 Abr 2009 01:29 am

Código :

?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    rollOut="mouseAction(event)" rollOver="mouseAction(event)" layout="absolute" creationComplete="init()"
    width="400" height="300"
    backgroundGradientColors="[#ffffff, #ffffff]" >
    <mx:Style source="style.css"/>
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Elastic;
            import flash.utils.Timer;
            
            private var menuTimer:Timer;
            private var fastMenuTimer:Timer;
            private var menuVisible:Boolean;
            [Bindable]
            private var showMenuButton:Boolean;
            
            [Embed(source="assets/images/menu.png")]
            [Bindable]
            public var btnMenuIcon:Class;
            
            private function init():void{
                initMenuMoveOn.play();
                menuTimer = new Timer(2000, 0);
                menuTimer.addEventListener(TimerEvent.TIMER, onMenuTimeOut);
                fastMenuTimer = new Timer(500, 0);
                fastMenuTimer.addEventListener(TimerEvent.TIMER, onFastMenuTimeOut);
                
               
            }
            private function showContent(event:Event):void{
                initContentMoveOn.play()
            }
            private function hideContent(event:Event):void{
                initContentMoveOff.play()
            }
            private function onMenuTimeOut(event:TimerEvent):void{
                trace('menuTimeOut'+event);
                menuTimer.stop();
                hideMenu();
            }
            private function onFastMenuTimeOut(event:TimerEvent):void{
                //trace(event);
                fastMenuTimer.stop();
                hideMenu();
            }
            private function setMenuVisible(status:Boolean):void{
                menuVisible=status;
                if(status){
                    showMenuButton=false;
                }else{
                    showMenuButton=true;
                }
            }
            private function showMenu():void{
                if(!menuVisible){
                    initMenuMoveOn.play();
                    menuTimer.start();
                }
                trace('[moveOnisPlaying]'+initMenuMoveOn.isPlaying);
            }
            private function hideMenu(event:MouseEvent=null):void{
                if(menuVisible){
                    if(event!=null){
                        trace(event.currentTarget);
                        trace('[initMenuMoveOff]'+initMenuMoveOff.isPlaying);
                        trace('[moveOnisPlaying]'+initMenuMoveOn.isPlaying);
                        if(!initMenuMoveOff.isPlaying || initMenuMoveOn.isPlaying){
                            initMenuMoveOff.play();    
                            //epvMenu.removeEventListener(MouseEvent.ROLL_OVER,
                        }
                    }else{
                        //timer timed out
                        initMenuMoveOff.play();    
                    }
                }
                //trace('[moveOffisPlaying]'+initMenuMoveOff.isPlaying);
            }
            private function mouseAction(event:MouseEvent=null):void{
                //trace(event.target);
                //trace(event);
                if(event.target == 'animatedMenu0'){
                    switch(event.type){
                        case 'rollOut':
                            trace('rollOutEpv0');
                            break;
                        case 'rollOver':
                            menuTimer.start();
                            trace('rollOverEpv0');
                            break;
                        case 'mouseMove':
                            //trace('mouseMove');
                            break;
                    }
                }else{
                    switch(event.type){
                        case 'rollOut':
                            if(!menuTimer.running){
                                fastMenuTimer.start();    
                            }                        
                            trace('rollOutElse');
                            break;
                        case 'rollOver':
                            showMenu();
                            trace('rollOverElse');
                            break;
                        case 'mouseMove':
                            menuTimer.stop();
                            //trace('mouseMove');
                            break;
                    }
                }
                
            }
            private function timerAction(action:String,target:String=null):void{
                //trace(event);
                switch(action){
                    case 'rollOut':
                        menuTimer.start();
                        break;
                    case 'rollOver':
                        trace('rollOver');
                        break;
                    case 'mouseMove':
                        //trace('mouseMove');
                        break;
                }
            }
            private function showStatus():void{
                trace('[moveOnisPlaying]'+initMenuMoveOn.isPlaying);
                trace('[moveOffisPlaying]'+initMenuMoveOff.isPlaying);
            }
        ]]>
    </mx:Script>
    
    <mx:Sequence id="initMenuMoveOn" target="{epvMenu}" effectEnd="setMenuVisible(true)">
        <mx:Resize widthFrom="0" widthTo="220" easingFunction="Elastic.easeOut" />
        <mx:Resize heightFrom="42.5" heightTo="212.5" duration="900" easingFunction="Elastic.easeOut" />    
    </mx:Sequence>
    
    <mx:Sequence id="initMenuMoveOff" target="{epvMenu}" effectEnd="setMenuVisible(false)">
        <mx:Resize widthFrom="220" duration="250" widthTo="0" />
        <mx:Resize heightFrom="212.5" duration="500" heightTo="42.5" />    
    </mx:Sequence>

    <mx:Sequence id="initContentMoveOn">
        <mx:Resize widthFrom="0" widthTo="{myVS.width}" heightFrom="0" heightTo="50" />
        <mx:Resize heightFrom="50" heightTo="{myVS.height}" duration="1200" easingFunction="Elastic.easeOut"/>    
    </mx:Sequence>
    
    <mx:Sequence id="initContentMoveOff">
        <mx:Resize heightFrom="{myVS.height}" heightTo="50" duration="400"/>    
        <mx:Resize widthFrom="{myVS.width}" widthTo="0" heightFrom="50" heightTo="0" />
    </mx:Sequence>
        
    <mx:ViewStack id="myVS" left="20" top="10" bottom="10" right="10">
        <mx:Canvas label="Form" width="100%" height="100%"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            borderStyle="solid" cornerRadius="13"
            showEffect="{initContentMoveOn}" 
            hideEffect="{initContentMoveOff}">
            <mx:HBox width="100%" height="100%" horizontalAlign="right">
                <mx:Form width="75%">
                    <mx:FormHeading label="This is my Form"/>
                    <mx:FormItem label="someField">
                        <mx:Label />
                    </mx:FormItem>
                </mx:Form>
            </mx:HBox>
            
        </mx:Canvas>
        <mx:Canvas label="Edit Something" width="100%" height="100%"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            borderStyle="solid" cornerRadius="13"
            showEffect="{initContentMoveOn}" 
            hideEffect="{initContentMoveOff}">
            
            <mx:HBox width="100%" height="100%" horizontalAlign="right">
                <mx:Form width="75%">
                    <mx:FormHeading label="This is my Form Full of details"/>
                    <mx:FormItem label="someField">
                        <mx:TextInput />
                    </mx:FormItem>
                </mx:Form>
            </mx:HBox>
        </mx:Canvas>
    </mx:ViewStack>
    
    <mx:Button x="-16" y="10" visible="{showMenuButton}" 
        width="43" height="49" id="btnShowMenu" icon="{btnMenuIcon}"
        rollOver="mouseAction(event)" />
        
    <mx:Canvas id="epvMenu" horizontalScrollPolicy="off" verticalScrollPolicy="off"
                    mouseMove="mouseAction(event)" alpha=".8"
                    rollOut="mouseAction(event)"
                    width="0" height="42.5" backgroundColor="#DFDFDD" 
                    cornerRadius="7" borderStyle="solid" x="11" y="12">
        
        <mx:VBox left="10" top="10" right="10" bottom="10">
            <mx:Button styleName="MenuButtons" width="100%" label="change viewstack 1" click="{myVS.selectedIndex=0}"/>
            <mx:Button styleName="MenuButtons" width="100%" label="change viewstack 2" click="{myVS.selectedIndex=1}"/>
        </mx:VBox>
    </mx:Canvas>
    
</mx:Application>

Por xcom

Claber

530 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Abr 2009 02:48 pm
Buenisimo!!!! Gracias!!!!

Por xchacalx

Claber

133 de clabLevel



 

msie7

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.