How to keep layout purely in MXML and style purely in Skin in Flex?

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?

That skin seems OK to me: it's only visual components and layout, but no behavior. But the questions now becomes: where is the behavior of this component? For instance, I can't see a click handler for the 'closeButton'. Anyway, it should be in the host component since that is behavior. — RIAstar
The click handlers are handled elsewhere, as appropriate. The problem I'm having as that this lack of separation between content description and content styling. It will result in a huge amount of code duplication over the course of the project. — Dwight
I suppose you refer to some Mediator pattern when you say 'click handlers are handled elsewhere' (perhaps using some kind of framework)? I tend to look at the host component as the Mediator and the skin class as the View, exactly to avoid the kind of redundancy you are afraid of. It's just a shift of thought: don't look at the host component as the view anymore. IMO Flex is already an MVC framework and there's no need for any additional framework on top of it. — RIAstar
In this specific example, I am creating a custom popup. My architecture is such: PopupManager creates, hides, shows, and destroys popups through instances of the PopupController, which knows how to associate the PopupModel data with the PopupView (MXML) UI elements. My problem is unrelated to any of this, I've already solved those problems. Rather, I want to separate the UI declarations from the styling of said declarations. I want the benefits of a skin's swappability without including ALL of my container layout information in the skin. — Dwight
I'm not exactly sure what you mean, but there's 2 approaches I can think of. 1/ Do the main layout in the skin and expose whatever you want to be able to change through CSS styling. (What you expose will either be rather limited or introduce quite some complexity; I'd take this approach only for minor adjustments) 2/ Create one class+skin that takes care of the layout and have child components+skins that do more detailed layout or graphic representation. Are any of these options going in the direction you'd like? — RIAstar

Dwight Dwight · Accepted Answer · 2011-11-23T19:06:34

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

How to keep layout purely in MXML and style purely in Skin in Flex?

1 Answers