2 Replies Latest reply on Sep 26, 2010 10:41 AM by shivshankar_81

    help needed on collapsible panel

    shivshankar_81

      hi all,


      i was trying to create simple collapsible panel in flex 4, but i am not able to create what i want to. please help me.
      what exactly i am looking for is at this link.
      the above example is written in flex 3 but i want to do it in flex 4.
      in my case while i minimize the panel the children inside the panel is not getting minimize.
      here is my code
      code for component
      ----------------------------------
      package views
      {
      import flash.events.MouseEvent;
      import mx.states.OverrideBase;
      import spark.components.Button;
      import spark.components.Group;
      import spark.components.Panel;
      [SkinState("collapsed")]
      public class CustomList extends Panel
      {
      public function CustomList()
      {
      super();
      }
      [SkinPart(required="false")]
      /**
      * skin defines the appearance of the button responsible for collapsing/uncollapsing of the Panel
      */
      public var collapseButton:Button;
      /*[SkinPart(required ="false")]
      public var contentGroup:Group;*/
      //---------------------------------------------------------------------------
      //
      //Properties
      //
      //---------------------------------------------------------------------------
      private var _collapsed:Boolean;
      /**
      *whether the panel is collapsed or uncollapsed
      *
      */
      private function get collapsed():Boolean
      {
      return _collapsed;
      }
      /**
      * change the behaviour of the panel collapsed/uncollapsed
      * @param value
      *
      */
      private function set collapsed(value:Boolean):void{
      _collapsed = value;
      invalidateSkinState();
      }
      /**
      *
      * @param partName
      * @param instance
      *
      */
      override protected function partAdded(partName:String, instance:Object):void
      {
      super.partAdded(partName,instance);
      if(instance==collapseButton)
      {
      Button(instance).addEventListener(MouseEvent.CLICK,collapseButtonClickHandler);
      }
      }
      /**
      *
      * @param partName
      * @param instance
      *
      */
      override protected function partRemoved(partName:String, instance:Object):void
      {
      super.partRemoved(partName,instance);
      if(instance==collapseButton)
      {
      Button(instance).removeEventListener(MouseEvent.CLICK,collapseButtonClickHandler);
      }
      }
      /**
      *
      * @return
      *
      */
      override protected function getCurrentSkinState():String
      {
      return collapsed ? "collapsed":super.getCurrentSkinState();
      }
      /**
      *
      *
      */
      private function collapseButtonClickHandler(event:MouseEvent):void
      {
      collapsed = !collapsed;
      }
      /*override protected function createChildren():void
      {
      super.createChildren();
      }*/
      }
      }
      Code for skin
      -----------------------------
      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      alpha.disabled="0.5" blendMode="normal"
      minWidth="150">
      <!-- host component -->
      <fx:Metadata>
      [HostComponent("spark.components.Panel")]
      </fx:Metadata>
      <fx:Script>
      /* Define the skin elements that should not be colorized.
      For panel, border and title backround are skinned, but the content area and title text are not. */
      static private const exclusions:Array = ["background", "titleDisplay", "contentGroup"];
      /**
      * @copy spark.skins.SparkSkin#colorizeExclusions
      */    
      override public function get colorizeExclusions():Array {return exclusions;}
      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
      static private const contentFill:Array = ["bgFill"];
      /**
      * @inheritDoc
      */
      override public function get contentItems():Array {return contentFill};
      </fx:Script>
      <fx:Declarations>
      <s:Power id="collapseEaser" easeInFraction="1" />
      <s:Power id="uncollapseEaser" easeInFraction="0" />
      </fx:Declarations>
      <!-- states -->
      <s:states>
      <s:State name="normal" />
      <s:State name="collapsed" />
      <s:State name="disabled" />
      </s:states>
      <s:transitions>
      <s:Transition fromState="normal" toState="collapsed">
      <s:Sequence>
      <!--<s:Fade target="{contentGroup}" duration="250" />-->
      <!--<s:Parallel targets="{[contentGroup]}" >-->
      <s:Resize target="{contentGroup}" duration ="250"  />
      <!--</s:Parallel>-->
      <!--<s:Fade target="{contentHeight}" duration="250" />-->
      </s:Sequence>
      </s:Transition>
      <s:Transition fromState="collapsed" toState="normal">
      <s:Sequence>
      <!--<s:Parallel targets="{[contentGroup]}" >-->
      <s:Resize target="{contentGroup}" duration ="250" />
      <!--</s:Parallel>-->
      <!--<s:Fade target="{contentGroup}" duration="250" />-->
      <!--<s:Fade target="{contentGroup}" duration="250" />-->
      </s:Sequence>
      </s:Transition>
      </s:transitions>
      <!-- drop shadow -->
      <!--<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
      angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>-->
      <!-- layer 2: background fill -->
      <!--- Defines the appearance of the PanelSkin class's background. -->
      <s:Rect id="background" left="1" top="1" right="1" bottom="1">
      <s:fill>
      <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
      <s:SolidColor color="0xFFFFFF" id="bgFill" />
      </s:fill>
      </s:Rect>
      <!-- title bar (not a skin part) -->
      <s:Group id="titleBarGroup" left="0" top="0" right="0" bottom="0"
      maxHeight="32" >
      <!-- layer 3: title bar fill -->
      <s:Rect left="1" right="1" top="1" height="30">
      <s:fill>
      <s:LinearGradient>
      <s:GradientEntry color="0xE2E2E2" />
      <s:GradientEntry color="0xD9D9D9" />
      </s:LinearGradient>
      </s:fill>
      </s:Rect>
      <!-- layer 4: title bar highlight -->
      <s:Rect left="1" right="1" top="1" height="30">
      <s:stroke>
      <s:LinearGradientStroke weight="1">
      <s:GradientEntry color="0xEAEAEA" />
      <s:GradientEntry color="0xD9D9D9" />
      </s:LinearGradientStroke>
      </s:stroke>
      </s:Rect>
      <s:Rect left="1" right="1" top="31" height="1">
      <s:fill>
      <s:SolidColor color="0xC0C0C0" />
      </s:fill>
      </s:Rect>
      <!-- layer 5: text -->
      <!--- Defines the appearance of the PanelSkin class's title bar. -->
      <!--<s:SimpleText id="titleDisplay" lineBreak="explicit" left="10" right="30" top="2" height="30"
        verticalAlign="middle" fontWeight="bold">
      </s:SimpleText>-->
      <!-- TODO: Custom skin for collapse button should be created with some fancy arrow or cross -->
      <s:Button id="collapseButton" width="16" height="16" top="7" right="7"
        label="-" label.collapsed="+" toolTip="Collapse" toolTip.collapsed="Open" />
      </s:Group>
      <!-- layer 1: border -->
      <s:Rect left="0" right="0" top="0" bottom="0">
      <s:stroke>
      <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
      </s:stroke>
      </s:Rect>
      <!--
      Note: setting the minimum size to 0 here so that changes to the host component's
      size will not be thwarted by this skin part's minimum size.   This is a compromise,
      -->
      <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"
      height="200" height.collapsed="0"  >
      </s:Group>
      <!-- SkinParts
      name=titleDisplay, type=spark.components.supportClasses.TextBase, required=false
      name=controlBarGroup, type=spark.components.Group, required=false
      name=contentGroup, type=spark.components.Group, required=false
      -->
      </s:SparkSkin>
      please help me.
      thanks,
      Shiv