Question

I am trying to implement some MVC-style UI components in Flex 4. I want to further separate the visual setup (and later runtime modification) of each element. Primarily, I want to keep the overall layout of the data like such in the MXML file that will USE the skin:

<s:Group id="container">
    <s:VGroup>
        <s:HGroup id="titleGroup">
            <s:Label id="titleText" />
            <s:Button id="closeButton" />
        </s:HGroup>
        <s:HGroup id="contentGroup">
            <s:VGroup id="interactionGroup">
                <s:VGroup id="messageGroup" />
                <s:HGroup id="actionGroup" />
            </s:VGroup>
        </s:HGroup>
    </s:VGroup>
</s:Group>

And in the Skin file, I want to be able to refer to the ids and set properties on them (such as width and height on the “container” group) AND be able to include graphical elements within them (such as a filled rect inside the “container” group). I want to do this declaratively, NOT programmatically, else why use MXML in the first place? This is the way that HTML/CSS is divided up: HTML contains what the data IS relative to other data, and the CSS contains all the properties and visual styles.

As it is now, my skin looks like this:

<s:Group id="container" verticalCenter="0" horizontalCenter="0">
    <s:Rect id="background" width="100%" height="100%" radiusX="10" radiusY="10">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="5" angle="90" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="#ffffff" />
        </s:fill>
    </s:Rect>

    <s:VGroup width="100%" height="100%" gap="3" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        <s:HGroup id="titleGroup" width="100%" verticalAlign="middle">
            <s:Label id="titleText" width="100%" />
            <s:Button id="closeButton" />
        </s:HGroup>
        <s:HGroup id="contentGroup" width="100%">
            <s:VGroup id="interactionGroup" width="100%">
                <s:VGroup id="messageGroup" width="100%" />
                <s:HGroup id="actionGroup" width="100%" />
            </s:VGroup>
        </s:HGroup>
    </s:VGroup>
</s:Group>

And the actual component that uses this skin is nothing more than SkinPart declarations:

<fx:Script>
    <![CDATA[
        import spark.components.Label;
        import spark.components.Button;
        import spark.components.Group;

        [SkinPart(required="true")]
        public var titleText:Label;

        [SkinPart(required="true")]
        public var closeButton:Button

        [SkinPart(required="true")]
        public var messageGroup:Group;

        [SkinPart(required="true")]
        public var actionGroup:Group;
    ]]>
</fx:Script>

As you can see, the Skin contains everything about the component, violating my sense of separating style and content. The using element has nothing in it except for interfaces to the Skin for programmatic changes. My current solution has no advantage over not using skins at all, except for the slightly easier process of switching out skins.

Is there a way to do what I have proposed in Flex 4?

Answer 1

The answer is that Flex does not work this way. Layout and visual style appear to be inseparably linked. Closing out this question.