如何分解 flex 应用程序中的视图？

Question

我编写了一个 flex（移动）应用程序，结果比我预期的要大。

我对我的所有课程以及我的 AS 文件中的所有内容都很满意。然而，视图变得非常大，因为我正在使用 MXML 来布局我的应用程序。

我正在考虑创建外部组件，我可以调用我的视图以使其更具可读性，但我不确定最好的方法是什么，或者这样做是否是最好的方法。

例如，我认为 v:Group 包含以下内容：

<s:VGroup width="100%" height="80%" includeIn="normal" horizontalAlign="center" top="70" id="imageGroup">
    <s:Label id="lblFile" visible="false" width="98%" textAlign="center" includeInLayout="true" color="0xFFFFFF"/>
    <s:BorderContainer id="framingBorder" borderColor="0xFFFFFF" borderWeight="15" cornerRadius="7">
        <s:Image id="image" source="{IMAGE_SAMPLE}" horizontalCenter="0"/>

    </s:BorderContainer>    
    <s:BorderContainer id="shareBorder" borderColor="0xFFFFFF" borderWeight="5" height="30" cornerRadius="7" width="{framingBorder.width}" visible="false" buttonMode="true" click="copyToClipboard(lblURL.text)">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" horizontalAlign="left" gap="3"/>
        </s:layout>
        <s:Label text="url:" styleName="copyURL" />
        <s:BorderContainer borderColor="0xCDCDCD" borderWeight="1" width="{lblURL.width + 5}" height="{lblURL.height + 5}">
            <s:layout>
                <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
            </s:layout>
            <s:Label id="lblURL" text="" styleName="copyURL" />
        </s:BorderContainer>
        <s:Spacer width="100%" />
        <s:HGroup>
            <s:Label color="0xFF0000" text="copy" styleName="copyURL" />
            <s:Image source="/assets/icons/page_copy_small.png" horizontalCenter="0" horizontalAlign="right"/>
        </s:HGroup>
    </s:BorderContainer>    
</s:VGroup>

谁能指出正确的方向，如何将其从视图中移出以使其更清洁，以及如何仍然可以访问此代码块中的项目（即我仍然希望能够从我的角度修改 lblURL，因为这是一个动态值）

提前致谢，

Answer 1

您走在正确的轨道上，Amy 发布的链接有 a good example 说明如何布局。您可能还对cairngorm and parsely 感兴趣，它们是用于更完整解决方案的框架/工具。

但就目前而言，我认为将视图的一部分拆分为组件是一个好的开始。

您仍然可以在主应用程序中修改您的标签（例如）：

<views:myBox id="box"  />
<s:Button click="{box.myLabel.text = 'changed'}" />

myBox.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 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="400" height="300">
    <s:Label id="myLabel" text="this is my label" />
</s:BorderContainer>