如何在纯粹的MXML中保持布局，纯粹在Flex中的Skin中进行布局？

我想在Flex 4中实现一些MVC风格的UI组件。我想进一步分离每个元素的可视化设置（以及后来的运行时修改）。首先，我想保持在MXML文件中像这样的数据的整体布局将使用皮肤：如何在纯粹的MXML中保持布局，纯粹在Flex中的Skin中进行布局？

<s:Group id="container"> 
    <s:VGroup> 
     <s:HGroup id="titleGroup"> 
      <s:Label id="titleText" /> 
      <s:Button id="closeButton" /> 
     </s:HGroup> 
     <s:HGroup id="contentGroup"> 
      <s:VGroup id="interactionGroup"> 
       <s:VGroup id="messageGroup" /> 
       <s:HGroup id="actionGroup" /> 
      </s:VGroup> 
     </s:HGroup> 
    </s:VGroup> 
</s:Group>

和皮肤文件，我希望能够引用的ID和设置属性（例如“容器”组的宽度和高度），并且能够在其中包含图形元素（例如“容器”组内的填充矩形）。我希望以声明方式执行此操作，而不是以编程方式执行此操作，否则为什么首先使用MXML？这是HTML/CSS划分的方式：HTML包含相对于其他数据的数据，CSS包含所有属性和视觉样式。

因为它是现在，我的皮肤看起来是这样的：

<s:Group id="container" verticalCenter="0" horizontalCenter="0"> 
    <s:Rect id="background" width="100%" height="100%" radiusX="10" radiusY="10"> 
     <s:filters> 
      <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="5" angle="90" /> 
     </s:filters> 
     <s:fill> 
      <s:SolidColor color="#ffffff" /> 
     </s:fill> 
    </s:Rect> 

    <s:VGroup width="100%" height="100%" gap="3" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 
     <s:HGroup id="titleGroup" width="100%" verticalAlign="middle"> 
      <s:Label id="titleText" width="100%" /> 
      <s:Button id="closeButton" /> 
     </s:HGroup> 
     <s:HGroup id="contentGroup" width="100%"> 
      <s:VGroup id="interactionGroup" width="100%"> 
       <s:VGroup id="messageGroup" width="100%" /> 
       <s:HGroup id="actionGroup" width="100%" /> 
      </s:VGroup> 
     </s:HGroup> 
    </s:VGroup> 
</s:Group>

和使用该皮肤比SkinPart声明没有更多实际的组件：

<fx:Script> 
    <![CDATA[ 
     import spark.components.Label; 
     import spark.components.Button; 
     import spark.components.Group; 

     [SkinPart(required="true")] 
     public var titleText:Label; 

     [SkinPart(required="true")] 
     public var closeButton:Button 

     [SkinPart(required="true")] 
     public var messageGroup:Group; 

     [SkinPart(required="true")] 
     public var actionGroup:Group; 
    ]]> 
</fx:Script>

正如你所看到的，皮肤包含有关组件的所有内容，违反了我对分离风格和内容的感觉。除了用于程序化更改的皮肤接口之外，using元素没有任何内容。我当前的解决方案根本没有比使用皮肤更好的优势，除了稍微简单的皮肤切换过程。

有没有办法做我在Flex 4中提出的建议？

来源

2011-11-14 Dwight

皮肤对我来说似乎还可以：它只是可视化的组件和布局，但没有任何行为。但现在的问题变成：这是什么*是这个组件的行为？例如，我看不到'closeButton'的点击处理程序。无论如何，它应该在主机组件中，因为这是行为。 – RIAstar

视情况而定，点击处理程序在别处处理。我遇到的问题是内容描述和内容样式之间缺乏分离。这将导致项目过程中大量的代码重复。 – Dwight

我想你说'点击处理程序在其他地方处理'（也许使用某种框架）时引用了一些介体模式？我倾向于将主机组件视为Mediator和皮肤类作为View，这完全是为了避免您担心的冗余。这只是思想的转变：不再将主机组件视为视图。 IMO Flex已经是一个MVC框架，不需要任何额外的框架。 – RIAstar

答案是Flex不能这样工作。布局和视觉风格似乎不可分割地联系在一起。结束这个问题。

来源

2011-11-23 19:06:34 Dwight

如何在纯粹的MXML中保持布局，纯粹在Flex中的Skin中进行布局？

回答

相关问题