Flex3のディープリンクに関しては以前もちょっと触れたことがあったけど、実際にコードは書いてなかった。
最近、使わなければならない状況になったので、サンプルプログラムを作ってみた。
ちなみにサンプルプログラムのスクリーンショットはこちら
このサンプルプログラムは画面上部にボタンが３つ、「First」、「Second」、「Third」とあり、クリックするとそれぞれ、
該当するViewに切り替わるというもの。
Viewの切り替わりと同時にブラウザのアドレスバーのURLも変化する。
First ー
http://127.0.0.1/DeepLinkSample.html#view=firstSecond ー
http://127.0.0.1/DeepLinkSample.html#view=secondThird ー
http://127.0.0.1/DeepLinkSample.html#view=thirdhttp://127.0.0.1/DeepLinkSample.html#view=thirdとアドレスバーに入力して、
アクセスした場合、ViewにThirdが指定された状態で画面が表示される。
DeepLinkSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:view="hoge.view.*">
<view:ViewContainer width="100%" height="100%">
</view:ViewContainer>
</mx:Application>
hoge/view/ViewContainer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
xmlns:view="hoge.view.*" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.events.BrowserChangeEvent;
import mx.events.ItemClickEvent;
import mx.managers.BrowserManager;
import mx.managers.IBrowserManager;
import mx.utils.URLUtil;
private var browserManager:IBrowserManager;
[Bindable]
private var viewId:String;
private function initApp():void {
browserManager = BrowserManager.getInstance();
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
browserManager.init();
}
private function parseURL(event:BrowserChangeEvent):void {
var o:Object = URLUtil.stringToObject(browserManager.fragment);
viewId = o.view;
}
private function updateURL(event:Event):void {
var fragment:String = "view=" + event.currentTarget.selectedChild.id;
browserManager.setFragment(fragment);
}
private function getView(viewId:String):Container {
if(viewId == "second") {
return second;
}else if(viewId == "third") {
return third;
}else {
return first;
}
}
private function clickHandler(event:ItemClickEvent):void {
viewStack.selectedChild = getView(event.label);
}
]]>
</mx:Script>
<mx:ViewStack x="0" id="viewStack" width="100%" height="100%" top="40"
selectedChild="{getView(viewId)}" change="updateURL(event)">
<view:FirstView id="first">
</view:FirstView>
<view:SecondView id="second">
</view:SecondView>
<view:ThirdView id="third">
</view:ThirdView>
</mx:ViewStack>
<mx:ButtonBar borderStyle="solid" horizontalGap="5" horizontalCenter="0" y="10"
itemClick="clickHandler(event)">
<mx:dataProvider>
<mx:Object id="firstButton" label="first"></mx:Object>
<mx:Object id="secondButton" label="second"></mx:Object>
<mx:Object id="thirdButton" label="third"></mx:Object>
</mx:dataProvider>
</mx:ButtonBar>
</mx:Canvas>
hoge/view/FirstView.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Label text="1" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>
hoge/view/SecondView.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Label text="2" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>
hoge/view/ThirdView.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Label text="3" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>
なお、ディープリンクはBrowserManagerクラスによって実現する機能である。
ディープリンクを使用する際には、履歴管理機能が無効になってしまうため、それらを同時に使用することはできないようだ。
この点は注意が必要である。
