Макет диалогового окна повторного использования Flex 4 - PullRequest
Новая
       10

Макет диалогового окна повторного использования Flex 4

1 голос
/ 16 сентября 2011

Я только что создал первый из десятков всплывающих диалогов в моем приложении Flex и задаюсь вопросом, как лучше всего использовать макет, чтобы мне не приходилось дублировать его в каждой форме.Я попытался создать собственный компонент MXML, но когда я унаследовал его, я не смог добавить дочерние элементы управления.Я не уверен, может ли CSS справиться с этим ... или как.Является ли ответ кожей?

Вот содержимое диалогового окна, которое является просто изменяемым размером TitleWindow: 

<components:layout>
    <s:BasicLayout />
</components:layout>

<!-- Content -->
<s:SkinnableContainer id="content" top="8" left="8" bottom="{buttonGroup.height + 16}" right="8" >
          ....content here....
</s:SkinnableContainer>

<!-- Buttons -->
<s:HGroup id="buttonGroup" left="8" bottom="8" right="8"> 
    ... buttons here...
</s:HGroup>

Как вы можете видеть, было бы действительно вонючим, чтобы дублировать этот макет везде!

Ответы [ 2 ]

3 голосов
/ 16 сентября 2011

Могу ли я предложить вам немного другую реализацию: 

<s:VGroup id="layoutContainer" styleName="layoutContainer">
    <!-- Content -->
    <s:SkinnableContainer id="content">
        ....content here....
    </s:SkinnableContainer>

    <!-- Buttons -->
    <s:HGroup id="buttonGroup"> 
        ... buttons here...
    </s:HGroup>
</s:VGroup>

А затем в вашем CSS вы должны использовать некоторые из расширенных селекторов, и у вас будет центральное место для всех отступов: 

form|SomeForm s:VGroup.layoutContainer,
form|SomeOtherForm s:VGroup.layoutContainer {
    top: 8;
    left: 8;
    right 8;
    bottom: 8;    
}

Проверьте ZIP с рабочим образцом Я загрузил на свой домен!

0 голосов
/ 16 сентября 2011

РЕДАКТИРОВАТЬ: если вам нужно настроить часть «контент» и «кнопки» во время выполнения и при этом иметь возможность использовать свой пользовательский компонент в MXML ... ну, я сомневаюсь, что это возможно.Если вы отказываетесь от MXML, вам необходимо создать некоторый конфигурационный объект для вашего компонента и передать его конструктору, а также вам необходимо переопределить метод createChildren в вашем пользовательском компоненте.Если часть «кнопки» статична - читайте текст ниже.

Вы можете попытаться создать пользовательский SkinnableComponent и класс скина для этого компонента, в который вы поместите макет.
1) Расширение из SkinnableComponent, например, 

public class CustomSkinnable extend SkinnableComponent
{
    [SkinPart[required="true"])
    public var submitButton:Button;
    //the same with cancel button for example
    //override partAdd function to add event listeners to your buttons if you wish
    //and other stuff folowing the manual
}

2) Создание обложки для вашего компонента (Flash Builder очень полезен) [например] 

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        width="{backgroundRect.width}" height="{backgroundRect.height}">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("components.CustomSkinnable")]
    </fx:Metadata>

    <!-- SkinParts
    name=submitButton, type=spark.components.Button, required=true
    ...
    -->

    <s:Rect id="backgroundRect"
            x="0" y="0" width="100%" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="#000000"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#444444"/>
        </s:fill>        
    </s:Rect>          

    <s:Group>
        <!-- Content -->
        <s:SkinnableContainer id="contentGroup" top="8" left="8" bottom="{buttonGroup.height + 16}" right="8" >
          ....content here....
        </s:SkinnableContainer>

        <!-- Buttons -->
        <s:HGroup id="buttonGroup" left="8" bottom="8" right="8"> 
          <s:Button id="submitButton" label="Submit"/>
          ... additional buttons here...
        </s:HGroup> 
    </s:Group>    
</s:Skin>

Обратите внимание, что id = "contentGroup" вместо id = "content" не просто так, contentGroup является статической частьюкаждого скина, где размещены дочерние элементы.

...