基于Java的Web开发——控制界面设计

基于Java的Web开发——控制界面设计
引言
随着网络的不断普及，基于网络的计算机应用也在飞速发展，其中基于B/S 模式（Browser/Server模式，浏览器/服务器模式）的Web应用从出现到现在一直具有非常旺盛的生命力，而且应用面也越来越广。

这些都得益于Web应用方便的部署和使用方式，以及强大的交互和展现能力。

正因为Web应用的前景看好，Web开发技术也发展迅速。

Web开发，就是开发应用于Web之上的系统。

而随着Internet成为现如今覆盖面最大和应用最广泛的网络，Web开发技术也主要集中在开发基于Internet的网络应用系统。

Internet是一系列网络结构和网络协议等网络技术的集合，这些技术也是基于Internet的Web应用的基础，了解基本的Internet网络技术对于深入理解Web开发技术是不能缺少的。

随着Web技术的发展，基于实验资源共享的网络平台技术已经得到了广泛的研究和发展，特别是在高校的教学环境中已有初步的应用。

网咯实验平台技术经历了以下几个阶段：
1.基于Web的虚拟实验室：一般采用B/S（浏览器/服务器）架构，用户只需要通过浏览器登录虚拟实验室就可以远程进行实验。

2.基于Web服务的虚拟实验室：这种形式的实验室，从用户的角度来看和基于Web的虚拟实验室没有区别。

但是从服务器端开来，这两者之间就有很大的区别了。

基于Web的虚拟实验室只解决了远程操作问题，实验的资源和设备只能在同一个实验室，为了将分布于不同地点的设备和资源整合起来，提出了基于Web服务的虚拟实验室。

3.基于网络的虚拟实验室：Web服务虽然解决了异构实验设备的整合，以及互联网平台上的访问等关键问题，但随着分布式资源的增加，要求虚拟实验室必须具备分布式系统管理方面的功能，比如资源的发现、监测、调度等，这样就提出了基于网络的虚拟实验室。

本项目的整体目标是基于Web服务的虚拟实验室，基于Web 服务的网络实验平台都由用户接口，Web 服务器及Web 服务组成。

我们这里所设计的是信号处理方面的实验，例如信号变换，信号调制，DFT，FFT 等等，一般都没有涉及到状态的持续。

基本的结构图如下所示：
图1 Web 服务的虚拟实验室结构图
用户通过互联网或者局域网访问Web 服务器，服务器随即调用相应的实验服务，经过计算返回结果给访问者。

基于WEB 服务的网络实验平台架构被分为三层。

第一层为实验设备接口层。

设备接口层负责网络实验平台的服务层与虚拟仪器系统、物理实验系统和仿真实验系统的数据交换。

各种不同的数据流, 通过这一层被转换成规定的格式提交给执行系统。

第二层为WEB 服务层。

完成实验资源的整合，提供实验服务。

第三层为用户接口层。

这一层是直接面对实验进行操作的用户的，用户通过浏览器访问网络实验室服务平台, 提交定制的实验参数得到实验结果。

图2 基于WEB 服务的网络实验平台架构
整个项目的主要目的是实现系统能够进行数据采集，模型仿真和网关发布一用户接口 Web 服务引擎 M A T L A B 引擎 信号变信号调DFT FFT 其他实验 虚拟文字接口 虚拟仪器 用户接口层 Web 服务层 设备接口层
系列操作。

我在整个项目中负责的是基于Web服务的虚拟实验室的控制界面的设计，用来提高使用者对于这个系统的体验度，使页面显示更加灵活，提高系统与用户的交互性。

网页设计要使用多种技术，包括HTML语言、脚本程序设计、CSS样式表以及美工技术等。

仅仅使用HTML语言设计的页面属于静态页面。

Web刚出现的一段时间内，Web是一个静态信息发布平台，所设计的页面都是静态页面；而如今的Web已经具有更丰富的功能。

现在，人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索等功能。

为实现此类功能，增加用户的体验度，必须使用更新的网络编程技术设计动态网页。

所谓动态，指的是按照访问者的需求，对访问者输入的信息作出不同的响应，提供响应信息。

本文通过HTML语言结合脚本程序设计、CSS样式表以及jQuery动画特效进行基本的页面设计，了解页面设计的思路方法。

1Web编程基本介绍
1.1Web简介
1.1.1Web的基本概念
现在Internet已经成为世界上最大的信息宝库，然而Internet上的信息资源既没有统一的目录，也没有统一的组织和系统，这些信息分布在Internet位于世界各地的计算机系统中。

人们为了充分利用Internet上的信息资源，迫切需要一种方便快捷的信息浏览和查询工具，在这种情况下，Web诞生了。

Web全称为word wide web,缩写为www。

Web是一种体系结构，通过它可以访问分布于Internet主机上的链接文档。

也就是说，Web是Internet提供的一种服务，是存储在全世界Internet计算机中、数量巨大的文档的集合，是世界上最大的电子信息仓库。

Web上的海量信息是由彼此关联的文档组成的，这些文档称为主页或页面，它是一种超文本信息，而使其连接在一起的是抄链接。

Web 的内容保存在Web站点，即Web服务器中，用户可以通过浏览器访问Web站点。

因此Web是一种基于浏览器、服务器的结构。

也就是说，Web其实是一种全球性通信系统，他通过Internet使计算机互相传送基于超媒体的数据信息。

近年来，Web得到了迅猛的发展，如今的Web应用已远远超出了原先对它的设想。

它具有以下特点：(1)Web是一种超文本信息系统；(2)Web是图形化的和易于导航的；(3)Web与平台无关，即对系统平台没有限制，无论系统的软硬件平台是什么，都可以通过Internet访问WWW；(4)Web是分布式的；(5)Web 具有新闻性；(6)Web是动态的、交互的。

1.1.2Web的工作原理及应用结构
1.Web的工作原理
Web是一种基于浏览器、服务器的体系结构。

典型的B/S结构将计算机应用分为三个层次，即客户端浏览器层、Web服务器曾和数据库服务器层。

B/S结构有许多优点，他简化了客户端的维护，所有应用逻辑都是在Web服务器上配置的。

B/S结构突破了传统客户机/服务器(C/S)结构中的局域网计算机应用的限制，用户可以在任何地方登录Web服务器，按照用户角色执行自己的业务流程。

Web
通过HTTP协议实现客户端浏览器和Web服务器的信息交换。

客户端浏览器和服务器之间的关系：服务器处理数据并生成页面，客户端浏览器请求页面和显示页面。

其优点是采用IP协议通讯，位于Internet任何的一个人都可以访问；以浏览器为客户端程序，客户对数据不得处理简化，客户端不需要编写单独的应用程序；容易布置，升级和维护。

2.Web的应用简介
Web应用是指能够通过Web提供一系列功能的应用系统。

如果脱离了Eclipse 和Tomcat等开发工具盒Web服务器，一个Web应用就是具有特定的目录结构的文件盒目录。

不同的Web服务器中的Web应用具有不同的目录结构。

Tomcat中的Web应用也具有特定的文件结构，并且每个Web应用都包含一个配置文件。

本文将介绍Tomcat中的Web应用。

了解了Web应用的结构，对于理解后续所介绍的应用实例中的页面设计实现过程会有很大的帮助。

(1)Web应用结构
实质上一个Web应用通常就是文件系统中的一个目录，称为Web应用根目录。

Web应用根目录中的文件是该Web应用中的资源，包括：需要通过Web提供给客户端访问的资源以及Web应用本身的配置和描述文件等。

不同的Web服务器对Web应用根目录中文件的结构和意义又不同的规定，只有结构符合规定的Web应用部署到Web服务器中后才能获得预期的效果。

典型的Tomcat Web 应用具有如下图所示的目录结构。

图1-1 Web应用目录结构
该Web应用的根目录是WebTest，通常称该Web应用为WebTest应用。

Web 应用的所有资源和配置文件都应该放置在Web应用的根目录中，也只有Web应用根目录中的资源才能通过该Web应用访问。

所有的静态Web对象和JSP文件可以按照任意的目录层次放置在Web应用根目录下，在将Web应用部署到Tomcat服务器中后这些文件都可以根据其目录结构通过URL直接访问；WEB-INF目录是一个特殊的子目录，它存在的目的不是为了能让客户端直接访问其中的文件，而是通过间接的方式支持Web应用的运行，比如提供Web应用需要访问的资源文件、放置Web应用的属性文件或配置文件等。

WEB-INF目录必须位于Web应用根目录下，通常该文件夹中包含lib 子目录，classes子目录和web.xml文件。

其中，lib目录用于放置该Web应用使用的库文件，classes目录用于放置该Web应用使用的class文件，web.xml是Web应用描述符，用于设置Web应用特有的配置。

WEB-INF目录中的文件是不能通过URL直接访问的。

(2)Web应用的上下文路径
Web应用在文件系统中存储时表现为一个目录，在文件系统中可以使用不同的路径用于区分目录。

当将Web应用部署到Tomcat中时，Web应用就是一个抽象的概念，而且Tomcat中可以部署很多的Web应用，通过使用Web应用的上下文路径区分每个Web应用。

Web应用的上下文路径是一个字符串，在Tomcat中与Host名一起用于唯一确定Tomcat中的一个Web应用。

在将Web应用部署到Tomcat中时必须为Web 应用制定一个上下文路径，并且在同一个Host中每个Web应用的上下文路径必须唯一。

例如，localhost中部署了2个Web应用，它们的上下文路径分别是：app1和app2。

访问上下文路径为app1的Web应用时，使用的URL前缀为：http：//localhos：8080/app1；访问上下文路径为app2的Web应用时，使用的URL 前缀为：http：//localhos：8080/app2。

反过来，Tomcat也可以利用上下文路径根据客户端请求URL的前缀将客户端请求分发到适当的Web应用。

例如请求URL的前缀为http：//localhos：8080/app1的客户端请求被分发到第一个Web应用；请求URL的前缀为http：//localhos：8080/app2的客户端请求被分发到第二个Web应用。

需要注意的是，上下文路径与Web应用的根目录不是一个概念，对于同一个Web应用来说，这两个值未必是一样的。

在将Web应用部署到Tomcat中时可以为Web应用设置不同于Web应用根目录的上下文路径。

1.2HTTP协议
HTTP的全称是HyperText Transfer Protocal，即超文本传输协议。

它是Internet 的应用层协议，它定义了客户机的浏览器与服务器的Web应用之间如何进行通信，以及通信时用于传递数据的数据包的格式等内容。

HTTP是采用请求/响应模式的无状态协议。

客户机浏览器和服务器Web应用采用HTTP协议进行通信时，通信由浏览器发起；浏览器向Web应用发送一个请求，Web应用接受并处理该请求，然后向浏览器发回响应。

在请求/响应过程中，Web应用不保存与任何一个客户机通信的状态，它只对到来的当前请求进行处理，处理完返回对应于该请求的响应；任何两个请求的处理都是独立的，无论这两个请求是来自同一个客户机还是不同的客户机。

2超文本标记语言
2.1HTML语言概述
HTML和XML是进行Web程序设计的两种重要的基础语言，这里主要介绍超文本标记语言HTML。

超文本标记语言HTML是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。

创建Web站点时，需使用HTML语言向组成Web站点的各个Web页面放置文本、图形、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。

HTML源于“标准通用标记语言”SGML的设计概念。

SGML标记，英文称为tag，就是在文档需要的地方，插入特定的记号，来控制文档内容的显示，这就是文档格式定义。

HTML采用SGML的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件、或在一个文件内部不同部分之间的链接。

HTML标记是区分文本各个部分的分界符,用于将HTML文档划分为不同的逻辑部分（如段落、标题等），它描述文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。

HTML是一种文本标记语言，而非编程语言。

HTML文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为.htm或.html。

HTML 文档使用一系列标签将文本组织成特定的结构，并且可以通过特定的标签使得文档在浏览器中展示时可以引入丰富的颜色、图片、文字等信息。

HTML文档的结构是由标签包含关系标示的一种层次结构，厅层标签是<html>。

2.2标签和属性
HTML文档的内容通过一系列标签进行格式化，例如<html>,<head>,</head>,</body>等都是HTML标签。

HTML标签分为开始标签和结束标签，开始标签由一对尖括号括起来，尖括号中的文字是标签的名称，结束标签与开始标签有相同的名称，并且在左尖括号和标签名称之间加了一个/；
HTML中的大部分标签都是成对的，例如<html>和</html>、<head>和</head>；一对标签之间可以包含文字也可以包含其他标签。

另外，有一种特殊的写法<tag/>，就是将/写在尖括号的前面，这是<tag></tag>的简写形式，它表示<tag>标签中不包含任何内容。

HTML标签除了可以组织内容之外，大多数的HTML 标签还可以定义一系列的属性用于补充说明标签的一些附加信息，属性都写在开始标签中，例如：
<body bgcolor=red> …</body>
表示将该HTML页面的背景色设置为红色。

HTML的常用标签可以分为页面标签，格式标签，表格，表单等。

(a)格式标签：一个HTML文档的基本结构，其中用<html>、<head>、<title>和<body>规定了文档的整体结构，<head>标签中是头部信息，其中可以定义一些辅助信息，这些信息不会显示在浏览器页面的正文中。

<head>中除了可以包含<title>外，还可以包含其他的标签(link：可以用于链接一些其它文档，最常见的是使用该标签链接样式表，例如
<link rel=”stylesheet”type=”text/css”href=”theme.css”/>
表示链接theme.css，用它定义的样式作为本页的格式。

Meta：用于定义页面的一些元数据信息，最常见的是使用该标签定义页面的媒体格式和字符编码方式，例如
<meta http-equiv=”Content-type”content=”text/html;charset=iso-8859-1”>
表示该页面的类型是text/html，字符编码格式是ISO-8859-1)
<title>定义了页面的标题，它显示在浏览器的标题栏中；<body>标签中的内容是HTML文档的主体，需要显示在浏览器页面正文中的内容全部写在该标签中。

(b)格式标签：在HTML文件中文字的位置、文字之间的回车换行和空格等都不会被最终显示到浏览器上，要控制HTML文档中的文字最终如何在浏览器中布局，需要使用HTML的格式标签。

文字控制：HTML中提供了一个通用的标签用于设置文字的属性，即<font>，它是一个用于设置文字字体的通用方法，它通过不同属性来设置文字的不同方面：size属性用于设置文字的大小、face属性用于设置字体、color属性用于设置文字的颜色；<hx>标签是一组标签的总称，x可以是1、2、3、…它们都表示页
面的标题，不同的x表示的标题级别不一样，x越大级别越低，所包含文字的字体也会越小；每个标题占一行；<b>和<strong>标签表示将文字加粗；<i>和<em>标签表示将文字变成斜体；<u>标签表示给文字加下划线。

布局控制：即对页面的布局格式进行控制的标签。

Align属性通常用于规定标签内容的对齐方式，<hx>、<p>、<div>标签都有该属性，可以通过将该属性的值指定为center、left或right以用于将内容居中、居左或居右对齐。

(c)表格：表格是HTML中使用最多也是最重要的一种技巧，通常大部分网页设计师用表格控制页面内容在整个页面中的分布，并且可以通过使用嵌套的表格将页面进行任意的划分。

表格都用顶层标签<table>进行定义，<th>标签用于定义表头，<tr>标签用于定义一行，<td>标签用于定义一行中的一列。

(d)表单：表单在HTML中是非常重要的，它提供了一系列可以展现在浏览器中并且能够提供交互的功能组件，例如文本框、密码框、文本域。

按钮等。

可以使用表格来组织表单中的组件。

(f)其他：
<a>标签主要用于定义一个超链接，其href属性用于指定超链接的地址；
<img>标签用于在网页中以链接的方式加入一个图片，其src属性用于指定待链接图片的位置；
<hr>标签可以在页面上加一个水平的分隔线。

HTML有很多标签，大部分标签也都定义了很多属性，熟悉掌握它们对于Web应用开发是非常重要的。

3 脚本语言
3.1什么是脚本语言
脚本语言（Script）语言的概念源于UNIX操作系统，在UNIX操作系统中，将主要以行命令组成的命令集称为Shell脚本程序。

Shell脚本程序具有一定的控制结构，可以带参数，由系统解释执行。

除了UNIX Shell Script外，在UNIX环境下，具有强大的字符串处理能力的Perl语言也是脚本语言的典型代表。

HTML语言提供较完善的设计页面的功能，但它提供的信息大多是静态的。

这些信息被下载到客户计算机后，是固定不变的。

无法利用客户计算机的计算能力，也就无法在客户端处理与用户的交互，从而无法构造出客户端的交互式动态页面。

一些原本可以在客户端完成的任务（如数据合法性检查等）也不得不依靠CGI规范提交给服务器去完成，这一方面加重了服务器的负担，另一方面也增加了网络传输量，同时还加长了响应时间，降低了实时性。

另外，对于用户来说，设计CGI程序也有相当的难度。

JavaScript和VBScript的出现恰好弥补了这一缺憾，它大大提高了客户端的交互性，使用非常简答、灵活，利用它可以设计客户端动态网页。

本文所介绍的脚本语言是指用于Web页面及程序设计的脚本语言，它们通常是嵌入式（嵌入到HTML文件中）的、具有解释执行的特征。

根据脚本程序被执行的地点不同，可将它们分为客户端脚本和服务器端脚本，前者由浏览器负责解释执行，后者由Web服务器负责解释执行。

JavaScript.VBScript既可以作为客户端脚本语言，又可以作为服务器端脚本语言，而Perl、Shell、Script以及PHP
等则通常是服务器端脚本语言。

本文主要讨论用于客户端的JavaScript语言。

3.2 JavaScript语言
JavaScript是一种嵌入在HTML文件中的脚本语言，它是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、页面浏览等用户事件做出反应并进行处理。

JavaScript具有如下特点：
(1)简单性。

JavaScript是一种被大幅度简化了的编程语言，即使用户没有编程经验也可较快的掌握它。

