Flex History Manager を使用すると、ユーザーは、Web ブラウザの「戻る」および「進む」ナビゲーション機能を使用して、Flex アプリケーション内を移動できます。History Manager は、アプリケーションがあるステートにいつ移行したかを追跡できます。これによりユーザーは、例えばあるアプリケーションプロセスの異なる段階に対応するステートなど、複数のステートの間をブラウザを使用して移動できます。
履歴管理によるアプリケーションステートの追跡を有効にするには、アプリケーションで以下を実行する必要があります。
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 ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート