1、在 Android 上使用 XML 和 JSON，第 2 部分 交付混合了 JSON 的 Android 應(yīng)用程序 來源：IBM developer works簡介常用縮略語常用縮略語本系列其他文章本系列其他文章嵌入在 Android 中的 JavaScript 計算器 Activity 中三個按鈕的功能設(shè)置用戶界面 清單清單 1. main.xml 1. main.xml，用戶界面，用戶界面布局文件布局文件 清單清單 2. 2. 設(shè)置用戶界面設(shè)置用戶界面 清單清單 3. R.java 3. R.java 清單清單 4. 4. 設(shè)置設(shè)置 WebView WebView 小部小部件件簡介要運行本

2、文的 示例代碼，應(yīng)該安裝 Android SDK 1.5 或更晚版本和 Eclipse。要進一步學習如何設(shè)置環(huán)境，請訪問 Android Developers 網(wǎng)站。難以想象還有哪種技術(shù)比移動電話更流行。大量的平臺在銷售和心理份額方面爭占此行業(yè)的頂級市場。設(shè)備是高級的工程樣品，真正讓它們流行起來的動力在于這些平臺上可用的大量應(yīng)用程序帶來的用戶體驗。具體來說，iPhone 和 Android 平臺是最新的設(shè)備，點燃了人們的消費欲望。常用縮略語常用縮略語API: 應(yīng)用程序編程接口 CSS: 層疊樣式表 HTML: 超文本標記語言 IDE: 集成開發(fā)環(huán)境 SDK: 軟件開發(fā)工具包 UI: 用戶界面

3、XML: 可擴展標記語言 對移動用戶可用的大部分應(yīng)用程序是由移動開發(fā)人員通過各平臺供應(yīng)商提供的核心 SDK 編寫的。移動設(shè)備的流行離不開大量天才的 web 技術(shù)程序員，過去十年間，他們在 Web 上大獲成功，現(xiàn)在又開創(chuàng)了一種新型的應(yīng)用程序 混合應(yīng)用程序，即既使用 web 瀏覽器接口又使用本地移動組件的應(yīng)用程序。針對 iPhone 和 Android 都存在混合應(yīng)用程序，不過本文的重點放在 Android 混合應(yīng)用程序及 JavaScript 和 JSON 的使用上?；旌蠎?yīng)用程序是用 Android 的 WebView 控件中的 WebKit 引擎構(gòu)建的。這是一個用戶界面小部件，它向 Andro

4、id 程序員提供 WebKit 的功能。此控件可用于在應(yīng)用程序中呈現(xiàn)遠程 web 頁面，以便為開發(fā)人員和用戶等提供熟悉的用戶界面體驗，以及在本地 Android 應(yīng)用程序中利用強大且靈活的 JavaScript 環(huán)境。本系列其他文章本系列其他文章在 Android 上使用 XML 和 JSON，第 1 部分：在 Android 應(yīng)用程序上研究 JSON 和 XML 益處 混合應(yīng)用程序通常利用 WebView 小部件來為用戶界面元素充分利用 WebKit 的優(yōu)勢，但是混合應(yīng)用程序不僅僅是簡單地在小部件中顯示一些 HTML。混合應(yīng)用程序是多才多藝的 Android SDK 中包含的廣泛功能加上 H

5、TML、CSS 和 JavaScript 等 web 技術(shù)，使得混合應(yīng)用程序的功能不可限量。為了實際了解混合應(yīng)用程序的概念，本文將介紹一個名為 AndroidJSON 的樣例應(yīng)用程序，它實現(xiàn)了 Activity、WebView 和 JSON 之間的很多交互，以交換數(shù)據(jù)。該應(yīng)用程序演示了 Activity 和 WebView 宿主的 HTML 及 JavaScript 之間的很多交互，主要特性是一個 JavaScript 計算器。首先，我們來看直接在 Android 應(yīng)用程序中嵌入一個 WebKit 引擎。嵌入在 Android 中的 JavaScript 計算器大部分基于 SDK 的 Andr

6、oid 應(yīng)用程序都包含 Activity 類的一個或多個實現(xiàn)。Activity 類本質(zhì)上是一個屏幕或頁面，其中包含由應(yīng)用程序用戶體驗的用戶界面元素。Activity 顯示一組由程序員定義的用戶界面元素，比如按鈕、標簽、文本輸入框、單選按鈕列表，等等。所有預(yù)期的條目都可在 Android SDK 中找到。除了這些用戶界面元素之外，還有一個特殊的小部件，就是 WebView。JavaScript 計算器演示了 Activity 的 Java 環(huán)境和 WebView 的 JavaScript 環(huán)境之間相輔相成的關(guān)系。應(yīng)用程序不僅僅是要求 WebView 顯示 HTML 內(nèi)容 它實際上是連接 Java

7、 環(huán)境，以向 JavaScript 環(huán)境提供功能，這樣可以將兩者緊密地集成在一起，從而帶來獨特的用戶體驗。一旦兩個環(huán)境連接起來，就可以 JSON 形式交換數(shù)據(jù)，以交付各種特性，本文將全面解釋這些特性。我們首先來看 JavaScript 計算器如何利用 WebView 小部件。在深入應(yīng)用程序是如何構(gòu)造的細節(jié)之前，先花點時間回顧一下應(yīng)用程序的各種特性。圖 1 展示了應(yīng)用程序屏幕。圖圖 1. 1. 展示正在工作的展示正在工作的 JavaScript JavaScript 計算器計算器在名為 AndroidJSON 的樣例本地 Android 應(yīng)用程序中，屏幕是用 Activity 組件定義的。它在屏

8、幕的上半部分包含傳統(tǒng)的用戶界面元素，比如一個 TextView（靜態(tài)標簽）、一個 EditText（文本框，用戶在這里輸入公式）和三個按鈕（即 Simple、Complex 和 Make Red）。Activity 也具有 WebView 控件的單個實例，用于顯示屏幕的下半部分。WebView 顯示一個與 Android 應(yīng)用程序打包在一起的 HTML 文件 (index.html)，不過您也可以從 Internet 單獨下載此文件。該 web 頁面包含標題、一些樣例文本、計算結(jié)果和六個執(zhí)行各種功能的按鈕（Log Info、Log Error、Dynamic、How Many Calls、Hi

9、story 和 Kill This App）。這個項目中最有趣的文件是 AndroidJSON.java（Android 應(yīng)用程序代碼）、index.html（web 頁面）和 main.xml（一個 UI 布局文件，后面將會介紹）。 Activity 中三個按鈕的功能SimpleSimple Simple 按鈕導致 EditText 的內(nèi)容被作為數(shù)學表達式進行計算。注意，EditText 的內(nèi)容或者說公式，在 JavaScript 中被傳遞到 WebView 控件并進行計算。 ComplexComplex Complex 按鈕將 JSON 對象發(fā)送到 WebView 進行計算。這被認為復雜，

10、是因為對象隨后在 JavaScript 代碼中被解釋并以數(shù)學方式被操縱。該按鈕在兩個功能之間交替，一個功能是將一個整數(shù)數(shù)組的元素相加，另一個功能是將這個整個數(shù)組的元素相乘。 Make RedMake Red 這第三個按鈕在此主要是出于好玩。選中時，該按鈕向嵌入的 WebView 內(nèi)容應(yīng)用一種樣式，將包含在 標記中的文本元素變成紅色。 現(xiàn)在來看 index.html 文件中的函數(shù)，該文件由嵌入的 WebView 控件在運行時啟用。Log InfoLog Info 該按鈕調(diào)用 Android 應(yīng)用程序中的一個回調(diào)函數(shù)，以將數(shù)據(jù)項寫到 Info 分類下的應(yīng)用程序日志中。 Error InfoErro

11、r Info 該按鈕調(diào)用 Android 應(yīng)用程序中的一個回調(diào)函數(shù)，以將數(shù)據(jù)項寫到 Error 分類下的應(yīng)用程序日志中。 DynamicDynamic 該按鈕調(diào)用 Android 應(yīng)用程序中的一個回調(diào)函數(shù)，以檢索一段代表有效 JavaScript 代碼的文本。此代碼被帶回 WebView 中并執(zhí)行，演示了應(yīng)用程序兩端之間的交互。注意，此方法存在安全隱患，因為它盲目信任 JavaScript eval 函數(shù)。但是，我們這里將重點放在基本的示例應(yīng)用程序上，而不是介紹完善的生產(chǎn)性應(yīng)用程序。 How many callsHow many calls 每調(diào)用一次回調(diào)函數(shù)，計數(shù)器就會增 1。 該按鈕只是顯

