HistoryManager の使用

Flex History Manager を使用すると、ユーザーは、Web ブラウザの「戻る」および「進む」ナビゲーション機能を使用して、Flex アプリケーション内を移動できます。例えば、ユーザーは、Flex アプリケーションのいくつかの Accordion コンテナペインを移動した後、ブラウザの「戻る」ボタンをクリックしてアプリケーションを前の状態に戻すことができます。

HistoryManager クラスは、BrowserManager クラスとディープリンクが提供する機能のサブセットを提供します。一般的に、アプリケーションステートの維持および URL とブラウザ履歴の操作には、BrowserManager クラスとディープリンクを使用する必要があります。ただし、Flex 2.x アプリケーションを維持する場合のように、HistoryManager クラスが便利な場合もあります。ディープリンクと BrowserManager クラスについて詳しくは、ディープリンクについてを参照してください。

履歴管理は、アプリケーションのラッパー内で参照されるファイルのセットとして実装されます。デフォルトでは、Adobe Flex Builder は、履歴管理をサポートするラッパーを生成します。ただし、これは無効にすることができます。HistoryManager を使用するアプリケーションを展開する場合は、history.css、history.js、historyFrame.html などの履歴管理ファイルも展開する必要があります。これらは、ディープリンクのサポートのために BrowserManager が使用するファイルと同じファイルです。詳しくは、ディープリンクを使用するアプリケーションのデプロイを参照してください。

履歴管理は、Accordion および TabNavigator の各ナビゲータコンテナに自動的にサポートされます。また、ActionScript 内で HistoryManager クラスを使用して、アプリケーション内の他のオブジェクトのカスタム履歴管理を提供することができます。ViewStack ナビゲータコンテナでは、履歴管理がデフォルトで無効になっています。

履歴管理が有効になっている場合、ユーザーがアプリケーションの異なるナビゲータコンテナ内を移動するのに応じて、それぞれのナビゲーション状態が保存されます。Web ブラウザの「戻る」または「進む」ボタンを選択すると、保存されていた前のナビゲーション状態または次のナビゲーション状態が表示されます。履歴管理は、アプリケーション内の位置を追跡する機能であり、行った操作を記憶する取り消しおよびやり直し機能ではありません。

注意: ナビゲータコンテナのような特定のコンポーネントに対して履歴管理が有効になっている場合は、ナビゲータコンテナの状態のみが保存されます。ナビゲータコンテナの子コンポーネントの状態は、特にそのコンポーネントに対して履歴管理が追加されていない限り、保存されません。

標準履歴管理の使用

コンテナの historyManagementEnabled プロパティを false または true に設定することで、ナビゲータコンテナに対する履歴管理をそれぞれ無効または有効にすることができます。TabNavigator コンテナの履歴管理を無効にする例を次に示します。

<mx:TabNavigator historyManagementEnabled="false">

注意: ディープリンクを使用するアプリケーションを作成する場合、HistoryManager クラスは使用できません。ディープリンク機能を使用すると、アプリケーションの historyManagementEnabled プロパティが false に自動的に設定されます。

次の例では、ユーザーのパネル選択は、1 番目の Accordion コンテナに対して保存されます。これは、1 番目の Accordion コンテナにはデフォルト設定が使用されていて、2 番目の Accordion コンテナには historyManagementEnabled プロパティが明示的に false に設定されているためです。ユーザーが Web ブラウザの「戻る」または「進む」コマンドを選択すると、2 番目のコンテナではなく 1 番目のコンテナの前の状態または次の状態が表示されます。

<?xml version="1.0"?>
<!-- historymanager/DisableHistoryManagement.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="800">

  <!-- History management is enabled by default for this Accordion. -->
  <mx:Accordion width="100%" height="50%">
     <mx:VBox label="History management is ENABLED">
        <mx:TextInput text="View 1"/>
     </mx:VBox>
     <mx:VBox label="View 2">
        <mx:TextInput text="View 2"/>
     </mx:VBox>
  </mx:Accordion>

  <!-- History management is disabled for this Accordion. -->
  <mx:Accordion historyManagementEnabled="false" width="100%" height="50%">
     <mx:VBox label="History management is DISABLED.">
        <mx:TextInput text="View 1"/>
     </mx:VBox>
     <mx:VBox label="View 2">
        <mx:TextInput text="View 2"/>
     </mx:VBox>
  </mx:Accordion>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

<mx:Application> タグで historyManagementEnabled プロパティの値を false に設定すると、アプリケーション全体の履歴管理を無効にできます。BrowserManager をディープリンクで使用するように初期化すると、Flex ではこの操作が自動的に実行されます。

カスタム履歴管理の使用

カスタムコンポーネントに次の操作を行うことで、コンポーネントを履歴管理対応にすることができます。

mx.managers.IHistoryManagerClient インターフェイスを実装します。
コンポーネントを HistoryManager の register() メソッドに登録します。
コンポーネントの状態が変化したときに状態を保存します。
IHistoryManagerClient インターフェイスの saveState() メソッドと loadState() メソッドを実装します。これらのメソッドのシグネチャは次のとおりです。
```
public function saveState():Object
public function loadState(state:Object):void;
```

これらの手順についての詳細を以下で説明します。

IHistoryManagerClient インターフェイスの実装

IHistoryManagerClient インターフェイスを実装するには、implements タグ属性を使用します。以下に例を示します。

<mx:CheckBox 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.managers.IHistoryManagerClient" 
    ...
>

HistoryManager へのコンポーネントの登録

コンポーネントを HistoryManager クラスに登録するには、IHistoryManagerClient インターフェイスを実装するコンポーネントインスタンスへの参照を含む、HistoryManager クラスの register() メソッドを呼び出します。次に例を示します。

<mx:CheckBox 
        xmlns:mx="http://www.adobe.com/2006/mxml"
        implements="mx.managers.IHistoryManagerClient" 
        creationComplete="mx.managers.HistoryManager.register(this);"
>

通常は、コンポーネントの初期化が終了したときに呼び出します。

コンポーネントの状態の保存

コンポーネントの状態が変化したときに状態を保存して、History Manager が状態を返せるようにします。通常は、イベントハンドラで静的な HistoryManager.save() メソッドを呼び出して保存します。

次の例では、change イベントハンドラで boxChanged() メソッドを呼び出します。

<mx:CheckBox 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.managers.IHistoryManagerClient" 
    creationComplete="mx.managers.HistoryManager.register(this);"
    change="boxChanged(event)">
    <mx:Script><![CDATA[
        import mx.managers.HistoryManager;
        ...

        // Saves the box's current state.
        private function boxChanged(e:Event):void {
            HistoryManager.save();
        }            
    ]]></mx:Script>
</mx:CheckBox>

loadState() メソッドと saveState() メソッドの実装

登録されているコンポーネントに対して HistoryManager クラスを使用するには、IHistoryManagerClient インターフェイスを実装し、目的の状態情報を保存およびロードするための saveState() メソッドと loadState() メソッドを含める必要があります。saveState() メソッドは、コンポーネントの現在のナビゲーション状態を表す「プロパティ：値」のペアを含むオブジェクトを返します。

HistoryManager クラスには、load() メソッドがあります。このメソッドは、saveState() メソッドが返すオブジェクトと同じオブジェクトを持つそれぞれの登録済みコンポーネントに対して loadState() メソッドを呼び出します。

IHistoryManagerClient を実装するコンポーネントは、loadState() メソッドも実装する必要があります。UIComponent を拡張するコンポーネントは、自動的に loadState() メソッド.

を継承します。次の例では、カスタム CheckBox コントロールに loadState() メソッドと saveState() メソッドを実装しています。

<?xml version="1.0"?>
<!-- historymanager/MyCheckBox.mxml -->
<mx:CheckBox 
     xmlns:mx="http://www.adobe.com/2006/mxml"
     label="Check me" 
     selected="false"
     implements="mx.managers.IHistoryManagerClient" 
     creationComplete="mx.managers.HistoryManager.register(this);"
     change="boxChanged(event)">

  <mx:Script><![CDATA[
        import mx.managers.HistoryManager;
        
        // Returns an object that contains property:value pairs that 
        // represent the current navigation state of a component.
        public function saveState():Object {
           return {selected:selected};
        }

        // Sets the selected property, depending on the state.
        public function loadState(state:Object):void {
           var newState:Boolean = state;

           if (newState != selected) {
            selected = newState;
           } else {
            if (newState) {
                selected = false;
            } else {
                selected = true;
            }
           }
        }
        
        // Saves the box's current state.
        private function boxChanged(e:Event):void {
           HistoryManager.save();
        }       
  ]]></mx:Script>

</mx:CheckBox>

このコントロールを使用するアプリケーションは、次のようになります（MXML ファイルが同じディレクトリにある場合）。

<?xml version="1.0"?>
<!-- historymanager/CheckBoxApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

  <local:MyCheckBox/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーは、カスタム CheckBox コントロールをオン／オフするときに、ブラウザの「進む」ボタンや「戻る」ボタンを使用してコントロールの前の状態に戻ることができます。

アプリケーションのナビゲーション状態の合計は、ユーザーの Web ブラウザでサポートされる最大 URL サイズに制限されます。したがって、できる限り小さな量のデータを保存するようにコンポーネントの saveState() メソッドを記述する必要があります。例えば、List コントロールに対して、selectedIndex プロパティだけを保存する saveState() メソッドを記述できます。

リストベースのコントロールでの履歴管理の使用

通常、リストベースのコントロールで履歴管理を使用するときは、コントロールの選択されたインデックスを保存し、そのインデックスを使用して状態を判定します。

次の例は、MXML コンポーネントの HistoryList.mxml です。このコンポーネントは、HistoryManager に登録されて saveState() および loadState() メソッドを実装します。このコンポーネントによって、ユーザーは List コントロールを閲覧できるようになります。

<?xml version="1.0"?>
<!-- historymanager/HistoryList.mxml -->
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" 
  creationComplete="initList()" 
  change="listChanged()" 
  implements="mx.managers.IHistoryManagerClient"
>
  <mx:Script><![CDATA[
     import mx.managers.HistoryManager;

     // Register with the HistoryManager.
     private function initList():void {
        HistoryManager.register(this);
     }

     // Saves the application's current state.
     private function listChanged():void {
        HistoryManager.save()
     }

     // Save the List index.
     public function saveState():Object {
        return { selectedIndex: selectedIndex };
     }

     // Load the List index.
     public function loadState(state:Object):void {
        var newIndex:int = state ? int(state.selectedIndex) : -1;
        if (newIndex != selectedIndex)
        selectedIndex = newIndex;
     }
  ]]></mx:Script>
</mx:List>
The following example shows an application file that uses the HistoryList.mxml component.
<?xml version="1.0"?>
<!-- historymanager/HistoryListApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns:local="*" width="400" height="400" verticalGap="20">

    <mx:Script>
        <![CDATA[

            [Bindable]
            private var listData:Array = ["Flex", "Dreamweaver", 
                "Flash", "Breeze", "Contribute"];
        ]]>
    </mx:Script>

    <local:HistoryList id="list1" dataProvider="{listData}"
        width="120" height="120"/>

    <mx:TextInput id="text1" 
        text="{list1.selectedItem? list1.selectedItem : ''}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ストリングの配列を使用して HistoryList コントロールを設定しています。HistoryList コントロールのアイテムを 1 つ選択すると、選択したアイテムが TextInput コントロールにも表示されます。ブラウザの「戻る」ボタンを使用すると、選択したアイテム順に戻ることができます。

HistoryManager クラスの静的メソッドの呼び出し

ViewStack、Accordion または TabNavigator コンテナを使用した場合、ユーザーがアプリケーション内を移動すると HistoryManager の save() メソッドが自動的に呼び出されます。HistoryManager クラスにコンポーネントを登録するときは、HistoryManager save() メソッドを明示的に呼び出してコンポーネントの状態を保存する必要があります。

save() メソッドと、コンポーネントの登録と登録解除を行うための register() および unregister() メソッドは、ActionScript コード内から呼び出すことができる静的メソッドです。これらのメソッドについて次の表で説明します。

メソッド	説明
`register(component)`	HistoryManager クラスにコンポーネントを登録します。例： `HistoryManager.register(myList);`
`save()`	HistoryManager クラスに登録されているすべてのコンポーネントの現在のナビゲーション状態を保存します。例： `HistoryManager.save();`
`unregister(component)`	HistoryManager クラスからコンポーネントを登録解除します。例： `HistoryManager.unregister(myList);`

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

Adobe Flex 3 ヘルプ