MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 7

简介:

 

现在讨论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.      
  3.         <transition on="next" to="defineProject"> 
  4.           <evaluate expression="defineAppService.createAppInfo(requestParameters.appInfoJSONData)" 
  5.                    result="flowScope.appInfo"  /> 
  6.           <set name="flowScope.appInfoJSONData" value="requestParameters.appInfoJSONData" type="string"/> 
  7.           <set name="flowScope.hasAppInfoData" value="true" type="boolean"/> 
  8.         </transition> 
  9.         
  10. ...
  11.  
  12.     </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.                          
  25.                         appInfoJSONData.docInfos = docInfos; 
  26.                          
  27.                         var url = nextStep+'&_envprovisioningportlet_WAR_envprovisioningportlet_appInfoJSONData=' +Ext.encode(appInfoJSONData); 
  28.                         window.location.href = url; 
  29.                     } 
  30.                      
  31.                 } 
  32.             }, 

这里我们可以看到,当点击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,如需转载请自行联系原作者

目录
相关文章
|
28天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
存储 前端开发 数据可视化
在实际项目中,如何选择使用 Flux 架构或传统的 MVC 架构
在实际项目中选择使用Flux架构或传统MVC架构时,需考虑项目复杂度、团队熟悉度和性能需求。Flux适合大型、高并发应用,MVC则适用于中小型、逻辑简单的项目。
|
1月前
|
前端开发 JavaScript API
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第28天】JAMstack架构是一种现代Web开发方法,以其高性能、高安全性和易于维护的特点受到开发者青睐。本文深入探讨了JAMstack的核心概念、优势、工具链及其如何改变Web开发方式,包括静态网站生成、API驱动和预渲染等关键技术。
|
2月前
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
1月前
|
Java 持续交付 项目管理
使用Maven进行项目管理:提高Java Web开发的效率
Maven 是一款强大的项目管理和构建自动化工具,广泛应用于Java社区。它通过依赖管理、构建生命周期管理、插件机制和多模块项目支持等功能,简化了项目的构建过程,提高了开发效率。本文将介绍Maven的核心功能及其在Java Web开发中的应用。
65 0
|
2月前
|
前端开发 JavaScript 安全
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第7天】JAMstack是一种现代Web开发架构,代表JavaScript、APIs和Markup。本文介绍了JAMstack的核心概念、优势及实施步骤,包括内容设计、选择静态站点生成器、API集成、前端开发和部署托管。JAMstack提高了网站的性能、安全性和可扩展性,适用于营销网站、博客、电子商务和Web应用等多种场景。
|
2月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
2月前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
4月前
|
开发者 前端开发 Java
架构模式的诗与远方:如何在MVC的田野上,用Struts 2编织Web开发的新篇章
【8月更文挑战第31天】架构模式是软件开发的核心概念,MVC(Model-View-Controller)通过清晰的分层和职责分离,成为广泛采用的模式。随着业务需求的复杂化,Struts 2框架应运而生,继承MVC优点并引入更多功能。本文探讨从MVC到Struts 2的演进,强调架构模式的重要性。MVC将应用程序分为模型、视图和控制器三部分,提高模块化和可维护性。
50 0

推荐镜像

更多