0 Replies Latest reply on Oct 26, 2010 7:52 AM by flairjax

    Why is my skinState not being set?

    flairjax Level 1

      The issue is my maximizeButton never shows up, it appears when the component state gets set to normalMin the skins state is stuck on normalMax or normal.  To run the code you may need to use the default spark button skin.

       

      TIA, J

       

       

      CollapsiblePanel ***********************************************************************

      ****************************************************************************************** **

      package com.sdsdsd.vc.panels
      {
          import flash.events.Event;
          import flash.events.MouseEvent;
         
          import spark.components.Button;
          import spark.components.Panel;
         
          [Event("PANEL_MINIMIZED")]
          [Event("PANEL_MAXIMIZED")]
          [SkinState("normal")]
          [SkinState("normalMin")]
          [SkinState("normalMax")]
          [SkinState("disabled")]
          [SkinState("disabledMin")]
          [SkinState("disabledMax")]
          [SkinState("normalWithControlBar")]
          [SkinState("normalMinWithControlBar")]
          [SkinState("normalMaxWithControlBar")]
          [SkinState("disabledWithControlBar")]
          [SkinState("disabledMinWithControlBar")]
          [SkinState("disabledMaxWithControlBar")]
          public class VCCollapsiblePanel extends Panel
          {
             
              private var _isMinimized:Boolean = false;
             
              public const PANEL_MINIMIZED:String = "PANEL_MINIMIZED";
              public const PANEL_MAXIMIZED:String = "PANEL_MAXIMIZED";
             
             
             
              [SkinPart(required="true")]
              public var minButton:Button;
             
              [SkinPart(required="true")]
              public var maxButton:Button;
             
              public var header_height:int = 28;
             
              public function VCCollapsiblePanel()
              {
                  super();
                 
                  this.mouseChildren = true;
                 
              }
             
              /**
               *  @private
               * 
               *  @langversion 3.0
               *  @playerversion Flash 10
               *  @playerversion AIR 1.5
               *  @productversion Flex 4
               */
              override protected function getCurrentSkinState():String
              {
                  var state:String = enabled ? "normal" : "disabled";
                 
                  var tempSuperState:String = this.skin.currentState;
                  switch(tempSuperState) {
                     
                      case "normal":
                          if( _isMinimized ){
                              state = "normalMin";
                          }else{
                              state = "normalMax";
                          }
                          break;
                     
                      case "normalMax":
                          if( _isMinimized ){
                              state = "normalMin";
                          }else{
                              state = "normalMax";
                          }
                          break;
                     
                      case "normalMin":
                          if( _isMinimized ){
                              state = "normalMin";
                          }else{
                              state = "normalMax";
                          }
                          break;
                     
                      case "disabled":
                          if( _isMinimized ){
                              state = "disabledMin";
                          }else{
                              state = "disabledMax";
                          }
                          break;
                     
                      case "normalWithControlBar":
                          if( _isMinimized ){
                              state = "normalMinWithControlBar";
                          }else{
                              state = "normalMaxWithControlBar";
                          }
                          break;
                     
                      case "disabledWithControlBar":
                          if( _isMinimized ){
                              state = "disabledMinWithControlBar";
                          }else{
                              state = "disabledMaxWithControlBar";
                          }
                          break;
                     
                      default:
                          if(this.skin.currentState == null){
                              state = super.getCurrentSkinState();
                          }else{
                              state = this.skin.currentState;
                          }
                         
                  }
                  return state;
              }
             
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
                 
                 
              }
             
             
              override protected function partAdded(partName:String, instance:Object):void
              {
                  super.partAdded(partName, instance);
                 
                  if( instance == minButton ){
                      minButton.addEventListener(MouseEvent.CLICK, minButton_clickHandler);
                  }
                  if( instance == maxButton ){
                      maxButton.addEventListener(MouseEvent.CLICK, maxButton_clickHandler);
                  }
              }
             
              override protected function partRemoved(partName:String, instance:Object):void
              {
                  super.partRemoved(partName, instance);
                 
                  if( instance == minButton ){
                      minButton.removeEventListener(MouseEvent.CLICK, minButton_clickHandler);
                  }
                  if( instance == maxButton ){
                      maxButton.removeEventListener(MouseEvent.CLICK, maxButton_clickHandler);
                  }
              }
             
              public function minButton_clickHandler( event:MouseEvent ) : void
              {
                  this.dispatchEvent( new Event( PANEL_MINIMIZED, true, false ) );
                  _isMinimized = true;
                  invalidateSkinState();
              }
              public function maxButton_clickHandler( event:MouseEvent ) : void

       

       


              {
                  this.dispatchEvent( new Event( PANEL_MAXIMIZED, true, false ) );
                  _isMinimized = false;
                  invalidateSkinState();
              }
             
             
          }
      }

       

      ======================================================================================

      SKIN

      ======================================================================================

      <?xml version="1.0" encoding="utf-8"?>
      <!--- The default skin class for a VCCollapsiblePanel container.

       

      @see spark.components.Panel

       

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
      -->
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
                   minWidth="131" minHeight="127"
                   alpha.disabled="0.5" alpha.disabledWithControlBar="0.5"
                   alpha.disabledMaxWithControlBar="0.5" alpha.disabledMinWithControlBar="0.5">
         
          <fx:Metadata>
              <![CDATA[
              /**
              * @copy spark.skins.spark.ApplicationSkin#hostComponent
              */
              [HostComponent("com.sdsdsd.vc.panels.VCCollapsiblePanel")]
              ]]>
          </fx:Metadata>
          <fx:Script>
              <![CDATA[
                  import com.sdsdsd.vc.panels.skins.buttons.CollapsibleButton;
                  // how high to go when minimized
                  [Bindable] public var header_height:int = 25;
                  // height to return to when restoring
                  private var originalHeight:int;
                  private var originalWidth:int;
                 
                  // function to minimize
                  private function minimizePanel(event:MouseEvent):void {
                     
                      switch(this.currentState) {
                         
                          case "normal":
                              originalHeight = hostComponent.height;
                              originalWidth = hostComponent.width;
                              hostComponent.height = header_height;
                             
                              break;
                         
                          case "normalWithControlBar":
                              originalHeight = hostComponent.height;
                              originalWidth = hostComponent.width;
                              hostComponent.height = header_height;
                         
                              break;
                         
                          case "normalMax":
                              originalHeight = hostComponent.height;
                              originalWidth = hostComponent.width;
                              hostComponent.height = header_height;
                         
                              break;
                         
                          case "normalMaxWithControlBar":
                              originalHeight = hostComponent.height;
                              originalWidth = hostComponent.width;
                              hostComponent.height = header_height;
                             
                              break;
                         
                          default:
                              // DO NOTHING
                      }
                  }
                 
                  // function to maximize
                  private function maximizePanel(event:MouseEvent):void {
                     
                      switch(this.currentState) {
                          case "normal":
                              hostComponent.height = originalHeight;
                              //hostComponent.width = originalWidth;
                         
                              break;
                         
                          case "normalWithControlBar":
                              hostComponent.height = originalHeight;
                              //hostComponent.width = originalWidth;
                             
                              break;
                         
                          case "normalMin":
                              hostComponent.height = originalHeight;
                              //hostComponent.width = originalWidth;
                         
                              break;
                         
                          case "normalMinWithControlBar":
                              hostComponent.height = originalHeight;
                              hostComponent.width = originalWidth;
                             
                              break;
                         
                          default:
                              // DO NOTHING
                      }
                  }
              ]]>
          </fx:Script>
          <fx:Script fb:purpose="styling">
             
              /* Define the skin elements that should not be colorized.
              For panel, border and title background are skinned, but the content area and title text are not. */
              static private const exclusions:Array = ["background", "titleDisplay", "minMaxButton", "contentGroup", "controlBarGroup"];
             
              /**
               * @private
               */ 
              override public function get colorizeExclusions():Array {return exclusions;}
             
              /**
               * @private
               */
              override protected function initializationComplete():void
              {
                  useChromeColor = true;
                  super.initializationComplete();
              }
             
              /**
               * @private
               */
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  if (getStyle("borderVisible") == true)
                  {
                      border.visible = true;
                      background.left = background.top = background.right = background.bottom = 1;
                      contents.left = contents.top = contents.right = contents.bottom = 1;
                  }
                  else
                  {
                      border.visible = false;
                      background.left = background.top = background.right = background.bottom = 0;
                      contents.left = contents.top = contents.right = contents.bottom = 0;
                  }
                 
                  dropShadow.visible = getStyle("dropShadowVisible");
                 
                  var cr:Number = getStyle("cornerRadius");
                  var withControls:Boolean =
                      (currentState == "disabledWithControlBar" || currentState == "disabledMinWithControlBar" ||
                          currentState == "disabledMaxWithControlBar" || currentState == "normalWithControlBar" ||
                          currentState == "normalMinWithControlBar" || currentState == "normalMaxWithControlBar" );
                 
                  if (cornerRadius != cr)
                  {
                      cornerRadius = cr;
                     
                      dropShadow.tlRadius = cornerRadius;
                      dropShadow.trRadius = cornerRadius;
                      dropShadow.blRadius = withControls ? cornerRadius : 0;
                      dropShadow.brRadius = withControls ? cornerRadius : 0;
                     
                      setPartCornerRadii(topMaskRect, withControls);
                      setPartCornerRadii(border, withControls);
                      setPartCornerRadii(background, withControls);               
                  }
                 
                  if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
                 
                  borderStroke.color = getStyle("borderColor");
                  borderStroke.alpha = getStyle("borderAlpha");
                  backgroundFill.color = getStyle("backgroundColor");
                  backgroundFill.alpha = getStyle("backgroundAlpha");
                 
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
              }
             
              /**
               * @private
               */ 
              private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
              {           
                  target.topLeftRadiusX = cornerRadius;
                  target.topRightRadiusX = cornerRadius;
                  target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                  target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
              }
             
              private var cornerRadius:Number;
          </fx:Script>
         
          <s:states>
              <s:State name="normal" stateGroups="is_Maxxed" />
              <s:State name="normalMin" stateGroups="is_Minned" />
              <s:State name="normalMax" stateGroups="is_Maxxed" />
              <s:State name="disabled" />
              <s:State name="disabledMin" stateGroups="is_Minned" />
              <s:State name="disabledMax" stateGroups="is_Maxxed" />
              <s:State name="normalWithControlBar" stateGroups="withControls" />
              <s:State name="normalMinWithControlBar" stateGroups="withControls, is_Minned" />
              <s:State name="normalMaxWithControlBar" stateGroups="withControls, is_Maxxed" />
              <s:State name="disabledWithControlBar" stateGroups="withControls" />
              <s:State name="disabledMinWithControlBar" stateGroups="withControls, is_Minned" />
              <s:State name="disabledMaxWithControlBar" stateGroups="withControls, is_Maxxed" />
          </s:states>
         
          <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
          <!--- @private -->
          <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0" distance="11"
                                   angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
         
          <!-- drop shadow can't be hittable so all other graphics go in this group -->
          <s:Group left="0" right="0" top="0" bottom="0">
             
              <!-- top group mask -->
              <!--- @private -->
              <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
                  <!--- @private -->
                  <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                      <s:fill>
                          <s:SolidColor alpha="0"/>
                      </s:fill>
                  </s:Rect>
              </s:Group>
             
              <!-- bottom group mask -->
              <!--- @private -->
              <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
                       includeIn="normalWithControlBar,  normalMaxWithControlBar,
                       normalMinWithControlBar, disabledWithControlBar,
                       disabledMaxWithControlBar, disabledMinWithControlBar">
                  <!--- @private -->
                  <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                      <s:fill>
                          <s:SolidColor alpha="0"/>
                      </s:fill>
                  </s:Rect>
              </s:Group>
             
              <!-- layer 1: border -->
              <!--- @private -->
              <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
                  <s:stroke>
                      <!--- @private -->
                      <s:SolidColorStroke id="borderStroke" weight="1" />
                  </s:stroke>
              </s:Rect>
             
              <!-- 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>
                      <!--- @private
                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                      <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
                  </s:fill>
              </s:Rect>
             
              <!-- layer 3: contents -->
              <!--- Contains the vertical stack of titlebar content and controlbar. -->
              <s:Group left="1" right="1" top="1" bottom="1" id="contents">
                  <s:layout>
                      <s:VerticalLayout gap="0" horizontalAlign="justify" />
                  </s:layout>
                 
                  <!--- @private -->
                  <s:Group id="topGroup" mask="{topGroupMask}" height="{header_height}">
                     
                      <!-- layer 0: title bar fill -->
                      <!--- @private -->
                      <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                          <s:fill>
                              <s:LinearGradient rotation="90">
                                  <s:GradientEntry color="0x666666" />
                                  <s:GradientEntry color="0x666666" />
                              </s:LinearGradient>
                          </s:fill>
                      </s:Rect>
                     
                      <!-- layer 1: title bar highlight -->
                      <!--- @private -->
                      <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                          <s:stroke>
                              <s:LinearGradientStroke rotation="90" weight="1">
                                  <s:GradientEntry color="0x666666" />
                                  <s:GradientEntry color="0x666666" />
                              </s:LinearGradientStroke>
                          </s:stroke>
                      </s:Rect>
                     
                      <!-- layer 2: title bar divider -->
                      <!--- @private -->
                      <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                          <s:fill>
                              <s:SolidColor color="0xC0C0C0" />
                          </s:fill>
                      </s:Rect>
                     
                      <!-- layer 3: text -->
                      <!--- @copy spark.components.Panel#titleDisplay -->
                      <s:Label id="titleDisplay" maxDisplayedLines="1"
                               left="9" right="3" top="0" bottom="0" minHeight="25" color="0xFFFFFF"
                               verticalAlign="middle" textAlign="start" fontWeight="bold">
                      </s:Label>
                      <s:Button id="minButton" label="-" includeIn="is_Maxxed, normal, disabled"
                                left="30" top="5"
                                minHeight="14" maxHeight="14" maxWidth="14" minWidth="14"
                                skinClass="com.sdsdsd.vc.panels.skins.buttons.CollapsibleButton"
                                click="minimizePanel(event)">
                      </s:Button>
                      <s:Button id="maxButton" label="+" includeIn="normalMin, is_Minned"
                                left="50" top="5" 
                                minHeight="14" maxHeight="14" maxWidth="14" minWidth="14"
                                skinClass="com.sdsdsd.vc.panels.skins.buttons.CollapsibleButton"
                                click="maximizePanel(event)">
                      </s:Button>
                  </s:Group>
                 
                  <!--
                  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,
                  more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
                  -->
                  <!--- @copy spark.components.SkinnableContainer#contentGroup -->
                  <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" excludeFrom="is_Minned">
                  </s:Group>
                 
                  <!--- @private -->
                  <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                           includeIn="normalWithControlBar,  normalMaxWithControlBar,
                           normalMinWithControlBar, disabledWithControlBar,
                           disabledMaxWithControlBar, disabledMinWithControlBar" >
                     
                      <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
                         
                          <!-- layer 0: control bar divider line -->
                          <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                              <s:fill>
                                  <s:SolidColor color="0x000000" />
                              </s:fill>
                          </s:Rect>
                         
                          <!-- layer 1: control bar highlight -->
                          <s:Rect left="0" right="0" top="1" bottom="0">
                              <s:stroke>
                                  <s:LinearGradientStroke rotation="90" weight="1">
                                      <s:GradientEntry color="0xE5E5E5" />
                                      <s:GradientEntry color="0xD8D8D8" />
                                  </s:LinearGradientStroke>
                              </s:stroke>
                          </s:Rect>
                         
                          <!-- layer 2: control bar fill -->
                          <s:Rect left="1" right="1" top="2" bottom="1">
                              <s:fill>
                                  <s:LinearGradient rotation="90">
                                      <s:GradientEntry color="0xDADADA" />
                                      <s:GradientEntry color="0xC5C5C5" />
                                  </s:LinearGradient>
                              </s:fill>
                          </s:Rect>
                      </s:Group>
                      <!-- layer 3: control bar -->
                      <!--- @copy spark.components.Panel#controlBarGroup -->
                      <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                          <s:layout>
                              <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                          </s:layout>
                      </s:Group>
                  </s:Group>
              </s:Group>
          </s:Group>
      </s:SparkSkin>