下次自动登录
现在的位置:
& 综合 & 正文
ExtJS4.1+SSH+JBPM实战
大家好，本套视频讲解是SSH2+JBPM+ExtJs4实战,JBPM是重点讲解。实战与demo的区别我不再多说，在以前工作中走过一些弯路，一些实现都是靠自己想象或者听其他人应该怎么实现才是项目中真正需要的。JBPM书上是讲解以工作流为核心去开发应用，那并不是我们想要的，我们想要的是在我们的web项目把工作流技术引入进来。使工作流依托于应用来实现。如何开发我们中国式的工作流。使用整合实战开发。SSH2架构方面：
rabc人员管理、
Action处理(所用业务全部通用的Action的增删改查处理)
树形讲解(一棵转出与ExtJs交互的树，树形的效率问题) 不采用自关联(慢)
多MVC动态加载的机制实现
业务数据通用的增删改查
JBPM方面：
部署流程管理
流程挂接管理(配置此流程需要的特性，委托管理和自定义事件注入)
业务流程执行：流程的启动、任务的提交、回退、撤销、取回、处理任务等操作、
实用需求实现：执行权限、工作流留痕、事务提醒
只需一套实现，你的业务只要在挂接中配置则可以具有工作流功能
总之一句：实战项目中怎么实现，我们就怎么实现。
适用的人群： 技术牛的人可以熟练掌握BPM工作流的重点，架构可以取其精华。
技术一般的人可以玩转SSH2和JBPM工作等，实战都是经验，是基本通用原理。
技术很普通的人：可以依托于这套框架来做业务操作。可以对SSH2和JBPM有深入了解。多看看，学会这些，没有问题。
没有工作的人：学会这一套东西，我觉得，你会找到一个好工作。学校的SSH2学习，实战项目只取了一些基本的特性。JBPM工作流更是实用且重点的东西。很多人都是技术短板，所以学会它对你帮助很大。
如果一个公司架构没有流程管理模块存在，那只能说不完整，大家不要走入使用Bean的属性，利用属性做状态来实现，当业务复杂会进入误区。有一套流程管理机制，那么JBPM是你的首选。
为了让你的上司重视你，为了弥补自己的技术短板、为了找到一个好工作、为了让你的架构更全面，为了快速满足用户需求。
a)SSH 架构分析
i.Action(BaseAction提供对前台很大的支持)
ii.Service
b)JBPM 架构分析
i.任何业务使用通用的工作流挂接
ii.前台管理工作流的部署挂接
iii.启动、送交、回退、取回、撤销、领取任务操作。
c)ExtJs4.1 架构分析
i.采用多MVC的模式
ii.通用的增删改查工具类
3.JBPM功能简介
a)部署管理
b)流程挂接
c)委托管理
d)自定义事件注入
e)权限处理
f)任务处理
g)事务提醒
h)历史展示
4.视频连接和地址
技术狂人论坛：
链接：ExtJs4.1+Jbpm4+SSH2+Oracle10g视频教程
版权所有：PCAT
&&&&推荐文章:
【上篇】【下篇】jquery-easyui实现页面布局和增删改查操作（SSH2框架支持） - 上善若水任方圆 - ITeye技术网站
博客分类：
前几天心血来潮用jquery-easyui+spring、struts2、hibernate实现了一个系统的一小部分功能，下面给大家分享一下。
首先看运行效果：
【图一：登录页】
【图二：页面布局】
【图三：用户编辑层】
【图四：确认弹出框】
easyui插件简介在这就不赘述了，大家可以在iteye上找到很多该插件的相关消息。
如果页面需要使用easyui插件，需要引进一下js和css（使用的时候需要注意easyui版本依赖的jquery.js版本要对应）：
&script type="text/javascript" src="&%=root%&/Web/common/js/jquery-1.4.4.min.js"&&/script&
&link rel="stylesheet" type="text/css" href="&%=root%&/Web/common/js/easyui/themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="&%=root%&/Web/common/js/easyui/themes/icon.css"&
&script type="text/javascript" src="&%=root%&/Web/common/js/easyui/js/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="&%=root%&/Web/common/js/easyui/js/easyui-lang-zh_CN.js"&&/script&
为了让一个主页实现上下左右中的布局方式显示，这里就需要用到easyui一个叫layout的东西，通常有多种方式可以实现布局。
①使用js创建layout
首先定义一个div，设置region，title等属性（注html是没有region属性的，这是easyui专属属性）
&div id="cc" style="width:600height:400"&
&div region="north" title="North Title" split="true" style="height:100"&&/div&
&div region="south" title="South Title" split="true" style="height:100"&&/div&
&div region="east" iconCls="icon-reload" title="East" split="true" style="width:100"&&/div&
&div region="west" split="true" title="West" style="width:100"&&/div&
&div region="center" title="center title" style="padding:5background:#"&&/div&
然后在js中指定id为cc的div为layout：
$('#cc').layout(options);
简单介绍几个layout属性：
指定布局的标题名称
指定布局位置，分：东、西、南、北、中
是否显示边界
是否显示分界线从而用户可以拖动改变其大小
指定布局的图标样式
指定该布局远程调用的html路径
②让整个body使用easyui的cssclass：class="easyui-layout"自动创建layout
这也是我使用的方式，看下面代码：
&body class="easyui-layout"&
&!-- 正上方panel --&
&div region="north" style="height:100padding:10" href="&%=root%&/Web/common/page/top.html"&&/div&
&!-- 正左边panel --&
&div region="west" title="菜单栏" split="true" style="width:280padding1:1overflow:"&
&div class="easyui-accordion" fit="true" border="false"&
&!-- selected --&
&div title="用户权限管理" selected="true"&
&li&&a href="javascript:addTab('tabId_loginInfo','用户管理','&%=root%&/ospm/loginInfo/goLoginInfoMain.jhtml');"&用户管理&/a&&/li&
&li&&a href="javascript:addTab('tabId_privilege','权限管理','&%=root%&/ospm/loginInfo/goPrivilegeMain.jhtml');"&权限管理&/a&&/li&
&!-- 正中间panel --&
&div region="center" title="功能区" &
&div class="easyui-tabs" id="centerTab" fit="true" border="false"&
&div title="欢迎页" style="padding:20overflow:"&
&div style="margin-top:20"&
&h3&你好，欢迎来到权限管理系统&/h3&
&!-- 正下方panel --&
&div region="south" style="height:50" align="center"&
作者：白糖&br/&
运行效果如【图二：页面布局】
创建选项卡
【图二：页面布局】上面标记了在菜单栏点击“用户管理”链接即可在功能区创建一个叫“用户管理”的选项卡并加载相应数据。注意：用户管理页面是另一个jsp，需要远程调用。
最初我使用tabs的href属性来远程调用用户管理jsp，发现页面会有js冲突，导致用户管理页面的添加、编辑等各种功能失效，我猜想可能是js冲突，因为布局页引用了easyui，而用户管理jsp也引用了同样的easyui。
后来看了下项目经理ext的布局代码，原来在点击链接的时候会创建一个tabs，只是tabs的内容是一个iframe分隔：
* 创建新选项卡
* @param tabId
* @param title
选项卡标题
* @param url
选项卡远程调用路径
function addTab(tabId,title,url){
//如果当前id的tab不存在则创建一个tab
if($("#"+tabId).html()==null){
var name = 'iframe_'+tabId;
$('#centerTab').tabs('add',{
title: title,
closable:true,
cache : false,
//注：使用iframe即可防止同一个页面出现js和css冲突的问题
content : '&iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" &&/iframe&'
不过群里也有些大神提醒：如果大量使用iframe会使页面性能降低，所以使用iframe分隔tabs只适合小型项目使用。
datagrid表格
easyui datagrid是争议最大的一个功能插件，很多人说它不开源，提供的api不全面，标题列内容可能不对齐，操作繁杂等等。其实个人觉得这个table的功能已经相当不错了，如果只需要做基本的显示则只需配很少的代码。
下面简单介绍下datagrid的使用：
①首先肯定需要有一个table标签，给它定义一个id，在js中通过id.datagrid方法即可创建表格
&table id="tt"&&/table&
$('#tt').datagrid(options);
②创建表格的列名有两种方式：第一种是直接在table标签中定义，第二种是在js中定义：
我使用的是第一种方式：
&!-- 表格 --&
id="loginInfoTable"
title="用户信息一览"
border="0"
cellspacing="0"
cellpadding="0"
iconCls="icon-edit"
width="98%"
idField="loginId"
pagination="true"
remoteSort="false"
singleSelect="false"
showFooter="false"
striped="true"
url="&%=root%&/ospm/loginInfo/doLoginInfoSearch.jhtml"&
&tr align="center"&
&th field="ck" width="20" checkbox="true" width="20"&&/th&
&th field="loginCode"
width="200"&用户名&/th&
&th field="statuValue"
width="100"&状态&/th&
&th field="opt" formatter='optFormater' width="150"&操作&/th&
第二种方式如下：
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
③向后台请求数据
datagrid有一个属性叫url，在进入页面后，它会通过ajax方式向后台发送请求，后台封装相应数据（JSON格式）再返回给前台即可显示。注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结过，rows表示显示在table中的数据集合。
* 封装Json数据
long total = 0; // 符合查询的总条数
List&LoginInfoTableDto& lstTable = // 查询结果
total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
lstTable = (List&LoginInfoTableDto&) mapLoginInfo
.get(Constant4Ospm.SEARCH_RESULT);
//注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误
lstTable = new ArrayList&LoginInfoTableDto&();
JSONObject datas = new JSONObject();
// 设置总共有多少条记录
datas.put(Constant4Ospm.TOTAL, total);
// 设置当前页的数据
datas.put(Constant4Ospm.PAGE_SIZE, lstTable);
④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢？其实很简单：后台rows中包含了名叫LoginInfoTableDto的javabean-json集合，datagrid的field和idField对应LoginInfoTableDto中的一个属性（大体上是这样，当然field也可以不对应javabean的属性，你可以进行一些转换）。
⑤toolbar工具栏
【图二：页面布局】能够看到datagrid有“添加新用户”、“批量删除”等工具栏，这些工具栏的实现方式也很简单：
$('#loginInfoTable').datagrid({
toolbar:[{//正上方工具栏
text:'添加新用户',
iconCls:'icon-add',
handler:function(){
//点击工具栏运行的js方法
openDialog_add();
text:'批量删除',
iconCls:'icon-cancel',
handler:function(){
batch('delete');
...............
当然easyui datagrid还有很多其它的功能，网上有很多大神已经详细介绍过，这里就不赘述了。
对话框的使用也很简单：你只需要定义一个带id的div，在div中填入你需要在对话框中显示的内容，然后调用一下方法即可变成easyui的dialog：
&div id="dd" title="My Dialog" style="width:400height:200"&
Dialog Content.
$('#dd').dialog(options);
前面【图三：用户编辑层】就是一个dialog，大家看下代码：
&!-- 编辑 --&
&div id="loginInfoEdit" icon="icon-save"
style="padding: 5 width: 500 height: 300"&
&h5 id="loginInfoEdit_message" style="color:"&&/h5&
&div class="ToolTip_Form" id="table_loginInfoEdit" onkeydown="if(event.keyCode==13){loginInfoEdit();}"&
&input type="hidden" id="loginInfoEdit_loginId"&&/input&
&label&用户名：&/label&
&label id="loginInfoEdit_loginCode"&&/label&
&label&密码：&/label&
&input type="password" class="easyui-validatebox" id="loginInfoEdit_password" maxlength="20" required="true"&&/input&
&label&重复密码：&/label&
&input type="password" class="easyui-validatebox" id="loginInfoEdit_repassword" maxlength="20" required="true"&&/input&
&a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="loginInfoEdit();"&提交&/a&
//设置弹出框的属性
function setDialog_edit(){
$('#loginInfoEdit').dialog({
title : '用户编辑',
modal: true,
//模式窗口：窗口背景不可操作
collapsible : true,
//可折叠，点击窗口右上角折叠图标将内容折叠起来
resizable : true
//可拖动边框大小
//打开对话框
function openDialog_edit(loginId,loginCode){
loginInfoEditReset(loginId,loginCode);
$('#loginInfoEdit').dialog('open');
//关闭对话框
function closeDialog_edit(){
$('#loginInfoEdit').dialog('close');
messager消息框
【图四：确认弹出框】就是一个消息框，easyui它可以模仿html的alert()、confirm()等提示框，而且画面更美观。
图四批量禁用的代码如下：
//禁用操作
$.messager.confirm('禁用提示', '你确定禁用下列用户吗?&br/&'+cods.join(','), function(r){
var url = root+'/ospm/loginInfo/doLoginInfoInvalid.jhtml?loginId='+loginId;
changeStatus(url);
很抱歉，只完成了用户管理一个模块的功能。
附件带项目源码，希望对大家有所帮助。(源码一包含项目源码和数据库，源码二包含项目jar包)
关键jar版本：hibernate3.3、spring2.6、struts2.1
数据库：mysql5.1
数据库连接池：bonecp 0.7
项目类型：eclipse - dynamic web project
登录帐号：admin
密码：admin
部署方式：
①下载“源码一”和“源码二”，然后分别解压 ②源码一包含项目源码和部分jar包以及*.sql；源码二包含其余jar包，直接放入OSPM\WebRoot\WEB-INF\lib目录下即可 ③使用eclipse打开，import导入项目 ④修改OSPM/config/mysql-jdbc.properties数据库连接帐号密码 ⑤使用eclipse自带插件：servers部署启动项目 ⑥访问http://localhost:8080/OSPM即可 需要注意的是，这个项目是eclipse下创建的dynamic web project不是tomcat项目 另一种方案： 完成上面①~④步骤以后把项目export成war包，直接放到tomcat的webapps下然后启动
下载次数: 19505
下载次数: 14801
浏览 102917
论坛回复 /
(47 / 64154)
我哭了，改了又改后，终于看见登陆页面了，
admin，admin后，点击那个确定连接。不动了。。。#(IE，火狐，chrome都试过)
是不是我下的版本太老了，哥们，给发一个能用的呗。
我刚才下载下来试了下没问题呀：
①下载“源码一”和“源码二”，然后分别解压
②源码一包含项目源码和部分jar包以及*.sql；源码二包含其余jar包，直接放入OSPM\WebRoot\WEB-INF\lib目录下即可
③使用eclipse打开，import导入项目
④修改OSPM/config/mysql-jdbc.properties数据库连接帐号密码
⑤使用eclipse自带插件：servers部署启动项目
⑥访问http://localhost:8080/OSPM即可
需要注意的是，这个项目是eclipse下创建的dynamic web project不是tomcat项目
另一种方案：
完成上面①~④步骤以后把项目export成war包，直接放到tomcat的webapps下然后启动
终于让我找到你了，我下了你的源码，
我还没有看见UI的样子呢，不过说实话，你的SSH用的。。。逊毙了。
我调了很久，你的项目结构有点问题，包弄的乱七八糟。
web.xml的
&param-value&
classpath:com/bless/common/spring/springApplicationContext.xml,
classpath:com/bless/*/spring/spring-*-*.xml,
&/param-value&应该是
&param-value&
classpath*:com/bless/common/spring/springApplicationContext.xml,
classpath*:com/bless/*/spring/spring-*-*.xml
&/param-value&否则提示XML找不到
还有，你的index.jsp
&%
String root = request.getContextPath();
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="refresh"
content="0;URL=&%=root%&/common/toLoginPage.jhtml"
content="text/ charset=utf-8"&
&/head&
一旦带有项目名。。。不知道我还要改多少。。。
不往下看了，直接看看你的UI代码吧，效果是看不见了，希望你的UI不会让我失望。
多谢大神指点，不过我有点疑问哈：
①为什么会提示找不到XMl呢，我在使用过程中貌似没遇到
②index.jsp为什么要带项目名？是不是指URL修改成：URL=/项目名/common/toLoginPage.jhtml更好？我想这种方式不太正确吧。
浏览: 875896 次
来自: 成都
我也碰到了，蛋疼的问题呀。。总算解决了
[colo r=yellow][/col[size=xx-la ...
道理谁都知道，就是实现呢
感谢您的分享JsonExt 使用Ext+SSH开发的一个Ext入门案例，是 对User进行增删改查的典型例子 Java Develop 238万源代码下载-
&文件名称: JsonExt
& & & & &&]
&&所属分类:
&&开发工具: Java
&&文件大小: 4964 KB
&&上传时间:
&&下载次数: 22
&&提 供 者:
&详细说明：使用Ext+SSH开发的一个Ext入门案例，是一个对User进行增删改查的典型例子-Use Ext+ SSH development of an entry Ext case, is a User to conduct a typical example of additions and deletions to change search
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&JsonExt\.classpath&&.......\.myhibernatedata&&.......\.mymetadata&&.......\.project&&.......\WebContent\index.jsp&&.......\..........\student.jsp&&.......\..........\WEB-INF\web.xml&&.......\..........\.......\lib\commons-beanutils-1.7.0.jar&&.......\..........\.......\...\commons-collections-3.2.jar&&.......\..........\.......\...\commons-lang-2.0.jar&&.......\..........\.......\...\commons-logging-1.0.4.jar&&.......\..........\.......\...\ezmorph-1.0.4.jar&&.......\..........\.......\...\freemarker-2.3.8.jar&&.......\..........\.......\...\json-lib-2.2-jdk13.jar&&.......\..........\.......\...\ognl-2.6.11.jar&&.......\..........\.......\...\struts2-core-2.0.11.jar&&.......\..........\.......\...\xwork-2.0.4.jar&&.......\..........\.......\classes\struts.xml&&.......\..........\.......\.......\student.xml&&.......\..........\.......\.......\com\jsonext\web\action\BaseAction.class&&.......\..........\.......\.......\...\.......\util\ListRange.class&&.......\..........\.......\.......\...\.......\stu\web\action\StudentAction.class&&.......\..........\.......\.......\...\.......\...\entity\Student.class&&.......\..........\.......\.......\...\.......\...\dao\StudentDao.class&&.......\..........\.......\.......\...\easymap\hibernate\DBSessionFactory.class&&.......\..........\.......\.......\...\.......\.........\employee.hbm.xml&&.......\..........\.......\.......\...\.......\.........\hibernate.cfg.xml&&.......\..........\.......\.......\...\.......\.........\hibernate.properties&&.......\..........\.......\.......\...\.......\.........\HibernateTest.class&&.......\..........\META-INF\MANIFEST.MF&&.......\..........\js\student.js&&.......\..........\firebug\.DS_Store&&.......\..........\.......\errorIcon.png&&.......\..........\.......\firebug.css&&.......\..........\.......\firebug.html&&.......\..........\.......\firebug.js&&.......\..........\.......\firebugx.js&&.......\..........\.......\infoIcon.png&&.......\..........\.......\warningIcon.png&&.......\..........\ext2\license.txt&&.......\..........\....\resources.jsb&&.......\..........\....\.aw-images\shadow.psd&&.......\..........\....\..........\CVS\Entries&&.......\..........\....\..........\...\Repository&&.......\..........\....\..........\...\Root&&.......\..........\....\legacy\basic-dialog.css&&.......\..........\....\......\grid.css&&.......\..........\....\......\CVS\Entries&&.......\..........\....\......\...\Repository&&.......\..........\....\......\...\Root&&.......\..........\....\js\ext-all-debug.js&&.......\..........\....\..\ext-all.js&&.......\..........\....\..\ext-base.js&&.......\..........\....\..\ext-core-debug.js&&.......\..........\....\..\ext-core.js&&.......\..........\....\..\ext-jquery-adapter.js&&.......\..........\....\..\ext-yui-adapter.js&&.......\..........\....\..\GroupSummary.js&&.......\..........\....\..\yui-utilities.js&&.......\..........\....\..\CVS\Entries&&.......\..........\....\..\...\Repository&&.......\..........\....\..\...\Root&&.......\..........\....\images\vista\gradient-bg.gif&&.......\..........\....\......\.....\s.gif&&.......\..........\....\......\.....\toolbar\gray-bg.gif&&.......\..........\....\......\.....\.......\tb-btn-sprite.gif&&.......\..........\....\......\.....\.......\CVS\Entries&&.......\..........\....\......\.....\.......\...\Repository&&.......\..........\....\......\.....\.......\...\Root&&.......\..........\....\......\.....\.abs\tab-btm-inactive-left-bg.gif&&.......\..........\....\......\.....\....\tab-btm-inactive-right-bg.gif&&.......\..........\....\......\.....\....\tab-btm-left-bg.gif&&.......\..........\....\......\.....\....\tab-btm-right-bg.gif&&.......\..........\....\......\.....\....\tab-sprite.gif&&.......\..........\....\......\.....\....\CVS\Entries&&.......\..........\....\......\.....\....\...\Repository&&.......\..........\....\......\.....\....\...\Root&&.......\..........\....\......\.....\sizer\e-handle-dark.gif&&.......\..........\....\......\.....\.....\e-handle.gif&&.......\..........\....\......\.....\.....\ne-handle-dark.gif&&.......\..........\....\......\.....\.....\ne-handle.gif&&.......\..........\....\......\.....\.....\nw-handle-dark.gif&&.......\..........\....\......\.....\.....\nw-handle.gif&&.......\..........\....\......\.....\.....\s-handle-dark.gif&&.......\..........\....\......\.....\.....\s-handle.gif&&.......\..........\....\......\.....\.....\se-handle-dark.gif&&.......\..........\....\......\.....\.....\se-handle.gif&&.......\..........\....\......\.....\.....\sw-handle-dark.gif&&.......\..........\....\......\.....\.....\sw-handle.gif&&.......\..........\....\......\.....\.....\CVS\Entries&&.......\..........\....\......\.....\.....\...\Repository&&.......\..........\....\......\.....\.....\...\Root&&.......\..........\....\......\.....\qtip\bg.gif&&.......\..........\....\......\.....\....\tip-sprite.gif&&.......\..........\....\......\.....\....\CVS\Entries&&.......\..........\....\......\.....\....\...\Repository&&.......\..........\....\......\.....\....\...\Root&&.......\..........\....\......\.....\layout\collapse.gif&&.......\..........\....\......\.....\......\expand.gif&&.......\..........\....\......\.....\......\gradient-bg.gif
&近期下载过的用户:
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - 转的，ext，关于简单的书籍管理系统关于简单的书籍管理系统，关于简单的书籍管理系统
&[] - extJs结合ssh的酒店管理系统，采用mysql数据库，比较可以。
&[] - ext3.0 最新的ext源代码！包含大量的客户端实例
&[] - sSH整合实例 简单的实现登录，注册功能
&[] - ssh框架做的网站登入系统，有图片，可用作酒店管理系统模式
&[] - 一个简单的例子，使用sSH进行增删改查，可以进一步了解SSH集成
&[] - 用ssh作的一个小例子，参考大全，开发资料，经典代码，很经典，内容丰富，挺好的！
&[] - ext+ssh实例，一套完整的ext+ssh开发实例，简单易懂，相信对你学习ext会有很大帮助
&[] - 这是一个简单的ext+增删改查的例子，适合新手
&[] - 使用extJs做的表单，后台处理是用的SpringMVC，实现了增删改查