Flex 4重用对话框布局

我刚刚在我的Flex应用程序中创建了数十个弹出对话框中的第一个，并想知道什么是重用布局的最佳方式，因此我不必在每个表单中重复它。我试着制作一个自定义的MXML组件，但是当我继承它时，我无法添加子控件。我不确定CSS是否可以处理它......或者如何。答案是皮肤吗？Flex 4重用对话框布局

下面是对话的内容，这仅仅是一个可调整大小的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>

正如你可以看到，它真的很臭不得不重复该布局所有的地方！

来源

2011-09-15 HDave

非常有趣的问题！您需要某种具有两个区域的模板组件，这两个区域充当某种占位符 - 占位符为内容，占位符为按钮。似乎没有皮肤或CSS的直接解决方案。嗯......让我想想！ –

至少有一种方法可以让我从CSS获得边距“8”？因此，我至少可以在一个地方改变“填充”。 – HDave

有！在下面检查我的答案！ –

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

来源

2011-09-15 21:27:53

我可以建议你有点不同的实现：

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

来源

2011-09-16 09:18:29

这将是完美的 - 事实上，我开始使用VGroup，因为它非常合身，但是在调整弹出对话框的大小时，我最终遇到了一个问题！另一个问题是在这里......也许有一个更好的解决方案，可以让我回到使用VGRoup：http://stackoverflow.com/questions/7436731/flex-4-vertical-layout-problem-on -titlewindow – HDave

@HDave我已经为新问题添加了答案。让我知道如果这工作！ –

工作，但这里的解决方案...目前不适合我，虽然我不知道为什么。 CSS设置被忽略。我修复了不正确的填充名称，但它仍然无效。 – HDave

Flex 4重用对话框布局

回答

相关问题