BlogJava-何杨的IT技术博客-随笔分类-Teambiz

14.Teambiz后台开发规范

何杨 — Wed, 14 Mar 2012 02:25:00 GMT

摘要: IBM GDC DL Teambiz后台开发规范（2012年3月9日修订版）撰写：何杨 2012年3月9日 &nb... 阅读全文

何杨 2012-03-14 10:25 发表评论

13.Teambiz中前台开发规范

何杨 — Wed, 14 Mar 2012 02:24:00 GMT

Teambiz中前台开发规范

作者：何杨

撰写日期：2012年3月9日

版本：1.00

更新日期：

第一部分：规范目的

为了提高团队协作效率, 提高前台页面文件的可读性，可维护性和一致性，从而方便前后台人员维护管理, 输出高质量的文档, 特制订此文档.

本规范文档一经讨论确认, 前端开发人员必须按本文档规范进行前台页面开发. 如在执行过程中，文档确有不合时宜的地方，可及时提出, 经会议讨论后决定可以更改此文档后再执行。

第二部分：基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

程序员应该书写项目组所有人都可以看的懂的代码. 简洁易懂是一种美德. 在你们编写程序时必须时刻为用户着想, 为服务器着想.

第三部分：前台分离制度

我们认为，前台页面混乱的根源之一在于一个页面担负了太多的任务。因此，必须把页面的结构，样式，行为三部分解构开来，这三部分的命名如下：

类型	名称	担负任务	说明
JSP	*.jsp	网页的结构	以下简称JSP
CSS	style.css	网页样式	以下简称CSS
JS	javascript.jsp	网页行为	以下简称JS

第四部分：JSP文件书写规范

1. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至...之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

4. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (
), hr(

)等; 属性值必须用双引号包括;

5. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;

6.结构化JSP,示例如下

首页

介绍

服务

很多编译器提供了格式化的工具对代码整形,希望多加利用.如果机器整形效果不如手动整形，请进行手动整形.

6. 尽可能减少冗余的div嵌套, 如

欢迎访问XXX, 您的用户名是

用户名

完全可以用以下代码替代:

欢迎访问XXX, 您的用户名是用户名

;

9. 书写链接地址时, 必须避免重定向，例如：href="http://www.baidu.com/", 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style="…"; 如果需要初始化某元素的style属性，请在CSS中设置或是在JS函数window.onload中设置。

11. 能以背景形式呈现的图片, 尽量写入css样式中;

12. 给区块代码及重要功能(比如表格展现)加上注释, 方便后台添加功能;

第四部分：CSS文件书写规范

1. 文件编码统一为utf-8;

2.结构化CSS,如下

html,body {

height:100%;

margin:0px;

font-size:12px;

}

body{

margin-top: 5px;

margin-bottom: 5px;

margin-left: 5px;

margin-right: 5px;

text-align: center;

font-size: 12px;

font-family:"宋体","Tahoma";

background:#ffffff;

overflow-y:hidden;

}

img{

border:0px;

}

#header{

margin:0px;

padding:0px;

border:0px solid #00ff00;

width:100%;

height:75px;

overflow:hidden;

}

2. 协作开发及分工: 架构师会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件style.css由架构师书写, 协作开发过程中, 每个页面请务必都要引入,此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中;

4. class与id命名:命名要语义化,简明化,尽量使用简易的单词组合; 避免使用中文拼音,以下是约定俗成的一些命名例子，请多加利用:

名称	Id	名称	Id
页　眉	header	内　容	content
容　器	container	页　脚	footer
版　权	copyright	导　航	menu
主导航	mainMenu	子导航	subMenu
标　志	logo	标　语	banner
标　题	title	侧边栏	sidebar
搜　索	search	按　钮	btn
登　录	login	链　接	link

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”。

5. css属性书写顺序, 建议遵循布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相应的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：　font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；其他属性包括: list-style(列表样式)　＆　vertical-vlign　＆　cursor　＆　z-index(层叠顺序) 　＆　zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

6. 书写代码前, 考虑并提高样式重复使用率;

7. 充分利用html自身属性及样式继承原理减少代码量, 比如:

这儿是标题列表2010-09-15

定义

ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示.

8. 必须为大区块样式添加注释, 小区块适量注释;

9. 代码缩进与格式: 建议单行书写;

第五部分：JS文件书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down直接宕下来的代码造成的代码污染;

2. 库引入: 原则上仅引入prototype库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如counter;另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 Counter;

5. 函数命名: 首字母小写驼峰式命名. 如add(count);

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

8. 代码结构明了, 加适量注释. 提高函数重用率;

第六部分：注释规范

1. html注释: 注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;示例：

/*****************************************************

* 将数组arr转化成为tableDatas

* 此举是为了更方便解析数据

* 何杨，2012年2月7日14:03:43

*****************************************************/

function getTableDatasFromArr(arr){

var tableDatas=new Array();

// 遍历这个数组

for(var i=0;i

var node=arr[i];

var arr2=new Array();

for(var j=0;j

var child=node.childNodes.item(j);

arr2.push(child.childNodes[0].nodeValue);

}

// 向表格中添加行

tableDatas.push(arr2);

}

return tableDatas;

}

何杨 2012-03-14 10:24 发表评论

Teambiz2012年2月29日版下载地址

何杨 — Wed, 29 Feb 2012 03:23:00 GMT

http://www.llxxb.com/upload/source/Teambiz2012-2-29.rar

在此感谢雷振杰提供为此提供空间！

何杨 2012-02-29 11:23 发表评论

11.Teambiz中前台表单验证组件FormChecker

何杨 — Wed, 29 Feb 2012 02:41:00 GMT

Teambiz中前台表单验证组件FormChecker

作者：何杨

撰写日期：2012年2月27日

版本：1.00

更新日期：

第一部分：功能说明

对前台页面的表单组件（对于所有用.value能取到值的组件都适用）提供正则表达式验证功能。

第二部分：核心组件

名称	路径	说明
CheckItem	teambiz\WebRoot\page\js\formchecker.js	这个类表示一个页面检查项，参数有表单组件id，当不合法时提示的文字，验证表单组件内容的正则表达式和表征组件是否必填字段。在页面中增添验证项时常会遇到这个类。
FormChecker	teambiz\WebRoot\page\js\formchecker.js	这个类表示一个前台组件正则表达式验证器。内含一个数组，以容纳多个验证项（CheckItem）
addCheckItem	teambiz\WebRoot\page\js\formchecker.js	向FormChecker的数组中增添一个验证项。在页面中增添验证项时常会遇到这个类。
checkTextBox	teambiz\WebRoot\page\js\formchecker.js	对一个checkItem进行检查，如果它是必填组件，使用正则表达式验证它，并返回验证的结果；如果它不是必填组件，且没有输入内容的话，返回真，否则依然按照正则表单时来验证它。

isValid

teambiz\WebRoot\page\js\formchecker.js

