原文發(fā)表在:http://publish.itpub.net/a2010/1008/1111/000001111212.shtml
目前，隨著Google的Android手機和蘋果的iphone手機的逐漸普及，越來越多開發(fā)者加入到移動應用開發(fā)的大軍當中。其中，Android應用是基于Java語言基礎上進行開發(fā)的，而蘋果公司的iphone則是基于C語言開發(fā)的。如果開發(fā)者編寫的應用需要同時在不同的移動設備上運行的話，則必須要掌握多種開發(fā)語言。而為了進一步簡化移動應用的編程，Nitobi公司推出了一套開源的移動應用解決方案PhoneGap(http://www.phonegap.com)。
PhoneGap是一款開源的手機應用開發(fā)平臺，它僅僅只用HTML和JavaScript語言就可以制作出能在多個移動設備上運行的應用。PhoneGap將移動設備本身提供的復雜的API進行了抽象和簡化，提供了一系列豐富的API供開發(fā)者調(diào)用，只要你會HTML和Javascript或者Java語言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機平臺上運行的應用，這對移動應用開發(fā)者來說無疑是個福音。 目前，PhoneGap已實現(xiàn)對iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明如下圖所示：
在本文中，將以一個簡單的能在Android平臺上運行的HelloWorld的示例，講解如何安裝PhoneGap的開發(fā)框架并配合Eclipse進行開發(fā)的過程。
基于Android SDK安裝PhoneGap框架
首先，要明白一點，就是要利用PhoneGap框架開發(fā)移動應用時，也是必須在開發(fā)環(huán)境上安裝對應移動設備應用的SDK的。比如你要開發(fā)一個運行在Android上的應用，則必須安裝 Android的SDK包，開發(fā)iphone應用，就要安裝iphone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。
無論是開發(fā)基于哪種平臺的移動應用，首先要到PhoneGap的官方網(wǎng)站下載
PhoneGap包，地址是：http://www.phonegap.com/download，目前最新的版本是0.9.1,下載之后，解壓縮后，會發(fā)現(xiàn)如下圖所示的若干個文件夾
這里，由于我們是構建Android應用，因此只有phonegap-android對我們是有用的。
由于PhoneGap是通過Ruby語言以及所開發(fā)的目標移動設備的SDK一起搭配工作的，因此除了下載PhoneGap外，開發(fā)者還必須安裝如下的軟件(以Android為例)
Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2
Eclipse IDE
Apache Ant 1.8.1 (http://ant.apache.org)
JDK 1.5以上
Android 的Eclipse開發(fā)插件ADT(http://developer.android.com/sdk/eclipse-adt.html)
Ruby 1.9.1，建議到http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。
此外，我們還要對windows下的運行環(huán)境變量進行設置。首先我們到控制面板-系統(tǒng)-環(huán)境變量中，增加如下幾個系統(tǒng)環(huán)境變量。
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方式，在命令行下，按如下格式執(zhí)行該命令：
ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
上述參數(shù)說明如下：
其中android_sdk_path指定了android sdk的安裝位置，比如：
d:/androidsdk,注意這里不要寫成“\”,應該是“/”作為分隔符。
Name：要生成的android應用的名字。
Package_name:生成的android應用中源代碼中的包名，注意必須至少有一層的包關系，即com.XXXX的形式。
WWW：這里指應用中存放HTML,Javascipt,CSS的位置目錄名稱。
PATH:這里指通過PhoneGap生成的項目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內(nèi)。
下面是一個例子：
ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
“d:/HelloWorldGap”
運行上述命令后，會發(fā)現(xiàn)在D盤會生成一個HelloWolrdGap的工程目錄，phonegap已經(jīng)為我們生成了項目的框架了。
將工程導入到ECLIPSE中
如果安裝了Android for eclipse的插件ADT后，我們可以將PhoneGap生成的工程導入到Eclipse中去。首先我們打開Eclipse,新建一個Android Project，如下圖
其中輸入Project name的名稱為HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項目的目錄。之后在Eclipse中則會看到如下結(jié)構的
可以看到其中assets下的www目錄存放了工程中需要用到的HTML、Javascript和CSS文件。此外，還要確認工程的lib目錄下面，存在phonegap.jar文件。
接下來我們試著運行下這個工程，會在模擬器中看到如下效果：
運行的結(jié)果是顯示了PhoneGap中默認顯示的index.html頁面，其中演示了其中的一些功能，大家可以嘗試去試驗一下。
編寫HelloWorld程序
接下來，我們來在此基礎上編寫HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來phonegap生成的代碼，寫入如下代碼：
<!DOCTYPE HTML>?
<html>?
??? <head>?
??? <meta name="viewport" content="width=320; user-scalable=no" />????? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
??? <title>PhoneGap Android App</title>?
???????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?????????? <script type="text/javascript" charset="utf-8">?
????????????????????? var showMessageBox = function() {??
????????????? navigator.notification.alert("Hello World of PhoneGap");??
????????????????????? }??
??????????????????????? function init(){??
??????????? document.addEventListener("deviceready", showMessageBox, true);?????????????????
????????????????????? }??
? </script>?
? </head>?
<body onload="init();"? >?
? </body>?
</html>?
可以看到，這其實是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件
deviceready，這個事件含義是當設備在將其應用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時，必須通過 的方式引入進行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個方法實際上是
顯示了一個帶文本的提示框，運行結(jié)果如下圖：
改進HelloWorld程序
接下來我們改進下這個程序，實現(xiàn)的功能是我們可以在文本框里輸入名字，然后點確定按鈕后，彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼如下：
<!DOCTYPE HTML>?
?
<html>?
?
? <head>?
?
??? <meta name="viewport" content="width=320; user-scalable=no" />?
?
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
?
??? <title>PhoneGap</title>?
?
????????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?
????????????? <script type="text/javascript" charset="utf-8">?
?
????????????? var displayHello = function() {??
?
??????????????????????? var name =????? document.getElementById("firstname").value;??
?
??????????????????????? navigator.notification.alert("name" + name);??
?
??????????? }??
?
?? </script>?
?
? </head>?
?
? <body onload="init();" id="bdy" >?
?
??????????? <div id="txt">?
?
??????????? <input?? type="text" name="firstname" id="firstname" />?
?
??????????? </div>?
?
??????????? <div id ="btn">?
?
??? <a href="#" class="btn" onclick="displayHello();">Say Hello</a>?
?
??????????? </div>?
?
??????? </div>?
?
? </body>?
?
</html>
如果你懂得HTML和Javascript的話，上面的程序?qū)嵲谌菀桌斫狻Ｆ渲形覀兲砑恿艘粋€名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：
總結(jié)
通過PhoneGap這套開源框架對開發(fā)移動設備SDK的封裝，我們今后在開發(fā)移動應用時，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術，就可以很方便地進行開發(fā)了，更多的資料請查看PhoneGap的幫助文檔。
目前，隨著Google的Android手機和蘋果的iphone手機的逐漸普及，越來越多開發(fā)者加入到移動應用開發(fā)的大軍當中。其中，Android應用是基于Java語言基礎上進行開發(fā)的，而蘋果公司的iphone則是基于C語言開發(fā)的。如果開發(fā)者編寫的應用需要同時在不同的移動設備上運行的話，則必須要掌握多種開發(fā)語言。而為了進一步簡化移動應用的編程，Nitobi公司推出了一套開源的移動應用解決方案PhoneGap(http://www.phonegap.com)。
PhoneGap是一款開源的手機應用開發(fā)平臺，它僅僅只用HTML和JavaScript語言就可以制作出能在多個移動設備上運行的應用。PhoneGap將移動設備本身提供的復雜的API進行了抽象和簡化，提供了一系列豐富的API供開發(fā)者調(diào)用，只要你會HTML和Javascript或者Java語言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機平臺上運行的應用，這對移動應用開發(fā)者來說無疑是個福音。 目前，PhoneGap已實現(xiàn)對iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明如下圖所示：
在本文中，將以一個簡單的能在Android平臺上運行的HelloWorld的示例，講解如何安裝PhoneGap的開發(fā)框架并配合Eclipse進行開發(fā)的過程。
基于Android SDK安裝PhoneGap框架
首先，要明白一點，就是要利用PhoneGap框架開發(fā)移動應用時，也是必須在開發(fā)環(huán)境上安裝對應移動設備應用的SDK的。比如你要開發(fā)一個運行在Android上的應用，則必須安裝 Android的SDK包，開發(fā)iphone應用，就要安裝iphone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。
無論是開發(fā)基于哪種平臺的移動應用，首先要到PhoneGap的官方網(wǎng)站下載
PhoneGap包，地址是：http://www.phonegap.com/download，目前最新的版本是0.9.1,下載之后，解壓縮后，會發(fā)現(xiàn)如下圖所示的若干個文件夾
這里，由于我們是構建Android應用，因此只有phonegap-android對我們是有用的。
由于PhoneGap是通過Ruby語言以及所開發(fā)的目標移動設備的SDK一起搭配工作的，因此除了下載PhoneGap外，開發(fā)者還必須安裝如下的軟件(以Android為例)
Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2
Eclipse IDE
Apache Ant 1.8.1 (http://ant.apache.org)
JDK 1.5以上
Android 的Eclipse開發(fā)插件ADT(http://developer.android.com/sdk/eclipse-adt.html)
Ruby 1.9.1，建議到http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。
此外，我們還要對windows下的運行環(huán)境變量進行設置。首先我們到控制面板-系統(tǒng)-環(huán)境變量中，增加如下幾個系統(tǒng)環(huán)境變量。
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方式，在命令行下，按如下格式執(zhí)行該命令：
ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
上述參數(shù)說明如下：
其中android_sdk_path指定了android sdk的安裝位置，比如：
d:/androidsdk,注意這里不要寫成“\”,應該是“/”作為分隔符。
Name：要生成的android應用的名字。
Package_name:生成的android應用中源代碼中的包名，注意必須至少有一層的包關系，即com.XXXX的形式。
WWW：這里指應用中存放HTML,Javascipt,CSS的位置目錄名稱。
PATH:這里指通過PhoneGap生成的項目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內(nèi)。
下面是一個例子：
ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
“d:/HelloWorldGap”
運行上述命令后，會發(fā)現(xiàn)在D盤會生成一個HelloWolrdGap的工程目錄，phonegap已經(jīng)為我們生成了項目的框架了。
將工程導入到ECLIPSE中
如果安裝了Android for eclipse的插件ADT后，我們可以將PhoneGap生成的工程導入到Eclipse中去。首先我們打開Eclipse,新建一個Android Project，如下圖
其中輸入Project name的名稱為HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項目的目錄。之后在Eclipse中則會看到如下結(jié)構的
可以看到其中assets下的www目錄存放了工程中需要用到的HTML、Javascript和CSS文件。此外，還要確認工程的lib目錄下面，存在phonegap.jar文件。
接下來我們試著運行下這個工程，會在模擬器中看到如下效果：
運行的結(jié)果是顯示了PhoneGap中默認顯示的index.html頁面，其中演示了其中的一些功能，大家可以嘗試去試驗一下。
編寫HelloWorld程序
接下來，我們來在此基礎上編寫HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來phonegap生成的代碼，寫入如下代碼：
<!DOCTYPE HTML>?
<html>?
??? <head>?
??? <meta name="viewport" content="width=320; user-scalable=no" />????? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
??? <title>PhoneGap Android App</title>?
???????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?????????? <script type="text/javascript" charset="utf-8">?
????????????????????? var showMessageBox = function() {??
????????????? navigator.notification.alert("Hello World of PhoneGap");??
????????????????????? }??
??????????????????????? function init(){??
??????????? document.addEventListener("deviceready", showMessageBox, true);?????????????????
????????????????????? }??
? </script>?
? </head>?
<body onload="init();"? >?
? </body>?
</html>?
可以看到，這其實是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件
deviceready，這個事件含義是當設備在將其應用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時，必須通過 的方式引入進行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個方法實際上是
顯示了一個帶文本的提示框，運行結(jié)果如下圖：
改進HelloWorld程序
接下來我們改進下這個程序，實現(xiàn)的功能是我們可以在文本框里輸入名字，然后點確定按鈕后，彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼如下：
<!DOCTYPE HTML>?
?
<html>?
?
? <head>?
?
??? <meta name="viewport" content="width=320; user-scalable=no" />?
?
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
?
??? <title>PhoneGap</title>?
?
????????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?
????????????? <script type="text/javascript" charset="utf-8">?
?
????????????? var displayHello = function() {??
?
??????????????????????? var name =????? document.getElementById("firstname").value;??
?
??????????????????????? navigator.notification.alert("name" + name);??
?
??????????? }??
?
?? </script>?
?
? </head>?
?
? <body onload="init();" id="bdy" >?
?
??????????? <div id="txt">?
?
??????????? <input?? type="text" name="firstname" id="firstname" />?
?
??????????? </div>?
?
??????????? <div id ="btn">?
?
??? <a href="#" class="btn" onclick="displayHello();">Say Hello</a>?
?
??????????? </div>?
?
??????? </div>?
?
? </body>?
?
</html>
如果你懂得HTML和Javascript的話，上面的程序?qū)嵲谌菀桌斫狻Ｆ渲形覀兲砑恿艘粋€名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：
總結(jié)
通過PhoneGap這套開源框架對開發(fā)移動設備SDK的封裝，我們今后在開發(fā)移動應用時，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術，就可以很方便地進行開發(fā)了，更多的資料請查看PhoneGap的幫助文檔。
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
