Come rendere scorrevole il tasto barra laterale in Flex

Question

Sono abbastanza nuovo per Flex. Voglio fare un pulsante (icona) in fondo a destra al centro della pagina che visualizza una barra laterale scorrevole con più pulsanti in esso quando si passa sopra di esso. Voglio che quando l'utente passa il mouse fuori dalla barra dei pulsanti fa scorrere di nuovo.

Concettualmente ho ottenuto le basi di quello al lavoro. Il problema che sto avendo è che quando l'utente sposta il mouse tra i pulsanti nella barra laterale calci a cambiare di stato e barra laterale scivoli di nuovo. Ho provato ad utilizzare diversi tipi di contenitori ed ho ottenuto gli stessi risultati.

Qualche consiglio?

Grazie,

Tam
Ecco il codice:

<?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

Se ho capito bene, si vuole creare un tipo di comportamento pop-up menu animati. Si desidera visualizzare il pannello quando l'utente passa sopra il pulsante originale, e nascondere di nuovo quando l'utente sposta il mouse dal menu.

Il problema è che si sono immediatamente nascondere il pannello sul mouseOut. Questo non è ciò che si vuole, perché si frequente ottenere l'evento mouseOut quando l'utente sposta il cursore tra i componenti all'interno del pannello.

Un approccio migliore è quello di avere l'evento mouseOut avviare un timer che inizierà la transizione dopo un breve ritardo, e quindi annullare questo timer se si riceve un altro evento mouseOver nel frattempo.

Sarebbe simile a questa (non testata):

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

È necessario i gestori del mouse sia sul tasto originale e il menu. Potrebbe essere necessario apportare alcune modifiche, ma si spera che questo dimostra l'idea di base.