flashbuilder list component - how to add an image URL

Question

Im working with flashbuilder 4.6 and have a simple app underway that uses a listcomponent pulling data from an XML service (external URL) that is setup with data/services functionality within flashbuilder.

right now I have a relatively simple list that just displays the 'name' of the xml items:

<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
        creationComplete="list1_creationCompleteHandler(event)" labelField="Itemname">
     <s:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>

... I have another xml node / data element that is a full URL (http:// ... .jpg) to a thumbnail image, I'd like to have that image aligned to the left of the 'name' element.

I tried using someting like the following, but no luck. the information I've found online hasnt really helped much with understanding itemrenderers (which is what I think I need to use).

<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
        creationComplete="list1_creationCompleteHandler(event)" labelField="Itemname">
     <s:AsyncListView list="{getDataResult.lastResult}"/>
             <mx:itemRenderer>
                 <mx:Component> 
                     <mx:Label text="Itemname"/>
                     <mx:Image source="ItemImageURL"/>
                 </mx:Component>
             </mx:itemRenderer>
</s:List>

is there some way to do this WITHOUT itemrenderers? or is that the only way to go? was my attempt close at all to the proper way to implement a thumbnail image in the list component? Thanks for any help someone can provide here.

Answer 1

The code you provided mixes Spark and MX Components in such a way that I would expect compiler errors. For starters, you have these issues:

• The mx:itemRenderer is the syntax used to define a property on a component. So, it is used to define the value for the itemRender property on the s:List component. This will cause a compiler error because the namespaces are different. You should specify s:itemRenderer instead.
• The mx:Component is used to define a new in-line component. However, your namespace is wrong. With Flex 4.6 you should specify the fx namespace, not the mx namespace.
• There are two components listed as children to the mx:Component tag, where their should only be 1. The solution in the MX world to this would be to wrap it the label and image in a container. In the Spark world, the itemRenderer must extend the ItemRenderer class.
• For the text and source you are specifying string literals; not variables in your data element.

You have the right idea; but the wrong execution. Read this information on creating itemRenderers.

I would rework your code like this:

<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
        creationComplete="list1_creationCompleteHandler(event)" >
     <s:AsyncListView list="{getDataResult.lastResult}"/>
             <s:itemRenderer>
                 <fx:Component> 
                    <s:ItemRenderer dataChange="onDataChange()">
                      <fx:Script>
                        <![CDATA[
                          protected function onDataChange():void{
                             labelDisplay.text =data.Itemname
                             imageDisplay.source = data.ItemImageURL
                          }
                        ]]>
                      </fx:Script>
                      <s:HGroup>
                       <s:Label id="labelDisplay" />
                       <s:Image id="imageDisplay" />
                      </s:HGroup>
                    </s:ItemRenderer>
                 </fx:Component>
             </s:itemRenderer>
</s:List>

This is untested code I wrote the browser; but it should demonstrate the correct approach. The namespaces are correct. There is a single component defined as the itemRenderer and it extends the ItemRenderer class. The displayed items should update when the itemRenderer data changes, such as when you scroll in the list. And the two items are positioned so that they do not display on top of each other.