I'm learning skinning techniques for flex 4 and spark. For an example 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 components border is not visible, so developer using the component can not see changes made at design time (e.g border color).
My notion is that SkinnableContainer draws a thin gray border in design mode that hides my component's border. Is there a way to override this behavior of SkinnableContainer?
My component's code:
package dtg.components
{
import dtg.skins.BorderContainerWithTitleSkin;
import mx.controls.Alert;
import mx.core.IContainer;
import mx.events.Request;
import spark.components.SkinnableContainer;
import spark.components.supportClasses.Skin;
import spark.components.supportClasses.SkinnableComponent;
[SkinStates("disabled", "normal")]
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
{
if (partName == "title")
{
(instance as Label).text = _text;
}
}
override protected function partRemoved(partName:String, instance:Object):void
{
}
}
}
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>
<components: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>