使用Eclipse構建app網站應用

Eclipse 是一種支持多種技術的開源集成開發環境 (IDE)，但本文重點介紹 Java 支持，這也是 Android 應用程序的「母語」。Android 是 Google 發佈的開源移動操做系統。Android 現已成爲許多智能手機和平板設備的操做系統，其中包括三星 Galaxy 系列手機和平板電腦、亞馬遜 Kindle Fire 平板電腦、Barnes and Noble Nook 平板電腦，以及大量製造商生產的許多其餘設備。PhoneGap 是一個開源應用程序平臺，可以讓您使用 HTML 和 JavaScript 建立本機安裝的移動應用程序。

安裝 Eclipse

http://developer.android.com/sdk/index.html 下載集成版本或者用下面的方法

在 Android 上創建 PhoneGap 應用程序開發環境的首要步驟是下載並安裝 Eclipse IDE。

使用 PhoneGap 進行 Android 開發（可在 Windows、OS X 或 Linux 中完成。目前有許多不一樣的 Eclipse 安裝包。雖然 PhoneGap 可以與其餘程序包配置一同使用，但建議採用 Eclipse Classic 程序包，該程序包中已經包含 PhoneGap 應用程序開發入門及使用所需的各類工具。

1. 訪問 Eclipse 下載頁面，針對您的操做系統下載 Eclipse Classic 程序包。Eclipse 下載將是一個包含開發環境的存檔文件。
2. 將該存檔文件提取到您的本地硬盤，並記住其所在位置。
3. 提取完成後，只需雙擊 Eclipse 應用程序便可啓動 Eclipse，無需執行任何其餘安裝步驟。

安裝 Android 工具

下載並安裝 Eclipse 後，您須要配置自身環境以使用 Google Android 開發工具。此流程包含兩個步驟。首先，下載並安裝 Android SDK。而後，爲 Eclipse 安裝 ADT 插件。

下載並配置 Android SDK

在您的系統上配置 Android 工具的首要步驟是下載 Android SDK。

1. 訪問 Android SDK 網站 ，針對您的操做系統下載相應的版本。
2. 將下載的存檔文件提取到您的本地硬盤，並記住其所在位置。
3. 若是不配置SDK變量,就會出現

   An error occurred while listing Android targets

爲 Eclipse 配置 ADT 插件

接下來，您須要爲 Eclipse 安裝 ADT（Android 開發工具）插件。ADT 插件必須經過 Eclipse Install New Software 嚮導來進行安裝。

1. 啓動 Eclipse。
2. 按照 ADT 插件的下載說明（可在 Android 開發人員 SDK 頁面 - Eclipse 獲取）執行操做。這些步驟將指導您完成整個 ADT 插件的安裝過程。
3. 從新啓動 Eclipse。

在安裝完 ADT 插件並從新啓動 Eclipse 後，您須要將它配置爲使用已下載至本地文件系統的 Android SDK。

4. 按照 開發人員 SDK 頁面 – 配置 Eclipse 上的說明，在 ADT 插件中設置適當的 Android SDK 位置。

爲打包配置ANT

環境變量配置

ANT_HOME=D:\apache-ant-1.8.2       (系統變量：新建) 

Path= %ANT_HOME%/bin; %ANT_HOME%/lib;       (系統變量：編輯)   

下載並安裝 PhoneGap

下一步是下載並安裝 PhoneGap。

1. 訪問 PhoneGap 下載頁面，而後單擊橙色的下載連接以開始下載過程。
2. 將存檔文件提取到本地文件系統以備隨後使用。

您現已爲在 Eclipse 內建立首個 Android PhoneGap 項目作好準備。

注意： 操做步驟針對 PhoneGap 1.5，但該流程須適用於全部版本的 PhoneGap，而且全部版本 PhoneGap 的操做均相同。

在 Eclipse 中建立項目

請按照如下步驟在 Eclipse 中建立新的 Android 項目：

1. 選擇 New > Android Project（參見圖 1）。

圖 1. 建立新的 Android 項目。

建立全新的標準 Android 項目後，將更新該項目以使用 PhoneGap。

2. 在 New Android Project 對話框中，鍵入項目名稱，而後選中 Create New Project In Workspace（參見圖 2）。
3. 單擊 Next。

圖 2. New Android Project 對話框。

4. 選擇 Android 2.2 做爲構建目標，而後單擊 Next（參見圖 3）。

注意：選擇 Android 2.2 做爲構建目標會將該編譯器配置爲以 Android 2.2 SDK 爲目標，這樣可確保您的 PhoneGap 應用程序在運行 Android 2.2 及更新版本的操做系統的設備上運行。

圖 3. 選擇構建目標。

5. 在 Application Info 屏幕上，鍵入您的主要 Android 應用程序的程序包名稱（參見圖 4）。這將是一個從邏輯上展現程序包結構的命名空間，例如 com.yourcompany.yourproject。
6. 單擊 Finish。

圖 4. 指定程序包名稱。

配置項目以使用 PhoneGap

此時，Eclipse 建立了一個空白的 Android 項目。可是，並未將它配置爲使用 PhoneGap。接下來，您須要執行如下操做

1. 在新 Android 項目內建立一個 assets/www 目錄和一個 libs 目錄。PhoneGap 應用程序界面的全部 HTML 和 JavaScript 均將駐留在 assets/www 文件夾內（參見圖 5）。

圖 5. 新項目目錄。