对FormChecker的数组进行循环并逐个使用checkTextBox函数进行检查，当所有的检查项都符合验证条件后返回真；如果有一个检查项不符合条件，使用alert显示提示文字并将焦点至于该组件上。

用户在提交表单前应该调用这个函数得到表单的验证结果。

第三部分：CheckItem和FormChecker两个类的代码

以下代码请参见teambiz\WebRoot\page\js\ formchecker.js中同名函数。

/*************************

* Class:CheckItem

* 2009.08.23

**************************/

//-- Contructor

function CheckItem(textboxName,msg,validChar,isRequired){

this.textboxName=textboxName;

this.msg=msg;

this.validChar=validChar;

this.isRequired=isRequired;

}

/*************************

* Class:FormChecker

* 2009.08.23

**************************/

//-- Contructor

function FormChecker(){

this.checkItemArray=new Array;

}

//-- Add a check Item to array

FormChecker.prototype.addCheckItem=function(textboxName,msg,validChar,isRequired){

var checkItem=new CheckItem(textboxName,msg,validChar,isRequired);

this.checkItemArray[this.checkItemArray.length]=checkItem;

};

//-- Check text field in the form

FormChecker.prototype.checkTextBox=function(checkItem){

var validChar=checkItem.validChar;

var isRequired=checkItem.isRequired;

var inputValue=$(checkItem.textboxName).value;

if(isRequired!="true" && inputValue.length<1){

return true;

}

else{

var regexStr="^"+validChar+"$";

var regex=new RegExp(regexStr);

return regex.test(inputValue);

}

};

//-- judge the validation of a form

