To achieve this why not use the spark data grid instead of a form? This way you add a new row to the data grid instead of adding controls for each parameter of sub object.

Lets take a look at an app that captures data for an expense report:

You can click on the trash icon to delete a row. And if you want to add blank rows, then you can either click on the new icon in the top left of the grid or click the TAB key in the comments field of the last row.

I primarily did the following customization to change the look of the datagrid:

• Custom skin for the datagrid (EntryDGSkin.mxml) to hide all the row and column separators.
• Used custom item renderers and marked rendererIsEditable as true so the controls are always visible when the rows are present in the datagrid

There are validators defined inside the item renderer and when the validation fails the item renderer changes a boolean property (invalidValue) on the parent document. So before saving, the document checks the boolean value to decide whether to proceed with save or not. If you don’t like the approach to set a boolean flag, then you can also access each validator via the itemRenderer for a particular cell. To access the itemRender use the getItemRendererAt() method present on grid property inside the spark data grid.

Also you should pay attention to the prepare()and discard()methods inside the data grid itemRenderers. The prepare() method is called for every visual update and it sets the data to the sub component of item renderer. I am using a boolean flag (pendingEdits – set to false when there are unsaved changes) inside the itemRenderers to decide whether to update the sub component or not.

Spark datagrid is a new feature in Flex SDK 4.5 and to import the fxp file you would need Flash Builder 4.5.
Both Flex SDK 4.5 and Flash Builder 4.5 were announced recently. See the flex team blog

Feedback is welcome

Here a quick example:

<?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">
    <fx:Declarations>
        <s:RadioButtonGroup id="rbg"/>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout paddingLeft="5" paddingRight="5" />
    </s:layout>
    <s:HGroup>
        <s:RadioButton label="left" value="left" group="{rbg}" selected="true"/>
        <s:RadioButton label="right" value="right" group="{rbg}"/>
        <s:RadioButton label="top" value="top" group="{rbg}"/>
        <s:RadioButton label="bottom" value="bottom" group="{rbg}"/>    
    </s:HGroup>
    <s:Button id="myButton" label="Button with Icon" icon="@Embed(source='Fx.png')" iconPlacement="{rbg.selectedValue}" />
</s:Application>

These enhancements should provide the following benefits:

• Applications will only load RSLs that are required
• Modules (and sub applications) will use RSLs which are already loaded by the parent application (or module)
• Enable sharing of RSLs between modules (and sub applications)
• Simply usage of Monkey Patch with Flex RSLs

Only load what’s needed

In Flex 4, all RSLs that were listed in the flex-config.xml (at compile time) were loaded by the app when it was launched. But with the Hero release the compiler will remove any RSLs which are not needed by your application. This means that the load time for your app should improve because it won’t load any extra RSL. The RSLs removed by the compiler will be the placeholder RSLs. This feature is controlled by a new compiler switch called -remove-unused-rsls which defaults to true.

Also if you compile your app using the command line compiler, then it will print the names of the RSLs that are needed by your application. The following is an example of compiler output where the app uses 3 out of the 10 RSLs listed in flex-config.xml

There could be cases where the compiler may remove RSL which is needed by your app (say if you used soft-linking to load classes from a swc). If you run into such a situation then you can override the compiler’s decision, to remove the RSL, by using the -force-rsls compiler switch. This option takes the path of the swcs for which the RSLs should be force loaded.

Use what’s already loaded

Starting with Hero, modules and sub-applications will use the RSLs loaded by the parent app instead of loading a duplicate copy.

When a module or sub-application loads a new RSL, the RSL will be loaded into the default application domain and if this was the placeholder RSL for the parent app then it will be loaded into the parent’s application domain. Now if the parent app loads another module or sub-app which needs the same RSL then it will be able to use the RSL loaded by previous module or sub app.

The image below is an example of application where the OSMF RSL is removed by the compiler and so it becomes the placeholder RSL for the main app.

In the following image, the main app loads a module that uses spark video player. The module needs OSMF RSL so it loads it into the app domain of the parent application because OSMF RSL is a placeholder RSL. The module does not load the Framework or Spark RSLs because those were already loaded by the parent app.

Now if the main app loads another sub app which needs OSMF RSL, then the sub-app will simply be able to use the OSMF RSL loaded by the module.

You can also specify the application domain where the module should load the RSL. The -application-domain compiler option takes the path of the swc and then the name of the application domain. The valid values for application domain are ‘current’, ‘default’, ‘parent’, or ‘top-level’

Smaller Framework RSL

In Hero, we also reduced the size of the framework RSL. This was done by removing all mx components from framework.swc and moving them to a separate swc called mx.swc. So if you are creating pure spark apps then you don’t need to load any mx classes.

