Web软件用户界面开发指南.docx

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.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">

--设定标题-->

投资方信息列表