Creating custom components at runtime within an Item Renderer

Question

I am trying to use the coverflow layout for the pages in my website i.e, each item in the list is not an image or panel, but an entire page itself. The pages are essentially custom components.

What I want is to be able to create instances of my custom component at runtime within my ItemRenderer. For example, this is the code for displaying the coverflow layout :

<s:List id="pageList" depth="0" itemRenderer="com.helpdesk.proj.renderers.pageRenderer"
        dataProvider="{menuItems}" selectedIndex="{navigationButtonGroup.selectedIndex}" borderVisible="false" 
        x="5" y="200" width="100%" height="500">
    <s:layout>
        <layouts:CoverFlowLayout id="hdCoverflow"
                                 horizontalDistance="85"
                                 selectedItemProximity="50"
                                 selectedIndex="{pageList.selectedIndex}"
                                 depthDistance="1" 
                                 elementRotation="-70" 
                                 focalLength="300"
                                 perspectiveProjectionX="-1" 
                                 perspectiveProjectionY="-1"/>
    </s:layout>
</s:List>

The data provider for the list, is basically an array of objects which contains the name (string) of the top navigation bar (home, about, contact us etc). I have created custom components with the same names.i.e I have a custom component named "home","about" and so on.

So in the item renderer I want to create instance of the appropriate custom component. So far this is what I have :

<?xml version="1.0" encoding="utf-8"?>

        import mx.core.UIComponent;
        import mx.events.FlexEvent;

        [Bindable]private var currItem:String = data.name;
        protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
        {
            var myClass:Class = Class(getDefinitionByName(currItem));
            var mycomp:Object = new myClass();

        }

    ]]>
</fx:Script>

I am hoping "mycomp" will hold an instance of the current custom component. How do I add this object to the application? I tried parentDocument.addChild but it throws an error. Is there any other way of doing the whole thing ?

score 0 · Answer 1 · answered Jan 07 '12 at 06:30

Try this :

override protected function commitProperties():void {
    super.commitProperties();
    addCustomecomponent();
}

public function addCustomcomponent():void{

var myClass:Class = Class(getDefinitionByName(currItem));
            var mycomp:Object = new myClass();
    addElement(mycomp);   // addChild if you are using flex 3.6 or below

}

Creating custom components at runtime within an Item Renderer

1 Answers1