2 Replies Latest reply on Jan 28, 2010 6:01 PM by Benoitcn

    custom spark panel skin issue

    Benoitcn Level 1
      I copy and paste the spark.skins.spark.PanelSkin to create a custom Panel with a close button.There are two problem. I defined some style in the CusPanel.mxml which inherit the Panel. How can let the button in the skin class access these properties? The second problem is when I clicked the button cause a error alert. Is there any new component in Flex4 like TitleWindow in flex3 ?
      CusPanel.mxml
      <s:Panel ...>
      <fx:Metadata>
      [Style(name="gridentColor",type="Array",inherit="yes",arrayType="int")]
      [Style(name="close-button-over-background-color", type="uint", inherit="yes", format="Color")]
      [Style(name="close-button-down-background-color", type="uint", inherit="yes", format="Color")]
      [Style(name="close-button-down-background-solid-color", type="uint", inherit="yes", format="Color")]
      </fx:Metadata>
      </s:Panel>

      CusPanel.mxml
      <!-- copy from the PanelSkin.mxml -->
      <s:Group id="topGroup" mask="{topGroupMask}">
      ...
      ...  
      <s:Button skinClass="CloseButtonSkin" right="3" verticalCenter="0" width="15" height="15"/>
      </s:Group>
      CloseButtonSkin.mxml
      <s:Skin ... creationComplete="skin1_creationCompleteHandler(event)">
        ...
      protected function skin1_creationCompleteHandler(event:FlexEvent):void{
      var downsolidcolor:uint = hostComponent.getStyle('close-button-down-background-solid-color');
      var overcolor:uint = getStyle('close-button-over-background-color');
      var downcolor:uint = getStyle('close-button-down-background-color'
      );
      Alert.show(downsolidcolor.toString());  // always zero ~
      Alert.show(downcolor.toString()); // always zero ~
      Alert.show(overcolor.toString()); // always zero ~
      }
        ...
      </fx:Script>

      ....

      <s:Group horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
        <s:Rect height="15" id="rect2"  width="15" x="0" y="0" >
         <s:stroke>
          <s:SolidColorStroke includeIn="down" weight="1" color="{getStyle('close-button-down-background-solid-color')}" />
         </s:stroke>
         <s:fill.over>
          <s:SolidColor color="{getStyle('close-button-over-background-color')}"/>
         </s:fill.over>
         <s:fill.down>
          <s:SolidColor color="{getStyle('close-button-down-background-color')}"/>
         </s:fill.down>

        </s:Rect>
        <s:Path data="M 9.202 0.907 C 6.629 3.48 4.056 6.055 1.482 8.628 C 0.623 9.486 -0.458 11.063 0.212 12.338 C 0.86 13.569 2.577 12.782 3.288 12.071 C 5.862 9.498 8.435 6.924 11.009 4.35 C 11.867 3.492 12.948 1.915 12.279 0.641 C 11.631 -0.591 9.913 0.196 9.202 0.907 L 9.202 0.907 Z"  winding="nonZero" x="1" y="1" id="path1">
         <s:fill>
          <s:SolidColor color="0x535454"/>
         </s:fill>
        </s:Path>
        <s:Path data="M 11.288 8.907 C 8.621 6.24 5.954 3.574 3.288 0.907 C 2.577 0.196 0.86 -0.591 0.212 0.641 C -0.458 1.915 0.623 3.492 1.482 4.35 C 4.149 7.017 6.816 9.683 9.482 12.35 C 10.193 13.061 11.91 13.848 12.558 12.617 C 13.228 11.343 12.147 9.766 11.288 8.907 L 11.288 8.907 Z"  winding="nonZero" x="1" y="1" id="path2">
         <s:fill>
          <s:SolidColor color="0x535454"/>
         </s:fill>
        </s:Path>
      </s:Group>
      </s:Skin>
      ReferenceError: Error #1069: Property null not found on spark.primitives.Rect and there is no default value.
      at mx.states::AddItems/addItemsToArray()[E:\dev\gumbo_beta2\frameworks\projects\framework\sr c\mx\states\AddItems.as:697]
      at mx.states::AddItems/apply()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\mx\state s\AddItems.as:535]
      at mx.core::UIComponent/applyState()[E:\dev\gumbo_beta2
      \frameworks\projects\framework\src\mx\core\UIComponent.as:9558]
      at mx.core::UIComponent/commitCurrentState()[E:\dev\gumbo_beta2\frameworks\projects\framewor k\src\mx\core\UIComponent.as:9327]
      at mx.core::UIComponent/setCurrentState()[E:\dev\gumbo_beta2\frameworks\projects\framework\s rc\mx\core\UIComponent.as:9220]
      at mx.core::UIComponent/set currentState()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\mx\core\UIComponent.a s:5740]
      at spark.components.supportClasses::SkinnableComponent/commitProperties()[E:\dev\gumbo_beta2 \frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:374]
      at spark.components.supportClasses::ButtonBase/commitProperties()[E:\dev\gumbo_beta2\framewo rks\projects\spark\src\spark\components\supportClasses\ButtonBase.as:685]
      at mx.core::UIComponent/validateProperties()[E:\dev\gumbo_beta2\frameworks\projects\framewor k\src\mx\core\UIComponent.as:7387]
      at mx.managers::LayoutManager/validateProperties()[E:\dev\gumbo_beta2\frameworks\projects\fr amework\src\mx\managers\LayoutManager.as:572]
      at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\gumbo_beta2\frameworks\projects \framework\src\mx\managers\LayoutManager.as:730]
      at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\gumbo_beta2\frameworks\ projects\framework\src\mx\managers\LayoutManager.as:1069]