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 with the working sample！

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

Flex 4重用对话框布局

2 个答案: