views:

442

answers:

1

I have the below function creating new panels inside my ViewStack.. This works fine and they are great.. However i am trying to put some content into the panels but i am failing.

       private function viewstack_addChild(name:String):void {
            //if (accordion.numChildren < MAX_CHILDREN) {
                var p:Panel = new Panel();
                p.id = name;
                p.name = name;
                p.title = name;
                p.percentWidth = 100;
                p.percentHeight = 100;
                var display:PageItemRenderer = new PageItemRenderer;
                p.finishPrint(display);
                var randColor:uint = Math.random() * 0xFFFFFF;
                p.setStyle("backgroundColor", randColor);
                myViewStack.addChild(p);
                //myViewStack.selectedChild = p;
            //}
        }

I have a custom itemrenderer called PageItemRenderer that will accept the xml data and display it but i cannot figure out how to call the renderer for each panel..

Any help would be greatly appreciated.

EDIT: Adding PageItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
height="100%" 
width="100%" 
xmlns:mx="http://www.adobe.com/2006/mxml"&gt;

<mx:HBox width="100%" height="100%">
 <mx:VBox height="100%" width="20%" horizontalAlign="center" verticalAlign="middle">
  <!-- software image -->
     <mx:Image source="{data.image}"  width="90%" height="90%"/>
 </mx:VBox>

    <!-- person's name -->
    <mx:VBox height="100%" width="80%" horizontalAlign="left" verticalAlign="middle">
        <mx:Label width="100%" height="100%" text="{data.name} {data.version}" color="#FFAE00"/>
        <mx:Label width="100%" height="100%" text="{data.description}" color="#FFFFFF"/>
    </mx:VBox> 
</mx:HBox>

</mx:HBox>
+1  A: 

The Panel is just a container class, and your PageItemRenderer must extend some UIComponent, so just do this in your viewstack_addChild method:

 var p:Panel = new Panel();
 // set the properties on p
 var pR:PageItemRenderer = new PageItemRenderer();
 var data:Object;
 // Do something to get the data to be displayed;
 pR.data = data;
 p.addChild(pR);
 myViewStack.addChild(p);

EDIT: changed pR.setData to pR.data EDIT: changed pR.data(data) to pR.data = data;

Ryan Lynch
Hi LynchRJ, thank you for the response, however i am still unsure on how to actually call the itemrenderer in there for the data variable..
medoix
I went ahead and made a correction to the code. A drop in item renderer is a UIComponent class that implements the mx.core.IDataRenderer mx.controls.listClasses.IDropInListItemRenderer . From what I understand you want to use it in a Panel instead of a List or other control. A List control creates instances of the renderer and sets the data on the element. If you want to use it outside of that context just create an instance of it, set the data on it, and add it as a child of the container element you want to put it in.
Ryan Lynch
Sorry, I mean it implements the mx.core.IDataRenderer and mx.controls.listClasses.IDropInListItemRenderer interfaces.
Ryan Lynch
On the following line.. var pR:PageItemRenderer = new PageItemRenderer();I am getting.. TypeError: Error #1006: value is not a function.The PageItemRenderer is an mxml renderer file in com.xd.components.renderers
medoix
Post the MXML for the PageItemRenderer class as part of your question.
Ryan Lynch
I have added the page above, i use a similar page to render items in a datagrid and it is working fine, what i am trying to do i when the app loads it creates a page for each item in the datagrid (working) and then what i want to do i render each page with the custom data the application is retrieving from the xml array (the data works for the datagrid)
medoix
I see the problem. I think the error is actually relating to the line pR.data(data). It's a setter function, so you treat it as a value, not a function. I'll fix it in the answer.
Ryan Lynch
Thank you for your help Ryan, i now have no errors, but the Renderer is not showing either. If i change the pR.data = data line to pR.data = PageItemRenderer; it works and i can see the renderer placing items inside the panel. However all the fields {data.name} are returning as "undefined" any ideas?
medoix
I think i fixed it by using {Application.application.HomePage.myDG.selectedItem.name} instead of {data.name} However this is not really going to work because there will fields in the XML data that are blank... and it is returning the wrong value when it is blank..
medoix
This sounds like you may have a separate problem with your data, maybe the subject for a new question. I'm having trouble accessing the page right now, but the Flex Help has a decent section on item renderers, and that combined with the API reference for the interfaces I mentioned should give you enough info to figure out how to use your item renderer in this instance.
Ryan Lynch