Adobe Flex 3 ヘルプ

履歴管理とビューステートの使用

Flex History Manager を使用すると、ユーザーは、Web ブラウザの「戻る」および「進む」ナビゲーション機能を使用して、Flex アプリケーション内を移動できます。History Manager は、アプリケーションがあるステートにいつ移行したかを追跡できます。これによりユーザーは、例えばあるアプリケーションプロセスの異なる段階に対応するステートなど、複数のステートの間をブラウザを使用して移動できます。

履歴管理によるアプリケーションステートの追跡を有効にするには、アプリケーションで以下を実行する必要があります。

  • loadState メソッドおよび saveState メソッドを定義することによって、IHistoryState インターフェイスを実装します。
  • アプリケーションを History Manager に登録します。
  • ステートが変化するたびに、HistoryManager.save メソッドを呼び出します。

History Manager で検索を追跡するには、次のコード例に示されているように検索インターフェイスを記述します。履歴管理の詳細については、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>

前の例で実行する SWF ファイルは以下のとおりです。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート