How to transfer data between ViewNavigators in Flash Builder 4.5 Burrito

Question

I give it a try, and it happens that it’s hard for me to understand how to transfer data between ViewNavigator in TabbedMobileApplication.

<s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Declarations> </fx:Declarations> <s:ViewNavigator id="nav1" label="Nav1" firstView="views.Nav1Home" width="100%" height="100%"/> <s:ViewNavigator id="nav2" label="Nav2" firstView="views.Nav2Home" width="100%" height="100%"/> </s:TabbedMobileApplication> 

How can I transfer data between nav1 and nav2? I know how to do this between types of navigation.

Thanks B.

Answer 1

If I am missing something here, then you will want to do this and the script block here and listen to your ViewNavigators for events. Then, in the event handler, call the public functions on the target ViewNav.

 <s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()"> <fx:Declarations> </fx:Declarations> <fx:script><![CDATA[ private function init():void{ nav1.addEvenListener(CustomEvent.DATA, onData); } private function onData(ev:CustomEvent):void{ nav2.setData(ev.data); } ]]></fx:script> <s:ViewNavigator id="nav1" label="Nav1" firstView="views.Nav1Home" width="100%" height="100%"/> <s:ViewNavigator id="nav2" label="Nav2" firstView="views.Nav2Home" width="100%" height="100%"/> </s:TabbedMobileApplication> 

Answer 2

I would like to add that I prefer a more loosely coupled communication mechanism over what has already been discussed. I prefer some type of event aggregation system when individual components send messages without each other, knowing about others.

This type of event system is built into lightweight frameworks such as Parsely and Robot Legs.

This is basically a stylish thing, but in my experience, the more we tightly connect our messages, the more we pay for it along the way.

Food for thought, I suppose. :)

Answer 3

An easy way is to add your data object to the view using ViewNavigator. Then, in children's views, use this to get data:

 this.parentDocument.yourDataObject 

Answer 4

TJ already understood. Just send the final example if someone gets the same problem:

TestApplication.mxml

 <s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()"> <fx:Declarations> </fx:Declarations> <fx:Script> <![CDATA[ private function init():void{ nav1.activeView.addEventListener(CustomEvent.DATA, onData); nav2.activeView.addEventListener(CustomEvent.DATA, onData); } private function onData(ev:CustomEvent):void{ nav1.activeView.data = ev.data; nav2.activeView.data = ev.data; } ]]> </fx:Script> <s:ViewNavigator id="nav1" label="Nav1" firstView="views.Nav1Home" width="100%" height="100%"/> <s:ViewNavigator id="nav2" label="Nav2" firstView="views.Nav2Home" width="100%" height="100%"/> 

CustomEvent.as

 package { import flash.events.Event; public class CustomEvent extends Event { public static var DATA:String = "DATA_EVENT"; public var data:Object = null; public function CustomEvent(data:Object, type:String, bubbles:Boolean=false, cancelable:Boolean=false) { super(type, bubbles, cancelable); this.data = data; } } 

}

views.Nav1Home.mxml

 <?xml version="1.0" encoding="utf-8"?> 

 <fx:Declarations> <!-- Place non-visual elements (eg, services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ private function init(): void { this.addEventListener(FlexEvent.REMOVING, removedHandler); } private function removedHandler(event:Event):void { trace("Removed from stage: " + data); this.dispatchEvent(new CustomEvent("Data from Nav1 Event", CustomEvent.DATA)); } ]]> </fx:Script> 

views.Nav2Home.mxml

 <?xml version="1.0" encoding="utf-8"?> 

 <fx:Declarations> <!-- Place non-visual elements (eg, services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ private function init(): void { this.addEventListener(FlexEvent.REMOVING, removedHandler); } private function removedHandler(event:Event):void { trace("Removed from stage: " + data); this.dispatchEvent(new CustomEvent("Data from Nav2 Event", CustomEvent.DATA)); } ]]> </fx:Script> 

Answer 5

the easiest way is if using viewNavigator to switch between views simply passes the data object to the view:

in View1:

 private function view1_clickHandler(event:Event):void { var trans:FlipViewTransition = new FlipViewTransition(); var obj:Object = new Object(); obj.showPrevBtn = false; FlexGlobals.topLevelApplication.tabNavigator.pushView(View2, obj, null, trans); } 

in View2:

 protected function view2_addedToStageHandler(event:Event):void { if(prevBtn != null && this.data != null && this.data.showPrevBtn === true) { prevBtn.visible = true; } else if(prevBtn != null && this.data != null && this.data.showPrevBtn === false) { prevBtn.visible = false; } }