Extending Flash Catalyst: A Smart Back Button

Often when developing a prototype for an application you might need to include a screen that is accessed by several different other screens. This might be a Settings screen or an About screen. The difficulty comes in trying to navigate back to the screen the user came from. Flash Catalyst does not have a method of storing the previous state.

If you have enough available states available, you could clone the screen, then attach different interactions to each clone to enable the back button to properly work, but this is far from ideal for many obvious reasons.

Now with round-tripping with Flash Builder available in Flash Catalyst CS5.5, it is quite easy to add the little bit of ActionScript to the project. This post will walk you through the steps needed to do so.

The sample Flash Catalyst project is a simple 5 screen design. I would not recommend building a site like this with Flash Catalyst, but it was an easy demo to construct. The basic outline is a menu screen, 3 content screens, and an About screen. You can download the FXP here, or see the working demo.

Project Screens

Launch Flash Builder, then select Project > Flash Catalyst > Import Flash Catalyst Project, then select the Nav Demo.fxp file. Once the project has been imported into Flash Builder, you can double-click the project folder in the Package Explorer (located on the left side of the interface), Continue double-clicking until you see the Main.mxml file. Open this file in the editor.

Package Contents

Near the top of this file, you will see <fx:Script>. This is the section of the file that we will be editing.

You will see a series of functions that look basically the same:

     protected function button_clickHandler():void
     {
            currentState='mercury';
     }

I would recommend renaming them so they have more meaningful names.

button_clickHandler -> goMercuryHandler

button_clickHandler_1 -> goGeminiHandler

button_clickHandler_2 -> goApolloHandler

button_clickHandler_3 -> goAboutHandler

button_clickHandler_4 -> goHomeHandler

If you look at what each handler does, it is all the same instruction of setting the currentState attribute to one of the defined states of the application. What we need to do is save the currentState of the application BEFORE we change it to our About screen. To do this we need to add a variable. Just before the first function, add the following bit of code:

     protected var theReturnState:String;

This creates a variable that accepts text strings as its variable type. This is where we will store our return state.

Now let’s modify the goAboutHandler function to actually save this data. Add this one line of code to the function:

     theReturnState = currentState;

so the function should now look like:

     protected function goAboutHandler():void
     {
         theReturnState = currentState;
         currentState='about';
     }

What that line does is take the application’s currentState and stores it in our theReturnState variable.

Now we need to add the functionality to return from the About screen. I did not add this interaction in Flash Catalyst, so we can add it within Flash Builder. Next to the Source/Design toggle, there is a Show state list. Click on this list and select ‘about’. This will grey out any MXML elements that are not included in that state. So, if you scroll down a bit you will see the small section of MXML that defines the ‘About’ state.

The actual item of interest is:

    <s:Button id="button5" includeIn="about" x="350" y="280" skinClass="components.BackButton"/>

We need to add a click attribute to the tag, so it will now look like this:

<s:Button id=”button5″ includeIn=”about” x=”350″ y=”280″ skinClass=”components.BackButton” click=”returnFromAboutScreenHandler()” />

You might get an error listed in the Problems panel. It is simply telling you that there is no handler named ‘returnFromAboutScreenHandler’ in your code, but we are about to fix that.

Return back to the <fx:Script> section of the file, and locate the last function, then after that, but before the ]]>, add the following:

protected function returnFromAboutScreenHandler():void

     {

       currentState = theReturnState;
    } 

This is the event handler that is called when the user clicks on the Back button. This one line of code simply sets the application’s currentState to the state that we stored in the variable before we went to the About Screen.

And that is it!

You can now either republish your project for more design work in Flash Catalyst, or if you are finished, you can use the Project > Export Release Build to publish the final version.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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