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

Question

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

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,

Is there anything somewhere else in your project that looks something like one or more of the pieces, or do you have repetition within the component? — Amy Blankenship
This is it. For things like this no. And that's why I'm not sure about turning these into components, since they will only be used once — Marcos Placona
You don't say whether there's any logic here to edit the model. One thing that will always stand you in good stead is to break the logic part out separately using Presentation Model (blogs.adobe.com/paulw/archives/2007/10/presentation_pa_3.html). That way, if you need to change the way the View looks or do the same stuff in a different-looking View (say, on a different device), you don't have to duplicate the logic. It's also easy to test, if you're into TDD. — Amy Blankenship

Unknown Unknown · Accepted Answer · 2011-09-26T11:37:48

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>

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

1 Answers