本次做了一个关于Wade5+Tapertry3的快速开发，开发环境为Eclipse+Windows10，功能为一个部门管理的增删改查。下面是一个关于本项目的数据传输结构图。

目录结构

下图为本项目的目录结构。

config为配置相关的文件，这里面有两个重要的文件：serviceconfig.xml（服务配置）和database.xml（数据库配置）。src-common为公用包，供其它层里的文件使用。src-service里有一个bean包和一个service包，里面文件如下：

serviceconfig.xml

该文件在config的service包下，用于配置相关服务。部分内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE serviceconfig PUBLIC "-//AILK WADE//WADE 4.0//CN"
  "http://www.wade.com/service/dtd/serviceconfig.dtd" [
  <!ENTITY common SYSTEM "classpath:common.xml">
  <!ENTITY resserv SYSTEM "classpath:resserv.xml">
]>
<serviceconfig>
<config>
	<package name="quickstart" dir="/quickstart"/>
	<package name="saleserv" dir="/saleserv"/>
	<package name="acctmanm" dir="/acctmanm"/>
</config>
<service subsys="quickstart">
     ...
  	<entity name="RM.DepartManagerSvc.updateDepartInfo" 		path="com.ailk.quickstart.service.depart.DepartManagerSvc@updateDepartInfo" />
  	<entity name="RM.DepartManagerSvc.queryDepartInfo" 		path="com.ailk.quickstart.service.depart.DepartManagerSvc@queryDepartInfo" />
  	<entity name="RM.DepartManagerSvc.removeDepartInfo" 		path="com.ailk.quickstart.service.depart.DepartManagerSvc@removeDepartInfo" />
</service>
&common;
&resserv;
</serviceconfig>

该注册的服务需要在service包的Java文件中定义。

database.xml

数据库文件配置：

1
2
3
4
5
6
7
8
9
10
11
<crm_lvshen
     type="dbcp"
     driver="oracle.jdbc.driver.OracleDriver"
     url="jdbc:oracle:thin:@localhost:1521:ORCL"
     user="crm"
     passwd="crm"
     initialSize="1"
     maxActive="10"
     maxIdle="5"
     maxWait="1000"
/>

在这里我介绍一下添加功能的操作。并讲解每个文件的功能

DepartManager.html

该文件和DepartManager.page在此目录下：

添加按钮
1
2
3
4
5
6
<div class="submitPlace"></div>			
<div class="submit">
  <button class="e_button-form" onclick="displayShowPopup();">
  <i class="e_ico-add"></i><span>添加</span>
  </button>
</div>
表格显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div id="DepartInfo" jwcid="DepartInfo@Part">
			<!-- 表格 开始 -->
			<div class="c_scroll c_scroll-x c_scroll-table-5">
				<div class="c_table">
					<table id="departTable" jwcid="@Table" name="simCardtable"  rowClick=""
						rowDBClick="" contextMenu="">
						<thead>
							<tr>
								<th col="DEPART_ID" name="DEPART_ID">部门ID</th>
								<th col="DEPART_CODE">部门编号</th>
								<th col="DEPART_NAME">部门名称</th>
								<th col="DEPART_KIND_CODE">部门类型</th>
								<th col="DEPART_FRAME">部门结构</th>
							</tr>
						</thead>
						<tbody>
							<!-- 循环显示表格列，并设置行间隔颜色 -->
							<tr jwcid="@Foreach" source="ognl:infos" value="ognl:info"
								element="tr" index="ognl:rowIndex"
								class="ognl:rowIndex % 2 == 0 ? '' : 'odd'">
								<td><span jwcid="@Insert" value="ognl:info.DEPART_ID"
									raw="false" /></td>
								<td><span jwcid="@Insert"                 value="ognl:info.DEPART_CODE"
									raw="false" /></td>
								<td><span jwcid="@Insert" value="ognl:info.DEPART_NAME"
									raw="false" /></td>
								<td><span jwcid="@Insert"
									value="ognl:info.DEPART_KIND_CODE" raw="false" /></td>
								<td><span jwcid="@Insert" value="ognl:info.DEPART_FRAME"
									raw="false" /></td>
																	
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 表格 结束 -->
			<!-- 翻页（替换为页面组件） 开始 -->
			<div jwcid="@NavBar" name="simnav" cond="QueryCond"
				part="DepartInfo" listener="queryDepartInfo" count="ognl:count"
				pageSize="5"></div>
			<!-- 翻页 结束 -->
		</div>
模态框显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="c_popup c_popup-drag" id="my_popup" style="display: none;">
    <div class="c_popupWrapper">
			<div class="c_popupHeight"></div>
			<div class="c_popupBox" style="width: 400px;">
				<div class="c_popupTitle">
					<div class="text">添加</div>
					<div class="fn">
						<!--窗口的关闭按钮  -->
						<a class="close" href="javascript:displayShowPopup()"></a>
					</div>
				</div>
				<div class="c_popupContent">
					<div class="c_popupContentWrapper">
						<!-- 输入区 -->
						<!--插入的内容  -->
						<div class="c_form c_form-col-1 c_form-label-5" id="QueryCond">
							<ul class="ul" id="conditioinPart1">
								<li class="li"><span class="label"><span>部门ID：</span></span>
									<span class="e_input"><span><input type="text"
											jwcid="@TextField" value="ognl:condition.DEPART_ID"
											name="condition_DEPART_ID" desc="部门ID" /></span></span></li>
1
2
3
4
<li class="li"><span class="label"><span>部门编号：</span></span>
	<span class="e_input"><span><input type="text"
			jwcid="@TextField" value="ognl:condition.DEPART_CODE"
			name="condition_DEPART_CODE" desc="部门编号" /></span></span></li>
1
2
3
4
<li class="li"><span class="label"><span>部门名称：</span></span>
	<span class="e_input"><span><input type="text"
			jwcid="@TextField" value="ognl:condition.DEPART_NAME"
			name="condition_DEPART_NAME" desc="部门名称" /></span></span></li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
							<li class="li"><span class="label"><span>部门类型：</span></span>
								<span class="e_input"><span><input type="text"
										jwcid="@TextField" value="ognl:condition.DEPART_KIND_CODE"
										name="condition_DEPART_KIND_CODE" desc="部门类型" /></span></span></li>
							<li class="li"><span class="label"><span>部门结构：</span></span>
								<span class="e_input"><span><input type="text"
										jwcid="@TextField" name="condition_DEPART_FRAME"
										value="ognl:condition.DEPART_FRAME" desc="部门结构" /></span></span></li>
						</ul>
						<!--提交区域  -->
						<div class="submitPlace"></div>
						<div class="submit">
							<button class="e_button-form" onclick="updateDepartInfo();">
								<i class="e_ico-ok"></i><span>提交</span>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="c_popupBottom">
				<div></div>
			</div>
			<div class="c_popupShadow"></div>
		</div>
	</div>
	<iframe class="c_popupFrame"></iframe>
	<div class="c_popupCover"></div>
</div>
Js函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script language="javascript">
  function displayShowPopup() {
      document.getElementById('my_popup').style.display = document
              .getElementById('my_popup').style.display == "none" ? "block"
              : "none";
  }
  //添加
  function updateDepartInfo() {
      if (verifyAll("QueryCond")) {
          rm.ajaxSubmitMsg("QueryCond", "updateDepartInfo", null, null);
      }
  }
  //页面每刷新一次执行一次查询
  queryDepartInfo();
  //查询
  function queryDepartInfo() {
      rm.ajaxSubmitQry('QueryCond2', 'queryDepartInfo', null, "DepartInfo");
  }
  //伪删除，并没有删除数据库里的内容，相当于隐藏行
  function removeDepartInfo() {
      $.table.get("simCardtable").deleteRow();
  }
</script>

还有一下数据提交的js这里就不在阐述了，可以自行百度ajax提交。

效果图

点击添加按钮，会弹出相应的添加模态框。

DepartManager.page

是连接*.html和 *.java文件的桥梁，里面是相关参数的属性配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page-specification PUBLIC
  "-//Apache Software Foundation//Tapestry Specification 3.0//EN"
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
<page-specification class="com.ailk.quickstart.view.examples.depart.DepartMangager">
  <property-specification name="info"
      type="com.ailk.common.data.IData" />
  <property-specification name="infos"
      type="com.ailk.common.data.IDataset" />
  <property-specification name="condition"
      type="com.ailk.common.data.IData" />
  <property-specification name="condit"
      type="com.ailk.common.data.IData" />
  <property-specification name="cond"
      type="com.ailk.common.data.IData" />
  <property-specification name="parent"
      type="com.ailk.common.data.IData" />
  <property-specification name="tabinfos"
      type="com.ailk.common.data.IDataset" />
  <property-specification name="tabinfo"
      type="com.ailk.common.data.IData" />
  <property-specification name="count" type="long" />
  <property-specification name="rowIndex" type="int" />
  <property-specification name="right"
      type="com.ailk.common.data.IData" />
 </page-specification>

DepartMangager.java

DepartMangager.java位于此目录下

此类需要继承ResBizPage.java，其添加功能如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void updateDepartInfo(IRequestCycle cycle) throws Exception {
    IData inparam = this.getData("condition", true);
	IData map = CSViewCall.call(this,
			"RM.DepartManagerSvc.updateDepartInfo", inparam).first();
	//这里map等于null,搞不清原因，但不影响功能，索性略过了
	if (map == null) {
		return;
	}
	int succNum = map.getInt("SUCCNUM");
	if (succNum > 0) {
		setAjaxMsg("入库成功");
	} else {
		setAjaxMsg(msgError, "入库失败<br>失败");
	}
}

*.html、*.page、*.java共同组成一个页面，其命名要相同，前两个文件需放在同一个文件夹下。

DepartManagerSvc.java

此类需继承ResBizService.java，用于服务开发。

1
2
3
4
5
6
public int updateDepartInfo(IData inparam) throws Exception {
  DepartManagerBean bean = (DepartManagerBean) BeanManager
              .createBean(DepartManagerBean.class);
      int dataInt = bean.updateDepartInfo(inparam);
  return dataInt;
}

DepartManagerBean.java

该类需要继承BizBean.java，用于逻辑方面的开发。

1
2
3
public int updateDepartInfo(IData inparam) throws Exception {
	return DepartManagerDao.updateDepartInfo(inparam);
}

DepartManagerDao.java

该类需要继承BizDAO.java，其sql语句在数据库表Code_Code中获取。

sql语句：

1
2
3
4
INSERT INTO TD_M_DEPART 
(DEPART_ID,DEPART_CODE,DEPART_NAME,DEPART_KIND_CODE,DEPART_FRAME)
VALUES
(:DEPART_ID,:DEPART_CODE,:DEPART_NAME,:DEPART_KIND_CODE,:DEPART_FRAME)

java代码执行sql语句：

1
2
3
4
public static int updateDepartInfo(IData inparam) throws Exception {
	return ResDao.executeUpdateByCodeCode("TD_M_DEPART",
			"INSERT_INTO_TEST", inparam, ResDao.lvshenConnName);
}//ResDao.lvshenConnName为连接的数据库，详情需查阅这个类ResDao

其他配置

build

用于项目的编译

build.properties
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PROJECT_NAME = quickstart
PROJECT_HOME = ..
WADELIB_HOME = D:/Study/work/shiyongqiTest/devHN/devHN/ngboss/library/wadelib
CRMLIB_HOME = D:/Study/work/shiyongqiTest/devHN/devHN/ngboss/library/crmlib
# publib = ${CRMLIB_HOME}
build=${PROJECT_HOME}/build
config=${PROJECT_HOME}/config
source=${PROJECT_HOME}/src
classes=${PROJECT_HOME}/html/WEB-INF/classes
html=${PROJECT_HOME}/html
JDK_VERSION=1.6
build.xml

该文件用于执行编译操作，右键该文件→Run As→Ant Build，即可执行。

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE project [<!ENTITY buildfile SYSTEM "file:D:\Study\work\shiyongqiTest\devHN\devHN\ngboss\library\wadelib\build\build_wade4_plus.xml">]>
<project name="quickstart" default="all" basedir=".">
    &buildfile;	
    <target name="all" depends="clean,compile_app,jar_app,compile_web,copy_config,copy_lib,copy_web_resource"/>
    <target name="all_jar" depends="clean,compile_app,jar_app,clean_classes,compile_web,jar_web,copy_config,copy_lib,copy_web_resource"/>
    <target name="all_war" depends="clean,compile_app,jar_app,clean_classes,compile_web,jar_web,war_app"/>
    <target name="app_war" depends="clean,compile_app,jar_app,war_app"/>
</project>
application

该文件用于相关路径的配置

web.xml是用于项目启动时servlet，filter等相关配置。这里就不再讨论，只要是quickstart.application，命名要与项目名一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE application PUBLIC
  "-//Apache Software Foundation//Tapestry Specification 3.0//EN"
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd"[
  <!ENTITY public SYSTEM "public.application">
  <!ENTITY biz SYSTEM "biz.application">
  <!ENTITY frame  SYSTEM "frame.application">
]>
<application name="quickstart" engine-class="com.ailk.web.BaseEngine">
<description>quickstart</description>
    &public;
  	&biz;
  	&frame;
       ...
   <!--部门管理(new)-->
      <page name="examples.depart.departManager" specification-  path="/examples/depart/DepartManager.page" version="1212"/>
</application>

测试

这样项目就基本配置完毕啦，启动项目。输入http://localhost:8080/quickstart，登陆进去即可。我们来做一个测试：

如图，点击添加按钮，在弹出的框中输入相关信息 。点击提交，在表格中就会有显示：

就此该项目大功告成。

该项目的github地址： lvshen9-quickstart