在NetBeans中使用PhoneGap寫Android軟體

最近幾日突然心血來潮想玩玩編寫Android的軟體，好久之前也曾經考慮玩玩的，但是由于需要使用java，而本人對于java隻停留在能夠勉強的讀相關的代碼上，而且也沒打算深入學習java，是以之前很快就放棄了。但是這2天發現居然有好幾個用html+javascript就可以開發Android軟體的中間件，其中phonegap、Rexsee都是開源的，于是又想玩玩Android了，而其中Rexsee貌似是将網頁檔案放在伺服器上，它編譯得到的apk檔案僅相當于一個浏覽器【當然還負責與網頁的互動，以便網頁可以擷取手機的相關資訊】，而PhoneGap是将網頁檔案全打包進入apk檔案，是以使用PhoneGap開發的軟體就不是必須要通路網絡了。

幾經搜尋，幾乎都隻有Eclipse下使用PhoneGap的教程，但是本人比較習慣使用NetBeans而不習慣Eclipse，還好NetBeans下有一個插件“nbandroid”（牛逼android？ ^_^）可以在NetBeans下進行Android的開發，幾經艱辛，總算在一個國外網站找到一篇關于在NetBeans下使用PhoneGap的文章【其實一開始看到一堆的英文就頭暈，都沒仔細看，隻是後來想了一下在NetBeans下使用PhoneGap應該與Eclipse下使用PhoneGap是一緻的，于是自己動手試了試，然後再會過頭來仔細閱讀這篇鳥文，确實是一樣的】

總結：在NetBeans中使用PhoneGap的方法與《eclipse中使用PhoneGap》的方法一緻。

下面附上相關的2篇文章：

《PhoneGap and Netbeans》：【以下内容來自：http://tim-perry.co.uk/blog/2010/02/20/PhoneGap_and_Netbeans】

We’ve recently been looking at writing apps for phones (it’s tough to resist a bandwagon), and we found PhoneGap. It’s a framework that lets you write apps for most of the big phone platforms (iPhone, Android, Blackberry etc) in nothing but HTML and JavaScript, and still get at things like the camera. I haven’t got far enough with it to really judge it yet because it’s made to be used in Eclipse, when I actually really wanted to code in NetBeans, and setting that up is a right hassle. After doing that, I figured the internet might want this answer too.

If you’re writing phonegap stuff it’s generally easiest to make separate projects for each platform, write the one platform and then pass out the HTML/JS to the others, and write each native bit separately. With this in mind the following instructions are for setting up a Android project, but I imagine it’s not too difficult to work out the iPhone steps. At least, I hope so, I’m going to have to do it at some point.

1. Download and set up the Android SDK. Instructions are all on that page, you can ignore the Eclipse stuff, you need to do the platform stuff.
2. Download phonegap (I’m using 0.8) and extract it
3. Build phonegap. This didn’t work for me, so I followed the instructions here. Essentially there are a few typos, and you need to put two semicolons in the right places.
4. Copy the [phonegap dir]/lib/android/phonegap.js (or min.js, or both) to [phonegap dir]/android/assets/www.
5. Install nbandroid, a NetBeans plugin for android projects.
   • By this point you’ve got all the bits you need to get everything working, and it’s just a matter of getting a project made and building in NetBeans. Essentially you make a NetBeans android project, and then splice it together with the [phonegap dir]/android folder:
6. Make a new android project somewhere, through NetBeans.
7. Copy the res folder from phonegap/android over the res folder NetBeans just made, and build the NetBeans project. This should create a new R.java.
8. Copy the phonegap/android/src folder over the src folder NetBeans made.
9. Inside NetBeans go to the Projects window → Source Packages → com.phonegap.demo, select all the files, right click and go to Refactor → Move. Move them into the package that the rest of your project is in.
10. Copy the libs, assets and AndroidManifest.xml from phonegap/android to the NetBeans project.
11. Add the jar in the libs folder you just copied to the libraries of the NetBeans project.
12. Run the Android SDK Manager program and make a new Virtual Device.
    • At this point the project should build, and running it should start an emulator up, and eventually try and run the demo program. Unfortunately, the demo program will only come up with ‘…index.html file not found’, or similar, because NetBeans doesn’t correctly tell the Android SDK to get the Assets from the Assets folder you copied and put the in the apk (Android app package). To fix:
13. In your NetBeans project open nbproject/build-impl.xml and change the line saying ‘<arg value="${asset.dir}"/>’ to ‘<arg value="${asset*s*.dir}"/>’   【注：我這沒遇到問題，是以沒有進行13、14的修改。】
14. Go into nbproject/project.properties and change ‘assets.dir=’ to ‘assets.dir=assets’. En route, add ‘assets.available=true’

Enjoy!

Eclipse中使用PhoneGap：【以下内容來自：http://www.phonegap.cn/?page_id=442#android】

• 1. 需求

  • Eclipse 3.4+
  本教程還有另外一個不使用Eclipse的版本，參照這裡 。【注：這裡寫的“另一個不使用Eclipse的版本”我一直打不開該頁面，是以不知道究竟是什麼玩意】

• 2. 安裝SDK + PhoneGap

  

  下載下傳并安裝Eclipse Classic。

  

  下載下傳并安裝Android SDK。

  

  下載下傳并安裝ADT Plugin。

  

  下載下傳 最新版本的PhoneGap并解壓，我們将使用其中的Android目錄。【注：官網http://phonegap.com/，我寫這個時最新版是1.5.0】

• 3. 新項目設定

  • 啟動Eclipse，然後在菜單“File”下選擇“New > Android Project”。

  

  • 在項目根目錄下，建立兩個新目錄:
    • /libs
    • /assets/www
  • 複制phonegap.js（從PhoneGap解壓縮後的Android目錄中，将解壓縮後的帶版本号的js檔案名修改為phonegap.js）到/assets/www。  【注：1.5.0版中不是phonegap.js而是cordova-1.5.0.js】
  • 複制phonegap.jar（從PhoneGap解壓縮後的Android目錄中）到/libs。   【注：1.5.0版中不是phonegap.jar而是cordova-1.5.0.jar】
  • 複制xml整個目錄（從PhoneGap解壓縮後的Android目錄中，包括一個plugins.xml）到/res。【v1.0 rc2以上】
  • 對Eclipse的src檔案夾中的主要Java檔案進行少量調整：（如下圖）
    • 将class的繼承由Activity改為DroidGap
    • 将setContentView()替換為super.loadUrl("file:///android_asset/www/index.html");
    • 添加import com.phonegap.*;    【1.5.0中應為：import org.apache.cordova.*;】
    • 移除import android.app.Activity;

    

  • 在這裡你可能會遇到Eclipse找不到phonegap-1.0.0.jar的錯誤。在這種情況下，右鍵單擊/libs檔案夾找到Build Paths/ > Configure Build Paths。然後在Libraries标簽頁中添加phonegap-1.0.0.jar到項目中。如果Eclipse不是很穩定，你需要點選F5重新整理一次項目。
  • 右鍵單擊AndroidManifest.xml并選擇Open With > Text Editor。
  • 将下面的權限設定拷貝到versionName之後:（如下圖）   【注：這個可以在PhoneGap内的sample中找到AndroidManifest.xml後從中複制】

    <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    

  • 在AndroidManifest的activity标簽中添加

    android:configChanges="orientation|keyboardHidden"

    。(如上圖)

• 4. Hello World

  在 “/assets/www”目錄中建立檔案“index.html”，并粘貼如下代碼：

  <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>

• 5A. 部署到模拟器

  • 右鍵單擊項目節點選擇Run As，然後點選Android Application。
  • Eclipse将要求你選擇一個合适的AVD，如果沒有設定的話，你需要建立一個AVD。

• 5B. 部署到裝置

  • 确認裝置已經勾選USB debugging選項，并已将裝置連接配接到電腦。（設定 > 應用程式 > 開發)
  • 右鍵單擊項目節點選擇Run As，點選Android Application。

• 完成!

  你可以在這裡了解本指南的詳細版本。