0 Replies Latest reply on Mar 10, 2010 4:33 PM by fresher4flex

    Customizing the code for a reusable component(need urgently)

    fresher4flex

      I need to make a reusable custom component from the existing code  here. So that I can use this code to make this effect to work in any direction. In the code it has user specified height and works from downside.

        I need to make this component customizable, So it can be used to have the effect from top, bottom, left or right.

      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>

       

      back.pngadd.png