標籤:
Eclipse 是一種支援多種技術的開源整合式開發環境 (IDE),但本文重點介紹 Java 支援,這也是 Android 應用程式的“母語”。Android 是 Google 發布的開源移動作業系統。Android 現已成為許多智能手機和平板裝置的作業系統,其中包括三星 Galaxy 系列手機和平板電腦、亞馬遜 Kindle Fire 平板電腦、Barnes and Noble Nook 平板電腦,以及大量製造商生產的許多其他裝置。PhoneGap 是一個開源應用程式平台,可讓您使用 HTML 和 JavaScript 建立本機安裝的行動裝置 App程式。
安裝 Eclipse
在 Android 上建立 PhoneGap 應用程式開發環境的首要步驟是下載並安裝 Eclipse IDE。
使用 PhoneGap 進行 Android 開發(可在 Windows、OS X 或 Linux 中完成。目前有許多不同的 Eclipse 安裝包。雖然 PhoneGap 能夠與其他程式包配置一同使用,但建議採用 Eclipse Classic 程式包,該程式包中已經包含 PhoneGap 應用程式開發入門及使用所需的各種工具。
- 訪問 Eclipse 下載頁面,針對您的作業系統下載 Eclipse Classic 程式包。Eclipse 下載將是一個包含開發環境的封存檔案。
- 將該封存檔案提取到您的本地硬碟,並記住其所在位置。
- 提取完成後,只需雙擊 Eclipse 應用程式即可啟動 Eclipse,無需執行任何其他安裝步驟。
安裝 Android 工具
下載並安裝 Eclipse 後,您需要配置自身環境以使用 Google Android 開發工具。此流程包含兩個步驟。首先,下載並安裝 Android SDK。然後,為 Eclipse 安裝 ADT 外掛程式。
下載並配置 Android SDK
在您的系統上配置 Android 工具的首要步驟是下載 Android SDK。
- 訪問 Android SDK 網站 ,針對您的作業系統下載相應的版本。
- 將下載的封存檔案提取到您的本地硬碟,並記住其所在位置。
為 Eclipse 配置 ADT 外掛程式
接下來,您需要為 Eclipse 安裝 ADT(Android 開發工具)外掛程式。ADT 外掛程式必須通過 Eclipse Install New Software 嚮導來進行安裝。
- 啟動 Eclipse。
- 按照 ADT 外掛程式的下載說明(可在 Android 開發人員 SDK 頁面 - Eclipse 擷取)執行操作。這些步驟將指導您完成整個 ADT 外掛程式的安裝過程。
- 重新啟動 Eclipse。
在安裝完 ADT 外掛程式並重新啟動 Eclipse 後,您需要將它配置為使用已下載至本地檔案系統的 Android SDK。
- 按照 開發人員 SDK 頁面 – 配置 Eclipse 上的說明,在 ADT 外掛程式中設定適當的 Android SDK 位置。
下載並安裝 PhoneGap
下一步是下載並安裝 PhoneGap。
- 訪問 PhoneGap 下載頁面,然後單擊橙色的下載連結以開始下載過程。
- 將封存檔案提取到本地檔案系統以備隨後使用。
您現已為在 Eclipse 內建立首個 Android PhoneGap 項目做好準備。
注意: 操作步驟針對 PhoneGap 1.5,但該流程須適用於所有版本的 PhoneGap,並且所有版本 PhoneGap 的操作均相同。
在 Eclipse 中建立項目
請按照以下步驟在 Eclipse 中建立新的 Android 項目:
- 選擇 New > Android Project(參見圖 1)。
圖 1. 建立新的 Android 項目。
建立全新的標準 Android 項目後,將更新該項目以使用 PhoneGap。
- 在 New Android Project 對話方塊中,鍵入項目名稱,然後選中 Create New Project In Workspace(參見圖 2)。
- 單擊 Next。
圖 2. New Android Project 對話方塊。
- 選擇 Android 2.2 作為構建目標,然後單擊 Next(參見圖 3)。
注意:選擇 Android 2.2 作為構建目標會將該編譯器配置為以 Android 2.2 SDK 為目標,這樣可確保您的 PhoneGap 應用程式在運行 Android 2.2 及更新版本的作業系統的裝置上運行。
圖 3. 選擇構建目標。
- 在 Application Info 螢幕上,鍵入您的主要 Android 應用程式的程式包名稱(參見圖 4)。這將是一個從邏輯上展示程式包結構的命名空間,例如 com.yourcompany.yourproject。
- 單擊 Finish。
圖 4. 指定程式包名稱。
設定項目以使用 PhoneGap
此時,Eclipse 建立了一個空白的 Android 項目。但是,並未將它配置為使用 PhoneGap。接下來,您需要執行以下操作
- 在新 Android 項目內建立一個 assets/www 目錄和一個 libs 目錄。PhoneGap 應用程式介面的所有 HTML 和 JavaScript 均將駐留在 assets/www 檔案夾內(參見圖 5)。
圖 5. 新項目目錄。
- 要將 PhoneGap 的必要檔案複製到項目內,首先找出下載 PhoneGap 的目錄,然後導航至 lib/android 子目錄(參見圖 6)。
圖 6. PhoneGap lib/android 目錄。
- 將 cordova-1.5.0.js 複製到 Android 項目內的 assets/www 目錄。
- 將 cordova-1.5.0.jar 複製到 Android 項目內的 libs 目錄。
- 將 xml 目錄複寫到 Android 項目內的 res 目錄(參見圖 7)。
圖 7. 複製資源。
- 接下來,在 assets/www 檔案夾中建立一個名為 index.html 的檔案。此檔案將用作 PhoneGap 應用程式介面的主要進入點
- 在 index.html 中,添加以下 HTML 程式碼作為使用者介面開發的起點:
<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>
- 您需要將 cordova-1.5.0.jar 庫添加到該 Android 項目的構建路徑。按右鍵 cordova-1.5.0.jar,然後選擇 Build Path > Add To Build Path(參見圖 8)。
圖 8. 將 cordova-1.5.0.jar 添加至構建路徑。
更新 Activity 類
現在,您已經為更新 Android 項目以確保其開始使用 PhoneGap 做好準備。
- 開啟您的主應用程式活動檔案。此檔案的名稱與您的項目相同,並會在後面加上 "Activity" 一詞。它將位於您先前在此流程中指定的項目程式包的
src 檔案夾下。
對於我的項目(名為 HelloGap)而言,主 Android 活動檔案名稱為 HelloGapActivity.java,位於我在 New Android Project 對話方塊中指定的程式包 com.tricedesigns.hello 中。
- 在主 Activity 類中,為
org.apache.cordova.DroidGap添加以下匯入語句:
import org.apache.cordova.DroidGap;
- 將基類從
Activity 更改為DroidGap ;它位於類定義中 extends 一詞的後面:
public class HelloGapActivity extends DroidGap {
- 用從您此前建立的本地 assets/www/index.html 檔案載入 PhoneGap 介面的引用替換
setContentView() 調用函數(參見圖 9)。
super.loadUrl("file:///android_asset/www/index.html");
注意:在 PhoneGap 項目中,您可以引用位於 URL 引用為 file:///android_asset 的 assets 目錄中的檔案,然後引用該檔案的路徑名稱。file:///android_asset URI 將會映射到 assets 目錄。
圖 9. 主 Activity 類更新。
設定項目中繼資料
現在,您已經將 Android 項目內的檔案配置為使用 PhoneGap。最後一步是設定項目中繼資料,以使 PhoneGap 運行。
- 首先,在您的項目根中開啟 AndroidManifest.xml 檔案。使用 Eclipse 文字編輯器,方法是按右鍵 AndroidManifest.xml 檔案,然後選擇 Open With > Text Editor(參見圖 10)。
圖 10. 開啟 AndroidManifest.xml。
- 在 AndroidManifest.xml 中,添加以下
supports-screen XML 節點作為 manifest 根節點的子節點
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />
supports-screen 節點可識別您應用程式支援的螢幕大小。您可以通過更改此條目的內容來調整螢幕和外觀設定支援。要閱讀有關<supports-screens>,的更多資訊,請訪問 Android 開發人員主題 – 支援螢幕元素。
接下來,您需要為 PhoneGap 應用程式配置許可權。
- 複製以下
<uses-permission> XML 節點,並粘貼它們作為 AndroidManifest.xml 檔案<manifest> 根節點的子節點:
<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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission>XML 值可識別您要為應用程式啟用的功能。上述程式碼可啟用 PhoneGap 所有功能正常運行所需的全部許可權。構建完應用程式後,您可能希望刪除不會實際用到的所有許可權;這將會刪除應用程式安裝過程中出現的安全警告。要閱讀有關 Android 許可權和 <uses-permission> 元素的更多資訊,請訪問 Android 開發人員主題 – 使用者權限元素。
應用程式許可權配置完畢後,您需要修改現有的 <activity> 代碼。
- 找到
<activity>節點,它是 <application>XML 節點的子節點。將下面的屬性添加到該<activity> 節點:
configChanges="orientation|keyboardHidden"
- 接下來,您需要再為
org.apache.cordova.DroidGap 類建立一個 <activity> 節點。添加下面的<activity> 節點作為現有 <activity> XML 節點的同級節點。
<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>
此時,已將您的項目配置為作為 Android PhoneGap 項目運行。如果您遇到任何問題,請根據 Android PhoneGap 入門網站提供的樣本驗證您的配置。
運行應用程式
要在 Android 模擬器中啟動您的 PhoneGap 應用程式,請按右鍵項目根目錄,然後選擇 Run As > Android Application(參見圖 11)。
圖 11. 啟動 Android 應用程式。
如果您尚未設定任何 Android 虛擬裝置,那麼系統將提示您配置一台 Android 虛擬裝置。要瞭解有關配置 Android 模擬器虛擬設備的更多資訊,請訪問 Android 開發人員裝置指南。
Eclipse 將自動啟動 Android 模擬器執行個體(如果尚未啟動並執行話),為該模擬器部署您的應用程式,然後啟動該應用程式(參見圖 12)。
圖 12. Android 模擬器中的應用程式。
當在 Android 模擬器中運行應用程式後,您可能會希望在物理裝置上對其進行測試。強烈建議您始終先在物理裝置上測試您的應用程式,然後再將該應用程式部署到生產環境中。物理裝置的計算能力和外觀設定往往與模擬器不同,裝置測試能夠揭露模擬器環境中可能無法檢測到的問題。
請按照以下步驟在物理 Android 裝置上啟動您的應用程式:
- 確保該裝置已通過 USB 串連到您的電腦。
- 選擇 Run > Run Configurations(參見圖 13)。
圖 13. 更新執行配置。
- 在 Run Configurations 對話方塊左側的 Android Application 下選擇您的應用程式。
- 單擊 Target 選項卡,然後選擇 Manual 作為 Deployment Target Selection Mode。
- 當您準備好啟動應用程式後,單擊 Run(參見圖 14)。
圖 14. 準備在裝置上運行應用程式。
在 Android Device Chooser 對話方塊中,您可以選擇模擬器,也可以選擇串連的 Android 裝置。串連的所有 Android 裝置均將顯示在此列表中。
圖 15. 選擇 Android 裝置。
- 選擇您要使用的裝置(參見圖 15),然後單擊 OK。
此時將會在該裝置上安裝並啟動您的 PhoneGap 應用程式。
下一步閱讀方向
如果您已經堅持學習完本部分,則可以開始使用 PhoneGap 構建真正的 Android 應用程式。接下來你可以閱讀使用面向 iOS 的本機外掛程式擴充 PhoneGap 。
請記住,需使用 HTML、CSS 和 JavaScript 為使用者介面構建 PhoneGap 應用程式。這樣,您就可以使用傳統的 Web 開發技術輕鬆建立外觀卓越的應用程式。要瞭解有關 PhoneGap 的更多資訊,請查閱 PhoneGap wiki,加入PhoneGap Google Group 或深入學習 PhoneGap 文檔。
使用 Eclipse PhoneGap 構建 Android 應用程式入門