它不像高级语言的使用有很严格的限制，而是非常简介灵活，例如在JavaScript中变量可以直接使用，不必事先声明，对变量的类型规定也不是十分严格等。

(2)基于对象。

JavaScript是基于对象的，它允许用户自定义对象，同时浏览器还提供了大量内建对象，使编程者可以将浏览器中不同的元素作为对象来处理，体现了现代面向对象程序设计的基本思想。

但JavaScript不是完全面向对象的，它不支持类和继承。

(3)可移植性。

在大多数浏览器上，JavaScript脚本程序可以不经过修改而直接运行。

(4)动态性。

JavaScript是DHTML（动态HTML）的一个十分重要的部分，是设计交互式动态网页，特别是“客户端动态”页面的重要工具。

这里需要特别强调一下，JavaScript语言和Java语言的不同。

虽然它们在命名。

结构和语言上都很相似，但不能把它们混淆，两者存在如下重要的差别：
(1)Java是有Sun公司推出的新一代的完全面向对象的程序设计语言，它支持类和继承，主要应用与网络程序设计，对于非程序设计人员来说不易掌握；而JavaScript只是基于对象的，主要用于编写网页中的脚本，易于学习和掌握。

(2)Java程序是编译后以类的形式存放在服务器上，浏览器下载到这样的类，用Java虚拟机去执行它。

而JavaScript的源代码不需要编译，它是嵌入在HTML 文件中的，作为网页的一部分；当使用能处理JavaScript语言的浏览器浏览该网页时，浏览器将对该网页中的JavaScript源代码进行识别、解释并执行。

(3)Java程序可以单独执行，但是JavaScript程序只能嵌入HTML文件中，不能单独运行。

(4)Java具有严格的类型限制，但JavaScript则比较宽松。

(5)Java程序的编辑、编译需要使用专门的开发工具，如JDK、Visual J++等；
而JavaScript程序则不需要特殊的开发环境，由于它只是作为网页的一部分嵌入到HTML文件中，所以编辑JavaScript程序只要用一般的文本编辑器就可以完成。

4 页面设计
4.1页面设计概述
一般来说，Web网站开发的全过程大致分为5个阶段：策划与定义、设计、开发、测试和发布。

首先要根据建站的目的和定位进行策划与定义，确定网站风格、栏目、布局方式等；接下来要进行页面设计和后台程序开发。

页面设计包括静态页面设计和动态页面设计。

静态页面设计技术主要采用的是HTML。

对于静态页面，用户只能浏览Web服务器上预先安排好的信息。

但是现在，人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索，开展电子商务等，这些目标是静态网页技术不能达到的，而动态网页却可以按照访问者的需要，对访问者输入的信息做出不同的响应，提供响应信息。

所以，动态网页是发展的必然趋势。

动态网页设计技术又可分为客户端和服务端，客户端动态网页设计技术主要使用动态样式表（CSS）和在浏览器中执行的脚本程序，而服务器端动态网页设计技术主要使用CGI、ASP、JSP、PHP等脚本程序。

动态网页是由Web服务器动态生成的文件。

之所以称其为“动态”，是因为此种网页的部分甚至全部内容都是未确定的。

当用户访问该页，Web服务器按照用户的请求，通过应用程序服务器对相关的服务器端的数据进行处理，根据计算结果生成标准的HTML文件下传给用户浏览器。

不同的用户请求以及访问数据的变化都会随之生成不同的HTML文件下载给用户。

流程如下：
图4-1 动态网页的处理流程
4.2层叠样式表CSS
4.2.1 层叠样式表的概述
HTML中的显示特性是通过标记的属性来进行设置的，一旦设置就难以变化，且不能由程序控制，具有很大的局限性。

CSS（Cascading Style Sheets）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。

它扩展了HTML标记的属性设定，称为CSS样式，通过脚本程序控制，可以使页面的变现方式更加灵活，更具动态性。

CSS可提供多种样式，以减少GIF动画的使用，从而能设计出规模更小、下载更快的网页。

CSS标准中重新定义了HTML语言原来的文字样式，并且增加了一些新概念，如类、层等，可以对文字重叠、定位等提供更加丰富的样式；同时CSS可进行集中样式管理。

CSS还允许将样式定义单独存储在样式文件中，这样把要显示的内容和显示样式的定义分离开，便于多个HTML文件共享样式定义。

另外一个HTML文件也可以引用多个CSS样式文件中的样式定义。

所谓“层叠”，实际就是将显示样式独立于显示的内容，进行分类管理，如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。

1.样式表的定义
CSS样式表定义的基本语法为：
选择符（selector）{规则（rule）表}。