在Android上使用XML和JSON,第部分交付混合了JSON的Andro

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

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

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

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

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

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

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

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

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

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

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

12、示計(jì)數(shù)器。 HistoryHistory 每調(diào)用一次 JavaScript 函數(shù)，一個(gè)表示函數(shù)名的字符串就會(huì)被添加到 JavaScript 數(shù)組。當(dāng) history 按鈕被調(diào)用時(shí)，此數(shù)組將被轉(zhuǎn)換成 JSON 并傳遞到 Android 應(yīng)用程序的本地部分。數(shù)組被改造為 Java 代碼中的一個(gè)對(duì)象，并枚舉寫到日志中的每個(gè)數(shù)組元素。 Kill This AppKill This App 該按鈕是此應(yīng)用程序的又一個(gè)只是出于好玩的特性。該按鈕調(diào)用一個(gè)會(huì)通過調(diào)用 finish() 而終止 Android 活動(dòng)的回調(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)用前面介紹過的三個(gè)文件。首先是布局文件 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 的一個(gè) id；但是 TextView 不包含 id，因?yàn)樗闹翟趹?yīng)用程序的整個(gè)生命期內(nèi)是不變的。AndroidJSON.java 中的 onCreate() 方法負(fù)責(zé)搭建布局，如 清單 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 文件時(shí)會(huì)自動(dòng)產(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; 本文稍后還會(huì)詳細(xì)介紹 Button 設(shè)置代碼，現(xiàn)在將重點(diǎn)放在 WebView 控件或小部件的設(shè)置上。盡管 Button 和其他用戶界面元素相當(dāng)直觀，但是 WebView 還是得稍微費(fèi)點(diǎn)功夫。但是不必?fù)?dān)心 它也不是那么難，具體來說重點(diǎn)就是使用常用的剪切粘貼技術(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()