使用Dreamweaver 5.5 + JQuery + PhoneGap+ArcGIS Javascript API 開發跨平台手機應用程式

        Esri為iOS、Android、Windows Phone提供了相應的API，GIS開發人員需要針對不同的平台，使用不同的ArcGIS移動API進行同一款移動GIS應用的開發，不僅提高了開發成本，加大了開發難度，也造成了資源、人力的浪費。

        那麼能不能一次開發就可以應用到各個移動終端呢？雖然現在移動Web應用還沒有興起，但是答案是肯定的：HTML5+JQuery+PhoneGap實現跨平台、跨終端的應用開發，可以讓我們只學一種技術來開發一個在所有手機平台、平板電腦、包括各種PC平台都可以啟動並執行Native App！

HTML5+JQuery+PhoneGap到底是何方神聖？

        關於HTML5、JQuery、PhoneGap等是什麼，網上資料一搜一大把，在此我們不廢話，以一兩句話帶出：

        1）HTML5是繼HTML4以後的下一代HTML標準規範，它提供了一些新的元素和屬性（例如<nav>網站導航塊和<footer>）。新型的標籤有利於搜尋引擎和語義分析，同時更好地協助小螢幕裝置和視障人士使用，除此之外，也提供了一些新的功能，比如視頻音頻用的<video>和<audio>。

        2）CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括： 盒子模型、列表模組、超連結方式 、語言模組 、背景和邊框 、文字特效 、多欄布局等。

        3）Jquery是繼prototype之後又一個優秀的Javascrīpt架構。它是輕量級的js庫(壓縮後只有21k) ，它相容CSS3，還相容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari2.0+, Opera 9.0+）。jQuery使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的外掛程式可供選擇。jQuery能夠使使用者的html頁保持代碼和html內容分離，也就是說，不用再在html裡面插
入一堆js來調用命令了，只需定義id即可。

         4）jQuery Mobile 是jQuery 在手機上和平板裝置上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI架構。支援全球主流的移動平台。

        5）PhoneGap是一個用基於HTML，CSS和JavaScript的，建立移動跨平台行動裝置 App程式的快速開發平台。它使開發人員能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯絡 人，聲音和震動等，此外PhoneGap擁有豐富的外掛程式，可以以此擴充無限的功能。PhoneGap是免費的，但是它需要特定平台提供的附加軟體，例如iPhone的iPhone
SDK，Android的Android SDK等，也可以和DW5.5配套開發。

        6）使用 Adobe Dreamweaver CS5.5 軟體中的“多螢幕預覽”面板同時為手機、Tablet和 PC 進行設計。使用“媒體查詢”為各個裝置編寫和呈現單獨的樣式。藉助“構件瀏覽器”快速放入 jQuery 移動使用者介面構件。

我們開始吧，跨平台移動GIS開發！

        1、安裝完Dreamweaver CS5.5後，開發環境也就搭建完成了，我們建立一個網站，開啟site/New Site…，輸入網站名稱，指定網站路徑；

        2、建立 JQuery+PhoneGap 的應用；

        開啟File/New,選擇Page from Sample->Mobile Starters->JQuery Mobile(PhoneGap)，DocType選擇HTML5。點擊“建立”，Dreamweaver自動幫你建立了一個應用開發的模版。把這個模版儲存在剛才建立的網站中，並命名為index.html。行動裝置 App的模板就建立完成了，看看建立完的模板是什麼樣吧。

        已經可以在行動裝置中看到應用的外觀了，代碼與設計檢視如下：

        可以看到JQuery Mobile通過標籤中添加 data-role屬性來實現移動UI設計，<div data-role=”page”id=”page”>代表行動裝置中的一屏，可以看到在一個html頁面中包含了4個page，即可以在行動裝置中切換4個介面。

        3、實現GIS的地圖繪製；

        移動GIS應用的模板建立完成了，接下來加入GIS的功能，去掉page2、page3和page4，在page的content中加入用於地圖顯示的div，在footer中添加3個按鈕用於繪製點、線和面，代碼如下:

        介面設計完成後，在頁面中匯入arcgisjavascript API，完成相應的初始化和功能代碼，就完成了一個簡單的GIS應用了。

        4、構建跨平台的native app。

        使用PhoneGap可以將剛剛建立的GIS應用程式套件裝成不同移動平台的native app應用，好在dreamweaver已經整合了PhoneGap,只需要簡單的幾步就可以產生native app應用了。以Android平台為例，開啟site/MobileApplications/Build and Emulate/Android視窗，Dreamweaver自動產生Android工程，並把應用打包成可以在真實手機上安裝的安裝包儲存在案頭上；

        可以在案頭的com.esrichina.gis_mobile_Android/bin目錄下找到 “gis_mobile-debug.apk”檔案，這個就是安裝包了。你可以把你安卓平台的手機串連電腦的USB口，把這個檔案拷貝到你手機的SD卡裡，就可以點擊安裝。

        需要說明的是：

         這個檔案是debug模式的檔案，只能通過SD卡安裝在自己手機上自娛自樂，如果需要上傳到市集，你還需要給這個檔案簽名。目前Dreamweaver還無法實現自動簽名，但是Dreamweaver產生的安裝包是支援Eclipse匯入的。你可以用Eclipse把安裝包匯入，重新匯出一個簽名的安裝包即可。

        現在就可以在模擬器上來使用我們剛剛建立的應用了，如所示：

        註：手工安裝apk到模擬器的方法

1.     把產生的apk拷貝到 D:\ProgramFiles\Android\android-sdk\platform-tools 目錄下。

2.     點擊開始/運行，輸入CMD進入DOS，一路CD到D:\ProgramFiles\Android\android-sdk\platform-tools目錄。

3.     輸入Adb install + 你的應用程式名稱.apk即可。