Using the FlexBrowser

Why FlexBrowser ?

A common problem met by flex developers is browsing within an application. As the number of views in an application and their interweaving increase, browsing between views using navigator containers becomes harder and harder to maintain :

Flex framework provides navigator containers (ViewStack, TabNavigator, etc) to be able to browse between from a view to another. The only way to browse to a given view is to use references to containers and components that compose the ActionScript path of the target view, resulting in hard-coded references like :

parent.myViewStack.selectedIndex = 1;
var myIntermediateContainer : Container = Container(parent.myViewStack.selectedItem);
var myView : Container = Container( myIntermediateContainer.mySecondLevelStack );

Moreover, this kind of code may sometimes result in “null reference” errors, due to invalidation and deferred instantiation.

FlexBrowser solves those problems by providing a navigation-flow based on URIs, just like in HTTP browsing.


The FlexBrowser is a part of the Toolbox package, to use it you should import :

  • servebox-commons
  • servebox-foundry
  • servebox-toolbox

FlexBrowser is designed to work with views like defined byt the Foundry. The org.servebox.foundry.view package contains simple implementations of the IView interface such as VBoxView, HBoxView, CanvasView…

Using the FlexBrowser

IView implementation

To be found by the FlexBrowser, your views need to implement the IView interface. You can use any of the basic IView implementations provided by the ActionScript Foundry as the base class, depending on your needs. All the containers provided by the Flex framework have been extended.

Absolute browsing : the URI mechanism

The reference to a particular view is obtained using a predefined URI scheme :

  • the root of your application corresponds to the flex:// URI, each of the other components is identified by its id property,
  • the navigator containers, such as ViewStack or TabNavigator, should be referenced into the URI using their id properties
  • the “$” character is used to select a child view of a navigator container
  • the “#” character is used to change the state of a particular view
  • the “/” character is used to get a child view or navigator container of a specific view.

Consider the following MXML structure, the top element is a ViewStack with “mainViewStack” as its id :

<span class="sc2"><mx:Application
		<views:SimpleView id="simpleView" width="100%" height="100%" label="id : simpleView"/>
		<views:WithTwoStatesView id="withTwoStatesView" width="100%" height="100%" label="id: withTwoStatesView"/>
	</mx:ViewStack></span><span class="sc2">

Each of the two views above can be attained using one of the following URIs :

  • flex://mainViewStack$simpleView
  • flex://mainViewStack$withTwoStatesView

Please note that you do not have to reference each container on the path, only the navigator containers and views (classes implementing the IView interface).

View states

Another useful feature of the FlewBrowser is the way to browse to a specific view state. The pattern to obtain a particular state is “#”, followed by the state name (“#default” for the default view state).

var myURI : String = "flex://stack$loginView#FAILED_STATE";


To browse to a specific view, you may use the absoluteBrowse method of the FlexBrowser class.

Relative browsing

The FlexBrowser supports relative browsing, so you do not have everytime to define the whole path to attain a particular view.

// from SimpleView
protected function attainMyNeighbour() : void
    // "this" allows the FlexBrowser to know how to evaluate the relative path
    FlexBrowser.getInstance().browse( this, "../mainViewStack$withTwoStatesView" );

Good practice : using a subcontroller

Most of the times, it is a good idea to delegate the management of the browsing to a particular Controller instance. Learn more about the Controller participant of the MVC in “The MVC Framework“.

We may create a BrowsingSubController containing a reference of the URI corresponding to particular views (in specific states) :

public static const LOGIN : String = "flex://stack$loginView#default";
public static const LOGIN_FAILED  : String = "flex://stack$loginView#FAILED_STATE";
public static const CONTENT : String = "flex://stack$contentView";
public static const PRICE_LIST : String = "flex://stack$contentView#CONTEXTHELP/stack$priceListView";

The we can add the methods used as shortcuts to navigate into our application :

public function attainLoginView( ref : IView = null ) : void
    FlexBrowser.getInstance().browse( ref, LOGIN_VIEW );
public function attainContentView( ref : IView = null ) : void
    FlexBrowser.getInstance().browse( ref, CONTENT_VIEW );

A FlexBrowser sample

Previous Step

Next Step

Friday, November 21st, 2008 No Comments by Jeff Mathiot