Deep Linking ～ディープリンク～

Flex3のディープリンクに関しては以前もちょっと触れたことがあったけど、実際にコードは書いてなかった。
最近、使わなければならない状況になったので、サンプルプログラムを作ってみた。

ちなみにサンプルプログラムのスクリーンショットはこちら

このサンプルプログラムは画面上部にボタンが３つ、「First」、「Second」、「Third」とあり、クリックするとそれぞれ、
該当するViewに切り替わるというもの。

Viewの切り替わりと同時にブラウザのアドレスバーのURLも変化する。
First ー http://127.0.0.1/DeepLinkSample.html#view=first
Second ー http://127.0.0.1/DeepLinkSample.html#view=second
Third ー http://127.0.0.1/DeepLinkSample.html#view=third

http://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クラスによって実現する機能である。
ディープリンクを使用する際には、履歴管理機能が無効になってしまうため、それらを同時に使用することはできないようだ。
この点は注意が必要である。