65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 HTML 和 JavaScript 编写 Android 程序

shiuhlin
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.11/5 (12投票s)

2012年3月25日

CPOL

3分钟阅读

viewsIcon

109345

“Togosoft Device Browser”允许 Web 程序员使用纯 HTML 和 JavaScript 在几分钟内创建 Android Web 应用。

引言

最近，我被分配到一个新的 Android 项目，为一家污染执法机构工作。基本上，项目本身是一个传统的 Web 数据库程序；这个项目的挑战部分在于其客户端程序的开发要求： 

  1. 客户端程序运行在 Android 设备上（Android 操作系统 2.3+ 的 Android 智能手机）。 
  2. 客户端程序需要拍照并上传到后端数据库。
  3. 客户端程序需要读取供应商许可证上的条形码。
  4. 客户端程序需要记录污染地点的 GPS 位置。
  5. 客户端程序需要易于部署和维护（20 多个设备）。

起初，开发团队似乎喜欢从头开始创建一个 Android 程序。然而，大多数团队成员都是 Web 开发人员，而不是 Android 程序员。对其中一些人来说，Android 编程的学习曲线似乎太陡峭了。此外，客户端程序可能会相当频繁地更新，将独立的 Android 程序部署到 20 多个设备可能需要项目管理员额外的工作。  

为了解决上述问题，团队决定（并指派我）实现一个 Android 特定的 Web 浏览器，该浏览器可以通过 JavaScript 接口将较低级的 Android 硬件功能（摄像头、条形码扫描仪、GPS 等）暴露给更高级的 Web 程序员。Web 程序员可以继续使用他们喜欢的 HTML、JavaScript、CSS、PHP 和 MySQL 来完成整个项目。

项目完成后，我继续优化了我的浏览器的一些部分，并将其打包成一个新的 Android 程序——“Togosoft Device Browser”。在本文的其余部分，我将重点介绍“如何使用该浏览器”，而不是“如何实现该浏览器”（我可能会在另一篇文章中介绍这个主题）。下图说明了该浏览器的基本功能。如果有人有兴趣了解更多，请访问 http://www.togosoft.com/TDB 了解详情。  

 

 

设置

  1. “Togosoft Device Browser”可以从 Google Play（以前的 Android Market）下载，并安装到您的 Android 设备上。 
  2. “Togosoft Device Browser”不需要任何特殊的设置。它像普通的移动 Web 浏览器一样运行。 

用户界面 

  

 

  1. [后退] 到上一页。
  2. [前进] 到下一页。
  3. [菜单] 显示浏览器菜单。
  4. [地址栏] 显示或输入网页地址。项目（1）、（2）、（3）和（4）位于浏览器工具栏上。
  5. [菜单]/[地址] 输入网页地址。
  6. [菜单]/[书签] 访问浏览器书签。
  7. [菜单]/[重新加载] 重新加载当前网页。
  8. [菜单]/[方向] 更改浏览器方向。
  9. [菜单]/[工具栏] 打开/关闭浏览器工具栏。
  10. [菜单]/[控制台] 显示网页源代码、调试消息和错误警告。 

示例程序

1. 第一个演示 HTML 程序是创建一个简单的条形码扫描仪。   

01 <html>  
02 <title>Barcode</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06   <div id="output">
07     Barcode : <input type="text" id="barcode" size="24"><br><br>
08     <input type="button" value="Scan Barcode" onclick=ScanBarcode()>
09   </div>
10 </body>
11
12 <script>  
13   if (!$device || !$device.hasCamera())
14   {
15     document.getElementById("output").innerHTML="No Camera found.";
16   }
17
18   function ScanBarcode()
19   {
20     $device.scanBarcode(function(barcode)
21     {
22       document.getElementById("barcode").value=barcode;
23     });
24   }
25 </script>
26
27 </html>   
  • [第 03 行]：需要 TogosoftDeviceBrowser.js 文件来访问 Android 设备功能。  
  • [第 13 行]：如果当前的 HTML 程序运行在 Togosoft Device Browser 中，并且加载了 TogosoftDeviceBrowser.js 文件，则定义并创建 $device。此行还检查设备是否具有摄像头。  
  • [第 20 行]：扫描条形码，并通过回调函数传递结果。  
 

 

2. 第二个演示 HTML 程序是获取当前设备上的传感器列表。

01 <html>  
02 <title>Sensor List</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06   <div id="output"></div>
07 </body>
08
09 <script>
10   if (!$device)
11   {
12     document.getElementById("output").innerHTML="No sensor found.";
13   }
14   else
15   {
16     var sensors=$device.getSensorList();
17     var html="<table border='1'>";
18     for (var i=0;i<sensors.length;i++)
19     {
20       html+="<tr><td>"+sensors[i]+"</td></tr>";
21     }
22     html+="</table><br><br>";
23     document.getElementById("output").innerHTML=html;
24   }
25 </script>
26
27 </html>

 

  • [第 03 行]：需要 TogosoftDeviceBrowser.js 文件来访问 Android 设备功能。  
  • [第 10 行]：检查 $device 是否已定义和创建。 
  • [第 16 行]：从 Android 设备获取传感器信息的数组。


   

结语

“Togosoft Device Browser”充当 Android 设备和普通 Web 浏览器之间的桥梁。它允许大多数 Web 开发人员利用 Android 设备硬件、传感器和服务功能，而无需安装 Android SDK，甚至无需了解 Android 编程。该浏览器是用于 Web 应用程序开发的简单但功能强大的工具。它支持标准的 HTML5 和 JavaScript 接口。  如果您可以用 jQuery 编写 Web 程序，那么您也可以在几分钟内使用“Togosoft Device Browser”实现您的 Android Web 应用。 希望您能尽快尝试一下。 

© . All rights reserved.