2. 要將 PhoneGap 的必要文件複製到項目內，首先找出下載 PhoneGap 的目錄，而後導航至 lib/android 子目錄（參見圖 6）。

圖 6. PhoneGap lib/android 目錄。

3. 將 cordova-1.5.0.js 複製到 Android 項目內的 assets/www 目錄。
4. 將 cordova-1.5.0.jar 複製到 Android 項目內的 libs 目錄。
5. 將 xml 目錄複製到 Android 項目內的 res 目錄（參見圖 7）。

圖 7. 複製資源。

6. 接下來，在 assets/www 文件夾中建立一個名爲 index.html 的文件。此文件將用做 PhoneGap 應用程序界面的主要入口點
7. 在 index.html 中，添加如下 HTML 代碼做爲用戶界面開發的起點：

Hello PhoneGap

8. 您須要將 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 作好準備。

1. 打開您的主應用程序活動文件。此文件的名稱與您的項目相同，並會在後面加上 "Activity" 一詞。它將位於您先前在此流程中指定的項目程序包的 src 文件夾下。

對於個人項目（名爲 HelloGap）而言，主 Android 活動文件名爲 HelloGapActivity.java，位於我在 New Android Project 對話框中指定的程序包 com.tricedesigns.hello 中。

2. 在主 Activity 類中，爲 org.apache.cordova.DroidGap添加如下導入語句：

import org.apache.cordova.DroidGap;

3. 將基類從 Activity 更改成DroidGap ；它位於類定義中 extends 一詞的後面：

public class HelloGapActivity extends DroidGap {

4. 用從您此前建立的本地 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 運行。

1. 首先，在您的項目根中打開 AndroidManifest.xml 文件。使用 Eclipse 文本編輯器，方法是右鍵單擊 AndroidManifest.xml 文件，而後選擇 Open With > Text Editor（參見圖 10）。

圖 10. 打開 AndroidManifest.xml。

2. 在 AndroidManifest.xml 中，添加如下supports-screen XML 節點做爲 manifest 根節點的子節點

supports-screen 節點可識別您應用程序支持的屏幕大小。您能夠經過更改此條目的內容來調整屏幕和外觀設置支持。要閱讀有關,的更多信息，請訪問 Android 開發人員主題 – 支持屏幕元素。

接下來，您須要爲 PhoneGap 應用程序配置權限。

3. 複製如下 XML 節點，並粘貼它們做爲 AndroidManifest.xml 文件 根節點的子節點：

XML 值可識別您要爲應用程序啓用的功能。上述代碼行可啓用 PhoneGap 全部功能正常運行所需的所有權限。構建完應用程序後，您可能但願刪除不會實際用到的全部權限；這將會刪除應用程序安裝過程當中出現的安全警告。要閱讀有關 Android 權限和 元素的更多信息，請訪問 Android 開發人員主題 – 用戶權限元素。

應用程序權限配置完畢後，您須要修改現有的 代碼。

4. 找到節點，它是 XML 節點的子節點。將下面的屬性添加到該 節點：

configChanges="orientation|keyboardHidden"

5. 接下來，您須要再爲 org.apache.cordova.DroidGap 類建立一個 節點。添加下面的 節點做爲現有 XML 節點的同級節點。

此時，已將您的項目配置爲做爲 Android PhoneGap 項目運行。若是您遇到任何問題，請根據 Android PhoneGap 入門網站提供的示例驗證您的配置。

運行應用程序

要在 Android 模擬器中啓動您的 PhoneGap 應用程序，請右鍵單擊項目根目錄，而後選擇 Run As > Android Application（參見圖 11）。

圖 11. 啓動 Android 應用程序。

若是您還沒有設置任何 Android 虛擬設備，那麼系統將提示您配置一臺 Android 虛擬設備。要了解有關配置 Android 模擬器虛擬設備的更多信息，請訪問 Android 開發人員設備指南。

Eclipse 將自動啓動 Android 模擬器實例（若是還沒有運行的話），爲該模擬器部署您的應用程序，而後啓動該應用程序（參見圖 12）。

圖 12. Android 模擬器中的應用程序。

當在 Android 模擬器中運行應用程序後，您可能會但願在物理設備上對其進行測試。強烈建議您始終先在物理設備上測試您的應用程序，而後再將該應用程序部署到生產環境中。物理設備的計算能力和外觀設置每每與模擬器不一樣，設備測試可以揭露模擬器環境中可能沒法檢測到的問題。

請按照如下步驟在物理 Android 設備上啓動您的應用程序：

1. 確保該設備已經過 USB 鏈接到您的計算機。
2. 選擇 Run > Run Configurations（參見圖 13）。

圖 13. 更新運行配置。

3. 在 Run Configurations 對話框左側的 Android Application 下選擇您的應用程序。
4. 單擊 Target 選項卡，而後選擇 Manual 做爲 Deployment Target Selection Mode。
5. 當您準備好啓動應用程序後，單擊 Run（參見圖 14）。

圖 14. 準備在設備上運行應用程序。

在 Android Device Chooser 對話框中，您能夠選擇模擬器，也能夠選擇鏈接的 Android 設備。鏈接的全部 Android 設備均將顯示在此列表中。

圖 15. 選擇 Android 設備。

6. 選擇您要使用的設備（參見圖 15），而後單擊 OK。

此時將會在該設備上安裝並啓動您的 PhoneGap 應用程序。