HTML5技术下Web富客户端网页设计方案

HTML 5 是近十年来 Web 开发标准最伟大的飞跃 , 其设计宗旨在于削减网络应用对于欣赏器插件的需求， 给站点带来更多的过媒体元素[1]. 与 HTML 4、 HTML 3 等版本不同 ,HTML 5 并非仅仅用来透露表现 Web 内容 , 它更具有将 Web 带入一个成熟的应用平台[2].

1 HTML5 特征分析

HTML5 大大简化了编程工作， 使 Web 程序更容易地访问各类设备和应用程序， 并且提供了许多紧张的新特征[3-4].

（1） 新的标记语言标准HTML5 比之前的 HTML 版本更新了标记语言及其附属的标准， 包括访问和操作 HTML 文档结构 （DOM） 的标准； 全新的级联样式表 （CSS） 标准， 用于定义 HTML 文档的表面和呈现方法以及 javascript 脚本语言。

（2） 实现基于标准的富 WebHTML 5 实现了富应用的新 API, 诸如图形 、 动画 、 多媒体， 在此之前必须要通过 Flash 等各类插件实现这些功能， 使用上述插件技术不仅带来安全隐患， 而且限定了受众的范围。

HTML 5 提供的 audio 和 ideo 等标签为 Web 开发者们提供了嵌入媒体方面的极大便利， 尤其是采用中立的编码标准解放了欣赏器厂商的开发自立性。

（3） 革新的结构HTML5 标准中引入了一整套新的元素 , 使建构网页更变得更容易。 使用这些元素具有显明的好处： 当与题目元素联同使用时， 产生了一种使用题目级别标记嵌套章节的方式，这将超过曩昔版本 HTML 的题目级别。

2 Web 富客户端网页设计方案

2.1 单页面开发模式

目前， Web 程序的界面开发模式有单页面和多页面两种，基于 HTML5 的 Web 富客户端实现 Web 单页面应用， 与 2.0版本的多页面应用相比， 单页面应用具有以下好处：

（1） 用户操作简单、 友爱度高。

在单页面应用上， 添加、 修改等一些操作采用弹出层的方法实现， 而在多页面应用上， 甚至每一个详细的功能， 都必须要跳转到一个新的页面完成， 当用户完成该操作时， 再返回到原始页面， 用户操作复杂， 友爱度低。

（2） 易于开发、 维护本体系采用单页面的应用开发模式。 主页面布局如图 1所示。以下对各区域的功能进行诠释。

1） 客户和登录用户信息区此区域的上部份由笔墨或图片展示体系当前部署到的客户的信息， 下部份展示体系当前的登录用户的迎接信息。 此区域的信息不应该是静态的， 而应是根据体系的现实环境实时更新的。

2） 体系题目栏区此区域表现体系的题目， 如本体系的题目舜阳电压质量分析管理体系， 由于体系的题目是不会轻易更改的， 因此本区域可设计成静态区域。

3） 报警信息表现区此区域表现监测点的报警信息， 报警信息是由左自右滚动表现的， 并可自由配置笔墨颜色、 滚动速度、 表现条数，此区域的设计必须要肯定的伸缩性。

4） 常勤奋能区此区域是体系的常勤奋能荟萃， 包含 4 项功能： 体系设置、 密码修改、 用户刊出、 切换主题。

5） 组织机构树形菜单区此区域是体系部署到的单位部门的树形菜单展示， 是可以收起和睁开的， 其顶级部门是当前登录用户所属的部门， 即当前登录用户只能看到他所属部门以及下级部门的树形菜单展示， 无法看到上级部门和他的其他同级部门的树形菜单节点。

考虑到树形菜单可能会存在数千个节点， 此区域的设计应该要及其注重其性能， 并且应该提供一个供用户模糊搜索菜单节点的搜索框。

6） 主菜单和二级菜单区本体系的主菜单采用 Tab 菜单模式， 体系的每一个模块设置一个 Tab 菜单项， 每个 Tab 项包含一个二级菜单， 二级菜单可以是一个工具栏， 上面集成了该模块的一系列子模块，每个子模块是一个单独的页面， 点击某个二级菜单项时， 在应用区打开该项所代表的子模块页面。

7） 应用区应用区即是体系详细子模块的功能展示操作区域， 此区域以一个浮动框架的情势将一个单独的 HTML 页面包含进来，每单打开一个新的子模块时， 应该移除代表上一个子模块的浮动框架， 以避免主页面挂靠过多子页面， 造成欣赏器假死。

根据以上功能以及区域位置的划分， 可以将主页面按功能区域划分为 3 个模块：

1） 顶部面板此模块是若干个小模块的荟萃， 其重要部分是常勤奋能区和报警信息表现区。

2） 左部部门树面板此模块的重要作用是实现部门节点的选择反选， 上下级部门节点的联动， 部门节点的模糊搜索， 向后台传递部门节点选择模型。

3） Tab 菜单面板Tab 菜单面板包含主菜单栏、 副菜单栏以及客户区。 其重要作用就是实现子页面的载入及移除， 实现体系权限控制的前台部分。

2.2 页面视图

此模块的作用重要是完成对以上各个模块的整合， 将一系列的功能模块组合成体系的主页面并负责表现。页面的设计图， 如图 2 所示。

2.3 后台架构

