Access data in custom component.

Question

Hi Everyone,
                I am new to Flex soo 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 followiing this video tutorial.
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 be source="{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.
Thanks
Bilal Ahmad

Answer 1

Hello Ravi,
one option is the create a public attribute to share your value note data with other components.
Another option is a function group with two function modules "SET_" and "GET_".
I´m sure one of the webclient UI Gurus here in this forum could share less "dirty" ways with you.
Kind regards
Manfred