Create a Show/Hide Sliding Panel using Flex
November 19th, 2009 in Flex | 24 CommentsThis 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.
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>
Nov 25th, 2009
Nice tut, love flex !!!
Dec 14th, 2009
Nice idea…
However, having the bounce easing function on the close is a little incongruous.
Here’s my attempt:
http://edsyrett.wordpress.com/2009/11/27/focus-loops-within-focus-loops/
My test app shows a reusable component that can we switched between docking on the right or left, and also shows how to create a focus loop within the slidiing panel itself.
Cheers,
Ed.
Jan 11th, 2010
its good..i luv it
Jan 24th, 2010
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.
Feb 24th, 2010
hei nice site…
Mar 1st, 2010
its nice, could we some more animative in flex itself
Apr 23rd, 2010
Thanks alot for putting this up.
May 12th, 2010
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 ??
May 27th, 2010
Yeah it is ACTION SCRIPT 3.0
cheers,
Anurag
May 30th, 2010
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.
Jul 30th, 2010
m new to flex n think ur tut helped me understantand it
Jul 31st, 2010
hey frnd,
very nice example it is,
its very easy to use.
send more like this if thr is.
thx in advanced,
Aug 5th, 2010
Good.. Looks very cool.. thanks..
Aug 11th, 2010
[...] http://www.riacodes.com/flex/create-a-show-hide-sliding-panel-using-flex/ [...]
Sep 1st, 2010
*o* it’s pretty…. nice!!
Thank a lot ^3^
Sep 6th, 2010
hey guys, anyone know how to hide a panel/canvas when the focus is on another component
Sep 21st, 2010
Very nice TUT
Feb 22nd, 2011
Nice tut dear……
May 24th, 2011
Nice…….
Jun 15th, 2011
y porque no usa un PANEL control ????????
Jul 19th, 2011
Nice tutorial. really helpfull
Aug 16th, 2011
it is so cool , I like it.
Sep 21st, 2011
[...] 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. [...]
Dec 17th, 2011
viry good
ty…