Adobe Flex : how to have data shared between 3 tabs on a TabNavigator

Question

I have a tabbed dialog that has 4 tabs. The parent component is an mx:TabNavigator and each of the tab's views are custom MXML components inside an s:NavigatorContent. The data for 3 of the tabs has to be sent as one unit to a back end service. I'm trying to work out the best way to have the 3 tabs access the data that's to be sent down as one unit. I currently have one .mxml file that defines the top level mx:TabNavigator with each of the 4 tabs representing the s:NavigatorContent defined in it's own separate.mxml file to keep the file sizes fairly short. My current approach is to have each of the tabs load their data from the back end service in their creationComplete handlers and store it in a common class for the data model shared by the 3 tabs. This solution is OK except:

1. The creation complete handler for the first tab is called on application startup even though it's not the first visible component (i.e. there are other parts of the UI that the user sees first). I'd prefer to have true lazy loading where the data is not loaded until the tab becomes visible to the user.
2. If the user edits data on the first tab, then navigates to the second tab for the first time without hitting the apply button, changes made in the first tab are lost, because the creation complete handler of the 2nd tab will load the data model shared by the 3 tabs.

What I ideally want is:

1. True lazy loading; data is not loaded until the user clicks on a tab and it becomes visible.
2. Have it so that when the user hits apply on any of the 3 tabs the current entries on each of the 3 tabs is sent down to the back end service.

Thanks very much if anyone can advise on this. I can explain in further detail if needed.

Answer 1

I'm trying to work out the best way to have the 3 tabs access the data that's to be sent down as one unit.

Best is always subjective. The easiest way is going to be to create a single variable for your shared data, and pass that instance into each relevant tab.

In some cases you may store the data in some central location, and the use Dependency Injection to inject that data into the relevant tab components that need it. Dependency Injection is implemented by a bunch of Flex frameworks, such as RobotLegs or Swiz.

An alternate option is to use a Singleton approach or static variables on a class to share the data between your multiple tabs.

My current approach is to have each of the tabs load their data from the back end service in their creationComplete handlers

Why use creationComplete? The creationComplete event is fired after the component has completed it's layout routines and layout routines of it's children, and then everything is ready to use. I assume the act of loading more data, will force a lot of your components to have to go through their rendering process again. You may consider moving this into an earlier spot during the lifecycle, such as initialize or preinitialize.

1) The creation complete handler for the first tab is called on application startup even though it's not the first visible component (i.e. there are other parts of the UI that the user sees first). I'd prefer to have true lazy loading where the data is not loaded until the tab becomes visible to the user.

This would be expected behavior, based on the way that TabNavigators initialize. You can look at creationPolicy for more information. You can rewrite your 'load data' method to operate on the show method of the component, perhaps?

2) If the user edits data on the first tab, then navigates to the second tab for the first time without hitting the apply button, changes made in the first tab are lost, because the creation complete handler of the 2nd tab will load the data model shared by the 3 tabs.

You can force a save of the data on the hide event of the component. Or possibly on the change event o the TabNavigator.