Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Sidebar" sidebar. Defaulting to "sidebar-1". Manually set the id to "sidebar-1" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4139

Notice: The called constructor method for WP_Widget in mts_Widget_Tabs is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3894

Notice: The called constructor method for WP_Widget in mts_ad_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3894

Notice: The called constructor method for WP_Widget in mts_ad_300_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3894

Notice: The called constructor method for WP_Widget in swt_tweet_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3894

Notice: The called constructor method for WP_Widget in Facebook_Like_Widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3894
Mobile Flex: ViewNavigator Basics

Mobile Flex: ViewNavigator Basics


Notice: Undefined index: mts_posttop_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 19

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.


Notice: Undefined variable: defaults in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/functions.php on line 340

Notice: Undefined index: mts_postend_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 28

Notice: WP_Query was called with an argument that is deprecated since version 3.1.0! caller_get_posts is deprecated. Use ignore_sticky_posts instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4023

Leave a Reply

Your email address will not be published. Required fields are marked *