FormChecker.prototype.isValid=function(){

for(var i=0;i

var toBeCheckedObj=this.checkItemArray[i];

var checkResult=this.checkTextBox(toBeCheckedObj);

if(checkResult==true){

continue;

}

else{

alert(toBeCheckedObj.msg);

$(toBeCheckedObj.textboxName).focus();

return false;

}

return true;

};

第四部分：使用CheckItem和FormChecker进行验证的代码

以下代码请参考：teambiz\WebRoot\page\jsp\user\register\javascript.jsp

1.初始化FormChecker及添加验证项目

formChecker=new FormChecker();

formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true");

formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");

2.得到表单的验证结果

function getCheckResult(){

// 进行页面输入检查

if(formChecker.isValid()==false){

return false;

}

var userPswd=$("userPswd").value;

var userPswd2=$("userPswd2").value;

if(userPswd!=userPswd2){

$("userPswd2").focus();

alert("前后两次密码必须一致.");

return false;

}

return true;

}

以上粗体部分就是得到FormChecker的验证结果。由于FormChecker只能对单个组件的文本内容进行正则表达式校验，无法对对多个组件进行比较，因此如果实际需要其它的验证项，可以在getCheckResult函数中进行添加。

3.注册按钮点击时间后的响应函数：

$("registerBtn").onclick=function(){

if(getCheckResult()==true){

submitForm();

}

};

第五部分：使用步骤

步骤	说明	参照
载入这批函数	在teambiz中，这一载入一般放在style.css中。
在window_onload函数中初始化表单验证器并增添检查项。		formChecker=new FormChecker(); formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true"); formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true"); formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true"); formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)@\\w+([-.]\\w+)\.\\w+([-.]\\w+)*","true");
使用FormChecker的isValid函数来得到验证结果。		function getCheckResult(){ // 进行页面输入检查 if(formChecker.isValid()==false){ return false; } …… return true; }
注册按钮点击时间后的响应函数		$("registerBtn").onclick=function(){ if(getCheckResult()==true){ submitForm(); } };

第六部分：小结

进行表单元素验证是程序员不得不做却又较为乏味的工作之一，FormChecker类能有助于减轻他们的负担，从而使得用正则表达式验证文本内容的工作变得简单，程序员只需要在正则表达式的编写上下些功夫或者求助于网络。

FormChecker的不足之处是验证模式单一，验证逻辑比较简单，但对于验证，似乎也没有多少共性的需求了，如果有希望大家能赐教。

何杨 2012-02-29 10:41 发表评论

12.Teambiz中后台参数容器RequestParamMap

何杨 — Wed, 29 Feb 2012 02:41:00 GMT

Teambiz中后台参数容器RequestParamMap

作者：何杨

撰写日期：2012年2月27日

版本：1.00

更新日期：

第一部分：功能说明

简化页面请求参数的取值和存放，解决乱码问题，并简化数据传输通道上函数参数的编写。

第二部分：核心组件

名称	路径	说明
RequestParamMap	teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java	它是一个页面请求参数的容器，内含一个哈希表，以键值对的方式来存储请求参数的名和值。它的构造函数接受一个哈希表，这个哈希表在AjaxAction的getRequestParamMap函数中被生成，并传入强制子类实现的process函数中，因此每个继承自AjaxAction的类中直接使用RequestParamMap对象即可，无需考虑它的由来。有一点需要说明的是，由于非ASC码字符在URL中是不允许的，因此在使用Ajax.Request对象发起请求前使用javaScript函数eval两次对url进行转码，与之对应的，在AjaxAction的getRequestParamMap函数中使用UTF8Coder类decode方法又将其还原了回来，因此程序员无需担心乱码问题。
getParamValue	teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java中同名函数。	程序员可以参数名为单位，使用这个函数取出参数的值，当参数名不存在，即请求参数中没有后台想要的值，一个异常将被抛出。按照teamBiz的异常传递体系，这个异常会在用户界面上显示出来，这样做有助于问题的快速定位。
addParam	teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java中同名函数。	程序员可以将参数名和参数值添加到RequestParamMap，设计这个函数的考虑到很多参数如用户信息在请求中往往是不见的，需要在Action中从session或是其它地方取出再往后方传递。

第三部分：有关RequestParamMap使用的代码

1. RequestParamMap类的代码

/**

* 页面请求参数容器

* @author 何杨(heyanghy@cn.ibm.com)

* @version 1.00

* @time Feb 6, 2012 10:47:39 AM

public class RequestParamMap{

// 存储页面请求参数的哈希表

private Map map;

/**

* 构造函数

* @param map

public RequestParamMap(Map map){

this.map=map;

}

/**

* 按请求参数的名称取得请求参数的值

* @param paramName

* @return

public String getParamValue(String paramName) throws IllegalArgumentException{

if(map.containsKey(paramName)){

return map.get(paramName);

}else{

throw new IllegalArgumentException("找不到名为"+paramName+"的页面请求参数.");

}

/**

* 添加一个参数

* @param paramName

* @param paramValue

public void addParam(String paramName,String paramValue){

map.put(paramName, paramValue);

}

以上代码路径：teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java

2. AjaxAction的getRequestParamMap函数

private RequestParamMap getRequestParamMap(HttpServletRequest request){

Map map=new HashMap();

for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {

String name = (String) e.nextElement();

String[] values = request.getParameterValues(name);

if (values != null && values.length >= 1) {

String value=UTF8Coder.decode(values[0]);

map.put(name, value);

}

return new RequestParamMap(map);

}

以上代码路径：teambiz\src\com\ibm\heyang\action\base\AjaxAction.java

3.继承自AjaxAction的Action类中对RequestParamMap的使用：

public final class FetchExecuterAction extends AjaxAction {

private static Logger logger = Logger.getLogger(FetchExecuterAction.class);

public void process(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response,RequestParamMap paramMap)

throws Exception {

logger.trace("取得执行者名单Action");

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

PrintWriter out = response.getWriter();

RelationService service=SpringUtil.getRelationService();

Long userId=(Long)request.getSession().getAttribute("userId");

if(userId!=null){

paramMap.addParam("userId", String.valueOf(userId));

paramMap.addParam("userName", "自己");

paramMap.addParam("status", Relation.Status_Agree);

String xml=service.getExecuterXml(paramMap);

out.println("");

out.println("ok");

out.println(xml);

out.println("");

}else{

out.println("");

out.println("ng");

out.println("请登录后再来执行此操作");

out.println("");

}

以上代码来自：teambiz\src\com\ibm\heyang\action\relation\FetchExecuterAction.java

4.后台DAO类对RequestParamMap的使用

public String getExecuterXml(RequestParamMap paramMap) throws Exception{

String userId=paramMap.getParamValue("userId");

String userName=paramMap.getParamValue("userName");

String status=paramMap.getParamValue("status");

StringBuilder sb=new StringBuilder();

sb.append(" select");

sb.append(" tb01.toUserId as id,");

sb.append(" tb02.name as name");

sb.append(" from");

sb.append(" teambiz_relation");

sb.append(" tb01,");

sb.append(" teambiz_user");

sb.append(" tb02");

sb.append(" where");

sb.append(" tb01.toUserId=tb02.id");

sb.append(" and");

sb.append(" tb01.fromUserId="+userId+"");

sb.append(" and");

sb.append(" tb01.status='"+status+"'");

sb.append(" order by");

sb.append(" tb01.id");

String sql=sb.toString();

List ls=fetchRecords(sql,new NameValueRowMapper());

StringBuilder sb2=new StringBuilder();

sb2.append(new NameValueList(ls).asXML());

sb2.append("");

sb2.append(""+userId+"");

sb2.append(""+userName+"");

sb2.append("");

return sb2.toString();

}

以上代码来自：teambiz\src\com\ibm\heyang\dao\RelationDao.java

第四部分：小结

函数参数如果杂乱很不利于一些基类中共通函数的编写，比如分页函数，在RequestParamMap类的帮助下，这个问题能够得到解决。它附带的自动生成对象，解码，无参数时抛出异常要给程序中参数的取值，转码和异常处理带来了方便.

RequestParamMap类体积很小，功能也不复杂，但对后台的整个代码结构的改善带来了莫大好处，类似这种组件是值得发掘的。

何杨 2012-02-29 10:41 发表评论

10.Teambiz中与表格操作相关的函数

何杨 — Wed, 29 Feb 2012 02:38:00 GMT

Teambiz中与表格操作相关的函数

作者：何杨

撰写日期：2012年2月26日

版本：1.00

更新日期：

第一部分：功能说明

提供向表格行的单元格中添加文本，链接，图片等是操作表格内容的常见操作函数。它们在诸如addDatasToTable之类的函数常常被使用。

第二部分：核心组件

名称	路径	说明
createTextTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个仅含文本的单元格。
createLink	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个链接，它是为createLinkTd函数准备的。
createLinkTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个仅含链接的单元格，当程序员需要在单元格中需要创建链接或是需要通过js伪协议调用js函数可以使用它。
createImageTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个仅含图片的单元格，当需要用图标表示数据的状态时可以使用它。
createTitledLink	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个带提示性说明（tooltiptext）的链接，它是为createTitledLinkTd函数准备的
createTitledLinkTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个包含提示性说明链接的单元格，它比createLinkTd更具用户友好型。
createIamgeLink	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个图片链接，它是为createImageLinkTd函数使用的。
createImageLinkTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个包含图片链接的单元格，如果图片比文字更加形象时可以考虑用它取代createLinkTd和createTitledLinkTd
createImageTextTd	teambiz\WebRoot\page\js\dom.js中同名函数。	创建一个兼具图片和文字说明的单元格。
createStartSearchRowBy	teambiz\WebRoot\page\js\changepage.js中同名函数。	创建一个colspan为40的表格行，内含图片和文字，一般在开始查询时使用。
createNgRowBy	teambiz\WebRoot\page\js\changepage.js中同名函数。	创建一个colspan为40的表格行，内含文字，一般从后台没有得到相要的数据时使用。

第三部分：实际代码

以下代码请参见teambiz\WebRoot\page\js\dom.js中同名函数。

/******************************************************

* create a text cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createTextTd(text){

var cell=document.createElement("td");

cell.appendChild(document.createTextNode(text));

return cell;

}

/******************************************************

* create a image cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createImageTd(imageUrl){

var cell=document.createElement("td");

var image=document.createElement("img");

image.setAttribute("src",imageUrl);

cell.appendChild(image);

return cell;

}

/******************************************************

* create a link

* 2011-3-1 9:27:07 heyang

******************************************************/

function createLink(text,url){

var link=document.createElement("a");

link.appendChild(document.createTextNode(text));

link.setAttribute("href",url);

return link;

}

/******************************************************

* create a link cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createLinkTd(text,url){

var link=createLink(text,url);

var cell=document.createElement("td");

cell.appendChild(link);

return cell;

}

/******************************************************

* create a titled link

* 2011-7-9 10:46:50 heyang

******************************************************/

function createTitledLink(text,title,url){

var link=document.createElement("a");

link.appendChild(document.createTextNode(text));

link.setAttribute("href",url);

link.setAttribute("title",title);

return link;

}

/******************************************************

* create a Titled link cell

* 2011-7-9 10:46:50 heyang

******************************************************/

function createTitledLinkTd(text,title,url){

var link=createTitledLink(text,title,url);

var cell=document.createElement("td");

cell.appendChild(link);

return cell;

}

/******************************************************

* create a Iamge link

* 2011-3-1 9:27:07 heyang

******************************************************/

function createIamgeLink(imageUrl,url){

var link=document.createElement("a");

var image=document.createElement("img");

image.setAttribute("src",imageUrl);

link.appendChild(image);

link.setAttribute("href",url);

return link;

}

/******************************************************

* create a Iamge linked table cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createImageLinkTd(imageUrl,url){

var cell=document.createElement("td");

cell.appendChild(createIamgeLink(imageUrl,url));

return cell;

}

/******************************************************

* create a Iamge and text cell

* 2012-1-9 10:31:31 heyang

******************************************************/

function createImageTextTd(imageUrl,text){

var cell=document.createElement("td");

var image=document.createElement("img");

image.setAttribute("src",imageUrl);

cell.appendChild(image);

cell.appendChild(document.createTextNode(text));

return cell;

}

第四部分：使用步骤

步骤	说明	参照
载入这批函数	在teambiz中，这一载入一般放在style.css中。
根据实际情况使用这批函数		teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中addDatasToTable函数，这个函数基本使用到了上面提到的所有函数。

第五部分：小结

使用DOM生成文字，链接，图片等元素是繁重的劳动，将它们归纳成函数有利于提高程序员的生产率，并把精力集中于更值得投放精力的方向上。

何杨 2012-02-29 10:38 发表评论

09.Teambiz中MyTable类

何杨 — Wed, 29 Feb 2012 02:37:00 GMT

Teambiz中MyTable类

作者：何杨

撰写日期：2012年2月26日

版本：1.00

更新日期：

第一部分：功能说明

帮助程序员更轻松的操作前台的表格。

第二部分：核心组件

名称	路径	说明
MyTable	teambiz\WebRoot\page\js\myTable.js	一个JavaScript类，用于操作表格。实际上，它代表的是table的tbody部分，而不包括caption，thead，tfoot。
MyTable	同上文件的同名函数	这是MyTable类的构造函数，传入tbody的id，得到表格的tbody部分。
clear	同上文件的同名函数	一次性删除tbody的所有行。在查询开始前基本都有这一步以清除以往的数据。
removeFirstRow	同上文件的同名函数	删除tbody的第一行。这个函数在实际中使用很少。
getRowCount	同上文件的同名函数	得到tbody中所有行的个数。当需要计算当前显示多少行时可以用到。
appendRow	同上文件的同名函数	在tbody底部添加一行，并且给奇偶行赋予不同的样式。逐行往表格中添加数据时常用到它。
removeRow	同上文件的同名函数	删除tr的id为传入参数的行。当删除对象成功时需要调用这一函数。
refreshRowColor	同上文件的同名函数	给奇偶行赋予不同的样式。一般在appendRow和removeRow中被调用，外界也可主动调用。

第三部分：实际运用代码说明

以下代码请参见teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中search函数。

1. 得到表格并清除原有行：

var userTable=new MyTable("userTable");

userTable.clear();

以上代码就是新建一个MyTable对象并清除原有行的过程，MyTable构造函数接受一个tbody的id，请与页面中tbody的实际ID相对应。

2. 向表格添加行

userTable.appendRow(createStartSearchRowBy("page/img/waiting.gif","开始查询已经发送的联系..."));

userTable.appendRow(createNgRowBy("没有查询到已经发送的联系."));

以上代码就是向tody中添加一个tr的过程，至于createStartSearchRowBy，createNgRowBy两个函数我们将在后文详述。

以上代码路径：teambiz\WebRoot\page\js\changePage.js

3. 向表格中添加一个完整的行。

var arr=tableDatas[i];

// 创建行

var row=document.createElement("tr");

// 加入复选框

var checkBox=document.createElement("input");

checkBox.setAttribute("type","checkbox");

checkBox.setAttribute("id",arr[0]);

var td=document.createElement("td");

td.appendChild(checkBox);

row.appendChild(td);

row.appendChild(createTextTd(arr[1]));

row.appendChild(createTextTd(arr[2]));

row.appendChild(createTextTd(arr[3]));

row.appendChild(createTextTd(arr[4]));

row.appendChild(createTextTd(arr[5]));

row.appendChild(createTextTd(arr[6]));

userTable.appendRow(row);

以上代码完整显示使用DOM创建tr以及一个个td，并往td中添加对象的过程。根据实际情况的不同，我们可能会往行row中添加文本，链接，图片，图片链接等对象，TeamBiz为此类事务设计了一批函数以简化代码编写，这将在后面的文章详述。

以上代码位置：teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中addDatasToTable函数。

4.页面表格

"userTable">

总记录数0 总页数0 当前第0页 0
	发送用户	接收用户	接收用户邮件	接收所属组名	接收所属公司	联系状态
查询中，请稍候...
第页页码:

以上代码中，红色粗体部分的“userTable”就是需要往MyTable构造函数中传入的参数，而黑色粗体部分就是MyTable类诸函数实际操作的区域。

以上代码位置： teambiz\WebRoot\page\jsp\relation\sent\content.jsp

第四部分：使用步骤

步骤	说明	参照
载入MyTable类	在teambiz中，这一载入一般放在style.css中。
创建MyTable对象	由于作用域的不同，这一过程可能会使用多次，但应该避免使用全局的myTable对象。	var table=new MyTable(“tableID”);
操作MyTable对象	使用teambiz\WebRoot\page\js\myTable.js中定义的多个函数操作表格对象，如果这些函数不能满足您的需求，可以参照原有行数的模式来创建新的函数。

第五部分：小结

表格是前台程序操作的主要对象之一，将表格的常用操作加以归纳综合，就形成了MyTable类，它能减少重复代码，减少出错的可能行，减轻劳动和增加代码的一致性，如果我们在编写程序时多加归纳总结，还会诞生出更多相似的类出来。

何杨 2012-02-29 10:37 发表评论

08.Teambiz中分页之前台处理

何杨 — Wed, 29 Feb 2012 02:36:00 GMT

摘要: Teambiz中分页之前台处理作者：何杨撰写日期：2012年2月25日版本：1.02 更新日期： 2012年2月27日第一部分：功... 阅读全文

何杨 2012-02-29 10:36 发表评论

07.Teambiz中分页之后台处理

何杨 — Wed, 29 Feb 2012 02:35:00 GMT

Teambiz中分页之后台处理

作者：何杨

撰写日期：2012年2月25日

版本：1.00

更新日期：

第一部分：功能说明

分页是Web程序的常见功能之一，此文主要讲述后台对分页功能的处理。

第二部分：核心组件

名称

路径

说明

BaseService

teambiz\src\com\ibm\heyang\service\base\BaseService.java

此抽象类是诸Service类的基类，它提供了专用于分页的函数pagedSearch，用户只需传入相应的SQL语句，RequestParamMap实例和dao实例即可完成分页功能，实际上后两者一个是在AjaxAction中自动生成的，一个是Sping中配置的，因此，用户只需书写正确的查询SQL语句即可。

由于DB2数据库分页操作的特殊性，它需要分页时加入排序项，因此若数据源是DB2，那么请换用功能相似的pagedSearch4DB2函数。

JdbcDao

teambiz\src\com\ibm\heyang\dao\base\JdbcDao.java

此抽象类是诸Dao类的基类，它提供了getSqlCount,pageSearchList两个函数以实现分页功能，前者用于得到结果集的总数，后者用于取得某一页的结果集。

若数据库是DB2，请换用功能相似的pageSearchList4DB2。

第三部分：关键代码说明

1. BaseService中的pagedSearch函数：

public String pagedSearch(String sql,RequestParamMap paramMap,JdbcDao dao) throws Exception{

int currentPage=Integer.parseInt(paramMap.getParamValue("start"));

int pageSize=Integer.parseInt(paramMap.getParamValue("pageSize"));

StringBuilder sb=new StringBuilder();

sb.append(""+currentPage+"");

// 取得总记录数

long recordCount=dao.getSqlCount(sql);

sb.append(""+recordCount+"");

// 得到总页数

long pageCount=0;

if((recordCount % pageSize)==0){

pageCount=recordCount/pageSize;

}

else{

pageCount=recordCount/pageSize+1;

}

sb.append(""+pageCount+"");

NameValueList nvList=dao.pageSearchList(sql,currentPage*pageSize, (currentPage+1)*pageSize);

sb.append(nvList.asXML());

return sb.toString();

}

这个函数对数据库进行了两次查询，一次是取出SQL语句能得到的记录总数，一次是取出当前页的数据，另外从paramMap中取出了当前页和一页可以容纳的记录数等数据，有了这些数据，进行一点计算，就能获得前台页面需要的当前页，总记录数，页数和当前页记录等数据，最后此函数将所有数据都变换为XML格式的字符串。

2. JdbcDao的getSqlCount函数。

public int getSqlCount(String sql) throws Exception{

RecordCounter rc=new RecordCounter(sql,this.getJdbcTemplate());

return rc.getCount();

}

这个类利用RecordCounter类对SQL语句进行了一定程序的处理，然后取出这个SQL语句能查询出的记录总数量，RecordCounter类代码如下：

public class RecordCounter{

private String sql;

private JdbcTemplate jdbcTemplate;

/**

* 构造函数

* @param sql

* @param jdbcTemplate

public RecordCounter(String sql,JdbcTemplate jdbcTemplate){

this.sql=sql;

this.jdbcTemplate=jdbcTemplate;

}

/**

* 得到SQL语句查询到的记录数，对外的关键语句

* @author: 何杨（heyanghy@cn.ibm.com）

* @date : Apr 23, 2011

* @time : 11:09:35 AM

* @return

public int getCount() throws Exception{

StringBuilder sb=new StringBuilder();

sb.append(" select ");

sb.append(" count(*) as recordCount ");

sb.append(" from ("+sql+") t ");

String sql=sb.toString();

List ls = jdbcTemplate.query(sql, (new IntegerRowMapper()));

Integer i=(Integer)ls.get(0);

return i.intValue();

}

以上代码路径：teambiz\src\com\ibm\heyang\dao\rowmapper\RecordCounter.java

3. JdbcDao类的fetchPageRecords和fetchPageRecords4DB2函数。

下面两个函数用于取出分页的数据，按照数据库的不同使用不同的部分或是换用不同的函数。

/**

* 查询分页数据，如果是Oracle则放开上面一段，如果是MySql则放开下面一段

* @author: 何杨（heyanghy@cn.ibm.com）

* @date : Mar 29, 2011

* @time : 3:34:44 PM

* @param start

* @param end

* @param sql

* @param mapper

* @return

protected final List fetchPageRecords(int start,int end,String sql,RowMapper mapper){

StringBuilder sb=new StringBuilder();

// Oracle

/*sb.append(" Select ");

sb.append(" * ");

sb.append(" from ");

sb.append(" ( ");

sb.append(" Select ");

sb.append(" t01.*, ");

sb.append(" rownum as newRowNum ");

sb.append(" from ");

sb.append(" ( ");

sb.append(sql);

sb.append(" ) t01 ");

sb.append(" where ");

sb.append(" rownum<='"+end+"' ");

sb.append(" ) ");

sb.append(" where ");

sb.append(" newRowNum>'"+start+"' ");*/

// MySql

sb.append(sql+" limit "+start+","+(end-start));

String sql2=sb.toString();

return this.getJdbcTemplate().query(sql2,mapper);

}

/**

* 专门为DB2制作的查询分页数据，特殊的地方是比上面的函数多了一个Order by

* @param start

* @param end

* @param sql

* @param orderBy

* @param mapper

* @return

protected final List fetchPageRecords4DB2(int start,int end,String sql,String orderBy,RowMapper mapper){

StringBuilder sb=new StringBuilder();

// Db2

sb.append(" Select ");

sb.append(" * ");

sb.append(" from ");

sb.append(" ( ");

sb.append(" Select ");

sb.append(" table01.*, ");

sb.append(" ROW_NUMBER() OVER(ORDER BY "+orderBy+" ) AS ROWNUM ");

sb.append(" from ");

sb.append(" ( ");

sb.append(sql);

sb.append(" ) table01 ) ");

sb.append(" where ");

sb.append(" ROWNUM >"+start+" and ");

sb.append(" ROWNUM <="+end+" ");

String sql2=sb.toString();

return this.getJdbcTemplate().query(sql2,mapper);

}

第四部分：使用步骤

步骤	说明	参照
在Dao类中编写需要进行分页查询的SQL语句，并用函数进行包装。	建议对SQL进行良好的整形。	teambiz\src\com\ibm\heyang\dao\RelationDao.java中的getSentRelationSql函数。
在Service类中撰写调用dao中的分页查询函数	无	teambiz\src\com\ibm\heyang\service\RelationService.java中的pagedSearchMySentRelation函数。
在Action中调用Service中的分页查询函数	如果需要在paramMap中增加新的参数，可以使用com.ibm.heyang.action.base.RequestParamMap类的addParam函数	teambiz\src\com\ibm\heyang\action\relation\SearchSentRealationAction.java类

第五部分：小结

后台的分页处理，实际上需要程序员动脑筋的地方就是SQL语句的编写，其它都是固定模式的操作，TeamBiz通过BaseService和JDBCdao两个类中相应函数的帮助，固化了这些固定的部分，程序员只要正确调用即可，这在一定程度上减轻了程序员的工作量，降低了人为出错的可能。

通过不同分页SQL语句的采用，TeamBiz能适应三种数据库，Oracle，MySQL和Db2，如果要增添更多数据库的支持，对分页SQL进行改写即可。

何杨 2012-02-29 10:35 发表评论

06.Teambiz中三种特殊RowMapper的使用

何杨 — Wed, 29 Feb 2012 02:34:00 GMT

Teambiz中三种特殊RowMapper的使用

作者：何杨

撰写日期：2012年2月25日

版本：1.00

更新日期：

第一部分：功能说明

针对特殊目的的查询，TeamBiz提供了一系列的RowMapper类以减轻程序员的劳动。

第二部分：核心组件

名称	路径	说明
IntegerRowMapper	teambiz\src\com\ibm\heyang\dao\rowmapper\IntegerRowMapper.java	只需进行数量查询时，如select count(*) from tb,明确只会返回一行一列，这时建议使用这个类。
StringRowMapper	teambiz\src\com\ibm\heyang\dao\rowmapper\StringRowMapper.java	当只查询一列时，如select a from table，建议使用这个类。
UserRowMapper	eambiz\src\com\ibm\heyang\dao\rowmapper\UserRowMapper.java	当需要从JDBCTemplate查询到的链表中取出对象时，建议仿照这个类制作自己的RowMapper类

第三部分：各种RowMapper类的具体使用

1. IntegerRowMapper。

StringBuilder sb=new StringBuilder();

sb.append(" select ");

sb.append(" count(*) as recordcount");

sb.append(" from teambiz_menu");

String sql=sb.toString();

List ls=this.getJdbcTemplate().query(sql, new IntegerRowMapper());

Integer count=(Integer)(ls.get(0));

以上代码路径：teambiz\src\com\ibm\heyang\dao\MenuDao.java中isNoMenu函数。

2. StringRowMapper

StringBuilder sb=new StringBuilder();

sb.append(" select");

sb.append(" t01.group_name");

sb.append(" from");

sb.append(" sys_group");

sb.append(" t01,");

sb.append(" sys_user");

sb.append(" t02");

sb.append(" where");

sb.append(" t01.groupid=t02.groupid");

sb.append(" and");

sb.append(" t02.userid="+userid+"");

String sql=sb.toString();

// 查询

List ls = this.getJdbcTemplate().query(sql,new StringRowMapper());

最后得到的ls就是一个包含字符串元素的链表，要取值对其进行遍历即可。

3. UserRowMapper的使用示例

StringBuilder sb=new StringBuilder();

sb.append(" select ");

sb.append(" ID, ");

sb.append(" name, ");

sb.append(" email, ");

sb.append(" pswd, ");

sb.append(" groupName, ");

sb.append(" companyName,");

sb.append(" level");

sb.append(" from teambiz_user");

sb.append(" where name='"+name+"' and ");

sb.append(" pswd='"+pswd+"' ");

String sql=sb.toString();

List ls = this.getJdbcTemplate().query(sql, (new UserRowMapper()));

if(ls.size()==1){

return (User)ls.get(0);

}else{

throw new Exception("用户名或密码错误!");

}

以上代码路径：teambiz\src\com\ibm\heyang\dao\UserDao.java中的getUserByNamePswd函数。

第四部分：小结

对数据库进行各种查询是程序员的常见任务之一，如果能适当运用以上类，能减少代码的重复程度及减轻他们的劳动强度。

何杨 2012-02-29 10:34 发表评论

04.Teambiz中从Sql到XML的过程

何杨 — Wed, 29 Feb 2012 02:32:00 GMT

Teambiz中从Sql到XML的转化过程

作者：何杨

撰写日期：2012年2月23日

版本：1.00

更新日期：2012年2月24日

第一部分：功能说明

将后台编写的SQL语句，向数据库请求后获得的数据，整理成XML格式的文本。

第二部分：核心组件

名称	路径	说明
JdbcDao	com.ibm.heyang.dao.base.JdbcDao	此类中的fetchRecords函数用来取得数据库中的数据，
NameValueRowMapper	com.ibm.heyang.dao.rowmapper.NameValueRowMapper	此类用于将进行数据库查询得到的行集转化为一个NameValue链表对象。
NameValue	com.ibm.heyang.domain.NameValue	此类用于存储行集中某字段的名称和值，在将对象链表转化为XML的过程中使用了它的函数asXML()。
NameValueList	com.ibm.heyang.domain.NameValueList	内含一个链表，用于容纳NameValue对象链表，在将对象链表转化为XML的过程中使用了它的函数asXML()。

第三部分：从SQL语句向XML的转化过程
NameValueRowMapper负责查询结果集一个行的转换，对于其中的每个字段，会形成一个字段名和字段值的NamaValue对象，然后放到一个类型为List的链表中。最终，这个链表对应着这个行集，链表里面的每个元素对应着一个字段（包含其名及值）。

NameValueList用于容纳每个行形成的链表，它本身和查询结果集是对应的。

得到最终的NameValueList之后，调用其asXML方法，将遍历其中的每个元素，得到行集链表，再遍历其中的NameValue对象，再调用每个对象的asXML函数，得到XML文本。

以下展示了两个关键函数：

NameValueList对象的asXML函数如下：

public String asXML() {

StringBuilder sb=new StringBuilder();

for(Object obj:list){

List ls=(List)obj;

sb.append("<node>");

for(NameValue nv:ls){

sb.append(nv.asXML());

}

sb.append("node>");

}

return sb.toString();

}

以上粗体部分是每个行的标志，在前台页面对XML进行解析时还要使用到它，这已经形成了前后台之间的一个约定。

NameValue对象的asXML函数如下：

public String asXML() {

StringBuilder sb=new StringBuilder();

sb.append("<"+name+">");

sb.append(StringUtils.isBlank(value)?"-":value);

sb.append("");

return sb.toString();

}

第四部分：效果展示

SQL语句示例：

select text, url, level from teambiz_menu where level<=2 order by level

使用SQL语句从数据库查询出来的结果集：

最终得到的XML文本：

登出

Logout.do

修改自己信息

Goto.do?page=/page/jsp/user/modify/index.jsp

建立联系

Goto.do?page=/page/jsp/relation/create/index.jsp

我发出去的联系

Goto.do?page=/page/jsp/relation/sent/index.jsp

发给我的联系

Goto.do?page=/page/jsp/relation/received/index.jsp

创建任务

Goto.do?page=/page/jsp/task/create/index.jsp

我发出去的任务

Goto.do?page=/page/jsp/task/sent/index.jsp

发给我的任务

Goto.do?page=/page/jsp/task/received/index.jsp

今日待办任务/已办任务

Goto.do?page=/page/jsp/task/tododone/index.jsp

用户管理

第五部分：使用步骤

步骤	说明	参照
编写SQL语句	编写一个正确的查询语句，建议使用SqlToolBox进行整形工作。	类com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的SQL语句。
使用fetchRecords函数得到结果集。	这个函数处于com.ibm.heyang.dao.base.JdbcDao类中，无需改动，只需要传入正确的sql语句和RowMapper即可。	类com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的List ls=super.fetchRecords(sql,new NameValueRowMapper());一句。
将结果集用NameValueList包装起来	将结果集传入NameValueList类的构造函数即可。	类com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的return new NameValueList(ls);一句。
将结果集转化为XML	使用NameValueList类的asXML函数。	com.ibm.heyang.service.MenuService的getMenuByUserLevel函数。

第六部分：小结

编写SQL语句并将其转化为前台可以辨识的格式是程序员的主要工作负担，采用以上方式的好处有：

1.整个过程中，一个函数fetchRecords和三个对象NameValueRowMapper,NameValue,NameValueList都是系统提供的，程序员无需编码，而只需把SQL语句写好，放到DAO类的一个函数中就可以了。

2.任何查询类的SQL语句，无论字段类型如何，都可以用如上方式处理。

3.如果有特殊的查询方式，com.ibm.heyang.dao.rowmapper下还提供了很多类供使用，如针对select count(*) from tb的IntegerRowMapper类，针对select * from tb where id=XX 的MapRowMapper类，及将将一行记录转化成一个包含键值对的链表的StringRowMapper等，用户也可参照UserRowMapper来书写自己的RowMapper类。这些类的使用将给编码带来较大遍历，关于它们将另行文详述。

何杨 2012-02-29 10:32 发表评论

05.Teambiz中前台页面对XHR对象从后台取回的XML的处理

何杨 — Wed, 29 Feb 2012 02:32:00 GMT

Teambiz中前台页面对XHR对象从后台取回的XML的处理

作者：何杨

撰写日期：2012年2月24日

版本：1.00

更新日期：2012年2月25日

第一部分：功能说明

XHR从后台得到XML文本后，使用DOM对其进行解析。

第二部分：核心组件

名称	路径	说明
Ajax.Request	teambiz\WebRoot\page\js\prototype-1.6.0.3.js	Prototype提供的Ajax请求对象，它将被用来想后台发出异步请求并获取反馈。
ajaxObj	无	它就是XMLHttpRequest对象（简称XHR）。
ajaxObj.responseText	无	XHR对象获得的反馈文本，在需要查看反馈的XML时会用到它。
ajaxObj.responseXML	无	XHR对象获得的反馈XML，也是前端需要解析的数据来源。
status	无	反馈XML第一个status节点的值，当它为ok是意味着顺利得到了后端传来的信息；当它为ng意味着前后端通道是通畅的，但由于某种原因不能获得想要的数据，这个原因可能是用户缺乏权限，后端组件未准备好，后他SQL调用出现异常或是运行异常。这个变量需要在前后端有固定约定才能发挥功用。
arr	无	包含反馈XML中所有node节点的数组。它也依赖于前后端有固定的约定。这是一个临时变量，真正发挥功用的是tableDatas。
tableDatas	无	它本身是一个数组，而内部元素也是一个数组，正如其名称描述的那样，它是一个表格形式的数据，它的“行”相当于SQL查询结果集的行，它的“列”相对于结果集的字段值集合，它的“单元格”就是数据。之所以采用这个对象是因为在使用上相对于arr更加方便，进行一次遍历再通过数组下标就能访问到每个数据。

第三部分：三种前台对取回XML的处理

1.如果前台仅需status一个量。

有时，前台仅需status就能进行判定后台是否实现了自己的目的，如进行登录，变更等操作，对status直接进行判断即可，对后台进行CUD操作常会这样处理，示例代码如下：

new Ajax.Request(url,{

method:'get',

onSuccess: function(ajaxObj){

// alert(ajaxObj.responseText);

hideLoadingWnd();

var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;

if(status=="ok"){

window.location.href="Goto.do?page=/page/jsp/task/tododone/index.jsp";

}

else{

// 返回错误信息

hideLoadingWnd();

var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;

alert(text);

}

onFailure: function(){

hideLoadingWnd();

alert("服务器没有响应.");

}

);

以上代码所在路径：teambiz\WebRoot\page\jsp\user\login\javascript.jsp中submitForm函数。

2.如果前台需要按照节点名称取出传回XML的值。

有时，前台需要明确取出某个名称的节点值（意图获得后台处理的状态），这时可以如同取出status的值一样，从ajaxObj中取出想要的值，示例代码如下：

var currentPage=ajaxObj.responseXML.getElementsByTagName("currentPage")[0].firstChild.data;

var recordCount=ajaxObj.responseXML.getElementsByTagName("recordCount")[0].firstChild.data;

var pageCount=ajaxObj.responseXML.getElementsByTagName("pageCount")[0].firstChild.data;

// 设置分页数据

setPage(recordCount,currentPage,pageCount);

以上代码路径：teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中search函数。

3.如果前台需要表格形式的数据

对后台的查询操作常进行这种处理，这时需要用到系统转化出来的tableDatas对象，示例代码如下：

/*****************************************************

* 取得后方菜单

* 何杨，2012年2月7日11:40:34

*****************************************************/

function fetchMenuFromBg(){

$("menuBar").innerHTML="";

// 组合URL

var url=encodeURI('FetchMenu.do?');

url=encodeURI(url);

// 发出Ajax请求

new Ajax.Request(url,{

method:'get',

onSuccess: function(ajaxObj){

// alert(ajaxObj.responseText);

var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;

if(status=="ok"){

// 找到所有节点放入数组

var arr=ajaxObj.responseXML.getElementsByTagName("node");

if(arr.length==0){

alert("没有得到返回数据.");

}

var tableDatas=new Array();

// 遍历这个数组

for(var i=0;i

var node=arr[i];

var arr2=new Array();

for(var j=0;j

var child=node.childNodes.item(j); arr2.push(child.childNodes[0].nodeValue);

}

// 向表格中添加行

tableDatas.push(arr2);

}

// 显示菜单

showMenu(tableDatas);

}

else{

var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;

alert(text);

}

onFailure: function(){

hideLoadingWnd();

alert("服务器没有响应.");

}

);

};

/*****************************************************

* 显示菜单

* 何杨，2012年2月7日14:03:43

*****************************************************/

function showMenu(tableDatas){

var ul=document.createElement("ul");

for(var i=0;i

var arr=tableDatas[i];

var text=arr[0];

var url=arr[1];

var link=document.createElement("a");

link.appendChild(document.createTextNode(text));

link.setAttribute("href", url);

var li=document.createElement("li");

li.appendChild(link);

ul.appendChild(li);

}

$("menuBar").appendChild(ul);

}

以上代码路径：teambiz\WebRoot\page\js\common.js，其中tableDatas的产生用getTableDatasFromArr进行了一定程度的简化。

第四部分：使用步骤

步骤	说明	参照
编写向后端发起请求的函数	请参照上面的fetchMenuFromBg函数书写新函数，主要需要修改的地方在URL和处理tableDatas的函数，其它部分无需变化。	teambiz\WebRoot\page\js\common.js中的fetchMenuFromBg函数。
编写处理tableDatas的函数（可选）	遍历方式请参照上面的showMenu函数，取得数据后进行DOM操作需要自行处理。	teambiz\WebRoot\page\js\common.js中的showMenu函数。

第五部分：小结

在前后台有一定约定的前提下（status，node），通过一系列对象的配合，我们轻松完成从SQL查询结果集到前台能使用的结果集的转换，这些对象及其使用方法绝大多数都是固定的或是仅需稍加改变的，程序员主要需要考虑的是最初的SQL语句和最终的DOM处理过程，中间只用按部就班的完成装配工作。

这种方式的优势在于：

1.减轻了编码量，同时也减少了出错的可能。

2.易用，因为SQL相对于HQL更容易被人接受。

3.比页面循环标签更具表现性。

这种方式的主要缺点在于：

1. JS和DOM操作需要程序员加以小心。

2.如果字段含有特殊字符可能会造成XML解析异常,但对此无需过于担心，需要注意的多在备注这样的字段中，可以在需要特殊处理再进行处理。

何杨 2012-02-29 10:32 发表评论

03.Teambiz中Ajax的基本运用

何杨 — Wed, 29 Feb 2012 02:31:00 GMT

TeamBiz中Ajax的基本运用

作者：何杨

撰写日期：2012年2月23日

版本：1.03

更新日期：2012年2月28日

第一部分：功能说明

提供前台页面到后台程序的异步请求响应通道。

第二部分：核心组件

名称	路径	说明
Prototype1.6.0.3	teambiz\WebRoot\page\js\prototype-1.6.0.3.js	Prototype是一个有历史的JS类库，TeamBiz中主要使用了它的Ajax部分及$函数。注意，Teambiz并非对Prototype产生依赖，Prototype为Teambiz提供的仅是Ajax.Rquest对象及$函数而已，因为teambiz已经包含了普适版本的$函数，因此换用别的JS框架并不困难。
AjaxAction	teambiz\src\com\ibm\heyang\action\base\AjaxAction.java	AjaxAction是所有响应Ajax异步请求的Action的基类，它主要提供以下四项功能： 1.设置Response； 2.将url中的请求参数解码后放入RequestParamMap对象中； 3.强制子类实现函数process； 4.当子类的process函数中出现异常时，接受异常并包装成XML传给前台页面。
RequestParamMap	teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java	RequestParamMap内部包含一个哈希表，以键值对的方式存储前台URL中的参数及其值。 RequestParamMap对象的生成在于AjaxAction的getRequestParamMap函数中。它主要提供以下功能： 1.将参数集约化，此举能简化后台函数的编写。 2.当后台函数使用其内部不存在的参数时，它能自主抛出一个异常，通过AjaxAction的包装传给前台，使得编写函数的程序员能快速进行错误定位。 3.对前台编写的参数进行UTF-8解码，此举与前台对URL进行两次UTF8编码配合，统一解决了非ASC码字符传送产生乱码的问题。
Ajax.Request	定义于prototype-1.6.0.3.js中	Prototype中定义的Ajax请求对象，其参数有四个，URL，请求方法，成功函数和失败函数。相对于传统方式，它的可控性更高。

第三部分：前台和后台的约定

考虑到代码解读和人工解读的双重便利性，TeamBiz采用XML而不是JSON作为前后台数据的载体，此XML采用了一些约定以规范化编码。

在Ajax异步调用过程中，后台需要两组数据来说明响应细节，一个是状态，如果它的值是OK的话，说明已经取得了请求想要的数据，此时向前台传出的XML会类似如下格式：

如果它的值是NG的话，说明后台能响应，但由于某种原因（用户未登录，用户缺乏权限，参数缺失，后台组件尚未就绪，异常抛出等，前二者需要程序员编码，后两者框架已经代为实现），不能传回请求想要的数据，此时向前台传出的XML会类似如下格式：

请登录后再来执行此操作

后台进行如上约定后，前台就可以采用如下统一的格式来处理XHR响应：

new Ajax.Request(url,{

method:'get',

onSuccess: function(ajaxObj){

// alert(ajaxObj.responseText); // 这里不要随意删去，有时需要打开屏蔽以观察后台传来的XML文本

var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;

if(status=="ok"){

....// 状态为ok时的处理

}

else{

....// 状态为ng时的处理

}

onFailure: function(){

....// 后台没有响应时的处理

}

);

第四部分：使用步骤

步骤	说明	参照
在前台编写向后台发出请求的JS函数。	在此函数需要进行三件事： 1.编写URL。 2.对URL进行UTF8编码。 3.会使用一个Ajax.Request对象向后台发出请求。	teambiz\WebRoot\page\js\common.js中fetchMenuFromBg函数。
在后台编写响应前端请求的Action	此Action需要继承自AjaxAction。在其process函数中主要进行以下三件事： 1.权限验证。 2.使用后端组件取得前端想要的数据。 3.以XML方式将数据传回。	teambiz\src\com\ibm\heyang\action\menu\FetchMenuAction.java
在struts-config.xml注册Action	由于完全不需要静态或动态的form，此Action格式很简单，仅包含path，type和scope三部分。	teambiz\WebRoot\WEB-INF\struts-config.xml中的

第五部分：小结

TeamBiz中全部向后台的请求都是通过Ajax异步方式实现的，相对于传统方式，它有以下优势：

1.由于只需要提取必要的资源，因此占用资源少。

2.有多种状态，多个函数用来处理后台的响应，这使得控制更加多样化。

3.由于前台在请求时处于静止状态，因此无需刻意保存前台页面数据。

4.由于不需要编写form，forward等元素，使得控制文件编写简单方便。

何杨 2012-02-29 10:31 发表评论

02.Teambiz程序流程示意图

何杨 — Wed, 29 Feb 2012 02:30:00 GMT

何杨 2012-02-29 10:30 发表评论

01.Teambiz整体介绍

何杨 — Wed, 29 Feb 2012 02:25:00 GMT

Teambiz整体介绍

作者：何杨

撰写日期：2012年2月27日

版本：1.00

更新日期：

第一部分：TeamBiz说明

TeamBiz是一个处理团队成员之间事务的Web程序，用户可以使用它给自己或者别人规定任务，完成给自己的任务或是跟踪分给他人的事务。

TeamBiz差异化的一点在于基本使用Ajax方式进行前后台交互，后台查询数据库后传回的是XML，前台进行解析并使用DOM进行页面操作。系统在前后台提供了一系列类来协助程序员完成常见编码任务，相信这能减轻程序员的负担并提高代码的一致性。

TeamBiz是一个框架性说明程序，在此程序的基础上还可以完成扩充，如菜单改写成树样式，后台增加更多的领域对象和服务类等。

TeamBiz遗憾的一点在于没有解决当领域对象及其对应的表数据增加时系统复杂度的同时增加，也许再引入一个或多个中间层次能将熵维持在一个能控制的限度内，如果你知道怎么去做，请写信告诉我。(heyanghy@cn.ibm.com,heyang78@gmail.com)

第二部分：TeamBiz使用的框架

名称	说明
Stuts1.3.8	Teambiz使用了Struts的控制层功能和Tile及极少数标签。
Spring2.5	Teambiz使用了Spring的IoC和JDBCTemplate。
Hibernate3.0	Teambiz使用Hibernate进行单个领域对象的创建和更新。
Prototype1.6.0.3	Teambiz使用了Prototype的Ajax.Request,$,window.load三部分。

第二部分：TeamBiz其它相关事项

名称	说明
数据库	MySql5.2，如果需要更换数据库，请修改teambiz\cfg\appctx-datasource.xml中数据源配置并检查Dao类中诸Sql是否能在新数据库中正常运行。
开发环境	MyEclipse9，将程序包导入即可运行。

何杨 2012-02-29 10:25 发表评论