Set Up

The integration of the swc html2flex Frontal library involves very few steps.

First of all you must include, into your flex project, the swc file (if you are using an ide such as Flex Builder or Flash Builder, you have to access to the Library Path panel of your application), then you have to include few code rows into the application file, as shown in the code below.

<mx:Application xmlns:mxundefined" 
         layout="absolute" width="100%" height="100%" 
         horizontalScrollPolicy="off" creationComplete="init()" 
         xmlns:components="it.ang.frontal.renderer.components.*">

     <!-- your css files -->
     <mx:Style source="project/css/main.css"/>

     <mx:Script>

            import it.ang.frontal.util.CommonUtils;

            import it.ang.frontal.modules.util.ApplicationContext;


            public function init() : void {

                ApplicationContext.arrayConstantsClasses = [];

                ApplicationContext.getInstance().rootComponent = rootComponent;

                ApplicationContext.getInstance().invokeService("project/index.html", 
                        CommonUtils.getUrlParamaters());

            }

    </mx:Script>

    <components:RootHtmlContainer id="rootComponent" width="100%" height="100%" />

</mx:Application>

The visual Frontal component to be introduced is the RootHtmlContainer which represents the main container used by Frontal to inject the content; in order to start up the Frontal framework it's necessary to configure the Frontal instance object ApplicationContext; in the init function (invoked by the creationComplete event of the application), it's set the rootComponent property of ApplicationContext and then invoked the invokeService method.

The parameters to pass to the ApplicationContext invokeService method are the url of the service which gives back the html content, and eventually the request parameters in the url of the flex application; to retrieve these parameters there is the getUrlParameters method of the Frontal CommonUtils class which gives back a Dictionary object.

In the init method there is also an other property of the ApplicationContext class to be set, that is the arrayConstantsClasses property, an array of custom classes by which it is possible to extend the Frontal framework with custom tags; however it is discussed in the Customizing section.

Particulary attention must be paid to the widht and height properties of the Application object and of the RootHtmlContainer object, and to the declaration of the css files to include into the project.