Adobe Air: need help transferring data from sqlite to components

Question

I have successfully received data from sqlite. I see that the data appear in trace function, however I am having a problem with displaying these data correctly. I think it has something to do with binding objects. I must be missing something somewhere, so please correct where I am wrong. Also, this question is actually a continuation of Adobe Air: drag & drop grouped components

Anyway, here is my ItemRenderer:

<?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">

    <fx:Script>

        [Bindable]
        public var tree:TreeClass_Full;

        [Bindable]
        public var dataText:String = "empty";

        public function setTest():void{
            resultTextArea.text = "AAA";
        }
    </fx:Script>
    <s:HGroup x="5" y="5" width="350" height="150" horizontalAlign="center" verticalAlign="middle">
        <mx:Image id = "resultImage" width="100" height="100"/>
        <s:TextArea id="resultTextArea" height="141" editable="false"
                    text = "{tree.Common_Name}"/>
    </s:HGroup> 
</s:ItemRenderer>

Here is the function which will be invoked after sqlite query is successful:

[Bindable]
public var dragDropLeft:ArrayCollection = new ArrayCollection();
[Bindable]
public var dragDropRight:ArrayCollection = new ArrayCollection();

protected function ResultFill():void
{
    // TODO Auto-generated method stub
    if (arr != null){
        for (var i:int = 0; i < arr.length; ++i){
            var tc:TreeClass_Full = arr[i];
            var rr:resultRenderer = new resultRenderer();
            rr.tree = tc;
            trace("--Common Name:" + tc.Common_Name);               

            rr.dataText = tc.Common_Name;
            rr.resultImage.source = tc.Picture1;
            rr.resultTextArea.text = tc.Common_Name;

            trace("----Common Name:" + rr.resultTextArea.text);

            dragDropLeft.addItem(rr);

        }
    }
}

After the sqlite query is successful, the above function will be invoked. This is where I put in the information of my Object (my ItemClass from sqlite) into my ItemRenderer.

My ItemRenderer has two components: Image and TextArea. sqlite contains the respective image, which will be used for Image. For TextArea, all the displayable text from the database will be put there - meaning strings from multiple fields of the database will all be put together there. (but for now, I just want only one field in there, which is Common_Name)

After that, I put these ItemRenderers into my list (dragDropLeft, in this case). However, the data does not appear on the program. Yet, trace function outputs the text correctly.

I've tried a few things and I left some of the codes intact, and all of them yield the same result: the text in the TextArea does not change at all. What have I forget here?

UPDATE:

This code here covers the place that I used my Bindable ArrayCollection:

        <s:HGroup width="100%" height="85%" verticalAlign="middle">
            <s:List dataProvider="{dragDropLeft}" width = "45%" height = "95%"
                    dragEnabled="true" dragMoveEnabled="true" dropEnabled="true"
                    itemRenderer="resultRenderer"/>
            <s:List dataProvider="{dragDropRight}" width = "45%" height = "95%" 
                    dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" 
                    itemRenderer="resultRenderer"/>
        </s:HGroup>

Basically, I tried to manipulate my ItemRenderer on my own by giving it values from sqlite, but from one of the commentors, it seems this is not correct. So how do we do this? How can we send in the data to the ItemRenderer objects that will be added in the list?

Answer 1

As I said in the comments: List is not a container. You cannot just add children to it. You should add data objects to its dataProvider. Basically the whole ResultFill method should be reduced to this:

dragDropLeft.dataProvider = new ArrayCollection(arr);

The ItemRenderers that represent this data will be created internally by the List component. Inside your custom ItemRenderer you can now access this data through the data property, so it would become something like this:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                autoDrawBackground="true">

     <s:HGroup x="5" y="5" width="350" height="150" 
              horizontalAlign="center" verticalAlign="middle">
         <s:Image source="{data.Picture1}" width="100" height="100"/>
        <s:TextArea text="{data.Common_Name}" height="141" editable="false" />
     </s:HGroup> 
</s:ItemRenderer>

Note that I am assuming that the properties of TreeClass_Full are bindable for this example.