Как сделать сдвижную кнопку боковой панели в Flex

Question

Я довольно новичок в Flex. Я хочу сделать кнопку (значок) в правой части страницы, которая отображает скользящую боковую панель с несколькими кнопками, когда вы наводите на нее курсор. Я хочу, чтобы когда пользователь наводил курсор на панель кнопок, он снова скользил назад.

Концептуально я получил основы этого для работы. Проблема, с которой я столкнулся, заключается в том, что когда пользователь перемещает мышь между кнопками на боковой панели, он пинается при изменении состояния и боковая панель снова скользит назад. Я пробовал использовать разные типы контейнеров и получил те же результаты.

Любой совет?

Спасибо

Tam

Вот код:

<?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";
}

Вам нужны обработчики мыши как для исходной кнопки, так и для меню. Возможно, вам придется внести некоторые коррективы, но, надеюсь, это показывает основную идею.