How can I break down a view in a flex application?

I've written a flex (mobile) application, that ended up bigger than I expected.

I'm pretty happy with all my classes and everything on my AS files. However, the view turned out really big, as I'm using MXML to layout my app.

I was thinking about creating external components I could call on my view to make it more readable, but am not sure what's the best way to do, or if doing so is the best way at all.

As an example, I have in my view a v:Group with the following:

<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:Borde开发者_运维知识库rContainer 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>

Could anyone point me to the right direction as to how I can move this out from the view to make it cleaner, and how to still have access to items inside this block of code (i.e. I would still like to be able to modify lblURL from my view as this is a dynamic value)

Thanks in advance,

---

You're on the right track, and the link Amy posted has a good example of how to lay it out. You might also be interested in cairngorm and parsely, which are frameworks/tools for a more complete solution.

But for now I think just separating parts of your view into components is a good start.

You can still modify your label in the main app (e.g.):

<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>