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

千锋3G嵌入式移动互联网技术研发中心，第2部分——交付混合了JSON的ANDROID应用程序来源：IBMDEVELOPERWORKS简介常用缩略语本系列其他文章嵌入在Android中的JavaScript计算器Activity中三个按钮的功能设置用户界面清单1.main.xml，用户界面布局文件清单2.设置用户界面清单3.R.java清单4.设置WebView小部件千锋3G嵌入式移动互联网技术研发中心简介要运行本文的示例代码，应该安装AndroidSDK1.5或更晚版本和Eclipse。要进一步学习如何设置环境，请访问AndroidDevelopers网站。难以想象还有哪种技术比移动电话更流行。大量的平台在销售和心理份额方面争占此行业的顶级市场。设备是高级的工程样品，真正让它们流行起来的动力在于这些平台上可用的大量应用程序带来的用户体验。具体来说，iPhone和Android平台是最新的设备，点燃了人们的消费欲望。千锋3G嵌入式移动互联网技术研发中心常用缩略语API:应用程序编程接口CSS:层叠样式表HTML:超文本标记语言IDE:集成开发环境SDK:软件开发工具包UI:用户界面XML:可扩展标记语言千锋3G嵌入式移动互联网技术研发中心对移动用户可用的大部分应用程序是由移动开发人员通过各平台供应商提供的核心SDK编写的。移动设备的流行离不开大量天才的web技术程序员，过去十年间，他们在Web上大获成功，现在又开创了一种新型的应用程序—混合应用程序，即既使用web浏览器接口又使用本地移动组件的应用程序。针对iPhone和Android都存在混合应用程序，不过本文的重点放在Android混合应用程序及JavaScript和JSON的使用上。混合应用程序是用Android的WebView控件中的WebKit引擎构建的。这是一个用户界面小部件，它向Android程序员提供WebKit的功能。此控件可用于在应用程序中呈现远程web页面，以便为开发人员和用户等提供熟悉的用户界面体验，以及在本地Android应用程序中利用强大且灵活的JavaScript环境。千锋3G嵌入式移动互联网技术研发中心本系列其他文章在Android上使用XML和JSON，第1部分：在Android应用程序上研究JSON和XML益处千锋3G嵌入式移动互联网技术研发中心混合应用程序通常利用WebView小部件来为用户界面元素充分利用WebKit的优势，但是混合应用程序不仅仅是简单地在小部件中显示一些HTML。混合应用程序是多才多艺的—AndroidSDK中包含的广泛功能加上HTML、CSS和JavaScript等web技术，使得混合应用程序的功能不可限量。为了实际了解混合应用程序的概念，本文将介绍一个名为AndroidJSON的样例应用程序，它实现了Activity、WebView和JSON之间的很多交互，以交换数据。该应用程序演示了Activity和WebView宿主的HTML及JavaScript之间的很多交互，主要特性是一个JavaScript计算器。首先，我们来看直接在Android应用程序中嵌入一个WebKit引擎。千锋3G嵌入式移动互联网技术研发中心计算器大部分基于SDK的Android应用程序都包含Activity类的一个或多个实现。Activity类本质上是一个屏幕或页面，其中包含由应用程序用户体验的用户界面元素。Activity显示一组由程序员定义的用户界面元素，比如按钮、标签、文本输入框、单选按钮列表，等等。所有预期的条目都可在AndroidSDK中找到。除了这些用户界面元素之外，还有一个特殊的小部件，就是WebView。千锋3G嵌入式移动互联网技术研发中心JavaScript计算器演示了Activity的Java环境和WebView的JavaScript环境之间相辅相成的关系。应用程序不仅仅是要求WebView显示HTML内容—它实际上是连接Java环境，以向JavaScript环境提供功能，这样可以将两者紧密地集成在一起，从而带来独特的用户体验。一旦两个环境连接起来，就可以JSON形式交换数据，以交付各种特性，本文将全面解释这些特性。我们首先来看JavaScript计算器如何利用WebView小部件。千锋3G嵌入式移动互联网技术研发中心在深入应用程序是如何构造的细节之前，先花点时间回顾一下应用程序的各种特性。图1展示了应用程序屏幕。图1.展示正在工作的JavaScript计算器千锋3G嵌入式移动互联网技术研发中心在名为AndroidJSON的样例本地Android应用程序中，屏幕是用Activity组件定义的。它在屏幕的上半部分包含传统的用户界面元素，比如一个TextView（静态标签）、一个EditText（文本框，用户在这里输入公式）和三个按钮（即Simple、Complex和MakeRed）。Activity也具有WebView控件的单个实例，用于显示屏幕的下半部分。WebView显示一个与Android应用程序打包在一起的HTML文件(index.html)，不过您也可以从Internet单独下载此文件。该web页面包含标题、一些样例文本、计算结果和六个执行各种功能的按钮（LogInfo、LogError、Dynamic、HowManyCalls、History和KillThisApp）。千锋3G嵌入式移动互联网技术研发中心这个项目中最有趣的文件是AndroidJSON.java（Android应用程序代码）、index.html（web页面）和main.xml（一个UI布局文件，后面将会介绍）。千锋3G嵌入式移动互联网技术研发中心中三个按钮的功能SimpleSimple按钮导致EditText的内容被作为数学表达式进行计算。注意，EditText的内容或者说公式，在JavaScript中被传递到WebView控件并进行计算。ComplexComplex按钮将JSON对象发送到WebView进行计算。这被认为复杂，是因为对象随后在JavaScript代码中被解释并以数学方式被操纵。该按钮在两个功能之间交替，一个功能是将一个整数数组的元素相加，另一个功能是将这个整个数组的元素相乘。千锋3G嵌入式移动互联网技术研发中心MakeRed这第三个按钮在此主要是出于好玩。选中时，该按钮向嵌入的WebView内容应用一种样式，将包含在body标记中的文本元素变成红色。现在来看index.html文件中的函数，该文件由嵌入的WebView控件在运行时启用。LogInfo该按钮调用Android应用程序中的一个回调函数，以将数据项写到Info分类下的应用程序日志中。千锋3G嵌入式移动互联网技术研发中心ErrorInfo该按钮调用Android应用程序中的一个回调函数，以将数据项写到Error分类下的应用程序日志中。Dynamic该按钮调用Android应用程序中的一个回调函数，以检索一段代表有效JavaScript代码的文本。此代码被带回WebView中并执行，演示了应用程序两端之间的交互。注意，此方法存在安全隐患，因为它盲目信任JavaScripteval函数。但是，我们这里将重点放在基本的示例应用程序上，而不是介绍完善的生产性应用程序。千锋3G嵌入式移动互联网技术研发中心Howmanycalls每调用一次回调函数，计数器就会增1。该按钮只是显示计数器。History每调用一次JavaScript函数，一个表示函数名的字符串就会被添加到JavaScript数组。当history按钮被调用时，此数组将被转换成JSON并传递到Android应用程序的本地部分。数组被改造为Java代码中的一个对象，并枚举写到日志中的每个数组元素。千锋3G嵌入式移动互联网技术研发中心KillThisApp该按钮是此应用程序的又一个只是出于好玩的特性。该按钮调用一个会通过调用finish()而终止Android活动的回调函数。跟很多不完善的应用程序一样，此Android应用程序也使用了内置在Android中的日志功能。本文中展示的一些屏幕截图来自Eclipse中的DalvikDebugMonitorService(DDMS)视图，其中LogCat窗口是可见的。千锋3G嵌入式移动互联网技术研发中心设置用户界面刚才解释了应用程序的函数，现在来看用户界面是如何构造的。为该应用程序创建用户界面要调用前面介绍过的三个文件。首先是布局文件main.xml，如清单1所示。千锋3G嵌入式移动互联网技术研发中心，用户界面布局文件?xmlversion=1.0encoding=utf-8?LinearLayoutxmlns:android=android:orientation=verticalandroid:layout_width=fill_parentandroid:layout_height=fill_parentTextViewandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=@string/title/EditTextandroid:id=@+id/formulaandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=android:visible=False/LinearLayoutxmlns:android=android:orientation=horizontalandroid:layout_width=fill_parentandroid:layout_height=wrap_contentButtonandroid:text=Simpleandroid:id=@+id/btnSimpleandroid:layout_