|
原文發(fā)表在:http://publish./a2010/1008/1111/000001111212.shtml
目前，隨著Google的Android手機(jī)和蘋果的iphone手機(jī)的逐漸普及，越來(lái)越多開(kāi)發(fā)者加入到移動(dòng)應(yīng)用開(kāi)發(fā)的大軍當(dāng)中。其中，Android應(yīng)用是基于Java語(yǔ)言基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，而蘋果公司的iphone則是基于C語(yǔ)言開(kāi)發(fā)的。如果開(kāi)發(fā)者編寫(xiě)的應(yīng)用需要同時(shí)在不同的移動(dòng)設(shè)備上運(yùn)行的話，則必須要掌握多種開(kāi)發(fā)語(yǔ)言。而為了進(jìn)一步簡(jiǎn)化移動(dòng)應(yīng)用的編程，Nitobi公司推出了一套開(kāi)源的移動(dòng)應(yīng)用解決方案PhoneGap(http://www.)。 PhoneGap是一款開(kāi)源的手機(jī)應(yīng)用開(kāi)發(fā)平臺(tái)，它僅僅只用HTML和JavaScript語(yǔ)言就可以制作出能在多個(gè)移動(dòng)設(shè)備上運(yùn)行的應(yīng)用。PhoneGap將移動(dòng)設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡(jiǎn)化，提供了一系列豐富的API供開(kāi)發(fā)者調(diào)用，只要你會(huì)HTML和Javascript或者Java語(yǔ)言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機(jī)平臺(tái)上運(yùn)行的應(yīng)用，這對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)者來(lái)說(shuō)無(wú)疑是個(gè)福音。 目前，PhoneGap已實(shí)現(xiàn)對(duì)iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對(duì)其支持的詳細(xì)說(shuō)明如下圖所示：  在本文中，將以一個(gè)簡(jiǎn)單的能在Android平臺(tái)上運(yùn)行的HelloWorld的示例，講解如何安裝PhoneGap的開(kāi)發(fā)框架并配合Eclipse進(jìn)行開(kāi)發(fā)的過(guò)程。 基于Android SDK安裝PhoneGap框架 首先，要明白一點(diǎn)，就是要利用PhoneGap框架開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，也是必須在開(kāi)發(fā)環(huán)境上安裝對(duì)應(yīng)移動(dòng)設(shè)備應(yīng)用的SDK的。比如你要開(kāi)發(fā)一個(gè)運(yùn)行在Android上的應(yīng)用，則必須安裝 Android的SDK包，開(kāi)發(fā)iphone應(yīng)用，就要安裝iphone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。 無(wú)論是開(kāi)發(fā)基于哪種平臺(tái)的移動(dòng)應(yīng)用，首先要到PhoneGap的官方網(wǎng)站下載 PhoneGap包，地址是：http://www./download，目前最新的版本是0.9.1,下載之后，解壓縮后，會(huì)發(fā)現(xiàn)如下圖所示的若干個(gè)文件夾  這里，由于我們是構(gòu)建Android應(yīng)用，因此只有phonegap-android對(duì)我們是有用的。 由于PhoneGap是通過(guò)Ruby語(yǔ)言以及所開(kāi)發(fā)的目標(biāo)移動(dòng)設(shè)備的SDK一起搭配工作的，因此除了下載PhoneGap外，開(kāi)發(fā)者還必須安裝如下的軟件(以Android為例) Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2 Eclipse IDE Apache Ant 1.8.1 (http://ant.) JDK 1.5以上 Android 的Eclipse開(kāi)發(fā)插件ADT(http://developer./sdk/eclipse-adt.html) Ruby 1.9.1，建議到http:///直接下載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版本后，直接選擇安裝到指定目錄即可。 在完成上面的這些工作后，我們接下來(lái)就通過(guò)PhoneGap框架的腳手架功能，快速生成一個(gè)android的原型程序。 通過(guò)PhoneGap生成基于Android的原型程序 1 進(jìn)入PhoneGap-Android目錄，并進(jìn)入MS-DOS方式，在命令行下，按如下格式執(zhí)行該命令： ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]" 上述參數(shù)說(shuō)明如下： 其中android_sdk_path指定了android sdk的安裝位置，比如： d:/androidsdk,注意這里不要寫(xiě)成“\”,應(yīng)該是“/”作為分隔符。 Name：要生成的android應(yīng)用的名字。 Package_name:生成的android應(yīng)用中源代碼中的包名，注意必須至少有一層的包關(guān)系，即com.XXXX的形式。 WWW：這里指應(yīng)用中存放HTML,Javascipt,CSS的位置目錄名稱。 PATH:這里指通過(guò)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中去。首先我們打開(kāi)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文件。 接下來(lái)我們?cè)囍\(yùn)行下這個(gè)工程，會(huì)在模擬器中看到如下效果：  運(yùn)行的結(jié)果是顯示了PhoneGap中默認(rèn)顯示的index.html頁(yè)面，其中演示了其中的一些功能，大家可以嘗試去試驗(yàn)一下。 編寫(xiě)HelloWorld程序 接下來(lái)，我們來(lái)在此基礎(chǔ)上編寫(xiě)HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來(lái)phonegap生成的代碼，寫(xiě)入如下代碼： <!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> 可以看到，這其實(shí)是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過(guò)Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件 deviceready，這個(gè)事件含義是當(dāng)設(shè)備在將其應(yīng)用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時(shí)，必須通過(guò) 的方式引入進(jìn)行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個(gè)方法實(shí)際上是 顯示了一個(gè)帶文本的提示框，運(yùn)行結(jié)果如下圖：  改進(jìn)HelloWorld程序 接下來(lái)我們改進(jìn)下這個(gè)程序，實(shí)現(xiàn)的功能是我們可以在文本框里輸入名字，然后點(diǎ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ū)嵲谌菀桌斫狻Ｆ渲形覀兲砑恿艘粋€(gè)名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過(guò)document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：   總結(jié) 通過(guò)PhoneGap這套開(kāi)源框架對(duì)開(kāi)發(fā)移動(dòng)設(shè)備SDK的封裝，我們今后在開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術(shù)，就可以很方便地進(jìn)行開(kāi)發(fā)了，更多的資料請(qǐng)查看PhoneGap的幫助文檔。 |
|
|
來(lái)自： software1 > 《PhoneGap》