Monkey Patch RSL

The only way to use monkey patches with Flex RSLs is to load monkey patched file as RSL itself. But again it was quite tedious to create a monkey patched RSL, so to simplify that a new compiler option (called -include-inheritance-dependencies-only) was added. This option can be used when compiling the monkey patched library. This options works with -include-classes flag and it only pulls dependencies which are of type inheritance. An example for usage of this option:

bin/compc -include-classes=spark.components.Button -sp=frameworks/projects/spark/src/ -include-inheritance-dependencies-only=true -output=patch.swc

In the above example, the output swc will contain spark.components.Button and only it’s inheritance dependencies. And the library.swf contained in the output swc can be used as an RSL if you were to monkey patch the spark button component.

Most of these changes (except for the -application-domain compiler option) are already available in the latest Hero preview build.

PopUpManager is a singleton and hence it lives in the top level application domain. When a component is displayed using the PopUpManager it will try to get its styles via the StyleManager in the top level application domain and so the styles that are defined in your module/sub app will be ignored. In order to provide a solution for this situation some apis were modified to accept a new optional parameter. Via the optional parameter the module factory can be specified (which is then internally used to locate the correct style manager). Some apis that were modified are:

• mx.controls.Alert – show() method was modified to take an optional moduleFactory parameter
• mx.manager.PopUpManager- createPopUp() and addPopUp() methods were modified to take an optional moduleFactory parameter

So if you are defining styles in your modules/sub apps, you should then pass the moduleFactory parameter to these methods. Lets look at some examples:

Following the code for a main app that loads one module(which shows Alert and TitleWindow) and one sub application (which shows ToolTip).

