6 Replies Latest reply on May 13, 2010 2:06 PM by TeotiGraphix

    Custom Spark Component + Skin Doesn't Display Properly in Flash Builder

    vmvmvmvmvm

      I'm creating a custom spark component that has a custom content area to be used in MXML much like a Panel's controlbar and content. I mimiced the Panel and PanelSkin implementation but it doesn't render properly in FlashBuilder, however it looks fine at run time. My custom group is called headerGroup. And I followed the controlBar implementation in Panel. My skin file should show the header at the top of the container. For debugging, I just renamed my headerGroup to contentGroup (defined in SkinnableContainer) and I can see this content at design time.

       

      What do I need to do extra to get my custom group to show up at design time? Below, I've pasted my componetn and its skin file.

       

       

       

      Console.as

       

      package

      {

      import flash.utils.describeType;

       

      import mx.core.mx_internal;

      import mx.utils.BitFlagUtil;

       

      import spark.components.Button;

      import spark.components.Group;

      import spark.components.SkinnableContainer;

      import spark.components.supportClasses.SkinnableComponent;

      import spark.layouts.supportClasses.LayoutBase;

       

      use namespace mx_internal;

       

      public class Console extends SkinnableContainer

      {

      protected const CONSOLE_HEADER:String = 'consoleHeader';

       

      protected static const HEADER_PROPERTY_FLAG:uint = 1 << 0;

      protected static const LAYOUT_PROPERTY_FLAG:uint = 1 << 1;

      protected static const VISIBLE_PROPERTY_FLAG:uint = 1 << 2;

       

      mx_internal static var createAccessibilityImplementation:Function;

       

      [SkinPart(required="false")]

      public var headerGroup:Group;

       

      mx_internal var headerGroupProperties:Object = { visible: true };

       

       

       

      [ArrayElementType("mx.core.IVisualElement")]

      public function get headerContent():Array

      {

      if (headerGroup)

      return headerGroup.getMXMLContent();

      else

      return headerGroupProperties.headerContent;

      }

       

       

      public function set headerContent(value:Array):void

      {

      if (headerGroup)

      {

      headerGroup.mxmlContent = value;

      headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,

      HEADER_PROPERTY_FLAG, value != null);

      }

      else

      headerGroupProperties.headerContent = value;

       

      invalidateSkinState();

      }


      public function get headerLayout():LayoutBase

      {

      return (headerGroup)

      ? headerGroup.layout

      : headerGroupProperties.layout;

      }

       

      public function set headerLayout(value:LayoutBase):void

      {

      if (headerGroup)

      {

      headerGroup.layout = value;

      headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,

      LAYOUT_PROPERTY_FLAG, true);

      }

      else

      headerGroupProperties.layout = value;

      }

       

      public function get headerVisible():Boolean

      {

      return (headerGroup)

      ? headerGroup.visible

      : headerGroupProperties.visible;

      }

       

      public function set headerVisible(value:Boolean):void

      {

      if (headerGroup)

      {

      headerGroup.visible = value;

      headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,

      VISIBLE_PROPERTY_FLAG, value);

      }

      else

      headerGroupProperties.visible = value;

       

      invalidateSkinState();

      if (skin)

      skin.invalidateSize();

      }

       


      /**

      *  @private

      */

      override protected function initializeAccessibility():void

      {

      if (VMConsole.createAccessibilityImplementation != null)

      VMConsole.createAccessibilityImplementation(this);

      }

       

       

      override protected function partAdded(partName:String, instance:Object):void

      {

      super.partAdded(partName, instance);

       

      if (instance == headerGroup)

      {

      // copy proxied values from headerGroupProperties (if set) to headerGroup

      var newHeaderGroupProperties:uint = 0;

       

      if (headerGroupProperties.headerContent !== undefined)

      {

      headerGroup.mxmlContent = headerGroupProperties.headerContent;

      newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties,

      HEADER_PROPERTY_FLAG, true);

      }

       

      if (headerGroupProperties.visible !== undefined)

      {

      headerGroup.visible = headerGroupProperties.visible;

      newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties,

      VISIBLE_PROPERTY_FLAG, true);

      }

       

      headerGroupProperties = newHeaderGroupProperties;

      }

      }


      override protected function partRemoved(partName:String, instance:Object):void

      {

      super.partRemoved(partName, instance);

      }


      override protected function getCurrentSkinState():String

      {

      var state:String = enabled ? "normal" : "disabled";

       

      if (headerGroup)

      {

      if (BitFlagUtil.isSet(headerGroupProperties as uint, HEADER_PROPERTY_FLAG) &&

      BitFlagUtil.isSet(headerGroupProperties as uint, VISIBLE_PROPERTY_FLAG))

      state += "WithHeader";

      }

      else

      {

      if (headerGroupProperties.headerContent &&

      headerGroupProperties.visible)

      state += "WithHeader";

      }

       

      return state;

      }

       

      }

      }

       

       

       

      ConsoleSkin.mxml

       

      <?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">

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

       

      <fx:Metadata>

      <![CDATA[

      /**

      * @copy spark.skins.spark.ApplicationSkin#hostComponent

      */

      [HostComponent("Console")]

      ]]>

      </fx:Metadata>

       

      <s:states>

      <s:State name="normal" />

      <s:State name="disabled" />

      <s:State name="normalWithHeader" />

      <s:State name="disabledWithHeader" />

      </s:states>

       

      <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

      <s:fill>

      <s:LinearGradient rotation="90">

      <s:GradientEntry color="0x000000"

      alpha="0.01" />

      <s:GradientEntry color="0x000000"

      alpha="0.07" />

      </s:LinearGradient>

      </s:fill>

      </s:Rect>

       

      <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">

      <s:fill>

      <s:LinearGradient rotation="90">

      <s:GradientEntry color="0xFFFFFF"

      alpha="0.85" />

      <s:GradientEntry color="0xD8D8D8"

      alpha="0.85" />

      </s:LinearGradient>

      </s:fill>

      </s:Rect>

       

      <s:Group id="headerGroup" width="100%" height="100%">

      <s:layout>

      <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />

      </s:layout>

      </s:Group>

       

       

      </s:SparkSkin>