Flex list control issue
I am working on a small photo gallery. I am creating an xml file and trying to link it to a List control using itemrenderer. However, when I tried to save the file, I got access to the data undefined error. I thought we should use "data" to refer to the current row of the data object. Here is my code ... and thanks a lot!
<?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/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:Model id="pictureXML" source="data/pictures.xml"/>
<s:ArrayList id="pictureArray" source="{pictureXML.picture}"/>
</fx:Declarations>
<s:List id="pictureGrid" dataProvider="{pictureArray}"
horizontalCenter="0" top="20">
<s:itemRenderer>
<fx:Component>
<s:HGroup>
<mx:Image source="images/big/{data.source}" /> // where the error happen
<s:Label text="{data.caption}"/> // where the error happen
</s:HGroup>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
My xml
<?xml version="1.0"?>
<album>
<picture>
<source>city1.jpg </source>
<caption>City View 1</caption>
</picture>
<picture>
<source>city2.jpg </source>
<caption>City View 2</caption>
</picture>
<picture>
<source>city3.jpg </source>
<caption>City View 3</caption>
</picture>
<picture>
<source>city4.jpg </source>
<caption>City View 4</caption>
</picture>
<picture>
<source>city5.jpg </source>
<caption>City View 5</caption>
</picture>
<picture>
<source>city6.jpg </source>
<caption>City View 6</caption>
</picture>
<picture>
<source>city7.jpg </source>
<caption>City View 7</caption>
</picture>
<picture>
<source>city8.jpg </source>
<caption>City View 8</caption>
</picture>
<picture>
<source>city9.jpg </source>
<caption>City View 9</caption>
</picture>
<picture>
<source>city10.jpg </source>
<caption>City View 10</caption>
</picture>
</album>
I appreciate any help !!!
a source to share
<s:List id="pictureGrid" dataProvider="{pictureArray}"
horizontalCenter="0" top="20">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup>
<mx:Image source="images/big/{data.source}" /> // where the error happen
<s:Label text="{data.caption}"/> // where the error happen
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Try it! This will work
a source to share
I think the data property you are trying to get is out of scope because it is inside the itemRenderer string. Try abstracting your ItemRenderer into your own component instead of doing it as an inline component.
You can also contact the user on the itemRenderer line to access each item data property, but this is cleaner ....
I have decoupled your IR from my own component and everything seems fine ...
<!-- YOUR LIST -->
<s:List id="pictureGrid" dataProvider="{pictureArray}"
horizontalCenter="0" top="20"
itemRenderer="TestRenderer"/> // reference new IR class here
<!-- NEW ITEMRENDERER CLASS -->
<?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"
autoDrawBackground="true">
<s:HGroup>
<mx:Image source="images/big/{data.source}" />
<s:Label text="{data.caption}"/>
</s:HGroup>
</s:ItemRenderer>
a source to share
try this
override public function set data(value:Object):void
{
super.data = value;
if (data == null)
return;
irImage.source = data.path;
irText.text = data.caption
}
<s:HGroup>
<mx:Image id="irImage" />
<s:Label id="irText"text="{data.caption}"/>
</s:HGroup>
if that doesn't work then tell me.