Mobile Flex: View Data

From the previous post you should know how to navigate from 1 view to the next using the ViewNavigator.  Now, you want some data in that view right? No problem, this is where the View object’s ‘data‘ property comes into play. Setting the data property is accomplished by passing the data object, in addition to the View’s class name, into the pushView() method on the navigator object.

Example:

[as3]navigator.pushView(MyNewView, dataObject);[/as3]

This effectively calls the setting for the data property of the new View (MyNewView) object that is created.

Managing View Data

You could work with the data property on the View object directly. For instance, if the data object passed into the View via the pushView() method was a simple user object that contained a name property, you could bind the name property to a label control.

Example:

[xml]<s:Label id="name_lbl" text="{data.name}" />[/xml]

Overriding the Data Property Setter

Usually though, you’d want to override the setter for the data property. Then you can type your object and work with it in a better manner.

Example:

[as3]protected var user:User;
override public function set data(value:Object):void
{
super.data = value;
user = value as User;
}[/as3]

[xml]<s:Label text="{user.name}" />[/xml]

So now we’ve got the data in the view. The next step is to manage the state of each view. With mobile apps you can’t count on the view staying around, so we’ll need to keep a tight control on the state of each view. That way we can bring the user right back where they expect to be when they come back to the app after a call for example. In the next post we’ll look into how to do this. Stay tuned.

This article has also been posted on the Realeyes website.

Mobile Flex: ViewNavigator Basics

Flex 4.5 provides some pretty slick updates and enhancements, the least of which is the of Mobile components and the ability to slam out some pretty nice mobile apps easily. The first thing I’d like to talk about is a new concept, the ViewNavigator. The ViewNavigator provides some pretty intense functionality such as view management.

What is the ViewNavigator?

The ViewNavigator keeps track of your views. It does this by keeping your views in a list.  To add a new view you ‘push’ the view into the list, to remove a view you can ‘pop’ a view out of the list. You can think of it as a stack – first in, last out – and the last view in is the visible view.

Pushing a View into ViewNavigator's 'stack'
Popping a view out of the ViewNavigator's 'stack'

Using the ViewNavigator

Using the view navigator is a pretty straight forward process of capturing a user interaction, such as a button click, then pushing the new View into the ViewNavigator’s stack.

For example, let’s pretend that you have a new Flex mobile project. The default view of that project contains a button, that when clicked should display another view named MyNewView.  MyNewView also contains a button, that when clicked returns you to the the home view.

Home View Component

In the Home View component all you really need to worry about the the click handler on the button:

[xml]<s:Button id="next_btn"
label="NEXT"
width="100%"
click="navigtor.pushView(MyNewView)" />[/xml]

The click handler calls the pushView() method on ‘navigator‘, a property available from the View class, passing it the class name of the View that you want to display. We’ll cover getting data into that view and transitions in other posts.  The creation of the new View & default transition are all handled by the  framework.

MyNewView Component

The MyNewView View component is basically the same thing:

[xml]<s:Button id="back_btn"
label="BACK"
width="100%"
click="navigtor.popView()" />[/xml]

You call popView() on the ‘navigator‘ property which removes the view from the stack displaying the Home view again.

Here is a quick screen cast of an application using similar code:
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://thekuroko.com/wp-content/uploads/2011/03/ViewNavigatorSample.swf” width=”485″ height=”785″ targetclass=”flashmovie”]Get Adobe Flash player

[/kml_flashembed]

This article has also been posted on the Realeyes website.