OrangeFlash

In this tutorial we’ll create our own supprot for back button in Adobe Flex applications. We have a very usefull class in Flex Framework - HistoryManager.

In fact, we just have to register a class in HistoryManager, and implement 2 methods inside it, saveState and loadState. See it in action.

By the way Accordion and TabNavigator have HistoryManager supprot by default.

Part I : Using Accordion and TabNavigator

Well this is the really easy part, everything is ready to use, lets just create new Flex Project, and write following to the MXML file:

[ftf h=”250″]












[/ftf]

Let compile this, and start pressing tabs, after you clicked 10 or so times, and check Back/Forward buttons of your browser. As we can see TabNavigator supports browser buttons by default, lets try same thing with Accordion:

[ftf]












[/ftf]

Compile, click on headers and use browser buttons, this works pretty much the same here. But lets make our own completely useless component with browser buttons support.

Part II: Building own component with HistoryManager support

Here is something you should know, in our component we’ll use two different kinds of states: visual states and history states, if you have not worked with them before, here is your chance to get to know them better. Our component will contain a Panel container and a LinkBar control. Via LinkBar users will be able to swtich between visual states (in fact, we’ll just resize the panel ;) )

Ok lets start, first create new Flex Project and call it “HistoryManagement”, now lets create new MXML Component in package: eu.orangeflash.examples.history.gui, now lets create ActionScript code file, we’ll write our script there:

[ftf]// historyCode.as
import mx.managers.HistoryManager;
import mx.events.ItemClickEvent;

//event handler for onCreationComplete, we register our component in HistoryManager class
private function onCreationComplete():void
{
HistoryManager.register(this);
}
//event handler for ItemClickEvent.ITEM_CLICK
private function stateChanged(event:ItemClickEvent):void
{
//change current visual state
currentState = event.label;
//change title of the panel
panel.title = event.label;
//save current history state
HistoryManager.save();
}
//this method inherited from the IHistoryManagerClient, we use it to pass our history state object to the HistoryManager class
public function saveState():Object
{
var result:Object = {st:currentState};
return result;
}
//this method will be invoked when user presses back/forward buttons, it retrieves history state object from
//HistoryManager class, and then we apply properties to our component
public function loadState(state:Object):void
{
if(state == null)
{
state = {st:”first”};
}
if(state != currentState)
{
panel.title = currentState = state.st;
}
}[/ftf]

We will import this script file to our MXML component, sience we have some code here I think it’s better to move it to another file. Lets move to our MXML Component and setup some stuff there, open “design mode” and put Panel container on the workspace, than assign following porperties:

ID: panel
title: History
HorizontalAlign: center
VerticalAlign: top
Width: 400
Height: 300

Now drag LinkBar to the Panel and assign following porperties

ID: bar
Data Provider:{[’first’,’second’,'third’]}

Now lets look at “States” panel, you will see “” there, click with right button on it, and create new visual state, call it “first” and make it default start visual state. Click once again and create “second” and then “third” states. Switch to “first” and change panel height to 100 pixels, then switch to “second” and change height to 200 pixels, and 300 pixels for “third” visual state. Almost everything is done, switch to the Code View, and lets do some coding there:

[ftf]
implements="mx.managers.IHistoryManagerClient"
creationComplete="onCreationComplete();" >













[/ftf]

Since I dont like appearence of the MXML comments, I’m going to explain everything here, as you can see in line 14 we “import” our script class, so now our script class is a part of this component, we could also insert all this script in a tag.

Our component implements mx.managers.IHistoryManagerClient interface (line 4), and contains saveState and loadState methods, which we’ve already implemented.

Well now lets open main MXML file and type there

[ftf h=”100″]
xmlns:eu="eu.orangeflash.examples.history.gui.*" layout="absolute">

[/ftf]

See it in action.

This entry was posted on Monday, September 18th, 2006 at 3:12 pm and is filed under Usability, RIA, Tutorial, MXML, ActionScript 3.0. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.