<?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" width="600" height="500" >
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|TitleWindow
		{
			chromeColor: #FF0000;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
 
			import spark.components.TitleWindow;
 
			private var placeHolder: PopUpManager;
			private var placeHolder2: TitleWindow;
 
			protected function popup_load_clickHandler(event:MouseEvent):void {
				if(mod_loader_pop.url == null) {
					mod_loader_pop.url = "PopUpModule.swf";
				} else {
					mod_loader_pop.loadModule();
				}
			}
 
			protected function popup_unload_clickHandler(event:MouseEvent):void {
				mod_loader_pop.unloadModule();
			}
 
			protected function toolTip_load_clickHandler(event:MouseEvent):void {
				swfLoader.load("ToolTipSubApp.swf");
			}
 
			protected function toolTip_unload_clickHandler(event:MouseEvent):void {
				swfLoader.unloadAndStop();
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="5" paddingLeft="5" />
	</s:layout>
	<s:HGroup>
		<s:Button id="popup_load" label="Load PopUp Module" click="popup_load_clickHandler(event)"/>
		<s:Button id="popup_unload" label="Unload PopUp Module" click="popup_unload_clickHandler(event)" />
		<s:Button id="toolTip_load" label="Load ToolTip App" click="toolTip_load_clickHandler(event)"/>
		<s:Button id="toolTip_unload" label="Unload ToolTip App" click="toolTip_unload_clickHandler(event)" />
	</s:HGroup>
	<s:HGroup>
		<mx:ModuleLoader id="mod_loader_pop"/>
		<mx:SWFLoader id="swfLoader" />
	</s:HGroup>
</s:Application>

If you notice, the above app sets the chromeColor for the TitleWindow to #FF0000. Also it does not use any Alert.

Let’s look at the code for the module (PopUpModule.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" >
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|TitleWindow
		{
			fontSize: 32;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			import spark.components.TitleWindow;
			import mx.controls.Alert;
 
			public var titleWindow: TitleWindow;
 
			protected function btn1_clickHandler(event:MouseEvent):void {
				Alert.show("clicked","module",4,null,null,null,4);
			}
 
			protected function btn2_clickHandler(event:MouseEvent):void
			{
				Alert.show("clicked","module",4,null,null,null,4 , this.moduleFactory);
			}
 
			protected function btn1_1_clickHandler(event:MouseEvent):void {
				titleWindow = PopUpManager.createPopUp(DisplayObject(systemManager),TitleWindow, true, null) as TitleWindow;
				titleWindow.title ="Title Window";
				titleWindow.width = 136;
				titleWindow.addEventListener(CloseEvent.CLOSE, closeMe, false, 0, true); 
			}
 
			protected function btn2_1_clickHandler(event:MouseEvent):void {
				titleWindow = PopUpManager.createPopUp(DisplayObject(systemManager),TitleWindow, true, null, moduleFactory) as TitleWindow;
				titleWindow.title ="Module Title Window";
				titleWindow.width = 426;
				titleWindow.addEventListener(CloseEvent.CLOSE, closeMe, false, 0, true); 
			}
 
			private function closeMe(e:CloseEvent):void {
				PopUpManager.removePopUp(titleWindow);
				titleWindow.removeEventListener(CloseEvent.CLOSE, closeMe);
			}
		]]>
	</fx:Script>
	<s:Panel width="100%" height="100%" title="PopUp Module ">
		<s:layout>
			<s:VerticalLayout paddingTop="5" paddingLeft="5" />
		</s:layout>
		<s:Button label="Show alert" id="btn1" click="btn1_clickHandler(event)" />
		<s:Button label="Show alert (with moduleFactory)" id="btn2" click="btn2_clickHandler(event)" />
		<s:Button label="show title window" id="btn1_1" click="btn1_1_clickHandler(event)" />
		<s:Button label="show title window (with moduleFactory)" id="btn2_1" click="btn2_1_clickHandler(event)" />
	</s:Panel>
</mx:Module>

The module defines the fontSize for the TitleWindow. Also it has two calls to Alert.show() (with and without the moduleFactory parameter). Similarly two calls to PopUpManager.createPopUp() (with and without the moduleFactory parameter). When you run the example code, you will notice the only the Alert and TitleWindow displayed with the moduleFactory parameter are able to pick the correct styles.

Before looking at the running swf, lets also look at the code for the sub application (ToolTipSubApp.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" height="200" width="200" 
			   xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			import flash.events.MouseEvent;
 
			import mx.core.IToolTip;
			import mx.managers.ToolTipManager;
 
			public var mytoolTip:IToolTip;
 
			protected function panel1_mouseOverHandler(event:MouseEvent):void {
				if(useContext.selected) {
					mytoolTip = ToolTipManager.createToolTip("This is a custom tooltip in a sub App", 100, 100, null,this);
				} else {
					mytoolTip = ToolTipManager.createToolTip("This is a custom tooltip in a sub App", 100, 100, null);					
				}
			}
 
			protected function panel1_mouseOutHandler(event:MouseEvent):void {
				ToolTipManager.destroyToolTip(mytoolTip);
			}
		]]>
	</fx:Script>
	<fx:Style>
		@namespace ns "library://ns.adobe.com/flex/mx";
		@namespace s "library://ns.adobe.com/flex/spark";
 
		ns|ToolTip
		{
			color: blue;
			fontSize: 22;
		}
	</fx:Style>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<s:Panel width="100%" height="90%" mouseOver="panel1_mouseOverHandler(event)" mouseOut="panel1_mouseOutHandler(event)" title="Sub App">
	</s:Panel>
	<s:CheckBox label="pass context" id="useContext" />
</s:Application>

The sub app contains a Panel and a CheckBox, it also contains a style declaration for the ToolTip. When you move the mouse over the panel it displays a tooltip. By default it does not passes the context to the createToolTip method, but when the checkbox is selected it passes the content parameter. In the previous releases the context parameter was not used, but starting from Flex 4 it is being used to locate the current moduleFactory. Only when you pass the context (by selecting the checkbox) the styles for ToolTip defined in the sub app are picked.

Let’s look at the running swf now:

If you load the PopUp Module and click on the “Show alert” button, you would notice that the Alert doesn’t show up with the proper window or title bar. This reason for this broken appearance of Alert is that when the module factory is *not* passed, Alert will try to get its style from the top level style manager. But the main app does not use Alert, so the styles for Alert are not available in the main app. The solution is to pass the moduleFactory to the Alert.show() method. When you click on the “Show Alert (with moduleFactory)” button, you would see an Alert with correct Styles.

Also when you click on the “Show title window” button, you would notice that the title window shows up with chromeColor red but the fontSize style defined in the module is ignored. This reason for this is same (i.e. when the module factory is *not* passed, TitleWindow will try to get its style from the top level style manager. But the main app only sets chromeColor to red, and the modified fontSize style is not available in the main app) . The solution is to pass the moduleFactory to the PopUpManager.createPopUp() method. And when you click on the “Show title window (with moduleFactory)” button, you would see an TitleWindow with correct fontSize and chromeColor.

You would also notice similar behavioral difference when you load the Tool Tip app and play with the tool tip. The ToolTip styles defined in the sub app will only be picked when you pass the context (by selecting the checkbox) to the ToolTipManager.createToolTip() method. Passing the context sets the correct moduleFactory (which is then used to get to the correct style manager).

So, I hope you find this information useful and continue to create awesome looking and mind blowing apps.