Create a Show/Hide Sliding Panel using Flex

This tutorial will show you how to add a nice hide/show sliding panel at the top of your flex application that when clicked will reveal itself.

View DemoDownload Source

1. Create a new flex project named SlidingPanel, set the name of the main MXML application file to Main.mxml and set its layout to absolute.

2. First let’s create the top panel. To do so add a Canvas component and give it an id of “panel”. To make it open or close, add a Button at the bottom of the canvas and set its properties as shown in the code below. Its click event will be handled by the toggleBtn function that we are going to create later.
When the application will be launched we want only the button “Open” to be visible so in order to do that set the canvas y property to -180.

 
<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
		<mx:LinkButton id="btn" width="100%"  height="21"  
			bottom="0" horizontalCenter="0"
			label="Open" 
		  	click="toggleBtn(event)"/>
</mx:Canvas>

We let you put your own content inside this panel.

3. To make the panel appear and disappear we need to create 2 Move effects, one to slide out and the other to slide in.
The first one will be used to open the panel. To do so set its yTo property to 0 so that the panel is fully visible and when its effectEnd event will occur we set the label property of the button to “Close”.
Follow the same process for the second Move effect that we’ll use to close the panel.
To make these effects more eye-catching, we add a bounce easing.

<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'" 
		duration="1500" easingFunction="Bounce.easeOut"/>        
<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'" 
		duration="1000" easingFunction="Bounce.easeIn"/>     

4. Next add a Script section to create the toggleBtn function. In this function we check whether the panel is opened or not and we play the corresponding Move effect.

<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;
			
			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else 
					panelIn.play();
			}
		]]>
</mx:Script>

5. Finally we add some CSS to custom the app.

<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
</mx:Style>

Here’s the final code, run your application to see it in action.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;
			
			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else 
					panelIn.play();
			}
		]]>
	</mx:Script>
	
	<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'" 
		duration="1500" easingFunction="Bounce.easeOut"/>        
	<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'" 
		duration="1000" easingFunction="Bounce.easeIn"/>        

	<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
       <!--Add the content of your sliding panel here  -->
		<mx:LinkButton id="btn" width="100%"  height="21"  
			bottom="0" horizontalCenter="0"
			label="Open" 
		  	click="toggleBtn(event)"/>
	</mx:Canvas>
	
	<!--Add the content of your page here-->
	
</mx:Application>

26 thoughts on “Create a Show/Hide Sliding Panel using Flex

  1. Gabor Kako

    Thank You.
    It is cool.

    But my question is:
    How to do this from bottom of my application?
    My application is full screen and sizeable.

  2. Saurabh Datta

    Hey, Just a question..
    IS the action-script used here the same as the one used in flash. I mean, I’ve never coded in flash and I think I need to get my hands wet. So will it be easier with AS 3.0 ??

  3. Daneil

    Hey, thnx a lot for this. Helped me loads get started with flex and after you tutorial i understand it a lot more. One thing i can;’t work out how to do is to add a background color to the drop down panel. Does anyone know how to do this.

    Thanx a lot

    Dan.

  4. abhishek

    hey frnd,
    very nice example it is,
    its very easy to use.
    send more like this if thr is.
    thx in advanced,
    🙂

  5. Pingback: Create a Show/Hide Sliding Panel using Flex

  6. Pingback: Adobe Flex - Programming Resources

  7. Pingback: Reference Links | Sathya's Log

Leave a Reply

Your email address will not be published. Required fields are marked *