8 Replies Latest reply on Aug 29, 2011 11:45 PM by tooMuchTrouble

    nested item renderers

    tooMuchTrouble Level 3

      i have an ArrayCollection with a column that contains an array of images + text that i'd like to render. i've been trying to use nested item renderers to handle this but i'm stuck referring to data in the inner renderer (this won't compile):

       

      <s:GridColumn width="100" dataField="legend" headerText="">

           <s:itemRenderer>

                <fx:Component>

                     <s:VGroup>

                          <s:Label text="{data.name}"/>

                               <s:List id="legendDetails" dataProvider="{data.legend}" useVirtualLayout="false" >

                                    <s:layout>

                                    <s:VerticalLayout clipAndEnableScrolling="true"/>

                                    </s:layout>

                                    <s:itemRenderer>

                                         <fx:Component>

                                              <s:HGroup>

                                                   <s:BitmapImage id="legendImg" source="{data.imageData}" />

                                                   <s:Label id="legendLabel" text={data.label}" />

                                              </s:HGroup>

                                         </fx:Component>

                                    </s:itemRenderer>

                          </s:List>

                     </s:VGroup>

                </fx:Component>

           </s:itemRenderer>

      </s:GridColumn>

       

      i suppose i should ask if this even the right approach. if it is, how an i pass the label & imageData vales ot the inner item renderer?

       

      thanks.

        • 1. Re: nested item renderers
          saisri2k2 Level 4

          Yes, it looks ok for me unless data.legend[0] has the image and the label. try to use the custom itemrenderers to avoid the confusion.

          1 person found this helpful
          • 2. Re: nested item renderers
            tooMuchTrouble Level 3

            yes actually data.legend holds objects, image and text. how would i refer to those in the inner renderer?

             

            thanks.

            • 3. Re: nested item renderers
              saisri2k2 Level 4

              data.legend.imageData has the image data rite? then what ever that you are doing in the inner list renderers is correct. that will bind the data to the image. No need to change anycode.

              • 4. Re: nested item renderers
                saisri2k2 Level 4

                Ah, use <s:ItemRenderer with layout as verticalLayout rather than using the VGroup etc. every time you have to use a renderer. I guess VGroup does not has data property.

                1 person found this helpful
                • 5. Re: nested item renderers
                  saisri2k2 Level 4

                  Custom itemrenderer: here

                  • 6. Re: nested item renderers
                    tooMuchTrouble Level 3

                    it's actually more like data.legend[0].imageData. inner renderer's not seeing it.

                     

                    thinking i should dump the 2nd renderer & loop over data.legend & add their parts, something like:

                     

                    protected function addLegends(): void {

                         var legends:Array=data.legend;

                         var hG:HGroup;

                         var img:BitmapImage;

                         var lbl:Label;

                         for (var i:int=0; i < legends.length; i++) {

                              hG=new HGroup();

                              hG.verticalAlign="middle";

                              hG.height=20;

                              img=new BitmapImage();

                              img.source=legends[i].imageData;

                              img.height=20;

                              img.width=20;

                              lbl=new Label()

                              lbl.text=legends[i].label;

                              hG.addElement(img);

                              hG.addElement(lbl);

                              legendVG.addElement(hG);

                         }

                    }

                     

                     

                    where legendVG is VGroup in the itemRenderer.

                     

                    is there a down side to that approach?

                     

                    thanks again.

                    • 7. Re: nested item renderers
                      saisri2k2 Level 4

                      Yes, deffinately, if the size of the array elements are increasing then the components also increse, this will be very slow and heavy in the future. bettr to go in the itemrenderer way. use breakpoint to figure out if the set data is getting called inside the itemrenderer and find out if you are reading the proper value from the dataprovider.

                      • 8. Re: nested item renderers
                        tooMuchTrouble Level 3

                        ok, trying this:

                         

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

                        <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

                             width="100%" height="100%"

                             clipAndEnableScrolling="true">

                         

                             <s:layout>

                                  <s:VerticalLayout gap="3" horizontalAlign="left" verticalAlign="top"/>

                             </s:layout>

                         

                             <!-- layer name -->

                             <s:Label text="{data.name}"/>

                             <!-- legend for this layer -->

                             <s:ListBase id="legends" dataProvider="{data.legend}" width="100%" height="100%"

                                   itemRenderer="renderers.legendDetailRenderer"/>

                        </s:GridItemRenderer>

                         

                        and watching the legends ListBase, the dataprovider is never set (always null). so no data is ever shipped down to the legendDetailRenderer:
                        <?xml version="1.0" encoding="utf-8"?>
                        <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx"
                             width="100%" height="100%" autoDrawBackground="true">
                             <s:layout>
                                   <s:HorizontalLayout  gap="3" horizontalAlign="left" verticalAlign="top"/>
                             </s:layout>
                             <s:Label text="{data.label}"/>
                        </s:ItemRenderer>
                        now i'm really confused as to how to pass data down to the ListBase ;-)
                        thanks.