Flex 4 重用对话框布局答案

【问题标题】：Flex 4 reuse dialog box layoutFlex 4 重用对话框布局
【发布时间】：2011-09-15 21:05:09
【问题描述】：

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

如您所见，必须在整个地方复制该布局真的很臭！

【问题讨论】：

非常有趣的问题！您需要某种模板组件，其中有两个区域充当某种占位符 - 内容占位符和按钮占位符。似乎没有皮肤或 CSS 的直接解决方案。嗯……让我想想！
至少有办法让我从 CSS 中获取边距“8”吗？因此，我至少可以在一处更改“填充”。
有！在下面检查我的答案！

标签： user-interface flex4 mxml

【解决方案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 with the working sample！

【讨论】：

这将是完美的——事实上，我开始使用 VGroup 是因为它非常适合，但在调整弹出对话框的大小时遇到了问题！另一个问题在这里......也许有一个更好的解决方案可以让我重新使用 VGRoup：stackoverflow.com/questions/7436731/…
@HDave 我已经为新问题添加了答案。让我知道这是否有效！
这行得通，但是这里的解决方案……目前对我不起作用，尽管我不知道为什么。 CSS 设置被忽略。我修复了不正确的填充名称，但它仍然不起作用。
使用高级 CSS 选择器需要反复试验，直到您指定了正确的选择器。当您编写选择器时，您使用的是基类还是特定的子类？ layoutContainer 是在皮肤内部还是只使用一个整体 MXML？
我已经验证了您的选择器可以通过更改颜色来工作，但是填充的值被忽略了。查看 VGroup 的参考手册，我没有看到样式中列出的填充。在这里查看：help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/…

【解决方案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 是每个放置子元素的皮肤的静态部分。

【讨论】：