StageWebView 與Web App 混合使用

Adobe AIR 目的是給開發者一個跨平台發佈, 我們可以好好利用這個優勢. 當中StageWebView 是一個值得關注的功能, 能混合於HTML 和Javascript 開發成Web App. 作者製作一個Web App, 包含以下三個HTML 功能:

• PhotoSwipe - 十分流暢的照片瀏覽元件 (範例連結)
• Video.js - 自動為用戶選擇HTML5 或Flash 播放影片
• krpano - 全景圖 (Panorama) 元件 (範例連結)

PhotoSwipe

Video.js

krpano Panorama Viewer

在這個範例中, 我們會把這三個功能包裝於Adobe AIR 內, 並分別儲存於:

• PhotoSwipe -  所有檔案儲存於html 資料夾中, 與安裝檔一同發佈給用戶
    (完全本地儲存) href="PhotoSwipe/index.html"
• Video.js - 播放功能儲存於html 資料夾中, 播放時載入網上的影片
    (部分本地儲存) href="videojs/demo.html"
• krpano - 直接跳到網上的範例
    (完全網上儲存) href="http://krpano.com/krpano.html?pano=panos/rom/marktplatz/marktplatz.xml"

發佈html 資料夾設定 (Included files)

資料夾index.html 的內容, 純粹以傳統HTML 方式運作, 可以超連結本地內容或外部網頁.

資料夾index.html 的內容

作者編寫一個名為AirView 類別, 作為StageWebView 與介面控制部分的連繫. 主要功能:

• 當屏幕大小改變, 自動調整介面控制部分位置
  

  private function stageResizeHander(event:Event):void {
    var menuHeight:Number = 0;
    ...
    _webView.viewPort = new Rectangle(0, menuHeight, _stage.stageWidth, _stage.stageHeight - menuHeight);
  }
  

• 載入HTML 的標題<title>
  

  private function webViewCompleteHandler(event:Event):void {
    ...
    _titleTxt.text = _webView.title;
    ...
  }
  

• 處理返回事件
  

  private function backMouseDownHandler(event:MouseEvent):void {
    if(_backBtn.enabled)
      if (_webView.isHistoryBackEnabled)
        _webView.historyBack();
  }
  

• 複製html 資料夾至用戶設備中  (作本地儲存)
  

  public static function copyFile(folderName:String, indexName:String, once:Boolean = true):String {
   var source:File = File.applicationDirectory.resolvePath(folderName);
   var destination:File = File.applicationStorageDirectory;
   if (!destination.resolvePath(indexName).exists || !once)
      source.copyTo(destination, true);
   return "file://" + destination.resolvePath(indexName).nativePath;
  }

介面分為兩部分:

• 內容以StageWebView 顯示HTML.
• 控制元件由Flash 負責, 因應個人喜好設計, 自由度十分高.

作者認為, 關於Adobe AIR 的StageWebView, 是一個製作Web Apps 的一個理想方式. 若我們配合Stage3D, 更可提升畫面上的特效 (例: 兩個HTML 之間的轉換效果).

對比jQuery Mobile, Sencha Touch 等框架更為彈性, 因為每一個html 獨立運作, 開發簡單方便. 設計師自由製作介面, 如同網頁製作一樣.

對比Titanium, Phone Gap 等框架, 包裝成Web Apps 不需安裝SDK, 沒有複雜的安裝與設定. 同時支援Web Apps 與高效能的遊戲開發.

若大家有興趣, 可以改良一下, 加入Stage3D 特效, 在iOS 及Andoird 發佈給用戶.

大家可以 [下載] 範例試試看.

小記: 若StageWebView 與HTML 產生互動, 可參考以下連結.
注意事項: 若發佈Android 版本, 請確定發佈設定給予INTERNET Permisssion, 以免外部連結失敗喔.