基于 HTML5 的 Web 富客户端体系采用 SSH2 架构， 针对网页处理数据量非常伟大， 导致对体系的资源要求特别很是苛刻，在非分布式的体系处理中， 采用 SSH2 架构容易出现性能瓶颈， 从而影响体系处理其他营业逻辑， 对体系的团体性能造成影响。 因此， 本体系采用两套架构方案， 基本架构和辅助架构。

体系的重要部分采用 SSH2 架构， 即 struts2+spring+hiber-nate, 体系在纵向上按营业流程划分为 3 个层 , Action 层 、Service 层和 Dao 层， 由 struts2 在 Action 层处理客户端请求并实现 MVC, hibernate 作为 Dao 层的 ORM 框架处理数据持久化方面的逻辑， spring 作为一个中心层的容器， 同一管理体系的营业逻辑。

体系遵循接口编程的原则， 所有的 Action、 Service 和 Dao都应该定义接口。 在纵向上划分为 Action、 Service 和 Dao 3 个层， 横向按功能模块划分， 每一个详细的子模块应该拥有其对应的 Action、 Service 和 Dao 层。 据此思想， 在子模块的子一级功能中， 应当对其进行封装， 以使各个不同的子功能之间不相耦合。 体系在 Service 层上应该使用 spring 的 AOP 机制实现体系的事务管理、 日志记录功能， 可以编写一个通用的Dao, 所有其他 Dao 都继续自此 Dao, 以削减 Dao 层的开发量。 体系后台的基本架构如图 3 所示。体系的辅助体系处理数据查询量大问题， 在非分布式的体系中， 使用上述架构容易导致资源枯竭造成体系崩溃， 故而数据查询模块不采用上述架构， 而采用传统的 servlet+jav-abean+jdbc 的架构模式。

采用传统的架构模式并不意味着就是最简单、 最基本的模式， 为了削减 jdbc 层的开发， 首先， 该辅助架构应该将 jd-bc 操作封装成 jdbc 模板 , 提供 ResultSet 到 Java 荟萃的映射 ,以提供一个同一的数据集接口。 该数据集除了由 jdbc 操作从数据库中获取数据外， 还应提供一个外部接口， 用以构造该数据集。

由此可知对于该辅助架构， 它的底层是一个数据集的提供者， 该数据集提供者有两种方式获取数据集， 一是通过 jd-bc 接口从数据库中获取数据并将其转化为 Java 荟萃 , 二是通过外部接口设置其数据集。 数据集总是和模型一并存在的，稀有据集就意味着有构成该数据集的模型， 辅助架构的数据集提供者必须是同一的、 通用的， 而数据模型一定不是唯一的， 对于每一个不同的营业， 可能都会有一种不同的模型，因此， 对于该数据集提供者， 可以采用 Java 泛型设计模式。

比如 DataQuery 类有 3 个属性， list 属性透露表现该类所封装的数据集， 它可以是由 jdbc 操作从数据库中获取的， 也可以是由外部设置进来的； sql 属性透露表现当该 DataQuery 是由 jdbc方法构造时， 用以从数据库提取数据的 sql 语句； totalCount 属性透露表现数据集的大小。 DataQuery 类有 5 个方式， 其中两个构造方式， DataQuery （in sql: String） 构造方式透露表现该构造方式接收一条 sql 语句， 由 JDBC 方法构造该数据集， 当由此方法构造数据集时， 对数据的提取以及到 Java 荟萃的映射操作被封装在了 excute（） 方式中， 这是一个私有方式。 getData 和getAllData 方式顾名思义， 前者是返回原始数据集中指定位置、指定长度的新的数据集， 后者是返回整个原始数据集。

3 分层开发模式

基于 HTML5 的 Web 富客户端网页设计采用软件系统架构设计中常用的分层的设计方式， 分层的设计方式是软件系统结构设计中最为惯用也最紧张的一种方式， 从上到下分别是：透露表现层 （UI）、 营业逻辑层 （BLL）、 数据访问层 （DAL） 和数据层 （DL）。 4 层之间相互作用的关系图如图 4 所示。

采用分层的软件结构使开发人员可以只关注其中的某一层进行设计与开发， 可以降低层与层之间的依靠关系， 在需求转变时可以方便地用新的实现替代原有的条理实现， 更有利于软件结构的标准化和各层逻辑的复用， 也在很大程度上降低了后期软件维护的成本。

4 基于 HTML5 技术的透露表现层开发

透露表现层位于整个软件系统的最上层， 也是和用户关系最紧密的一层， 重要用于接收用户的输入数据、 页面操作等请求， 并把后台程序返回的数据和效果以适当的情势反馈给用户， 其重要作用是为用户提供一个友爱的交互式操作界面。

因为 Web 监控软件采用 B/S 的设计模式， 所以体系中的体现层的重要情势是 Web 页面， 而在程序中的体现情势是ASPX 文件 . 在 Web 监控体系中必须要通过大量的图表和曲线对生产运行数据进行表现， 因此采用最新的超文本语言版本HTML5 和 SVG 可缩放矢量图形 （Scalable Vector Graphics） 实现了更加优秀的曲线与图表的表现结果， 同时为进一步地增长交互界面的可操作性， 可以选用第三方控件 Highcharts 和jqGrid 来实现软件平台中实时动态曲线和各种图表的表现。