Avg. Rating 5.0

Problem

I want to pass data between views in my mobile ViewNavigatorApplication as the user navigates around my mobile application.

Solution

In the following example I first pass data to a new view when I push it, and I return data when popping a view.

Detailed explanation

Pass data to the next view

To pass data to the next view you need to provide that data when calling the pushView method on the navigator. In the following code I show the "HomeView", this is the first view displayed by the mobile application. The user can enter text into the TextInput and press the Next View button. The button handler passes the text from the TextInput to the pushView method as the second parameter.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark"
add="home_addHandler(event)"
title="HomeView">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function nav_clickHandler(event:MouseEvent):void
{
navigator.pushView(NextView, input.text);
}

protected function home_addHandler(event:FlexEvent):void
{
if(!navigator.poppedViewReturnedObject) return; //Make sure there is something to get
fromNextView.text = navigator.poppedViewReturnedObject.object.toString();
}

]]>
</fx:Script>
<s:TextInput id="input"/>
<s:Button id="nav" label="Next View" click="nav_clickHandler(event)" />
<s:Label id="fromNextView"/>
</s:View>

In the following code I show the "NextView", this is the view that is pushed in the previous step. In this view we use data binding to bind the fromHomeView Label to the data property. The data property will automatically be populated with the data that I passed to the pushView method.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" title="NextView">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
protected function nav_clickHandler(event:MouseEvent):void
{
navigator.popView();
}

override public function createReturnObject():Object
{
return toHomeView.text;
}
]]>
</fx:Script>
<s:Label id="fromHomeView" text="{data}" />
<s:TextInput id="toHomeView" />
<s:Button id="nav" label="Back" click="nav_clickHandler(event)"/>
</s:View>

Pass data back

Now when a user navigates from "Next View" back to the previous view I want to pass some data again. This time I override the createReturnObject method in the view and return the data. Then in the "Home View" I use a handler for the add event of the view, where I can check the poppedViewReturnedObject property of the navigator. I first check to make sure there is some data there, and if so I set it to the fromNextView Label's text property.

ViewDataPassing.zip
[Project file]

+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes