liferay中的portlet之间的通信

詹钊
2023-12-01


https://web.liferay.com/en_US/community/wiki/-/wiki/Main/Inter-portlet+communication

1、相互间传递数据,通过事件机制实现。在通信的portlet配置文件中都做一个空间声明,并在portlet类中进行数据处理。

2、A Portlet 中的页面调用B portlet的方法,并将数据显示到B的页面。事例如下:

事例 

A  搜索portlet  B 分页显示Portlet ,实现将A搜索结果显示在B的页面。

条件:A、B同在一个页面。

过程:A页面的关键词通过 ajax传输到B的后台处理方法上并返回数据, 成功后的回调函数为B页面中JS方法。也就是A仅仅只将后台数据传给B,页面 显示的问题留给B操作,这样能避免页面中的含有命名空间的超链接出现A的命名空间名。

A的搜索页面

<liferay-portlet:resourceURL var="doExplore" portletName="XXX_WAR_XXXportlet_INSTANCE_9aBYMCJmkn8W" id="viewInit">      红色为B的Portlet名字,id为方法名
<liferay-portlet:param name="preConfigArraysString" value="dataConfig,showDataConfig,subConfig,showSubConfig,resourcesOrder,formConfig,procedureDeal"/>
</liferay-portlet:resourceURL>
<input type="text" id="<portlet:namespace/>keyWord" name="<portlet:namespace/>keyWord"  /> <button id="exploreIn" name="exploreIn">查询</button>
 <script type="text/javascript">


 (function(){
$(document).ready(function(){
 $("#exploreIn").click(function(){
       var keyWord= $("#<portlet:namespace/>keyWord").val();
       $.getJSON("<%=doExplore%>",{"_order_WAR_orderportlet_INSTANCE_9aBYMCJmkn8W_keyWord":keyWord},getPage );
   });
 });
})(jQuery);
   
</script>


B分页显示页面

<portlet:resourceURL id="viewInit" var="viewInit">
 <portlet:param name="preConfigArraysString" value="<%=preConfigArraysString %>"/></portlet:resourceURL>
 <portlet:resourceURL id="explore" var="explore"> </portlet:resourceURL>

<div class="items-con">
  <ul  id="<portlet:namespace/>shppingInfo" style="overflow:hidden;" ></ul>
</div>
<form id="frm">
            <input type="hidden" name="<portlet:namespace/>keyWord" id="keyWord" value=""/>
            <input type="hidden" name="<portlet:namespace/>pageSize" id="pageSize" value=""/>
            <input type="hidden" name="<portlet:namespace/>pageNumb" id="pageNumb" value=""/>
   <ul class="pagination" id="pageUl">  
 </form>
 
<script src="<%=path %>/js/bootstrap-paginator.js"></script> 
<script type="text/javascript">

(function($) {
   $(document).ready(function() {
      $.ajax({
               url: "<%=viewInit%>",
               dataType: " json",
               type: "Post",
               data: $("#frm").serialize(),
               success: getPage 
           });
   });
})(jQuery);


    function getPage(dataObj) {
        var otherInfo = dataObj.dataConfig.other;
        var dataInfo={};


        $.each(otherInfo,function(i,filed){  
                if("pageNumb"=== i){
                    dataInfo["pageNumb"] = otherInfo[i];
                    
                }else if("totalCount"=== i){
                    dataInfo["totalCount"] = otherInfo[i];
                    
                }else if("pageSize"=== i){
                    dataInfo["pageSize"] = otherInfo[i];


                }else if("keyWord"=== i){
                    dataInfo["keyWord"] = otherInfo[i];
                    $("#frm #keyWord").val(dataInfo.keyWord);
                }         
           });

        if(dataInfo.keyWord == "" || null == dataInfo.keyWord){
       $("#frm #keyWord").val("");
        }
         $("#pageSize").val(dataInfo.pageSize);
         $("#<portlet:namespace/>shppingInfo").empty().append(dealWithMess(dataObj));
    /* $pageInfo.text("第 "+ dataInfo.pageNumb +" 页/共 "+ dataInfo.totalCount +" 页 ");
        $pageNo.val(dataInfo.pageNumb);
        $pageSize.val(dataInfo.pageSize); */
        var options = {
                bootstrapMajorVersion: 3, //版本
                currentPage: dataInfo.pageNumb, //当前页数
                totalPages: dataInfo.totalCount, //总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },//点击事件,用于通过Ajax来刷新整个显示数据 
               onPageClicked: function (event, originalEvent, type, page) {
                  
                   $("#pageNumb").val(page);
                   $.ajax({
                       url: "<%=viewInit%>",
                       type: "Post",
                       dataType: " json",
                       data: $("#frm").serialize(),
                       success: function (data1) {
                           if (data1 != null) {
                               $("#<portlet:namespace/>shppingInfo").empty().append(dealWithMess(data1));
                            } 
                        }
                   });
                  }
           };
           $('#pageUl').bootstrapPaginator(options);
    }
    
    
    function dealWithMess(data){
        
         var dataconfig=data.dataConfig.datum;
         var showDataConfig=data.showDataConfig;
         var htmlInner="";
    
           $.each(dataconfig,function(i,filed){
                   var name="";
                   var image="";
                   var id="";
                   var address="";
                   var elseview="";
                   var dept ="";
                   var specification =new Array();;
                   var supplier =new Array();
                   var pageNumb;
                   var totalCount;
                   var pageSize;
                   
                    for(var dcon in filed){
                       if(showDataConfig!=null){
                           var type=showDataConfig[dcon.toLowerCase()].type;
                           if(type=="name"){
                               name=filed[dcon];
                           }
                           if(type=="image"){
                               image=filed[dcon];
                           }
                           if(type=="id"){
                               id=filed[dcon];
                           }
                           if(type=="address"){
                               address=filed[dcon];
                           }
                           if(type=="dept"){
                               dept=filed[dcon];
                           }
                           if(type=="specification"){
                               specification.push(showDataConfig[dcon.toLowerCase()].value);
                               specification.push(filed[dcon]);
                           }
                           if(type=="supplier"){
                               supplier.push(showDataConfig[dcon.toLowerCase()].value);
                               supplier.push(filed[dcon]);
                           }
                       }
                    
                    }
                       
                    var portletURL="<liferay-portlet:renderURL  windowState='maximized'><portlet:param name='orderid' value='idforOrder'/><portlet:param name='mvcPath' value='viewInfo'/></liferay-portlet:renderURL>";
                    portletURL=portletURL.replace("idforOrder",id);
                   <%--  portletURL.setWindowState("<%=LiferayWindowState.MAXIMIZED.toString()%>"); --%>
                   htmlInner+= "<li class=\"list-detail\"><div   class=\"img list-detail-left\"><a href=\""+portletURL+"\"><img src=\"<%=path%>/images/11.jpg\"></a></div>";
                   htmlInner+= "<div class=\"info list-detail-right\"><span class=\"name\" >"+name+"</span>"
                   htmlInner+= "<span class=\"sort\"><span>"+supplier.shift()+" :"+supplier.shift()+"</span> "+specification.shift()+":"+specification.shift()+ id +"</span></div></li>";
               
            });
        return htmlInner;
    }


</script>



这是多Portlet页面间通信的最简单方式,链接为:1、https://web.liferay.com/en_US/community/wiki/-/wiki/Main/Client-side+Inter-Portlet+Communication

2、https://web.liferay.com/en_US/community/wiki/-/wiki/Main/Client-side+Inter-Portlet-Communication+%28IPC%29%20using+Java+Script     

引用如下:
Client-side Inter-Portlet-Communication (IPC) using Java Script
  Details   Print
Tags: development custom javascript inter-portlet communication client-side ipc 6.1.0
Preface - Even if there is already another article about IPC using Java Script, I add another one, because the mentioned article is very long, uses not useful examples, and contains some errors that cost me several hours ^^.


There are two ways IPC can be realized: server side and client side. As stated in the title, this article is about the client side implementation using Java Script. To do this, Liferay's native Java Script API provides a very useful event bus system: one can send an event (a tuple consisting of an event name and parameters) into the bus and on another place one can react to this event. Since this bus system is portlet cross border, one can react on an event within the same portlet or in any other portlet. There are two static methods one can use: fire to fire an event into the bus combined with optional parameters, and on to react on an event in the bus using the optional parameters. The parameters are interchanged following the key/value format.


Following the example code




// IN PORTLET 1
// Send the event 'siteWideUniqueEventName' to the bus
Liferay.fire(
   "siteWideUniqueEventName",
   {
      paramKey1 : "paramValue1",
      paramKey2 : 42,
   }
);


// IN PORTLET 2
// In portlet 2, react on the event using the
// first parameter
Liferay.on(
   "siteWideUniqueEventName",
   function(data) {
alert("I'm portlet 2 and the value is" + data.paramKey1);
   }
);


// IN PORTLET 3
// In portlet 3, react on the event using the
// second parameter
Liferay.on(
   "siteWideUniqueEventName",
   function(data) {
alert("I'm portlet 3 and do some calc: " + (2 * data.paramKey2));
   }
);


 类似资料: