Mit dem neuen Feature Deep Linking von Flex 3 kann man in Flex-Inhalte "hineinverlinken". Die Flex-Anwendung muss also nicht mehr nur eine einzige Start-URL haben, sondern kann verschiedene URLs haben (analog zu Ankern auf einer HTML-Seite). Am einfachsten wird dies an einen Beispiel:

Quellcode

;p>Der Quellcode des Beispiel ist folgender:

XML:
  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" historyManagementEnabled="false">
  2. <mx:Script>
  3. <![CDATA[
  4.     import mx.events.BrowserChangeEvent;
  5.     import mx.managers.IBrowserManager;
  6.     import mx.managers.BrowserManager;
  7.     import mx.utils.URLUtil;
  8.  
  9.     public var browserManager:IBrowserManager;
  10.  
  11.     /* ::::::::::::::::::::::::::::::::::::::::: */
  12.        
  13.     private function initApp():void
  14.     {
  15.          browserManager = BrowserManager.getInstance();
  16.             browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
  17.             browserManager.init("", "Title zu Beginn des Beispiels");
  18.     }
  19.     private var parsing:Boolean = false;
  20.  
  21.  
  22.     /* ::::::::::::::::::::::::::::::::::::::::: */
  23.  
  24.     private function parseURL(event:Event):void
  25.     {
  26.         parsing = true;
  27.  
  28.         var o:Object = URLUtil.stringToObject(browserManager.fragment);
  29.  
  30.         // wenn kein Tab angegeben, dann Tab = 0
  31.         if (o.tab == undefined) {
  32.             o.tab = 0;
  33.         }
  34.        
  35.         // Tab aktivieren
  36.         tabNav.selectedIndex = o.tab;
  37.  
  38.         // Browser-Title auswählen, auch Fallunterscheidung möglich (z.B. if (tabNav.selectedIndex == 0) ...)
  39.         var browTitle:String = "Deep-Linking Einstieg"; 
  40.        
  41.         // Browsertitle setzen
  42.         browserManager.setTitle(browTitle);
  43.         tabNav.validateNow();
  44.         parsing = false;       
  45.     }
  46.  
  47.     /* ::::::::::::::::::::::::::::::::::::::::: */
  48.  
  49.     private function updateURL():void
  50.     {
  51.         if (!parsing)
  52.             callLater(actuallyUpdateURL);
  53.     }
  54.  
  55.     /* ::::::::::::::::::::::::::::::::::::::::: */
  56.  
  57.     private function actuallyUpdateURL():void
  58.     {
  59.         var o:Object = {};
  60.         var t:String = "";
  61.  
  62.         if (tabNav.selectedIndex == 0) {
  63.             t = tab0.label;
  64.         }
  65.         else {
  66.             if (tabNav.selectedIndex == 1) {
  67.                 t = tab1.label;
  68.             }
  69.             else  t = tab2.label;
  70.  
  71.         }
  72.          o.tab = tabNav.selectedIndex;
  73.          var s:String = URLUtil.objectToString(o);
  74.          browserManager.setFragment(s);
  75.          browserManager.setTitle(t);
  76.     }
  77.  
  78. ]]>
  79. </mx:Script>
  80. <mx:TabNavigator id="tabNav" change="updateURL()" width="450" height="400" horizontalAlign="center">
  81.         <mx:Panel label="Tab #0" id="tab0">
  82.             <mx:Image source="@Embed('pic1.jpg')"/>
  83.         </mx:Panel>
  84.         <mx:Panel label="Tab #1" id="tab1">
  85.             <mx:Image source="@Embed('pic2.jpg')"/>       
  86.         </mx:Panel>
  87.         <mx:Panel label="Tab #2" id="tab2">
  88.             <mx:Image source="@Embed('pic3.jpg')"/>       
  89.         </mx:Panel>  
  90.        
  91. </mx:TabNavigator>
  92. </mx:Application>

Den richtigen Inhalt anhand der URL anzeigen

Die Funktion parseURL() im Beispiel sorgt dafür, dass bei Aufruf der Anwendung geschaut wird, welche URL eingegeben wurde. Je nach URL wird der passende Inhalte angezeigt und der Titel in der Browserzeile angepasst.

Die URL ständig aktualisieren

Sieht sich der Nutzer den Content an, soll in der Browserzeile immer die entsprechende URL angezeigt werden. Über diese kann der Nutzer jederzeit wieder an dieser Stelle einsteigen, indem er sich z.B. ein Lesezeichen (Bookmark) setzt. Dies gewährleistet im Beispiel die Funktion actuallyUpdateURL().

Anpassungen am HTML-Template

Im Verzeichnis templates/client-side-detection-with-deeplinking der Flex 3 Betaversion findet sich ein Ordner mit dem Namen deeplinking. Dieses Verzeichnis kopiert man zur eigenen Flexanwendung. Es enthält JavaScript- und CSS-Dateien, die für das Deep Linking nötig sind.

Im Header der HTML-Datei muss dann folgendes hinzugefügt werden, um die Deep Linking Dateien einzubinden:

HTML:
  1. <!--  BEGIN DeepLinking required section -->
  2.     <link rel="stylesheet" type="text/css" href="deeplinking/deeplinking.css" />
  3.     <!--  END DeepLinking required section -->
  4.  
  5.     <!--  BEGIN DeepLinking required section -->
  6.     <script src="deeplinking/deeplinking.js" language="javascript"></script>
  7.     <!--  END DeepLinking required section -->

Weitere Informationen finden sich im Adobe Labs: Flex 3: Deep Linking

Link: Beta-Version von Adobe Flex 3 (video-flash.de)