现在讨论flow页面上的动作如何关联到flow定义文件中的transition.

因为我们这个应用是liferay portlet 应用，和绝大多数portlet一样，页面上的action，一般都会使用一个portlet action url 来标识。

比如，我们想要在defineApp 这个view-state，当点击"Next" 按钮时，要触发到一个flow 的transition：

首先，我们定义一个portlet action url:

1. <portlet:actionURL var="nextStep">
2. <portlet:param name="execution" value="${flowExecutionKey}" />
3. <portlet:param name="_eventId" value="next" />
4. </portlet:actionURL>

这里可以看到，我们要用若干个参数来定义这个actionURL,因为要给spring web flow使用，所以有一个必不可少的参数是execution,它的值永远是 ${flowExecutionKey} ,我们并不需要具体研究这个值是干嘛的，它是用spring web flow框架提供的，就是表明获取flow执行的key，因为这个页面属于某个特定的flow的view-state，所以这个值是唯一的，并且和flow有关。

第二个参数_eventId也是必不可少的，它用于表示flow执行的事件Id,这个事件Id会被对应到状态的<transition>的on属性，表明基于某个事件来进行transition.

当然了，除去execution 和_eventId之外，还可以有任意多个普通参数，这些普通参数都用<portlet:param>的名字-值对来表示，也作为transition的参数，这些参数可选的，和业务需求有关。

然后，我们就去看flow定义文件，因为当前页面是defineApp.jsp，所以我们找到了defineApp这个view-state，看它的transition:

1. <view-state id="defineApp" >
2. <transition on="next" to="defineProject">
3. <evaluate expression="defineAppService.createAppInfo(requestParameters.appInfoJSONData)"
4. result="flowScope.appInfo"  />
5. <set name="flowScope.appInfoJSONData" value="requestParameters.appInfoJSONData" type="string"/>
6. <set name="flowScope.hasAppInfoData" value="true" type="boolean"/>
7. </transition>
8. ...
9. </view-state>

从这里可以看出，我们有个元素叫<transition>并且属性为on,这个on 刚好匹配这个页面上actionURL传递过来的_eventId, 而to 则表示了页面跳转到的目标页面，所以这里可以看出，当触发这个action URL时候，flow会从当前的defineApp.jsp跳转到defineProject.jsp

哦，不，等下，跳转不是白跳的，肯定会有些数据的交互和保存，所以这里可以看到2个子元素，一个是<evaluate>，这个元素表示执行某个方法，因为我们已经初始化了defineAppService这个bean，所以它会调用相应的方法，并且吧结果存到流的flowScope域上，同时，它还存放了其他2个变量到flowScope上，于是这些变量在flow跳转的任何地方都是可用的。

最后，我们就要吧这个页面上的portlet actionURL绑定到页面元素上了，因为这个action的触发总是用户与页面的交互事件来触发的：

我们的前端用的是ext-js,所以，我们先定义了一个ext-js的button，然后渲染到defineApp.jsp上：

1. items:[
2. {
3. xtype:'button',
4. name:'btnCancel',
5. margin:'0 10 0 0',
6. width:100,
7. text:'Cancel'
8. },{ 
9.                       xtype:'button', 
10.                       name:'btnNextInDefineApp', 
11.                       width:100, 
12.                       text:'Next' 
13.                   } 
14. ]

在控制器里面我们定义了这个事件触发：

1. this.control({
2. 'button[name=btnNextInDefineApp]':{
3. click:function(btn){
4. var form = btn.up('[name=sbumitform]');
5. if(form.getForm().isValid()){
6. var paraObj = form.getValues();
7. var appInfoJSONData = {};
8. for(var index in paraObj){
9. if(index !='title' && index !='url'){
10. appInfoJSONData[index] = paraObj[index];
11. }
12. }
13. var titleArr = paraObj.title;
14. var urlArr =paraObj.url;
15. var docInfos = [];
16. if(Ext.isArray(titleArr)&&Ext.isArray(urlArr)){
17. Ext.each(titleArr,function(val,i){
18. var _doc = {title:val,url:urlArr[i]};
19. docInfos.push(_doc);
20. });
21. }else{
22. docInfos.push({title:titleArr,url:urlArr});
23. }
24. appInfoJSONData.docInfos = docInfos;
25. var url = nextStep+'&_envprovisioningportlet_WAR_envprovisioningportlet_appInfoJSONData=' +Ext.encode(appInfoJSONData);
26. window.location.href = url;
27. }
28. }
29. },

这里我们可以看到，当点击btnNextInDefineApp这个按钮时候，它会提交所有的数据到url为var url = nextStep+'&_envprovisioningportlet_WAR_envprovisioningportlet_appInfoJSONData=' +Ext.encode(appInfoJSONData);

而这个url的起始值为变量名nextStep ,它刚好匹配我们一开始的portlet action url 我们给它分配的var的名字:

1. <portlet:actionURL var="nextStep">
2. ...
3. </portlet:actionURL>

所以现在当用户点击按钮，我们就携带了数据，然后流就可以处理相应的数据了。

我们携带的数据的名字叫appInfoJSONData ,见拼接的url,所以，在flow里面就可以从requestParameters里面获取相应的值并且进行业务计算了（见我加粗部分）：

1. <evaluate expression="defineAppService.createAppInfo(requestParameters.appInfoJSONData)"
2. result="flowScope.appInfo"  />

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/1138922，如需转载请自行联系原作者