Flex - Passing data into tabbed views

Question

I have a project that has 4 views where I'm using the tabBar with viewStack/NavigatorContent. I have a couple HTTPServices set up gathering the XML and converting to Bindable ArrayCollections. When and how is the best way to pass that data to such things as charts, dataGrids, etc. that aren't seen until the user clicks a tab? Right now I have each item set up with creationComplete functions that pass it then. Although it seems to be working, is this the best way, or is there something better and maybe even quicker?

Thanks, Mark

Answer 1

The best way is using data binding. Say you have a main container which contains ViewStack witch components representing tabs content. So you should have [Bindable] properties for data in a main container like the following:

[Bindable]
private var chartData:ArrayCollection;

[Bindable]
private var dataGridData:ArrayCollection;

etc.

So for the component, containing chart, you should populate chart data with data binding:

<ViewStack>
    …
    <MyChartsTab chartData="{chartData}" />
    …
</ViewStack>

And of course you should introduce the same chartData field (make sure it is public) in your MyChartsTab component. Your charts there can be populated with data binding too.

So after getting data you just fill your fields in main component and data binding performs the rest job without any care of initialization from your side.

Answer 2

When creating your views, make sure you allow a public variable (like 'dataProvider') where you can bind the data it needs. Like this:

<mx:ViewStack>
        <s:NavigatorContent>
            <SomeComponent dataProvider="{someData}" />
        </s:NavigatorContent>
        <s:NavigatorContent>
            <SomeComponent2 dataProvider="{someData}" />
        </s:NavigatorContent>
    </mx:ViewStack>

And within the custom component you'd have:

private var _data:Object; // use strong typing if possible

public function set dataProvider(value:Object):void // use strong typing if possible
{
    this._data = value;
}

public function get dataProvider():Object
{
   return this._data;
}