Flex 4 重用对话框布局

Question

我刚刚在 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> 

正如您所看到的，必须在整个地方复制该布局真的很糟糕！

Answer 1

我可以建议您采取一些不同的实现方式吗：

<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 我已上传到我的域！

Answer 2

编辑：如果您需要在运行时设置“内容”部分和“按钮”部分，并且仍然能够在 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 是一个静态每个皮肤中放置子元素的部分。