Flex 3 Cookbook: Chapter 20, Browser Communication
Pages: 1, 2, 3, 4

You may also notice that the historyManagementEnabled parameter on the is set to false. This is because you are using events from the BrowserManager class to determine whether the browser URL has changed, and to update the tab contents accordingly. Every change to the visible tab ends up with changes to the browser history; users can go back and forward through the visible tabs by using the browser's Back and Forward buttons.

Section 20.9: Implement Custom History Management

Problem

You want actions or changes in your custom components to register with the browser's history and be navigable via the browser's Forward and Back buttons.

Solution

Implement custom history management in your Flex components by implementing the mx.managers.IHistoryManagerClient interface.

Discussion

For this solution to work, history management must be enabled for your Flex project. You can verify that history management is enabled by going to the Flex Project Properties dialog box, selecting the Flex Compiler screen, and verifying that the Enable Integration with Browser check box is selected.

The following code shows you how to implement the IHistoryManagerClient interface for a custom text box component. Any time that a change is made in this component, that change will register with the browser history. Users can go backward and forward through the inputs of this TextInput control by using the browser's Back and Forward buttons.

<mx:TextInput
     xmlns:mx="http://www.adobe.com/2006/mxml"
     text="Change Me!"
     implements="mx.managers.IHistoryManagerClient"
     creationComplete="mx.managers.HistoryManager.register(this);"
     change="textChanged(event)">

     <mx:Script>
         <![CDATA[
            import mx.managers.HistoryManager;

            public function saveState():Object
            {
                return {text:text};
            }

            public function loadState(state:Object):void
            {
                var newState:String = state ? state.text : "";

                if (newState != text)
                {
                    text = unescape( newState );
                }
            }

            private function textChanged(e:Event):void
            {
                HistoryManager.save();
            }
         ]]>
     </mx:Script>

</mx:TextInput>

After the component has been created, you must register that class instance with the history manager. You can see this in the creationComplete event handler for the custom component:

creationComplete="mx.managers.HistoryManager.register(this);"

The IHistoryManagerClient interface requires the saveState and loadState functions to be present within your custom component.

Any time the value of the custom TextInput control is changed, the textChanged method is invoked, which calls the save function on the history manager. When state is saved by the history manager, the saveState method is invoked.

This excerpt is from Flex 3 Cookbook. This highly practical book contains more than 300 proven recipes for developing interactive Rich Internet Applications and Web 2.0 sites. You'll find everything from Flex basics and working with menus and controls, to methods for compiling, deploying, and configuring Flex applications. Each recipe features a discussion of how and why it works, and many of them offer sample code that you can put to use immediately.

The saveState method should return an object that will be persisted in the browser's history. In this case, the method is returning an object with the property text, which is set to the text value of the TextInput component.

When the browser history is changed via the Forward and Back buttons, the loadState method gets invoked. The loadState method reads the text property from the State object that is passed into it. It then sets the text property of the TextInput control based on the value passed in through the State object.

You can add this component to your Flex application by using code similar to the following:

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:local="*">

    <local:MyTextInput />

</mx:Application>

Share your knowledge with the Digital Media community!
You must be logged in to the O'Reilly Network to post a talkback.