Flex: letting application know when data is ready

[Danielle R]

Hi all,
I'm struggling with a Flex 4.6 application that has to notify the main application when data is parsed. I think I should be using a custom event but I don't quite know where to start. At the moment I have three files in my project:
- Bevolkingspiramide.mxml, the main app
- DataProxy.as, a class to parse data from a loaded csv file
- PopulationSlice.as, a model/value object for formatting the data from the csv file

Bevolkingspiramide.mxml

<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="700" minHeight="700"
               creationComplete="init()" pageTitle="Bevolkingspiramide">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            
            import proxy.DataProxy;
            
            private var myProxy:DataProxy = new DataProxy();
            [Bindable] private var y1996:ArrayCollection = new ArrayCollection();
            
// load csv data
            protected function init():void{
                bevolkingService.send();
            }
            
            
            
            protected function httpService_faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.faultString,"Something went wrong");                
            }
            // send loaded data to parser
            protected function bevolkingServiceResultHandler(event:ResultEvent):void
            {
                myProxy.handleData(bevolkingService.lastResult.toString());
            }
            // make parsed data available in mxml
            protected function getYear(year:int):ArrayCollection{
                trace("getYear"); // function is called
                trace(myProxy.populationMen.getItemAt(0).data96);
// this is empty, not yet there
                for each(var value:Object in myProxy.populationMen){
                    trace("popmen len: "+myProxy.populationMen);
                    y1996.addItem(value.data96);
                }
                return y1996;
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:HTTPService id="bevolkingService" 
                       url="data/bevolking.csv"
                       fault="httpService_faultHandler(event)" 
                       result="bevolkingServiceResultHandler(event)"/>
    </fx:Declarations>
    <s:Form x="136" y="59">
// I can access this data
        <s:FormItem label="{myProxy.populationMen.getItemAt(0).data96}">
            
            <s:TextArea id="output" text="{bevolkingService.lastResult}"/>
        </s:FormItem>
        <s:FormItem label="">
// some dummy visualisation for testing, stays empty
            <s:DropDownList dataProvider="{getYear(1996)}"></s:DropDownList>
        </s:FormItem>
    </s:Form>
</s:Application> 

DataProxy.as:

package proxy
{
    import valueObjects.PopulationSlice;

    public class DataProxy
    {
        import mx.collections.ArrayCollection;
        
        private static const FIELD_DELIMITER:String = ';';
        
        [Bindable] public var populationMen:ArrayCollection = new ArrayCollection();
        
        public function DataProxy()
        {}
        
        public function handleData(data:String):void{
            var lines:Array = data.split("\n");
            trace("len "+lines.length);
            for (var i:int=0; i < lines.length; i++) {
                var values:Array = lines[i].split(FIELD_DELIMITER);
                // create population object
                var people:PopulationSlice = new PopulationSlice();
                people.data96 = values[0];
                people.data01 = values[1];
                people.data06 = values[2];
                populationMen.addItem(people);
            }
        }    
    }
} 

PopulationSlice.as:

package valueObjects
{
    [Bindable]
    public class PopulationSlice
    {
        public var data96:int;
        public var data01:int;
        public var data06:int;
        
        public function PopulationSlice()
        {
        }
    }
} 

My question mainly is: what is the best way to make the data formatted the populationMen ArrayCollection available in the main app. Why isn't it visibly when I try to use it as a dataprovider in the app by calling it with this function: getYear(1996)?

Any help to get me on the way is greatly appreciated.

[cancerinform]

First of all, have you tested if this function is called?
result="bevolkingServiceResultHandler(event)"

[Danielle R]

Sure the data loads. I can create the DataProxy.populationMen ArrayCollection is created. I can access it in the mxml file for example here:
<s:FormItem label="{myProxy.populationMen.getItemAt(0).data96} ">

But not in the function getYear in that same mxml file which I want to use to work with the data. This function is called and trace("len "+lines.length); from the DataProxy is printed but only AFTER the trace("getYear"); statement in the getYear function. Which tells me that I try to access data before it is there. But how can I know it's there? How can I communicate that from the DataProxy class?
Thanks for your help.

[cancerinform]

Here is what you can do. Change DataProxy.as in the following way:

import flash.events.Event;
import flash.events.EventDispatcher;
import spark.components.DropDownList;
public class DataProxy extends EventDispatcher

In the handleEvent function you add this:
public function handleData(data:String, mainropDownList):void
{
var lines:Array = data.split("\n");
trace("len "+lines.length);
for (var i:int=0; i < lines.length; i++)
{
var values:Array = lines[i].split(FIELD_DELIMITER);
// create population object
var people:PopulationSlice = new PopulationSlice();
people.data96 = values[0];
people.data01 = values[1];
people.data06 = values[2];
populationMen.addItem(people);
}
if(main != null)
{
main.dispatchEvent(new Event(Event.ACTIVATE));
}
}

In your main application you make the following changes:
protected function getTheResult(event:Event):void
{
trace("GOT IT!!");
myList.dataProvider = getYear(1996);
}
protected function completeHandler(event:Event):void
{
var listropDownList = event.currentTarget as DropDownList;
list.addEventListener(Event.ACTIVATE, getTheResult);
}

<sropDownList id="myList" creationComplete="completeHandler(event)"></sropDownList>

This is not the best OOP practice - using a framework like MATE is better - but it works in the correct order.

[Danielle R]

Thanks very much cancerinform. MATE looks like a very robust solution. After continuing with the script I realised I don't need to do any calculations in the main application but I can pass the data on to for example an itemrenderer.