2 Replies Latest reply on Oct 12, 2010 5:34 AM by David Goshadze

    How to get rid of a thin gray border of SkinnableContainer in design mode

    David Goshadze

      I'm learning skinning techniques for flex 4 and spark. For an example project I've created custom component derived from SkinnableContainer. It is simple container with surrounding frame and a title.

      Everything works just fine when I run test project with a component on it. But at design time my component's border is not visible - it is covered with a thin gray border.

      Disadvantages of this behavior is that developer using the component can not see some changes made at design time (e.g. border color).

      I've searched through SkinnableContainer's code, but I couldn't find if the thin gray border is drawn by this class.

      see illustration


      My component's code:


      package dtg.components 
      import dtg.skins.BorderContainerWithTitleSkin;
          import spark.components.SkinnableContainer;

      public class BorderContainerWithTitle extends SkinnableContainer
      public var title:Label;

      private var _text:String;

      public function BorderContainerWithTitle()
      ("skinClass", dtg.skins.BorderContainerWithTitleSkin);

      [Inspectable(category="Common",name="Group_Title",type="String",defaultValue="Data Group")]
      public function get groupTitle():String
      return _text;
      public function set groupTitle(text:String):void
      if (_text != text)
      = text;

      if (title != null)
      .text = _text;

      [Inspectable(category="Common", type="Color",format="Color")]
      public var lineColor:uint;

      [Inspectable(category="Common", type="Color",format="Color")]
      public var textColor:uint;

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

      if (partName == "title")
      (instance as Label).text = _text;

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


      and skin:



      <?xml version="1.0" encoding="utf-8"?>

      <!--- The default skin class for a Spark SkinnableContainer container. 

           @see spark.components.SkinnableContainer

            @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" alpha.disabled="0.5"
      creationComplete="skin1_creationCompleteHandler(event)" xmlns:local="*" xmlns:components="dtg.components.*"


      <fx:Script fb:purpose="styling">
                  import mx.states.OverrideBase;
                   *  @private

                  /* Define the skin elements that should not be colorized. */
                  static private const exclusions:Array = ["background", "title"];       
                   * @private
                  override public function get colorizeExclusions():Array {return exclusions;}           

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                      // Push backgroundColor and backgroundAlpha directly.
                      // Handle undefined backgroundColor by hiding the background object.
                      if (isNaN(getStyle("backgroundColor")))
                          background.visible = false;
                          background.visible = true;
                          background.left = background.top = background.right = background.bottom = 1;
                          bgFill.color = getStyle("backgroundColor");
                          bgFill.alpha = getStyle("backgroundAlpha");
                      super.updateDisplayList(unscaledWidth, unscaledHeight);


                  import mx.events.FlexEvent;        

                  private var _bMargin:uint;
                  private var _titleWidth:uint;          

                  protected function skin1_creationCompleteHandler(event:FlexEvent):void
                      _titleWidth = title.width;
                      _bMargin = title.height/2;
                      title.addEventListener(Event.CHANGE, onTitleChange);

                  protected function updateLayout():void
                      var tlm:TextLineMetrics = title.measureText(title.text);
                      _titleWidth = tlm.width;
                      _bMargin = (tlm.ascent)/2;

                  protected function onTitleChange(e:Event):void

      <s:SolidColorStroke id="lineStroke" weight="1" color="{hostComponent.lineColor}" alpha="1.0"/>

      <s:State name="normal"/>
      <s:State name="disabled" />

      <!--- Defines the appearance of the SkinnableContainer class's background. -->
      <s:Rect id="background" left="1" right="1" top="1" bottom="1">
      <!--- @private -->
      <s:SolidColor id="bgFill"/>

          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" left="1" right="1" top="1" bottom="1" minWidth="0" minHeight="0">

      <s:Label id="title"

      <!--Top left line-->
      <s:Line xFrom="0" yFrom="0" xTo="{_bMargin}" yTo="0" stroke="{lineStroke}"/>
      <!--Top rigth line-->
      <s:Line xFrom="{_titleWidth + _bMargin*3}" yFrom="0" xTo="{width-1}" yTo="0" stroke="{lineStroke}"/>
      <!--Rigth line-->
      <s:Line xFrom="{width-1}" yFrom="0" xTo="{width-1}" yTo="{height-1}" stroke="{lineStroke}"/>
      <!--Bottom line-->
      <s:Line xFrom="{width-1}" yFrom="{height-1}" xTo="0" yTo="{height-1}" stroke="{lineStroke}"/>
      <!--Left line-->
      <s:Line xFrom="0" yFrom="{height-1}" xTo="0" yTo="0" stroke="{lineStroke}"/>