Preparing MXML files to be Browser Manager aware

Recently, we have started using the Deep Linking features introduced in Adobe Flex. It has worked out fairly well for what we needed it for, but there was a fairly persistent issue with component initialization. This post will describe the issue and present a proper way of making components aware of the initial state.


To give an example,

Let’s say we have a photo component that displays a list of questions in a drop down. Using deep linking, we can assign a particular question by invoking something like view=#questions;selected=questionId.

We kept running into a null pointer exception when trying to set this questionid. On closer inspection, we discovered two scenarios:

1. The component has been initialized, the MXML component will need to fire an event to select the question.

2. The component hasn’t been initialized. When the event tries to get to the selected question, the question dropdown resolves to nothing, and throws the error.

a simple example

The container calls this

<components:questionSelector selectedId="handleQuestionSelection()"/>

and the questionSelector will have something like


<HBox initialize=init()>
<mx:Script>
init(){ initiate list }
</mx:Script>
<mx:combobox click="fireEvent(selected)"> </mx:combobox>
</HBox>

To make this component compatible with the browserManager, we had to add this:


<HBox initialize=init()>
<mx:Script>
init(){
initiate list
if( _selectedQuestion!=null ) {

selectQuestion( _selectedQuestion )

}

}
public function set selectedQuestion( int question ) : void{
_selectedQuestion = question;
}

public function get selectedQuestion( ) : int{

_selectedQuestion = int;
selectQuestion( _selectedQuestion );
}

</mx:Script>
<mx:combobox click="fireEvent(selected)"> </mx:combobox>
</HBox>

What we did here was simply to include a new setter and getter method for the component, allowing it to keep a state of the currently selected value, in a real implementation, this value would have to be Bindable and connect to the different events, but this will allow your BrowserManager to process the fragment by simply setting the currentQuestion on the component, and it will update whenever that component is drawn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s