The Flex History Manager lets users navigate through a Flex application by using the web browser's back and forward navigation commands. The History Manager can track when the application enters a state so that users can use the browser to navigate between states, such as states that correspond to different stages in an application process.

To enable history management to track application states, your application must do the following:

• Implement the IHistoryState interface by defining loadState and saveState methods.
• Register the application with the History Manager.
• Each time the state changes, call the HistoryManager.save method.

The following code shows how you can code a search interface so that the History Manager keeps track of your search. For more information on history management, including another example of tracking states, see Using the HistoryManager.

<?xml version="1.0"?>
<!-- states\StatesHistoryManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    implements="mx.managers.IHistoryManagerClient" 
    creationComplete="initApp();">

    <mx:Script>
        <![CDATA[
        import mx.managers.HistoryManager;
        
        /////////////////////////
        // IHistoryState methods
        /////////////////////////
        // Restore the state and searchString value.
        public function loadState(state:Object):void {
            if (state) {
                currentState = state.currentState;
                searchString = searchInput.text = state.searchString;
            }
            else {
                currentState = '';
            }
        }
        // Save the current state and the searchString value.
        public function saveState():Object {
            var state:Object = {};
            state.currentState = currentState;
            state.searchString = searchString;
            return state;
        }   
        
        /////////////////////////
        // App-specific scripts
        /////////////////////////
        // The search string value.
        [Bindable]
        public var searchString:String;
        
        // Register the application with the history manager
        // when the application is created.
        public function initApp():void {
            HistoryManager.register(this);
        }
        
        // The method for doing the search.
        // For the sake of simplicity it doesn't do any searching.
        // It does change the state to display the results box, 
        // and save the new state in the history manager.
        public function doSearch():void {
            currentState = "results";
            searchString = searchInput.text;
            HistoryManager.save();
        }
        // Method to revert the state to the base state.
        // Saves the new state in the history manager.
        public function reset():void {
            currentState = '';
            searchInput.text = "";
            searchString = "";
            HistoryManager.save();
        }
        ]]>
    </mx:Script>
    
    <mx:states>
        <!-- The state for displaying the search results -->
        <mx:State name="results">
            <mx:SetProperty target="{p}" name="width" value="100%" />
            <mx:SetProperty target="{p}" name="height" value="100%" />
            <mx:SetProperty target="{p}" name="title" value="Results" />
            <mx:AddChild relativeTo="{searchFields}">
                <mx:Button label="Reset" click="reset()" />
            </mx:AddChild>
            <mx:AddChild relativeTo="{p}">
                <mx:Label text="Search results for {searchString}" />
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <!-- In the base state, just show a panel 
        with a search text input and button. -->
    <mx:Panel id="p" title="Search" resizeEffect="Resize">
        <mx:HBox id="searchFields" defaultButton="{b}">
            <mx:TextInput id="searchInput" />
            <mx:Button id="b" label="Go" click="doSearch();" />
        </mx:HBox>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: