Flex Deep Link(深鏈接) BrowserManager

最近做遊戲的時候,發現退出登陸時URL上會自動加上一個“#”字符,很奇怪,Google+Baidu無數次都沒有找到答案。今天無意間看到幾個羣友在說通過“BrowserManager”獲取URL,於是仔細查看了API,又發現了“HistoryManager”,這個問題終於明白了。

我們通常看的Web頁面 可以通過瀏覽器的“前進”“後退”來查看剛纔看過的頁面,同樣,嵌入的頁面中的flash也可以實現這樣的功能。方法是通過HistoryManageer類和BrowserManager類兩種方法來實現。HistoryManageer類主要是用在Flex2,Flex3後很少用了。待會我將分別介紹這兩種方法。

回到剛纔說URL上自動加“#”號的問題:原因是Application 默認historyManagementEnabled屬性是ture,也就是說HistoryManageer類功能自動開啓了,Application 裏面通過程序控制addChild或removeChild任何組件所導致的變化,將會記錄在flash的history中,導致重寫url,加上“#”字符。故有了這個奇怪的“#”號。在Flex3中,HistoryManager功能在Flex項目中默認打開的還有Accordion 和 TabNavigator組件。對於沒有默認打開該功能的組件,如果要實現該功能,則需要另外註冊。下面引用兩片文章加以說明:
對於一個網站來說,其是有若干個網頁組成的。而各個網頁之間的鏈接叫做超鏈接。鏈接成爲網頁和網頁之間的橋樑。那麼,對於一個Flash整站來說,有沒有一個辦法來實現Flash各頁面(更恰當的說是各功能模塊)之間的鏈接呢。比如,我想在瀏覽器中輸入一個鏈接便可以鏈到Flash整站中的一頁—一個功能模塊,而不是每次都要通過Flash整站的第一個頁面的功能導航進入。把Flash的各個功能塊頁面化,那麼我們該怎麼實現呢。到底能不能實現呢?
  答案是肯定的,通過Flex Deep Link 便能實現上述功能。
 

目錄 [隱藏]

Flex Deep Link(深鏈接)-第一,Deep Link 簡介。

 



  Deep Link其實也是依賴Flash和瀏覽器的交互來實現的,通過獲取鏈接地址中#後面的參數來實現頁面標記,當你在Flex Bulid3發佈一個項目時,其會自動你發佈的目錄生成一個名爲History的文件夾,裏面有History.js,HistoryFrame.html,history.css這三個文件,可見Deep Link也是通過和瀏覽器交互來實現的.如果瀏覽器不支持JavaScript或者禁用JavaScript,那麼Deep LinK肯定是不能用的。
  對於Deep Link應用,最重要的就是學會應用BrowserManager和HistoryManager這兩個類。我們由簡單到困難,先講一講HistoryManager這個類的應用。

Flex Deep Link(深鏈接)-  第二,HistoryManager。

  



  HistoryManager功能在Flex項目中是默認打開的,比如在使用Accordion 和 TabNavigator組件時,在不同區域切換時,Flex會自動記錄下各個狀態,我們可以通過點擊瀏覽器的“前進”和“後退”按鈕來前進和倒退,在你切換這些組件的區域時,Flex會自動你在網頁鏈接的後面加寫參數,以便記錄當前頁面的狀態。
  默認情況下HistoryManager的功能是打開的,你可以通過設置各個組件或Application的historyManagementEnabled屬性爲false(默認爲TRUE)來關閉此功能。
  這些都沒什麼好講的。關鍵是怎麼在一些普通組建上使用HistoryManager功能,默認的navigator container組建都是支持該功能的。要使一些普通組建也支持此功能,必須:
  1.實現mx.managers.IHistoryManagerClient接口。
  2.用HistoryManager'的register()方法爲組建註冊。
  3.當組件狀態改變時保存組件的狀態。
  4.通過實施IHistoryManagerClient的saveState() 和 loadState()方法來保存和讀取組件狀態。

 
 拿CheckBox爲例:

 
<?xml version="1.0"?>
<mx:CheckBox 
  xmlns:mx="http://www.adobe.com/2006/mxml"
  label="Check me" 
   
  implements="mx.managers.IHistoryManagerClient" //關鍵步驟1,實現接口
  creationComplete="mx.managers.HistoryManager.register(this);"//關鍵步驟2,註冊組件
  change="boxChanged(event)"//關鍵步驟3,當組件發生變化時保存狀態
>

  <mx:Script><![CDATA[
  import mx.managers.HistoryManager;
  //實施IHistoryManagerClient的saveState()方法保存狀態
  public function saveState():Object {
return {selected:selected};
  }
  //實施IHistoryManagerClient的loadState()方法讀取狀態
public function loadState(state:Object):void {
var newState:Boolean = state;

if (newState != selected) {
  selected = newState;
} else {
  if (newState) {
  ;
  } else {
  selected = true;
  }
}
  }
   
  // 保存狀態
  private function boxChanged(e:Event):void {
HistoryManager.save();
  }  
  ]]></mx:Script>

</mx:CheckBox>
  注意:如果你把實現HistoryManager功能的組件放到module中,再在主程序中調用,那麼HistoryManager功能是沒用的。
  麻雀雖小,五臟俱全。上面例子就是如何讓任意組件實現HistoryManager的典型案例。點擊瀏覽器的“前進”和“後退”來恢復上個或下個狀態。
BrowserManager類要比HistoryManager類更復雜些。BrowserManager類好比就是Flex程序和瀏覽器之間的一個代理。當瀏覽地址欄的地址發生變化時,瀏覽器通過BrowserManager類告知Flex程序。 
  可以通過BrowserManager類的getInstance()方法來獲得其一個實施了IBrowserManager接口的實例。這樣就可以訪問其setTitle()和setFragment()方法和屬性了。下面我就來介紹一下BrowserManager類的一些屬性和方法。
 

Flex Deep Link(深鏈接)-方法:



  1.init(fragment,title)
  該方法可以定義默認的鏈接參數和網頁標題。一般在初始化時用到。例如:
  browserManager.init("", "Test Deep Linking");定義了參數爲空,標題爲Test Deep Linking的網頁。
  2.setTitle(title)
  該方法用來設置網頁標題。例如:
  browserManager.setTitle("The New Title") 設置網頁標題爲“The New Title”。
  3.setFragment(fragment)
 該方法用來設置網頁參數。例如:
 browserManager.setFragment("id=3") 設置參數“id=3”。
 

Flex Deep Link(深鏈接)-屬性:



  1.url
  browserManager.url獲得頁面完整鏈接。
  2.base
  browserManager.base獲得頁面基地址。
  3.fragment
  browserManager.fragment獲得頁面鏈接#後的參數。
  4.lastURL
  browserManager.lastURL獲得上一個頁面鏈接——IE6我獲得是失敗的,火狐正確。大家可以自己試試。

  注意:上面的browserManager便是BrowserManager類的一個實例。實例化過程如下:
  import mx.events.BrowserChangeEvent;
  import mx.managers.IBrowserManager;
  import mx.managers.BrowserManager;
  private var browserManager:IBrowserManager;
  private function initApp():void {
  browserManager = BrowserManager.getInstance();
  browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
  browserManager.init("", "Test Deep Linking");
}

Flex Deep Link(深鏈接)-  如何分析URl



  可以用URLUtil類方便的分析Url
  類路徑mx.utils.URLUtil,例如鏈接:http://127.0.0.1/index.html#a=3&b=1
  var o:Object = URLUtil.stringToObject(browserManager.fragment,"&");
  trace(o.a,o.b)
  反過來設置地址欄鏈接:
  o.a=5;o.b=7;
  var s:String = URLUtil.objectToString(o,"&");
  browserManager.setFragment(s);
  注意:如果 URLUtil.objectToString()方法第二個參數爲空,那麼默認的參數分隔符爲";"號。
 
  BrowserManager類的事件
  BrowserManager類有三種事件:
  1.applicationURLChange事件;
  當在程序執行時調用setFragment()等方法改變URL時派發此事件。
  2.browserURLChange事件;
  當手動改變瀏覽器鏈接或點擊“前進”或“後退”時派發此事件。
  3.urlChange事件;
  applicationURLChange事件或browserURLChange事件派發時,都將觸發該事件。

Flex Deep Link(深鏈接)-  獲得鏈接信息



  可以通過BrowserManager類的屬性和URLUtil的一些方法來獲得鏈接信息,例如:
  var url:String = browserManager.url;
  baseURL = browserManager.base;
  fragment = browserManager.fragment;  
  previousURL = e.lastURL;  

  fullURL = mx.utils.URLUtil.getFullURL(url, url);
  port = mx.utils.URLUtil.getPort(url);
  protocol = mx.utils.URLUtil.getProtocol(url);
  serverName = mx.utils.URLUtil.getServerName(url);
  isSecure = mx.utils.URLUtil.isHttpsurl(/url);

  具體含義也很清楚,我也就不多講了。
  關於BrowserManager類大致也就上面的內容。要注意的是BrowserManager類和HistoryManager類不能同時使用,也就是說用了BrowserManager類就不能再用HistoryManager類了,當你用了BrowserManager類後,系統會自動禁用HistoryManager類。
  既然能獲得了參數,那麼實現文章開頭那些功能也就沒什麼了。通過在初始化程序中獲取相應的參數,再根據這些參數控制程序顯示。和.net,asp,php類似,萬物皆規律。有了BrowserManager類的幫助,加上一些程序控制,現在我在瀏覽器輸入http://127.0.0.1/news.html#id=20便能在Flash整站中顯示某個新聞頁面了。

發佈了26 篇原創文章 · 獲贊 0 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章