Как сохранить макет исключительно в MXML и стиль исключительно в Skin в Flex? - PullRequest
Новая
       27

Как сохранить макет исключительно в MXML и стиль исключительно в Skin в Flex?

0 голосов
/ 15 ноября 2011

Я пытаюсь реализовать некоторые компоненты пользовательского интерфейса в стиле MVC во Flex 4. Я хочу дополнительно отделить визуальную настройку (и последующую модификацию времени выполнения) каждого элемента.Прежде всего, я хочу сохранить общий макет данных, например, в файле MXML, в котором будет использоваться скин: 

<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>

А в файле скина я хочу иметь возможность ссылаться на идентификаторы иустановить для них свойства (такие как ширина и высота в группе «контейнер») И иметь возможность включать в них графические элементы (например, закрашенный прямоугольник внутри группы «контейнер»).Я хочу сделать это декларативно, а не программно, иначе зачем вообще использовать MXML?Это способ разделения HTML / CSS: HTML содержит то, что эти данные относительно других данных, а CSS содержит все свойства и визуальные стили.

Как и сейчас, мой скин выглядит так: 

<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>

И фактический компонент, который использует этот скин, является не чем иным, как декларацией SkinPart: 

<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>

Как вы можете видеть, скин содержит все о компоненте, нарушая мой смыслразделения стиля и содержания.Элемент using не имеет ничего, кроме интерфейсов для Skin для программных изменений.Мое текущее решение не имеет никакого преимущества перед тем, как вообще не использовать скины, за исключением немного более легкого процесса переключения скинов.

Есть ли способ сделать то, что я предложил в Flex 4?

1 Ответ

0 голосов
/ 23 ноября 2011

Ответ в том, что Flex не работает таким образом. Внешний вид и визуальный стиль кажутся неразрывно связанными. Закрыв этот вопрос.

...