dwr简介--一个例子(续二)
2007-12-17 20:48
417 查看
页面部分有几个重要的文件:
login.jsp -- 登陆画面
showtable.jsp -- 显示table的画面
showtable.js -- 显示table页用到的javascript
下面是login.jsp
< body >
<!--
下面是要用到了js,UserLogic.js是自己的,是有dwr根据你编写的dwr.xml文件的内容生成的
另外两个是dwr自带的。
-->
< script type ='text/javascript' src ='dwr/interface/UserLogic.js'></script>
<script type ='text/javascript' src ='dwr/engine.js'></script>
<script type ='text/javascript' src ='dwr/util.js'></script>
<script type ='text/javascript'>
function init() {
DWRUtil.useLoadingMessage();
}
<!--
在按钮提交时调用这个方法。注意这里的username,password,loginBean在这个jsp页面中
是没有显示的写出来的。这三个东西是Username输入框,Password输入框和Form。
他们的名字是Struts自己生成的,所以你必须知道struts生成html的命名规则
-- >
function sumbit(){
return UserLogic.validate(show,$( " username " ).value,$( " password " ).value);
}
function show(flag){
if (flag == false ){
alert( " Invalid Username and Password! " );
} else {
$( " loginBean " ).submit();
}
}
</ script >
< html:form action ="/login" >
< table border ="0" width ="100%" id ="table1" cellspacing ="0" cellpadding ="0" >
< tr >
< td align ="right" > Username: </ td >
< td >< html:text property ="username" size ="30" /></ td >
</ tr >
< tr >
< td align ="right" > Password: </ td >
< td >< html:password property ="password" value ="password" size ="30" /></ td >
</ tr >
</ table >
< div align ="center" >
< input type ="button" value ="Submit" name ="button1" onclick ="sumbit()" >
</ div >
</ html:form >
</ body >
下面是showtable.jsp
<body onload="init()">
<script type='text/javascript' src='dwr/interface/TableModel.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='showtable.js'></script>
<script type='text/javascript' src='mm_script.js'></script>
<script type='text/javascript' src='wz_tooltip.js'></script>
<!--这是显示表格的层-->
<div align="center" id="base" class="base">
<table width="80%" cellspacing="0" cellpadding="0" border="1"
bordercolor="#6699FF" class="body">
<tr>
<th class="header1"><a href="#" onclick="sort(0)" > column1 </a><span id="arrow0" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(1)" > column2 </a><span id="arrow1" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(2)" > column3 </a><span id="arrow2" class="arrow"></span></th>
<th class="header1">Operation</th>
</tr>
<tbody id="rows">
<logic:iterate id="row" name="tableRows">
<tr>
<td><p align="center"><bean:write name="row" property="col1Value" /></td>
<td><p align="center"><bean:write name="row" property="col2Value" /></td>
<td><p align="center"><bean:write name="row" property="col3Value" /></td>
<td><p align="center">
<a href="#" onclick="showUpdateLayer(<bean:write name="row" property="col1Value" />)">
<img src="edit.gif" border="0"/>
</a>
|
<a href="#" onclick="deleteRow(<bean:write name="row" property="col1Value" />)">
<img src="remove.gif" border="0"/>
</a>
</td>
</tr>
</logic:iterate>
</tbody>
</table>
<table>
<tr>
<td id="addbutton">
<a href="#" onclick="showAddLayer()"><img src="add.gif" border="0" /></a>
</td>
<td id="pager">
<!--这是分页-->
<table>
<tr>
<td>[</td>
<logic:iterate id="pager" name="pagers">
<td><a href="#" onclick="changePage(<bean:write name="pager" />)"><bean:write name="pager" /></a></td>
</logic:iterate>
<td>]</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--这是显示更改记录的对话框的层-->
<div align="center" id="dialog" class="dialog">
<form name="addForm">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" height="25" background="header.gif" colspan="2">
<img border="0" src="close.gif" width="14" height="15" onmouseover="this.src='close_over.gif'" onmouseout="this.src='close.gif'" onclick="showBase()"
onMouseDown="MM_dragLayer('dialog','',0,0,0,0,true,false,-1,-1,-1,-1,545,105,100,'',false,'')">
</td>
</tr>
<tr>
<td align="right" width="70">PK:</td>
<td><span id="col1Value" class="pk"></span></td>
</tr>
<tr>
<td align="right">Col2:</td>
<td><input type="text" name="col2Value" size="20" class="text"></td>
</tr>
<tr>
<td align="right">Col3:</td>
<td><input type="text" name="col3Value" size="20" class="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="save" name="addButton" class="button" onclick="saveRow()">
<input type="button" class="button" value="cancel" name="kickAddButton" onclick="showBase()">
</td>
</tr>
</table>
</form>
</div>
<!--这是显示等待loading的层-->
<div id="loading" class="loading">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="loading">Loading
</td>
</tr>
</table>
</div>
</body>
我这里用了另外两个js库,一个是mm_script.js:Macromedia的拖动层功能。另一个是wz_tooltip.js:toolTip库。不过这两个库在我的程序中不起作用。我也不知道怎么回事。
至于showtable.js。太长了,不贴在这里了。在原程序中有的。我也写了不少注释。
对了别忘了下载源程序。为了减少体积,我把Struts的jar都拿走了,这个东西大家一般都有。现在里面都dwr和jdts的jar包。所以你要想运行的话需要把struts的jar包放到WEB-INF/lib下。
ant和db的东西也都有。需要在ModelOneDAO.java中把jdbc的url,user ,password改一下。
我这个程序还有一些bug,但是现在我没有时间改了。大家将就一下吧。
http://www.blogjava.net/Files/mstar/StrutsAjax-min.rar
login.jsp -- 登陆画面
showtable.jsp -- 显示table的画面
showtable.js -- 显示table页用到的javascript
下面是login.jsp
< body >
<!--
下面是要用到了js,UserLogic.js是自己的,是有dwr根据你编写的dwr.xml文件的内容生成的
另外两个是dwr自带的。
-->
< script type ='text/javascript' src ='dwr/interface/UserLogic.js'></script>
<script type ='text/javascript' src ='dwr/engine.js'></script>
<script type ='text/javascript' src ='dwr/util.js'></script>
<script type ='text/javascript'>
function init() {
DWRUtil.useLoadingMessage();
}
<!--
在按钮提交时调用这个方法。注意这里的username,password,loginBean在这个jsp页面中
是没有显示的写出来的。这三个东西是Username输入框,Password输入框和Form。
他们的名字是Struts自己生成的,所以你必须知道struts生成html的命名规则
-- >
function sumbit(){
return UserLogic.validate(show,$( " username " ).value,$( " password " ).value);
}
function show(flag){
if (flag == false ){
alert( " Invalid Username and Password! " );
} else {
$( " loginBean " ).submit();
}
}
</ script >
< html:form action ="/login" >
< table border ="0" width ="100%" id ="table1" cellspacing ="0" cellpadding ="0" >
< tr >
< td align ="right" > Username: </ td >
< td >< html:text property ="username" size ="30" /></ td >
</ tr >
< tr >
< td align ="right" > Password: </ td >
< td >< html:password property ="password" value ="password" size ="30" /></ td >
</ tr >
</ table >
< div align ="center" >
< input type ="button" value ="Submit" name ="button1" onclick ="sumbit()" >
</ div >
</ html:form >
</ body >
下面是showtable.jsp
<body onload="init()">
<script type='text/javascript' src='dwr/interface/TableModel.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='showtable.js'></script>
<script type='text/javascript' src='mm_script.js'></script>
<script type='text/javascript' src='wz_tooltip.js'></script>
<!--这是显示表格的层-->
<div align="center" id="base" class="base">
<table width="80%" cellspacing="0" cellpadding="0" border="1"
bordercolor="#6699FF" class="body">
<tr>
<th class="header1"><a href="#" onclick="sort(0)" > column1 </a><span id="arrow0" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(1)" > column2 </a><span id="arrow1" class="arrow"></span></th>
<th class="header1"><a href="#" onclick="sort(2)" > column3 </a><span id="arrow2" class="arrow"></span></th>
<th class="header1">Operation</th>
</tr>
<tbody id="rows">
<logic:iterate id="row" name="tableRows">
<tr>
<td><p align="center"><bean:write name="row" property="col1Value" /></td>
<td><p align="center"><bean:write name="row" property="col2Value" /></td>
<td><p align="center"><bean:write name="row" property="col3Value" /></td>
<td><p align="center">
<a href="#" onclick="showUpdateLayer(<bean:write name="row" property="col1Value" />)">
<img src="edit.gif" border="0"/>
</a>
|
<a href="#" onclick="deleteRow(<bean:write name="row" property="col1Value" />)">
<img src="remove.gif" border="0"/>
</a>
</td>
</tr>
</logic:iterate>
</tbody>
</table>
<table>
<tr>
<td id="addbutton">
<a href="#" onclick="showAddLayer()"><img src="add.gif" border="0" /></a>
</td>
<td id="pager">
<!--这是分页-->
<table>
<tr>
<td>[</td>
<logic:iterate id="pager" name="pagers">
<td><a href="#" onclick="changePage(<bean:write name="pager" />)"><bean:write name="pager" /></a></td>
</logic:iterate>
<td>]</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--这是显示更改记录的对话框的层-->
<div align="center" id="dialog" class="dialog">
<form name="addForm">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" height="25" background="header.gif" colspan="2">
<img border="0" src="close.gif" width="14" height="15" onmouseover="this.src='close_over.gif'" onmouseout="this.src='close.gif'" onclick="showBase()"
onMouseDown="MM_dragLayer('dialog','',0,0,0,0,true,false,-1,-1,-1,-1,545,105,100,'',false,'')">
</td>
</tr>
<tr>
<td align="right" width="70">PK:</td>
<td><span id="col1Value" class="pk"></span></td>
</tr>
<tr>
<td align="right">Col2:</td>
<td><input type="text" name="col2Value" size="20" class="text"></td>
</tr>
<tr>
<td align="right">Col3:</td>
<td><input type="text" name="col3Value" size="20" class="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="save" name="addButton" class="button" onclick="saveRow()">
<input type="button" class="button" value="cancel" name="kickAddButton" onclick="showBase()">
</td>
</tr>
</table>
</form>
</div>
<!--这是显示等待loading的层-->
<div id="loading" class="loading">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="loading">Loading
</td>
</tr>
</table>
</div>
</body>
我这里用了另外两个js库,一个是mm_script.js:Macromedia的拖动层功能。另一个是wz_tooltip.js:toolTip库。不过这两个库在我的程序中不起作用。我也不知道怎么回事。
至于showtable.js。太长了,不贴在这里了。在原程序中有的。我也写了不少注释。
对了别忘了下载源程序。为了减少体积,我把Struts的jar都拿走了,这个东西大家一般都有。现在里面都dwr和jdts的jar包。所以你要想运行的话需要把struts的jar包放到WEB-INF/lib下。
ant和db的东西也都有。需要在ModelOneDAO.java中把jdbc的url,user ,password改一下。
我这个程序还有一些bug,但是现在我没有时间改了。大家将就一下吧。
http://www.blogjava.net/Files/mstar/StrutsAjax-min.rar
相关文章推荐
- dwr简介--一个例子(续二)
- dwr简介--一个例子(续)
- dwr简介--一个例子(续)
- dwr简介--一个例子(结合Struts)
- dwr简介--一个例子
- 使用委托数组的一个例子简介一下委托
- 一个dwr的小例子
- 【DWR系列01】-DWR简介及入门例子
- MINA框架简介和一个简单的例子
- 一个简单的dwr例子
- cgi简介以及一个用shell脚本写的shell例子分析
- C# 关于委托和事件的妙文:通过一个例子详细介绍委托和事件的作用;Observer模式简介
- 自己做的一个关于DWR的例子。
- 一个简单的DWR入门例子
- GDB 7.0 中文手册 —— 1. GDB简介和一个简单的使用例子
- AntiXss 类库简介以及一个简单的例子
- C# 关于委托和事件的妙文:通过一个例子详细介绍委托和事件的作用;Observer模式简介
- System.Data.SQLite数据库简介 (有一个小例子)
- dwr一个例子
- Java for Web学习笔记(五四):Spring框架简介(3)一个简单的One Context例子