通用WebUI及数据绑定组件的设计与实现

摘要

互联网在近年向富客户端应用(RichInternetApplication，简称RIA)过渡，AJAX和Flex及Silverlight是主要的RIA开发技术。除AJAX技术外，其它RIA技术主要面向多媒体应用，适宜单页面应用(OnePageOneApplication)开发；但是对大多基于文本的多页面企业应用不太适合。本文在分析了国内外相关富客户端开发技术及其优缺点的基础上，设计并实现了一套适用于企业应用的RIA框架。
　　本文论述的框架是基于AJAX技术的纯客户端MVC框架，不依赖于服务端技术；服务端仅仅提供数据(符合特定格式)、访问控制等相关服务。客户端和服务端、数据和表现都分离得很干净，利于开发者的分工合作和快速开发。
　　本框架的主要特色，一是用JavaScript实现了客户端的MVC模型；二是实现了UI组件的面向对象的构建和扩展机制；三是实现了UI组件自动双向式数据绑定；四是在客户端性能优化领域有原创性发现，并应用于本框架中；五是设计实现了统一的事件处理机制。
　　本框架UI组件使用客户端JavaScript解析技术，支持XML标签声明式编程。所有组件按模块组织，框架可以自动管理组件依赖关系，按需加载组件依赖的其它模块。
　　本框架是数据驱动的，也是事件驱动的。本文主要关注于UI组件的构建和扩展，及其数据绑定的设计与实现。
　　另外，本框架也设计实现了相关辅助开发工具，在IDE支持下，用户可以拖曳组件，进行可视化布局；自动生成的代码依然具有良好的可读性。

目录

通用Web UI及数据绑定组件的设计与实现

THE DESIGN AND IMPLEMENTATION OF COMMON WEB UI AND DATA BINDING

摘要

Abstract

第1章 绪论

1.1 课题研究背景及来源

1.2 课题研究内容及论文结构

1.2.1 课题研究内容

1.2.2 论文结构

1.3 与课题相关的国内外研究综述

1.3.1 基于JavaScript的UI组件和数据绑定

1.3.2 基于Flex的UI组件和数据绑定

1.3.3 基于Silverlight的UI组件和数据绑定

1.3.4 基于XUL的UI组件和数据绑定

1.3.5 基于JavaFx的UI组件和数据绑定

1.4 本章小结

第2章 系统相关技术

2.1 AJAX技术

2.1.1 XMLHttpRequest

2.1.2 XHTML和CSS

2.1.3 DOM

2.1.4 JavaScript

2.1.5 XML

2.2 JSON数据交换格式

2.3 数据绑定

2.3.1 DataStore绑定

2.3.2 XML Data Island

2.3.3 客户端数据库

2.4 本章小结

第3章 系统设计

3.1 需求分析

3.1.1 对UI组件的需求

3.1.2 对数据绑定的需求

3.1.3 对事件处理的需求

3.1.4 非功能性需求

3.2 系统核心架构

3.2.1 客户端MVC模式架构

3.2.2 数据绑定设计方案

3.2.3 UI组件系统的设计

3.2.4 通用事件处理机制的设计

3.3 本章小结

第4章 系统详细设计与实现

4.1 UI组件详细设计与实现

4.1.1 Form组件实现

4.1.2 ComboBox组件设计与实现

4.1.3 Tree组件设计与实现

4.1.4 Grid组件设计与实现

4.1.5快速查询组件设计与实现

4.2 数据绑定组件详细设计与实现

4.2.1 DataCenter

4.2.2 DataStore

4.2.3 MetaData

4.2.4 RowSet

4.2.5 Row

4.3 事件处理系统的实现

4.3.1 常规事件回调机制

4.3.2 跨浏览器DOM事件处理

4.3.3 主题发布-订阅机制

4.4 AJAX引擎及后台服务的实现

4.4.1 AJAX引擎

4.4.2 传输格式

4.4.3 后台服务

4.5 辅助工具的实现

4.5.1 debugger和dom inspecter

4.5.2 可视化工具支持

4.6 系统测试与应用

4.6.1 系统测试

4.6.2 系统实际应用

4.7本章小结

第5章 系统原创技术

结论

参考文献

致谢

哈尔滨工业大学硕士学位论文原创性声明

哈尔滨工业大学硕士学位论文使用授权书

个人简历