modularity and flex view states - apache-flex

Question

I've seen some similar questions, but nothing quite like what I'm trying to figure out, so here goes. I have a flex app with many view states, some of which are used frequently, some of which are not. Currently all these states reside in one mxml file so that only one swf file is generated and loaded in the client browser. I would like to modularize these view states by separating them out into different source files and just loading states from one file into another, however, I still want the user to only have to load one swf file. My main reason for this is to avoid having source files in excess of 10,000 lines. Is there a standard way of addressing this issue?
Thanks.

Answer 1

There are two ways of doing what you ask. The first is what it sounds like you are asking, the second is what I would recommend.
First:
Create your main.mxml application and then create separate component1.mxml and component2.mxml files for each of your states. Then in your application set it up like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<local:Component1 includeIn="State1"/>
<local:Component2 includeIn="State2"/>
</s:Application>
The second way, and the one I recommend because of your description of the application breaks it down into multiple swf modules with one swf application. This way the user only downloads what they plan to use. In this scenario do the same as before but create modules instead of components.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:ModuleLoader url="Component1.swf" includeIn="State1"/>
<mx:ModuleLoader url="Component2.swf" includeIn="State2"/>
</s:Application>