Including Styles & Resources in Multi-Modules Flex Application

I have been developing KZLite http://www.kzlite.com which handle modularization with LoaderInfo class. The purpose of the modularization is simple, a module (a swf file which contains multiple class definition) will be loaded only when necessary. We need that as we have a lot of modules in HRMS software.

One of the confusing bumper when loading external swf with LoaderInfo is that control's styles and resource bundles information is not loaded in the main application. For example, my main application use RSL for the flex framework, the RSL will load class definition for ComboBox, DateField, but not their styles and resource bundles information (such as the format string), unless you used the particular component in the main application itself. This is because when compiling the main application, the Flex compiler will find and include only styles and resource bundles information for controls that are used in the main application. However, in case where a control is used in a module but not in the main application (e.g. my main application is just a place holder to load module, and my module may use a DateField control), it will cause a lot of funny runtime errors, something like 'One of the properties is invalid' or 'cannot operate on null' etc.

To solve this, I usually have a IncludeClasses.as in my main application that include all control classes that my other modules will use. The following is my example IncludeClasses.as : -


package
{
import mx.charts.BarChart;
import mx.charts.PieChart;
import mx.controls.Button;
import mx.controls.CheckBox;
import mx.controls.ColorPicker;
import mx.controls.ComboBox;
import mx.controls.DataGrid;
import mx.controls.DateField;
import mx.controls.HSlider;
import mx.controls.HorizontalList;
import mx.controls.Image;
import mx.controls.LinkButton;
import mx.controls.List;
import mx.controls.MenuBar;
import mx.controls.NumericStepper;
import mx.controls.ProgressBar;
import mx.controls.RadioButton;
import mx.controls.TextArea;
import mx.controls.TextInput;
import mx.controls.TileList;
import mx.controls.Tree;
import mx.controls.VSlider;

internal class IncludeClasses
{
internal var button:Button;
internal var checkBox:CheckBox;
internal var colorPicker:ColorPicker;
internal var comboBox:ComboBox;
internal var dataGrid:DataGrid;
internal var dateField:DateField;
internal var linkButton:LinkButton;
internal var horizontalList:HorizontalList;
internal var hSlider:HSlider;
internal var image:Image;
internal var progressBar:ProgressBar;
internal var list:List;
internal var menuBar:MenuBar;
internal var numericStepper:NumericStepper;
internal var radioButton:RadioButton;
internal var textArea:TextArea;
internal var textInput:TextInput;
internal var tileList:TileList;
internal var tree:Tree;
internal var vSlider:VSlider;

internal var pieChart:PieChart;
internal var barChart:BarChart;

public function IncludeClasses()
{

}
}
}


And in the init() of the Application, add in this line:-

new IncludeClasses();


This will make the Flex compiler to think that those classes are in use and include their styles and resource bundle information.