Tags

• 

The html2flex Frontal library manages all the common html tags, such as html, body, div, p, span, table, with great part of their attributes and style attributes.

Custom Tags

Customizing tags is an entry point in the Frontal project to extend its functionalities and the objects reusing.
Creating custom tags requires a few steps.
First of all it's necessary to create, into your flex project, the Flex Component that will handle your custom tag; to achieve that, your component must implement the Frontal interface ComponentInterface.

package it.ang.frontal.renderer.components.interfaces
{
  import it.ang.frontal.parser.Element;

  public interface ComponentInterface
  {

    function set element(el:Element) : void;
    function get element() : Element;
    function createComponents() : void;

  }
}

The methods set and get are used to let Frontal pass to your component the Element Object; this object represents the complete tag element with, eventualy, its nested children.
The createComponents method is invoked by Frontal to let to your component manage the content of your tag.

Here is an Example of custom component which renders the text 'Hello World'.

package custom
{
    import it.ang.frontal.parser.Element;
    import it.ang.frontal.renderer.components.interfaces.ComponentInterface;
    
    import mx.containers.Canvas;
    import mx.controls.Label;
    
    public class HelloWorldComponent extends Canvas implements ComponentInterface
    {
        private var _element : Element;
        
        public function HelloWorldComponent() {
        }
        
        public function set element(el:Element) : void {
            this._element = el;
        }
        
        public function get element() : Element {
            return this._element;
        }
        
        public function createComponents() : void {
            var label : Label = new Label();
            label.text = "Hello World";
            addChild(label);
        }

    }
}

The next step is to configure Frontal; that has to be done setting the static ApplicationContext property arrayConstantsClasses with a your class; this class must have three static property as in the example below.

package custom
{
    
    import mx.collections.ArrayCollection;
    
    public class CustomProperties
    {
        
        public static var tagNameElementTypeMap:Object = {
            "hello": 110
        };
        
        public static var tagNameElementListTypeColl:ArrayCollection =
            new ArrayCollection(
            );
            
        public static var objectFromElementType:Object = {
            110 : HelloWorldComponent
        }    

    }
}

The tagNameElementTypeMap property is a map which links the name of the custom tag with a code important for the Frontal framework; these values have to be greater than 109, because the smaller ones are used by Frontal.

The tagNameElementListTypeColl property is a list of values which represent the corrisponding tags in the tagNameElementTypeMap map; this list is useful to inform Frontal to not analyze and render any child tag of the custom tag; for example, if the hello tag had one or more children, Frontal automatically tries to analyze and render them; if you don't want this behaviour, because it's in the HelloWorldComponent that you insert the creation of the children tags, you have to insert the hello tag code, that is 110, in this list.

The objectFromElementType propery is necessary to correlate the tag, represented by its code, and the Flex class that manages it.

The class with these properties just made, has to be inserted in the ApplicationContext as in the example below.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        width="100%" height="100%" horizontalScrollPolicy="off"
        creationComplete="init()" xmlns:components="it.ang.frontal.renderer.components.*">
    
    <mx:Style source="project/css/main.css"/>
    
    <mx:Script>
        <![CDATA[
            import it.ang.frontal.util.CommonUtils;
            import it.ang.frontal.modules.util.ApplicationContext;
            import custom.CustomProperties;
            
            public function init() : void {
                ApplicationContext.arrayConstantsClasses = [CustomProperties];
                ApplicationContext.getInstance().rootComponent = rootComponent;
                ApplicationContext.getInstance().invokeService("project/index.html", CommonUtils.getUrlParameters());
            }
            
        ]]>
    </mx:Script>
    
    <components:RootHtmlContainer id="rootComponent" width="100%" height="100%" />
    
</mx:Application>

Frontal introduces other custom components, as DataGrid and List; for this components refer to the documentation.