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
         
      {
             
      [SkinPart]
             
      public var title:Label;

             
      private var _text:String;

             
      public function BorderContainerWithTitle()
             
      {
                 
      super();
                  setStyle
      ("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
      = text;

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




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

             
      [Bindable]
             
      [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:Metadata>[HostComponent("dtg.components.BorderContainerWithTitle")]</fx:Metadata>

         
      <fx:Script fb:purpose="styling">
              <![CDATA[        
                  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;
                      }
                      else
                      {
                          background.visible = true;
                          background.left = background.top = background.right = background.bottom = 1;
                          bgFill.color = getStyle("backgroundColor");
                          bgFill.alpha = getStyle("backgroundAlpha");
                      }
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                  }
              ]]>       
         
      </fx:Script>

         
      <fx:Script>
              <![CDATA[

                  import mx.events.FlexEvent;        

                  [Bindable]
                  private var _bMargin:uint;
                  [Bindable]
                  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
                  {
                      updateLayout();
                  }
              ]]>
         
      </fx:Script>

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

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

         
      <!--- Defines the appearance of the SkinnableContainer class's background. -->
         
      <s:Rect id="background" left="1" right="1" top="1" bottom="1">
             
      <s:fill>
                 
      <!--- @private -->
                 
      <s:SolidColor id="bgFill"/>
             
      </s:fill>
         
      </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,
          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:Group> 

         
      <s:Label id="title"
                      
      left="{_bMargin*2}"
                      
      top="{-_bMargin}"
                      
      color="{hostComponent.textColor}"
                      
      />    

         
      <!--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}"/>


      </s:SparkSkin>