How to make sliding button sidebar in Flex
- by Tam
Hi,
I'm fairly new to Flex. I want to make a button (icon) on the far right in the middle of the page that display a sliding side bar with multiple buttons in it when you hover over it. I want when the user hover out of the button bar it slides back again.
Conceptually I got the basics of that to work. The issue I'm having is that when the user moves the mouse between the buttons in the sidebar it kicks in changing state and side bar slides back again. I tried using different types of containers and I got the same results.
Any Advice?
Thanks,
Tam
Here is the code:
<?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>
