Question

I have a custom component, GlassSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         xmlns:local="*" minHeight="20" minWidth="20">
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:alpha>0.3</s:alpha>
        <s:radiusX>3</s:radiusX>
        <s:fill>
            <s:SolidColor>#000000</s:SolidColor>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup" width="100%" height="100%" left="5" right="5" top="5" bottom="5"></s:Group>
</s:Group>

Inside the main mxmm I use the custom component like:

<local:GlassSkin width="600" height="400" horizontalCenter="0" verticalCenter="0">
Something...
</local:GlassSkin>

It works, the contentGroup receives every element I add inside. The only problem is that none of the custom graphical elements specified in the custom element are added. No shadow, no solidcolor, no nothing. Why?

Answer 1

I found out.
Using a custom component and passing data to it, removes every formatting that is in the mxml itself. I dont know why.

Instead of this, I created a simple SkinnableContainer, and used my custom component as Skin. (renamed the Group to SparkSkin)

With this I do not have a custom component, but I have a Skin, which I can use anywhere.

• Plus the resulting swf somehow got smaller.