플렉스에서 슬라이딩 버튼 사이드 바를 만드는 방법

Question

저는 Flex가 새로 도입되었습니다. 마우스를 가져 가면 여러 개의 버튼이있는 슬라이딩 사이드 바가 표시된 페이지 중앙의 맨 오른쪽에 버튼 (아이콘)을 만들고 싶습니다. 사용자가 버튼 막대에서 마우스를 가져 와서 다시 슬라이드하면됩니다.

개념적으로 나는 작업의 기초가 있습니다. 내가 겪고있는 문제는 사용자가 사이드 바의 버튼 사이에서 마우스를 움직이면 상태가 바뀌고 사이드 바가 다시 뒤로 움직이는 것입니다. 다른 유형의 컨테이너를 사용해 보았는데 같은 결과를 얻었습니다.

어떤 조언이 있으십니까? 내가 제대로 이해하면, 당신은 애니메이션 팝업 메뉴 동작의 종류를 생성 할

<?xml version="1.0" encoding="utf-8"?> 
<s:VGroup 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:vld ="com.lal.validators.*" 
    xmlns:effect="com.lal.effects.*" 
    width="150" 
    horizontalAlign="right" 
    gap="0"> 

    <fx:Script> 
     <![CDATA[ 
      import com.lal.model.LalModelLocator; 
      var _model:LalModelLocator = LalModelLocator.getInstance(); 

     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <mx:ArrayCollection id="someData"> 
     </mx:ArrayCollection> 
    </fx:Declarations> 
    <s:states> 
     <s:State name="normal" /> 
     <s:State name="expanded" /> 
    </s:states> 
    <fx:Style source="/styles.css"/> 
    <s:transitions> 
     <s:Transition fromState="normal" toState="expanded" > 
      <s:Sequence> 
       <s:Wipe direction="left" duration="250" target="{buttonsGroup}" /> 
      </s:Sequence> 

     </s:Transition> 
     <s:Transition fromState="expanded" toState="normal" > 
      <s:Sequence>    
       <s:Wipe direction="right" duration="250" target="{buttonsGroup}" /> 
      </s:Sequence> 
     </s:Transition> 
    </s:transitions> 
    <s:Button skinClass="com.lal.skins.CalendarButtonSkin" id="calendarIconButton" 
       includeIn="normal" 
       verticalCenter="0" 
       mouseOver="currentState = 'expanded'"/> 

    <s:Panel includeIn="expanded" id="buttonsGroup"   
       mouseOut="currentState = 'normal' " 
       width="150" height="490" > 
     <s:layout> 
      <s:VerticalLayout gap="0" paddingRight="0" /> 
     </s:layout> 
     <s:Button id="mondayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="tuesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="wednesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="thursdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="fridayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="saturdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
     <s:Button id="sundayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/> 
    </s:Panel> 

</s:VGroup> 

Answer 1

:

감사합니다,

탐 여기

는 코드입니다. 사용자가 원래 버튼을 가리키면 패널을 표시하고 사용자가 마우스를 메뉴 밖으로 이동하면 패널을 다시 숨기려고합니다.

문제는 바로 mouseOut에서 패널을 숨기고 있다는 것입니다. 사용자가 패널 내 구성 요소 사이에서 커서를 움직일 때 mouseOut 이벤트를 자주 가져 오기 때문에 원하는 것은 아닙니다.

더 나은 방법은 mouseOut 이벤트가 잠시 후 전환을 시작하는 타이머를 시작한 다음 다른 mouseOver 이벤트가 발생하면이 타이머를 취소하는 것입니다.

그것은이 (안된)과 같이 보일 것입니다 :

mouseOver="showMenu()" 
mouseOut="hideAfterDelay()" 

protected var t:Timer; 

protected function hideAfterDelay():void { 
    killTimer(); 
    t = new Timer(500, 1); 
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete); 
    t.start(); 
} 

protected function onTimerComplete():void { 
    currentState = "normal"; 
    killTimer(); 
} 

protected function killTimer():void { 
    if (t) { 
     t.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete); 
     t.stop(); 
     t = null; 
    } 
} 

protected function showMenu():void { 
    killTimer(); 
    currentState = "expanded"; 
} 

당신은 원래의 버튼과 메뉴 모두에 마우스 핸들러가 필요합니다. 약간의 조정이 필요할 수도 있지만, 이것이 기본 아이디어를 보여주기를 바랍니다.