Web软件用户界面开发指南.docx
《Web软件用户界面开发指南.docx》由会员分享，可在线阅读，更多相关《Web软件用户界面开发指南.docx（30页珍藏版）》请在冰豆网上搜索。
Web软件用户界面开发指南
Web软件用户界面开发指南
版本：
<1.1>
编号：
[TopTaisUI_DEV_GUIDE]
审核：
审批：
审批日期：
版 本 记 录
日期
版本
说明
作者
<2006-5-25>
<1.0>
确定大纲
<侯博>
2006-6-8
<1.1>
填充内容
<侯博>
Web软件用户界面开发指南
1.简介
目的
本文档是为了指导界面（UI）开发人员制作用户界面。
通过本文档来约束界面开发人员的随意性，避免造成页面效果不统一、JSP文件代码编写不规范、JavaScript函数和滥用CSS样式等问题。
范围
本文档内容涵盖了Web应用软件用户界面开发中的所有细节，详细说明了页面代码的组织、JavaScript引用、CSS样式引用，JSP代码编写、TagLib标签使用以及页面复用组件一系列页面相关技术的使用方法。
另外还对可复用组件的命名做了比较详细的说明。
术语、定义
CSS：
是CascadingStyleSheet的缩写。
译作「层叠样式表单」。
是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
JavaScript：
JavaScript是一种解释型的、基于对象的脚本语言。
也是一种弱类型的语言。
它可以改变或者约束页面的一些行为，更利于界面的交互，增强人机直接的交流。
参考资料
1、《Web用户界面设计规范》公司内部资料。
2、RUP用户界面一般规范。
2.命名
JavaScript文件
扩展名：
以“*.js”为扩展名；
主文件名：
使用符合语义的、简明的英文单词来命名；
第一个字母小写，如果用两个以上英文单词则第二个单词以后的首字母都要大写；
英文单词之间不充许有任何字符来分隔；
例：
grid.js、calendar.js、checkForm.js都是正确的命名；
CSS文件
扩展名：
以“*.css”为扩展名；
主文件名：
使用符合语义的、简明的英文单词来命名；
第一个字母小写，如果用两个以上英文单词则第二个单词后的首字母都要大写；
英文单词之间不充许有任何字符来分隔；
例：
grid.css、calendar.css；
3.JSP页面
JSP文件头编写
每个JSP文件的头部都应该把文件功能、创建者、创建日期以及以后的修改信息写明，这样有利于文件的维护更新。
对于修改信息并不是每次修改都要都要做一个说明，只对修改范围或者功能修改比较关键的才做出记录。
具体格式如下：
--
*Title:
这是一个JSP页面的例子，仅供大家参考例用！
*User:
HouBo
*Date:
2004-10-21
-->
字符集设定
为了保证页面信息能够正确的编码，必须进行字符集设定，且采用GBK的字符集，而不用gb2312。
<%@pagecontentType="text/html;charset=GBK"%>
Java类导入
所需要类导入部分，按以下格式规范编写，反对整行编写。
一般用IDEA等开发工具，会自动导入所需要的类库。
<%@pageimport="java.util.HashMap,
mons.logging.Log,
mons.logging.LogFactory,
java.util.Iterator,
com.topsoft.aaf.share.entities.DepartmentProperty,
java.util.Set,
java.util.HashSet"%>
标签引用
所需要标签导入部分，按照以下格式规范编写，一般要在JSP文件头下面就导入所需的所有标签。
例如：
<%@tagliburi="/toptag"prefix="toptag"%>
HTML编码
关于HTML代码编写的几点说明：
1）表格嵌套层次过多，影响页面速度；
2）表格过多地用于布局方面，导致界面代码过多，界面开发人员很难读懂HTML代码，从而降低了开发效率；
3）代码样式不规则，没有统一的代码格式，难于理解；
鉴于以上原因，有必要对HTML代码的编写进行规范，具体如下：
1）合理运用表格，表格应尽可能不用于布局页面，避免表格的过多嵌套，而是用DIV层标签来代替；
2）对于数据的格式化显示，用表格来进行格式化；
3）HTML代码要有良好的代码格式；
HTML代码格式示例
—行与表之间缩进4个字符-->
| —列与行之间缩进4个字符-->
—同一个页面中位置平等的表不用缩进，但是表与表之间要至少留一行的空隙-->
|
4.JSP代码编写规则
1、避免JSP代码中有涉及逻辑的判断代码。
2、忌讳用Include指令来嵌入网页。
3、可以使用JSP表达式。
4、有选择的Struts的HTML标签来代替HTML标签，如FORM标签。
5、JSP页面中，忌讳使用Java脚本代码来实现业务功能。
5.JavaScript使用
对于使用JavaScript有两种方式，一种是引入外部JavaScript代码文件；另一种是直接在页面内部编写JavaScript代码。
。
引入外部JavaScript文件
页面中如果要使用JavaScript来实现页面动态行为功能，首先需要进行引入包含JavaScript功能代码的JavaScript文件。
引入位置
所有都在页面文件的HEAD代码区内进行引入。
在这里引入JavaScript文件
引入语法
页面内编写JavaScript代码
JavaScript代码脚本
JavaScript调用
对于JavaScript的调用一般是通过HTML标签事件来调用的，比如：
onClick、onChange、onMouseOver等。
语法如下：
onClick=”JavaScript的方法名（）;”
onChange=”JavaScript的方法名（）;”
如果要返回值，则用:
onClick=”returnJavaScript的方法名（）;”
TopTais系统JavaScript接口方法
请参考附录《TopTais系统JavaScript接口方法参考》
6.CSS使用
你可以用以下三种方式将样式表加入您的网页。
而最接近目标的样式定义优先权越高。
高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
链入外部CSS文件
可以先建立一个外部样式表（CSS）文件，然后利用HTML的link对象，把样式链入页面，如下：
页面内部定义样式
在页面的和
标记之间插入一个块对象。
定义方式如下：
--
body{font:
10pt"Arial"}
h1{font:
12px"Arial";font-weight:
bold;color:
maroon}
h2{font:
13px"Arial";font-weight:
bold;color:
blue}
p{font:
10px"Arial";color:
black}
-->
内联定义样式
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
示例如下：
5px;width:
200px">这一行被增加了左右的外补丁
CSS样式使用指南
请参考《CSS样式使用指南》
7.日历控件的使用（Calendar）
使用步骤
第一步：
引入日历控件的JavaScript文件calendar.js
第二步：
引入日历控件的样式表（CSS）文件calendar.css
第三步：
引用标签inputDate
<%@tagliburi="/inputDate"prefix="inputDate"%>
第四步：
应用日历
textproperty="日历控件名"styleClass="引用样式"value="要显示的日期值"readonly="true"/>
8.数据网格（DataGrid）
概述
数据网格大量应用于Web应用软件系统中，数据网格是以二维表的形式表现数据，使数据排列紧凑、美观，从而达到容易理解。
数据网格（DataGrid）是纯js实现的web控件，仿真window窗口程序中的grid网格。
鉴于现有的html元素控件无法满足对数据处理的需求，特编写此web控件。
目的是为了让编程更方便，页面风格统一，更易于用户使用。
DataGrid是在WebFXColumnList控件的基础上，进行修改完善，使其逐步满足web页面上数据网格的需要。
功能描述
1）编辑功能，在网格内能灵活插入checkbox，radio等控件，对text、select控件支持动态显示编辑，编辑后隐藏。
并对回车跳转等快捷键提供支持。
2）支持客户端数据的添加，删除，编辑，并能网格内的数据通过隐藏域进行form表单的提交。
3）能够动态调整列的宽度。
列宽初始化时有手工设定列宽和程序自由拉开两种方式。
4）表头固定：
当垂直滚动时，表头固定；当水平滚动时，序号列固定。
5）可以按表格中的某一列对表格数据进行客户端的升序或降序排序。
6）该grid比较符合常规的html页面代码的初始化。
7）支持多个select框的连动功能。
支持日期控件的加入。
使用DataGrid
数据网格可以应用在数据显示、数据录入编辑两种场合。
显示行列式数据（同一页面单表）
此类页面不需要编辑，只需要按列排序。
第一步：
引入数据网格所需的JavaScript和CSS文件
第二步：
初始化数据网格HTML代码，代码如下：
……………………………………….
………………………………………..
--设定DataGrid的宽度和高度-->
50px;width:
700px;height:
200px">
--设定标题-->
投资方信息列表