[轉]跨平臺開發:PhoneGap移動開發框架初探

目前,隨着Google的Android手機和蘋果的iphone手機的逐漸普及,愈來愈多開發者加入到移動應用開發的大軍當中。其中,Android應用是基於Java語言基礎上進行開發的,而蘋果公司的iphone則是基於C語言開發的。若是開發者編寫的應用須要同時在不一樣的移動設備上運行的話,則必需要掌握多種開發語言。而爲了進一步簡化移動應用的編程,Nitobi公司推出了一套開源的移動應用解決方案PhoneGap( http://www.phonegap.com)。



  PhoneGap是一款開源的手機應用開發平臺,它僅僅只用HTML和JavaScript語言就能夠製做出能在多個移動設備上運行的應用。PhoneGap將移動設備自己提供的複雜的API進行了抽象和簡化,提供了一系列豐富的API供開發者調用,只要你會HTML和Javascript或者Java語言,就能夠利用PhoneGap提供的API去調用各類功能,PhoneGap就能讓你能夠製做出在各類手機平臺上運行的應用,這對移動應用開發者來講無疑是個福音。 目前,PhoneGap已實現對iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明以下圖所示:



<IGNORE_JS_OP>javascript

 

 

 在本文中,將以一個簡單的能在Android平臺上運行的HelloWorld的示例,講解如何安裝PhoneGap的開發框架並配合Eclipse進行開發的過程。



  基於Android SDK安裝PhoneGap框架



  首先,要明白一點,就是要利用PhoneGap框架開發移動應用時,也是必須在開發環境上安裝對應移動設備應用的SDK的。好比你要開發一個運行在Android上的應用,則必須安裝 Android的SDK包,開發iphone應用,就要安裝iphone sdk。本文將介紹如何安裝基於Android SDK下安裝PhoneGap。



  不管是開發基於哪一種平臺的移動應用,首先要到PhoneGap的官方網站下載



  PhoneGap包,地址是: http://www.phonegap.com/download,目前最新的版本是0.9.1,下載以後,解壓縮後,會發現以下圖所示的若干個文件夾


<IGNORE_JS_OP>android

 



 這裏,因爲咱們是構建Android應用,所以只有phonegap-android對咱們是有用的。



  因爲PhoneGap是經過Ruby語言以及所開發的目標移動設備的SDK一塊兒搭配工做的,所以除了下載PhoneGap外,開發者還必須安裝以下的軟件(以Android爲例)



  Android SDK,建議安裝最新的版本,好比Android 2.1或者2.2



  Eclipse IDE



  Apache Ant 1.8.1 ( http://ant.apache.org)



  JDK 1.5以上



  Android 的Eclipse開發插件ADT( http://developer.android.com/sdk/eclipse-adt.html)



  Ruby 1.9.1,建議到 http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。



  此外,咱們還要對windows下的運行環境變量進行設置。首先咱們到控制面板-系統-環境變量中,增長以下幾個系統環境變量。



  JAVA_HOME:指向所安裝的JDK的目錄,好比c:\jdk15



  ANT_HOME:指向所安裝的Apache_ANT目錄,好比d:\ant



  ANDROID_HOME;指向所安裝的Android SDK目錄,好比d:\androidsdk



  對Path進行設置,分別將ruby,jdk,android sdk,ant加入到原有的path中,如:



  c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools



  其中,下載Ruby 1.9.1的Windows版本後,直接選擇安裝到指定目錄便可。



  在完成上面的這些工做後,咱們接下來就經過PhoneGap框架的腳手架功能,快速生成一個android的原型程序。



經過PhoneGap生成基於Android的原型程序



  1 進入PhoneGap-Android目錄,並進入MS-DOS方式,在命令行下,按以下格式執行該命令:



  ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"



  上述參數說明以下:



  其中android_sdk_path指定了android sdk的安裝位置,好比:



  d:/androidsdk,注意這裏不要寫成「\」,應該是「/」做爲分隔符。



  Name:要生成的android應用的名字。



  Package_name:生成的android應用中源代碼中的包名,注意必須至少有一層的包關係,即com.XXXX的形式。



  WWW:這裏指應用中存放HTML,Javascipt,CSS的位置目錄名稱。



  PATH:這裏指經過PhoneGap生成的項目原型工程的目錄位置,注意的是,該目錄位置不能指定爲eclipse的workspace工做空間內。



  下面是一個例子:



  ruby bin/droidgap 「d:/androidsdk」 HelloWorldGap com.phonegap www



  「d:/HelloWorldGap」



  運行上述命令後,會發如今D盤會生成一個HelloWolrdGap的工程目錄,phonegap已經爲咱們生成了項目的框架了。



  將工程導入到ECLIPSE中



  若是安裝了Android for eclipse的插件ADT後,咱們能夠將PhoneGap生成的工程導入到Eclipse中去。首先咱們打開Eclipse,新建一個Android Project,以下圖



<IGNORE_JS_OP>ruby

 

 

其中輸入Project name的名稱爲HelloGapAndroid,其中在Create project from existing source中選擇上文中用PhoneGap生成的項目的目錄。以後在Eclipse中則會看到以下結構的


<IGNORE_JS_OP>

 



能夠看到其中assets下的www目錄存放了工程中須要用到的HTML、Javascript和CSS文件。此外,還要確認工程的lib目錄下面,存在phonegap.jar文件。



  接下來咱們試着運行下這個工程,會在模擬器中看到以下效果:



<IGNORE_JS_OP>

 

 

 運行的結果是顯示了PhoneGap中默認顯示的index.html頁面,其中演示了其中的一些功能,你們能夠嘗試去試驗一下。

 

  編寫HelloWorld程序



  接下來,咱們來在此基礎上編寫HelloWorld程序。咱們切換到index.html中去,在代碼模式下,刪除原來phonegap生成的代碼,寫入以下代碼:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.     <meta name="viewport" content="width=320; user-scalable=no" />      <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
  5.     <title>PhoneGap Android App</title>  
  6.              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>         
  7.            <script type="text/javascript" charset="utf-8">  
  8.                       var showMessageBox = function() {   
  9.               navigator.notification.alert("Hello World of PhoneGap");   
  10.                       }   
  11.                         function init(){   
  12.             document.addEventListener("deviceready", showMessageBox, true);                  
  13.                       }   
  14.   </script>  
  15.   </head>  
  16. <body onload="init();"  >  
  17.   </body>  
  18. </html>  
複製代碼
能夠看到,這實際上是普通的HTML和Javascript代碼。首先在onload觸發的方法init中,經過Javascript的回調方法中調用了phonegap封裝好的事件



  deviceready,這個事件含義是當設備在將其應用程序加載完畢後觸發的。在引入phonegap提供的API時,必須經過 的方式引入進行調用。在這裏的回調函數showMessageBox中,就調用了phonegap封裝好的方法 navigator.notification.alert,這個方法其實是



  顯示了一個帶文本的提示框,運行結果以下圖:


<IGNORE_JS_OP>

 



改進HelloWorld程序



  接下來咱們改進下這個程序,實現的功能是咱們能夠在文本框裏輸入名字,而後點肯定按鈕後,彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼以下:
  1. <!DOCTYPE HTML>  
  2.   
  3. <html>  
  4.   
  5.   <head>  
  6.   
  7.     <meta name="viewport" content="width=320; user-scalable=no" />  
  8.   
  9.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
  10.   
  11.     <title>PhoneGap</title>  
  12.   
  13.               <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>         
  14.   
  15.               <script type="text/javascript" charset="utf-8">  
  16.   
  17.               var displayHello = function() {   
  18.   
  19.                         var name =      document.getElementById("firstname").value;   
  20.   
  21.                         navigator.notification.alert("name" + name);   
  22.   
  23.             }   
  24.   
  25.    </script>  
  26.   
  27.   </head>  
  28.   
  29.   <body onload="init();" id="bdy" >  
  30.   
  31.             <div id="txt">  
  32.   
  33.             <input   type="text" name="firstname" id="firstname" />  
  34.   
  35.             </div>  
  36.   
  37.             <div id ="btn">  
  38.   
  39.     <a href="#" class="btn" onclick="displayHello();">Say Hello</a>  
  40.   
  41.             </div>  
  42.   
  43.         </div>  
  44.   
  45.   </body>  
  46.   
  47. </html>
複製代碼
若是你懂得HTML和Javascript的話,上面的程序實在容易理解。其中咱們添加了一個名爲firstname的文本框,而且在按鈕的onclick事件中調用的displayHello()方法中經過document.getElementById的Javascript方法得到了用戶輸入的名字,而後一樣用navigator.notification.alert的方法輸出結果,輸入的界面和輸出的結果以下圖所示:


<IGNORE_JS_OP>

 



<IGNORE_JS_OP>

 



總結



  經過PhoneGap這套開源框架對開發移動設備SDK的封裝,咱們從此在開發移動應用時,只須要調用PhoneGap封裝好的API,結合已有的Java、HTML、CSS和Javascript技術,就能夠很方便地進行開發了,更多的資料請查看PhoneGap的幫助文檔。
相關文章
相關標籤/搜索