customizing into a reusable component in flex
- by Fresher4Flex
need to make a reusable custom component from the existing code here. So that I can use this code to make this effect(view stack) to work in any direction. In the code it has user specified height and works from downside.
I need to make this component customizable, something like user is able do it in any direction.I need it urgently. I appreciate your help.
1)main Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:sh="windowShade.*">
<sh:Shade id="i1" height="15" headerHeight="14"
thisHeight="215"
alwaysOnTop="false"
y="{this.height - 14}"/>
</mx:WindowedApplication>
2)Custom Comp: Shade.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="300"
creationComplete="init()"
verticalScrollPolicy="off"
verticalGap="0"
>
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.core.Application;
import mx.controls.Alert;
import mx.effects.easing.*;
import mx.binding.utils.BindingUtils;
/**
* Need host to adjust this object to Top
*/
public var alwaysOnTop:Boolean = false;
/**
* User can custom the height of this component
*/
public var thisHeight:int = 0;
/**
* User can custom the header height of this component
*/
[Bindable] public var headerHeight:int = 14;
/**
* The bindable value of this height
*/
[Bindable] public var tHeight:int = 0;
/**
* The bindable value of parent height
*/
[Bindable] public var pHeight:int = 0;
/**
* Initialize method
*/
private function init():void
{
if (this.thisHeight > 0 ) this.height = this.thisHeight;
BindingUtils.bindProperty(this, "tHeight",this,"height" );
BindingUtils.bindProperty(this, "pHeight",this.parent,"height" );
}
/**
* Toggle button
*/
private function toggleBtn(e:MouseEvent):void
{
if (this.alwaysOnTop)
{
var container:Container = Application.application as Container;
container.setChildIndex(this.parent, container.numChildren - 1 );
}
if ( vs.selectedIndex == 0 )
panelOut.play();
else
panelIn.play();
}
]]>
</mx:Script>
<mx:Move
id="panelOut"
target="{this}"
yTo="{ pHeight - this.tHeight }"
effectEnd="vs.selectedIndex = 1"
duration="600"
easingFunction="Back.easeOut"/>
<mx:Move
id="panelIn"
target="{this}"
yTo="{ this.pHeight - headerHeight }"
effectEnd="vs.selectedIndex = 0"
duration="600"
easingFunction="Back.easeIn"/>
<mx:VBox horizontalAlign="center" width="100%">
<mx:ViewStack id="vs" width="100%">
<mx:VBox horizontalAlign="center" >
<mx:Label text="VBox 1"/>
<mx:Image source="@Embed('/windowShade/add.png')" click="toggleBtn(event)"/>
</mx:VBox>
<mx:VBox horizontalAlign="center">
<mx:Label text="2nd VBox"/>
<mx:Image source="@Embed('/windowShade/back.png')" click="toggleBtn(event)"/>
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
<mx:VBox id="drawer" height="100%" width="100%" backgroundColor="#000000">
</mx:VBox>
</mx:VBox>
