使用 Google Gears 开发离线应用（2）开发准备

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-9 09:56 | 只看该作者

使用 Google Gears 开发离线应用（2）开发准备

开发准备需求您也许会碰到这样一个情况，在线填写工作报告的时候突然网络断了，此时只能匆忙地将填写的内容复制粘贴到临时文件里，等待下次再重新填写提交。您现在面临的需求就是搭建一个工作报告提交系统，支持离线作业，让用户不再为网络连接状况而头疼。
开发环境当您确保能够 Gears 的安装和 Tomcat 服务器上流畅地运行 JSP 页面后，我们就可以着手编写一个简单的基于 Ajax 技术的网络应用。在此，我们选用方便快捷的工具 Eclipse 来搭建我们的应用。
一，首先在 Tomcat 的 webapps 目录下新建一个名为“gears”的文件夹。
图 3. 新建一个名为“gears”的文件夹

并在 gears 文件夹内创建 js 和 WEB-INF 两个子文件夹。WEB-INF 文件夹内确保存在 classes、lib 和 src 三个文件夹。最后将 TOMCAT_HOME\webapps\ROOT\WEB-INF下的 web.xml 复制到 TOMCAT_HOME\webapps\gears\WEB-INF。结构如下：
图 4. 目录结构

二，在 Eclipse 里创建一个项目。
打开 Eclipse，左上角 File->New->Project 里选择 Java Project，点击 Next，此例将 Project 命名为“gears”。
图 5. 将 Project 命名为“gears”

三，JavaScript代码。
首先要在 tools 文件夹下的向导文件 gears_init.js 复制到 gears\js 下。
选中 gears 项目里的 js 文件夹单击右键，New->Other 里选择 JavaScript，命名为“common.js”。
图 6. 选择 JavaScript

修改 common.js，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

init();
//-------------------------------------------------------------------------
  /**
* init
* 检查浏览器是否安装Gears插件，如果没安装，转向Gears安装的网址
*/
function init() {
  var url = window.location.href;
  if (!window.google || !google.gears) {
var message = "Sorry, you must install Google Gears first!";
var url = window.location.href+"";
location.href =
   "http://gears.google.com/?action=install&message="+ message + "&return="+url;
  }
}

//-------------------------------------------------------------------------
  /**
* createXMLHttpRequest
* 创建XMLHttpRequest对象
*/
var request;
function createXMLHttpRequest() {

  /*
//方式一：古老的方式创建XMLHttpRequest对象
  if (window.ActiveXObject) {
   request = new ActiveXObject("Microsoft.XMLHTTP");
  }else if (window.XMLHttpRequest) {
   request = new XMLHttpRequest();
  }
  */

//方式二：使用gears api轻松创建XMLHttpRequest对象（推荐）
  try{
request = google.gears.factory.create('beta.httprequest','1.0');
  }catch (ex) {
return;
  }
}

  /**
* doHttpRequest
* 向action.jsp发送request请求
*/
function doHttpRequest() {

  createXMLHttpRequest();
  //组合欲向服务器传递的参数串
  var query = createQuery();
  var url = 'action.jsp?'+query;

  request.onreadystatechange = callback;
  request.open('GET',url, true);
  request.send(null);

}
  /**
* createQuery
* 获得输入框内容，组合成URL请求字符串
*/
function createQuery() {
//获得页面控件的输入数据
  var name = document.getElementById('name').value;
  var title = document.getElementById('title').value;
  var content = document.getElementById('content').value;

  var query = "name="+name+"&title="+title+"&content="+content+"&Timestamp=";
  return query;

}

  /**
* callback
* 回调函数，当服务器成功相应，则显示反馈消息，并清除输入框内容
*/
function callback() {

  if(request.readyState == 4) {
if(request.status == 200) {
      alert(request.responseText);
      clear();
}
  }
}
  /**
* clear
*清除输入框内容
*/
function clear(){
  document.getElementById('name').value = '';
  document.getElementById('title').value = '';
  document.getElementById('content').value = '';

}

四，创建 JSP 网页。选中 gears 项目单击右键，New->Other 里选择 JSP，命名为“index.jsp”。
图 7. 创建 JSP 网页

修改 index.jsp，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<%@ page language="java"
contentType="text/html; charset=gb2312"
import="java.util.*,java.sql.*,java.text.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Send Your Report</title>


<script type="text/javascript"  src="js/gears_init.js"></script>
<script type="text/javascript" src="js/common.js"></script>


<style type="text/css">
.input {
  border:1px solid grey;
  margin-top:2px;
  width:190px;
}
.warn{
color:red;
}
.frame{
width: 500px;
border-bottom-width: thin; border-bottom-style: dotted ;
}
</style>
</head>
<body>
<div id="head" class="frame">
<h1>Send Your Report</h1>
</div>

<div id="body" class="frame">


today:
<%
Calendar c = Calendar.getInstance();
SimpleDateFormat sdf = new SimpleDateFormat();
sdf.applyPattern("yyyy-MM-dd");
String date=sdf.format(c.getTime());
out.print(date);
%> <br />


name: <input type="text" name="name" id="name" class="input" />
<br />
title: <input type="text" name="title" id="title" class="input" />
<br />
report:<br />
<textarea cols="70" rows="6" name="content" id="content"
style="width: 280px; height: 113px;"></textarea>

<br />
<br />


<input type="button" value="submit" onclick="doHttpRequest();"  id="submit"/>
<br /><br />
</div>

<div id="buttom" class="frame">
</div>

</body>
</html>

选中 gears 项目单击右键，New->Other 里选择 JSP，命名为“action.jsp”。
修改代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<%@ page import="java.util.Date" %>
<%
String name = request.getParameter("name");
String title = request.getParameter("title");
String content = request.getParameter("content");
String Timestamp = request.getParameter("Timestamp");
//获得时间
if(Timestamp.equals("") || Timestamp==null) {
Timestamp = new Date().toString();
}

String responseText = "";

//验证
if(name==null||name.equals("")) {//if no name
responseText = "Enter your name!";
out.println(responseText);

//关闭
out.close();
return;
}

// 所有事情都解决了，则前台和后台都输出成果
responseText
= "The "+name+"'s report(Title:"+title+") is sent successfully at "+Timestamp;
out.println(responseText);
System.out.println(responseText);

%>

五，测试您的网页。
在此，您完成了一个简单的 Ajax 技术的应用。启动 Tomcat，测试一下您的应用是否搭建成功。
首先在客户端浏览器打开 index 页，将看到 Report 应用主页，确保网络连接正常，模拟提交一份工作报告，浏览器将弹出服务器端返回的提示信息，您将看到如下画面：
图 8. 提示信息

在服务器端的 Tomcat 应用服务器的后台弹出信息（System.out），代表服务器成功接收到来自客户端提交的数据并进行简单处理。
图 9. Tomcat 后台弹出信息

收藏分享评分

回复引用

订阅 TOP

返回列表