12、示計數(shù)器。 HistoryHistory 每調(diào)用一次 JavaScript 函數(shù)，一個表示函數(shù)名的字符串就會被添加到 JavaScript 數(shù)組。當 history 按鈕被調(diào)用時，此數(shù)組將被轉(zhuǎn)換成 JSON 并傳遞到 Android 應(yīng)用程序的本地部分。數(shù)組被改造為 Java 代碼中的一個對象，并枚舉寫到日志中的每個數(shù)組元素。 Kill This AppKill This App 該按鈕是此應(yīng)用程序的又一個只是出于好玩的特性。該按鈕調(diào)用一個會通過調(diào)用 finish() 而終止 Android 活動的回調(diào)函數(shù)。 跟很多不完善的應(yīng)用程序一樣，此 Android 應(yīng)用程序也使用了內(nèi)置在 Androi

13、d 中的日志功能。本文中展示的一些屏幕截圖來自 Eclipse 中的 Dalvik Debug Monitor Service (DDMS) 視圖，其中 LogCat 窗口是可見的。設(shè)置用戶界面剛才解釋了應(yīng)用程序的函數(shù)，現(xiàn)在來看用戶界面是如何構(gòu)造的。為該應(yīng)用程序創(chuàng)建用戶界面要調(diào)用前面介紹過的三個文件。首先是布局文件 main.xml，如 清單 1 所示。清單清單 1. main.xml 1. main.xml，用戶界面布局文件，用戶界面布局文件 android:orientation=vertical android:layout_width=fill_parent android:layou

14、t_height=fill_parent android:orientation=horizontal android:layout_width=fill_parent android:layout_height=wrap_content 在 清單 1 中，布局包含各種用戶界面元素。注意，android:id 屬性使得應(yīng)用程序可以引用布局中的特定小部件。例如，WebView 包含 calculator 的一個 id；但是 TextView 不包含 id，因為它的值在應(yīng)用程序的整個生命期內(nèi)是不變的。AndroidJSON.java 中的 onCreate() 方法負責搭建布局，如 清單 2 所示

15、。清單清單 2. 2. 設(shè)置用戶界面設(shè)置用戶界面public class AndroidJSON extends Activity private final String tag = AndroidJSON; private WebView browser = null; private int flipflop = 0; /* Called when the activity is first created. */ Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceSt

16、ate); / remaining code removed for brevity - shown in next listings通過調(diào)用 setContentView() 搭建布局。注意，通過調(diào)用 findViewById() 方法設(shè)置用戶界面元素。每次保存 main.xml 文件時會自動產(chǎn)生 R.java 文件。包含 android:id 屬性的布局元素變成 R.id 類中的值，如 清單 3 所示。清單清單 3. R.java 3. R.java/* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically

17、 generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */public final class R public static final class attr public static final class drawable public static final int icon=0 x7f020000; public static final class id public static final int btnComplex=0 x7f

18、050002; public static final int btnRed=0 x7f050003; public static final int btnSimple=0 x7f050001; public static final int calculator=0 x7f050004; public static final int formula=0 x7f050000; public static final class layout public static final int main=0 x7f030000; public static final class string

19、public static final int app_name=0 x7f040001; public static final int title=0 x7f040000; 本文稍后還會詳細介紹 Button 設(shè)置代碼，現(xiàn)在將重點放在 WebView 控件或小部件的設(shè)置上。盡管 Button 和其他用戶界面元素相當直觀，但是 WebView 還是得稍微費點功夫。但是不必擔心 它也不是那么難，具體來說重點就是使用常用的剪切粘貼技術(shù)！來看一下 清單 4 中的代碼段，它還是來自 AndroidJSON.java 中的 onCreate() 方法。清單清單 4. 4. 設(shè)置設(shè)置 WebView W

20、ebView 小部件小部件 / connect to our browser so we can manipulate it / set a webview client to override the default functionality browser.setWebViewClient(new wvClient(); / get settings so we can config our WebView instance WebSettings settings = browser.getSettings(); / JavaScript? Of course! settings.se

21、tJavaScriptEnabled(true); / clear cache browser.clearCache(true); / this is necessary for alert() to work browser.setWebChromeClient(new WebChromeClient();/ add our custom functionality to the javascript environment browser.addJavascriptInterface(new CalculatorHandler(), calc); / uncomment this if y

22、ou want to use the webview as an invisible calculator! /browser.setVisibility(View.INVISIBLE); / load a page to get things started browser.loadUrl(file:/android_asset/index.html); / allows the control to receive focus / on some versions of Android the webview doesnt handle input focus properly / this seems to make things work with Android 2.1, but not 2.2 / browser.requestFocusFromTouch()