Show/hide slide panel
I'm doing a flex mobile project with Flash Builder 4.6.
I want to show or hide a panel in the top of a view. I want to show a line and if you drag this line and slide down, it may appear the panel until a certain height, and when you slide up or swipe up, the panel would disappear. It's a little complicated to explain, but I want something like the "official" notifications on ios or Android.
I do something that do it, but it doesn't work very well when I try it on iPad.
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="view1_creationCompleteHandler(event)">
<fx:Declarations>
<s:Move id="panelOut" target="{slideView}" yTo="0" effectEnd="btn.label='Close'"
duration="1500"/>
<s:Move id="panelIn" target="{slideView}" yTo="-165" effectEnd="panelIn_effectEndHandler(event)"
duration="1000"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import views.AppDetail;
private var view:AppDetail;
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
this.addEventListener(TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
}
public function setData(view:AppDetail):void{
this.view = view;
trace("set data y poner el objeto "+view);
}
/**
* Swipe event
* */
protected function swipeHandler(event:TransformGestureEvent):void {
if (event.offsetX == 1) {
//swiped right
}
else if (event.offsetX == -1) {
//swiped left
}
else if (event.offsetY == 1) {
//swiped down
panelOut.play();
}
else if (event.offsetY == -1) {
//swiped up
panelIn.play();
}
}
public function focus_in_stagewebview():void{
if(btn.label== 'Close'){
panelIn.play();
}
}
/**
* Click the button and begin the animation
* */
private function toggleBtn(e:MouseEvent):void{
if(e.currentTarget.label== 'Open')
panelOut.play();
else
panelIn.play();
}
/**
* When you drop the button.
* Stop the drag and drop and finish the animation
* */
protected function btn_mouseUpHandler(event:MouseEvent):void
{
trace("btn mouse up handler");
slideView.stopDrag();
if(event.currentTarget.label== 'Open'){
panelOut.play();
}else {
panelIn.play();
}
}
/**
* When you drag the button
* Start the drag and drop and if the panel is closed, hide the stagewebview
*
* */
protected function btn_mouseDownHandler(event:MouseEvent):void
{
slideView.startDrag(false, new Rectangle(0,-165,0,165))
if(event.currentTarget.label== 'Open' && this.view != null){
this.view.hideStageWebView();
}
trace("btn mouse down handler");
}
/**
* End effect of slide. If the panel is closed, show the stagewebview again
* */
protected function panelIn_effectEndHandler(event:EffectEvent):void
{
if(btn.label== 'Close' && this.view != null){
this.view.showStageWebView();
}
btn.label="Open";
}
]]>
</fx:Script>
<s:SkinnableContainer id="slideView" width="100%" height="200" y="-165">
<s:VGroup width="100%" height="100%">
<s:HGroup width="100%" height="94%">
<s:Label text="hi"/>
</s:HGroup>
<s:Button id="btn" y="0" width="100%" height="35" label="Open" mouseDown="btn_mouseDownHandler(event)" mouseUp="btn_mouseUpHandler(event)"/>
</s:VGroup>
</s:SkinnableContainer>
</s:View>
Do you know if there is any other way I can do this? Do you know where is the problem?
Thanks in advance
p.s. sorry for my english
AdChoices