跨平臺(tái)開發(fā)：初探PhoneGap移動(dòng)開發(fā)框架
隨著Google的Android手機(jī)和蘋果的iPhone手機(jī)的逐漸普及，越來越多開發(fā)者加入到移動(dòng)應(yīng)用開發(fā)的大軍當(dāng)中。目前移動(dòng)終端中的冠亞軍Android，應(yīng)用是基于Java語言基礎(chǔ)上進(jìn)行開發(fā)的；而蘋果公司的iPhone則是基于C語言開發(fā)的。如果開發(fā)者編寫的應(yīng)用需要同時(shí)在不同的移動(dòng)設(shè)備上運(yùn)行的話，則必須要掌握多種開發(fā)語言，這已經(jīng)成為開發(fā)團(tuán)隊(duì)的一大難題，在51CTO專訪國內(nèi)著名移動(dòng)軟件尚郵的首席架構(gòu)師時(shí)也提到過跨平臺(tái)軟件開發(fā)的困難。而為了進(jìn)一步簡化移動(dòng)應(yīng)用的編程，很多公司推出解決方案，Adobe推出的“AIR for Android”，使Flash為Android開發(fā)本地應(yīng)用成為可能。而Nitobi公司推也出了一套開源的移動(dòng)應(yīng)用解決方案PhoneGap。
51CTO移動(dòng)開發(fā)推薦PhoneGap專題
PhoneGap是一款開源的手機(jī)應(yīng)用開發(fā)平臺(tái)，它僅僅只用HTML和JavaScript語言就可以制作出能在多個(gè)移動(dòng)設(shè)備上運(yùn)行的應(yīng)用。PhoneGap將移動(dòng)設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡化，提供了一系列豐富的API供開發(fā)者調(diào)用，只要你會(huì)HTML和Javascript或者Java語言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機(jī)平臺(tái)上運(yùn)行的應(yīng)用，這對(duì)移動(dòng)應(yīng)用開發(fā)者來說無疑是個(gè)福音。 目前，PhoneGap已實(shí)現(xiàn)對(duì)iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對(duì)其支持的詳細(xì)說明如下圖所示：
在本文中，將以一個(gè)簡單的能在Android平臺(tái)上運(yùn)行的HelloWorld的示例，講解如何安裝PhoneGap的開發(fā)框架并配合Eclipse進(jìn)行開發(fā)的過程。
基于Android SDK安裝PhoneGap框架
首先，要明白一點(diǎn)，就是要利用PhoneGap框架開發(fā)移動(dòng)應(yīng)用時(shí)，也是必須在開發(fā)環(huán)境上安裝對(duì)應(yīng)移動(dòng)設(shè)備應(yīng)用的SDK的。比如你要開發(fā)一個(gè)運(yùn)行在Android上的應(yīng)用，則必須安裝 Android的SDK包，開發(fā)iPhone應(yīng)用，就要安裝iPhone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。
無論是開發(fā)基于哪種平臺(tái)的移動(dòng)應(yīng)用，首先要到PhoneGap的官方網(wǎng)站下載
PhoneGap包（下載地址）。目前最新的版本是0.9.1,下載之后，解壓縮后，會(huì)發(fā)現(xiàn)如下圖所示的若干個(gè)文件夾：
這里，由于我們是構(gòu)建Android應(yīng)用，因此只有phonegap-android對(duì)我們是有用的。
由于PhoneGap是通過Ruby語言以及所開發(fā)的目標(biāo)移動(dòng)設(shè)備的SDK一起搭配工作的，因此除了下載PhoneGap外，開發(fā)者還必須安裝如下的軟件(以Android為例)
◆Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2
◆Eclipse IDE
◆Apache Ant 1.8.1
◆JDK 1.5以上
◆Android 的Eclipse開發(fā)插件ADT
◆Ruby 1.9.1，建議到官網(wǎng)直接下載1.9.1的版本直接安裝。
此外，我們還要對(duì)windows下的運(yùn)行環(huán)境變量進(jìn)行設(shè)置。首先我們到控制面板-系統(tǒng)-環(huán)境變量中，增加如下幾個(gè)系統(tǒng)環(huán)境變量。
◆JAVA_HOME:指向所安裝的JDK的目錄，比如c:\jdk15
◆ANT_HOME:指向所安裝的Apache_ANT目錄，比如d:\ant
◆ANDROID_HOME;指向所安裝的Android SDK目錄，比如d:\androidsdk
對(duì)Path進(jìn)行設(shè)置,分別將ruby,jdk,android sdk,ant加入到原有的path中,如：
- c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools
其中，下載Ruby 1.9.1的Windows版本后，直接選擇安裝到指定目錄即可。
在完成上面的這些工作后，我們接下來就通過PhoneGap框架的腳手架功能，快速生成一個(gè)android的原型程序。
#p#
通過PhoneGap生成基于Android的原型程序
1 進(jìn)入PhoneGap-Android目錄，并進(jìn)入MS-DOS方式，在命令行下，按如下格式執(zhí)行該命令：
- ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
上述參數(shù)說明如下：
其中android_sdk_path指定了android sdk的安裝位置，比如：
d:/androidsdk,注意這里不要寫成“\”,應(yīng)該是“/”作為分隔符。
Name：要生成的android應(yīng)用的名字。
Package_name:生成的android應(yīng)用中源代碼中的包名，注意必須至少有一層的包關(guān)系，即com.XXXX的形式。
WWW：這里指應(yīng)用中存放HTML,Javascipt,CSS的位置目錄名稱。
PATH:這里指通過PhoneGap生成的項(xiàng)目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內(nèi)。
下面是一個(gè)例子：
- ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
- “d:/HelloWorldGap”
運(yùn)行上述命令后，會(huì)發(fā)現(xiàn)在D盤會(huì)生成一個(gè)HelloWolrdGap的工程目錄，phonegap已經(jīng)為我們生成了項(xiàng)目的框架了。
將工程導(dǎo)入到Eclipse中
如果安裝了Android for eclipse的插件ADT后，我們可以將PhoneGap生成的工程導(dǎo)入到Eclipse中去。首先我們打開Eclipse,新建一個(gè)Android Project，如下圖
其中輸入Project name的名稱為HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項(xiàng)目的目錄。之后在Eclipse中則會(huì)看到如下結(jié)構(gòu)的
可以看到其中assets下的www目錄存放了工程中需要用到的HTML、Javascript和CSS文件。此外，還要確認(rèn)工程的lib目錄下面，存在phonegap.jar文件。
接下來我們?cè)囍\(yùn)行下這個(gè)工程，會(huì)在模擬器中看到如下效果：
運(yùn)行的結(jié)果是顯示了PhoneGap中默認(rèn)顯示的index.html頁面，其中演示了其中的一些功能，大家可以嘗試去試驗(yàn)一下。
#p#
編寫HelloWorld程序
接下來，我們來在此基礎(chǔ)上編寫HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來phonegap生成的代碼，寫入如下代碼：
- >
- <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 Apptitle>
- <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>
可以看到，這其實(shí)是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件
deviceready，這個(gè)事件含義是當(dāng)設(shè)備在將其應(yīng)用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時(shí)，必須通過 的方式引入進(jìn)行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個(gè)方法實(shí)際上是
顯示了一個(gè)帶文本的提示框，運(yùn)行結(jié)果如下圖：
#p#
改進(jìn)HelloWorld程序
接下來我們改進(jìn)下這個(gè)程序，實(shí)現(xiàn)的功能是我們可以在文本框里輸入名字，然后點(diǎn)確定按鈕后，彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼如下：
- >
- <html>
- <head>
- <meta name="viewport" content="width=320; user-scalable=no" />
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>PhoneGaptitle>
- <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 Helloa>
- div>
- div>
- body>
- html>
如果你懂得HTML和Javascript的話，上面的程序?qū)嵲谌菀桌斫?。其中我們添加了一個(gè)名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：
總結(jié)
通過PhoneGap這套開源框架對(duì)開發(fā)移動(dòng)設(shè)備SDK的封裝，我們今后在開發(fā)移動(dòng)應(yīng)用時(shí)，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術(shù)，就可以很方便地進(jìn)行開發(fā)了，更多的資料請(qǐng)查看PhoneGap的幫助文檔。
了解Android開發(fā)更多內(nèi)容請(qǐng)看
【編輯推薦】
