Access data in custom component in Flex - apache-flex

Question

I am new to Flex so pardon me if my questions are quite basic. I have searched a lot before posting here, might be I was not looking in the right direction. Please redirect me to the path that leads to the solution of the problem. I really appreciate any help that I can get.
I'm following this video tutorial. (I was creating Mobile Project not a simple Flex project like in video)
http://www.gotoandlearn.com/play.php?id=100
All was going fine, until the tutor wanted to add custom component in the application. He added the HBox which I couldn't find in Flash Builder 4.6 so I added HGroup instead in my new component. Now when I want to use the data that was fetched in the parent component in custom component it gives me error. Here is the code and their file names.
File: SearchHomeView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Twitter Search">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService result="onResult(event)" id="service" url="http://search.twitter.com/search.atom?q=adobe">
</s:HTTPService>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.utils.flash_proxy;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var ac:ArrayCollection;
private function onResult(event:ResultEvent):void
{
ac = event.result.feed.entry as ArrayCollection;
trace(data);
trace(ac);
}
private function doSearch(event:MouseEvent):void
{
//service.url = "http://search.twitter.com/search.atom?q=" + tearch.text;
service.url = "http://search.twitter.com/search.atom?q=adobe";
service.send();
}
]]>
</fx:Script>
<s:TextInput x="25" y="26" width="146" id="tearch"/>
<s:Button x="224" y="26" height="33" label="Search" click="doSearch(event)" />
<s:List dataProvider="{ac}" itemRenderer="tweet" x="25" y="92" width="274" height="278"></s:List>
</s:View>
File: tweet.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Image width="50" height="50" source="{parentDocument.data.link.getItemAt('1').href}">
</s:Image>
<s:TextBase width="100%" text="">
</s:TextBase>
</s:HGroup>
When I use source to be source="{parentDocument.data.link.getItemAt('1').href} ... it removes the error, but displays nothing on the resulting app.
When I use source to besource="{data.link[1].href} ... it gives the error,
Multiple markers at this line:
-1120: Access of undefined property data.
-parentDocument
What needs to be done to use the item renderer right in custom component ? Please tell me the solution to it... I'm stuck on it for quite a few time.

Answer 1

Your component Tweet.mxml should extend an ItemRenderer.
In Flex 3 many components could be used as item renderers, that old (Flex 3) HBox component you saw in the video works as an item renderer b/c it has a data property.
As part of Flex 4's "pay as you go" approach, the container classes (Group, HGroup, etc) do not support being used directly as item renderers. As a result HGroup doesn't have a data property.
Try making Tweet.mxml look something like this:
<?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" width="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout />
</s:layout>
<!-- Typically, the dataProvider of your List is an array of objects of the same
type. So each item renderer that is on screen has it's data property populated
with one of these items. You can then craft an MXML document like this that
uses the properties of your array element. You're going to need to use the
right expression that finds the image source in the data item. If you really
want to be rendering the array data.link, pass that data w/an ArrayCollection
to the list instead ... it's hard to advise here w/out knowing what your data
looks like. -->
<s:Image width="50" height="50" source="{data.link.getItemAt('1').href}" />
<s:StyleableTextField width="100%" text="" />
</s:ItemRenderer>
The changes I'm making are:
extend ItemRenderer
replace HGroup's layout by using the HorizontalLayout in the renderer
using the data property of the renderer for the source of the image (use the data property to populate all of the dynamic parts of the renderer (like the text field)
using a StyleableTextField, optimized text for mobile

Answer 2

In your onResult event handler - be careful to check that you are in fact assigning all items into the arraycollection - If feed.entry is not explicitly an ArrayCollection you will need to iterate the list (assuming this an xmllist because it looks like an RSS feed)...
So instead:
protected function onResult(event:ResultEvent):void
{
if (!ac) ac = new ArrayCollection();
for each (var entry:XML in event.result.feed..entry)
{
ac.addItem(entry);
}
}
As for the ItemRenderer, you have a couple of different options...
ItemRenderer - as suggested by #Sunil, this is the 'base' class of renderers to use in spark based lists.
DataGroup - this is similar to a Group where you specify a layout, but it creates "renderers" - anything with a 'data' property using a dataprovider, the key to this one though is there is no virtualization it just creates all of them.
It gets more complicated than this when you switch to a DataGrid...