6 Replies Latest reply on Nov 23, 2009 9:10 AM by nikos101

    Row number of an item within a list

    nikos101 Level 2

      Is there a way to get the row number of an item within a list? I can't seem to see that property anywhere in my item renderer when paused during debugging.

        • 1. Re: Row number of an item within a list
          David_F57 Level 5

          Hi,

           

          With a list the item index is basically the row, so SelectedIndex is the same as selected row. if you have multiple rows in an item renderer they are still all the same 'row' of the list.

           

          David.

          • 2. Re: Row number of an item within a list
            nikos101 Level 2

            Basically im trying to get round the problems with using the data variable in an inline component  and trying to assign stuff manually inside the item renderer

            • 3. Re: Row number of an item within a list
              David_F57 Level 5

              Hi,

               

              I think that it would be easier to actually separate you item renderer out into its own module as its easy to get confused when using inline itemrenders. The following example is a simple image browser that uses the item renderer to determine the width of each item in the list so that each image uses the full height of the list, if it where a vertical list then each item could use the entire width and vary height, or if you wanted a label under the image you would adjust the image width and height to fit the label.

               

              In the renderer use the set data override to call a function that manipulates the object data anyway you want to. In this case It uses the actual load of the image to complete then calculate the layout for that item. I think this approach will fix a lot of the issues you are having.

               

              Application(myApp.mxml)

              ===================

               

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

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

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

                 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">

              <fx:Script>

              <![CDATA[

              import mx.controls.Image;

              import mx.collections.ArrayCollection;

               

              private var fl:FileReferenceList = new FileReferenceList();

              private var fr:FileReference = new FileReference();

               

              private var ImageCount: int = 0;

              private var LoopCount : int = 0;

               

              [Bindable] private var ImageCollection: ArrayCollection = new ArrayCollection();

               

              private function imageBrowser(): void

              {

              fl.addEventListener(Event.SELECT, getSelectedImages);

              var imgFilter:FileFilter = new FileFilter("Images", "*.jpg;*.png");

              fl.browse([imgFilter]);

              }

               

              private function getSelectedImages(e:Event): void

              {

              fl.removeEventListener(Event.SELECT, getSelectedImages);

              ImageCount = fl.fileList.length;

              LoopCount  = 0;

              loopImageList(0);

              }

               

              private function loopImageList(value:int): void

              {

              if (value < ImageCount)

              {

              fr = fl.fileList[value];

              fr.name

              fr.addEventListener(Event.COMPLETE,loadImage);

              LoopCount += 1;

              fr.load();

              }

              }

               

              private function loadImage(e:Event): void

              {

              fr.removeEventListener(Event.COMPLETE, loadImage);

              if (fr.data.length > 0)

              {

              var ba: ByteArray = new ByteArray();

              ba = fr.data;

              ImageCollection.addItem(ba);

              }

              loopImageList(LoopCount);

              }

               

              protected function list1_clickHandler(event:MouseEvent):void

              {

              img.source=ImageCollection[il.selectedIndex];

              }

              ]]>

              </fx:Script>

              <s:List id="il" x="57" y="24" width="707" dataProvider="{ImageCollection}" itemRenderer="RenderImage" click="list1_clickHandler(event)">

              <s:layout>

              <s:HorizontalLayout/>

              </s:layout>

              </s:List>

              <s:Button id="li" x="57" y="154" label="Load Images" click="imageBrowser()"/>

              <mx:Image id="img" x="57" y="201" width="403" height="268"/>

              </s:Application>

               

              ItemRenderer(RenderImage.mxml)

              =========================

              <?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/halo" width="80" height="100">

               

              <s:states>

              <s:State name="normal"/>           

              <s:State name="hovered"/>

              <s:State name="selected"/>

              <s:State name="normalAndShowsCaret"/>

              <s:State name="hoveredAndShowsCaret"/>

              <s:State name="selectedAndShowsCaret"/>

              </s:states>

               

              <fx:Script>

              <![CDATA[

              [Bindable] private var selectionColor:uint = 0x005588;

              [Bindable] private var rollOverColor:uint = 0x0088DD;

              [Bindable] private var backgroundColor:uint = 0xFFFFFF;

               

               

               

              [Bindable("dataChanged")]

              override public function set data(value:Object):void

              {

              img.addEventListener(Event.COMPLETE, sizeRender);

              img.load(value);

              }

               

              private function sizeRender(e:Event): void

              {

              var ar: Number = img.content.width/img.content.height;

              this.width = height*ar;

              }

               

              ]]>

              </fx:Script>

               

              <s:Rect left="0" right="0" top="0" bottom="0">

              <s:stroke.normalAndShowsCaret>

              <s:SolidColorStroke

              color="{selectionColor}"

              weight="1"/>

              </s:stroke.normalAndShowsCaret>

              <s:stroke.hoveredAndShowsCaret>

              <s:SolidColorStroke

              color="{selectionColor}"

              weight="1"/>

              </s:stroke.hoveredAndShowsCaret>

              <s:stroke.selectedAndShowsCaret>

              <s:SolidColorStroke

              color="{selectionColor}"

              weight="1"/>

              </s:stroke.selectedAndShowsCaret>

              <s:fill>

              <s:SolidColor

              color.normal="{backgroundColor}"

              color.normalAndShowsCaret="{backgroundColor}"

              color.hovered="{rollOverColor}"

              color.hoveredAndShowsCaret="{rollOverColor}"

              color.selected="{selectionColor}"

              color.selectedAndShowsCaret="{selectionColor}"

              />

              </s:fill>

              </s:Rect>

              <s:Group id="contentGroup" verticalCenter="0" left="3" right="3" top="2" bottom="2">

              <mx:Image id="img" top="0" left="0" bottom="0" right="0" scaleContent="true" maintainAspectRatio="false"

                verticalAlign="middle" horizontalAlign="center"/>

              </s:Group>

               

              </s:ItemRenderer>

              1 person found this helpful
              • 4. Re: Row number of an item within a list
                David_F57 Level 5

                Hi,

                 

                If the data you were passing was an object with an image and a label then the passed value would be value.myimage and value.mylabel. each time an item in the dataprovider is passed to the renderer.

                 

                David.

                • 5. Re: Row number of an item within a list
                  rfrishbe Level 3

                  There have been some changes in recent drops of the Flex SDK that you can look forward to.

                   

                  In the example above, there will no longer be a need to have that <s:Rect> in the item renderer.  Instead, you can use autoDrawBackground="true" (which is the default), and this will automatically be drawn for you.  Check out: http://opensource.adobe.com/wiki/display/flexsdk/Item+Renderer+Changes

                   

                  The other change we've added recently, is you can get the index of the data in the ItemRenderer pretty easily.  Just use the "itemIndex" property.  If you're on a build before this was added, though, in the item renderer, you can do something like:

                   

                  owner.dataProvider.getItemIndex(data) or owner.getElementIndex(data)

                   

                  -Ryan

                  1 person found this helpful
                  • 6. Re: Row number of an item within a list
                    nikos101 Level 2

                    those last 2 index things are cool