dwr簡介--一個例子(續二)
頁面部分有幾個重要的文件:
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 >
<!-- ?
????下面是要用到了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>
<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

????????</tr>
????</table>
</div>
</body>
至于showtable.js。太長了,不貼在這里了。在原程序中有的。我也寫了不少注釋。
對了別忘了下載源程序。為了減少體積,我把Struts的jar都拿走了,這個東西大家一般都有。現在里面都dwr和jdts的jar包。所以你要想運行的話需要把struts的jar包放到WEB-INF\lib下。
ant和db的東西也都有。需要在ModelOneDAO.java中把jdbc的url,user ,password改一下。
我這個程序還有一些bug,但是現在我沒有時間改了。大家將就一下吧。
http://www.aygfsteel.com/Files/mstar/StrutsAjax-min.rar