Primefaces中通过RemoteCommand实现JS触发调用Java后台方法

1.  p:remoteCommand

RemoteCommand provides a simple way to execute backing bean methods with javascript.

示例：

    <p:remoteCommand name="setData" action="#{dashBoardBean.updateWidgets}"/>

    <p:remoteCommand name="clickCount" actionListener="#{mainQueryManagerBean.clickCount}"/>

2. pe:remoteCommand

RemoteCommand enables executing backing bean methods and do partial update triggered by custom client side script.

个人示例：

function remoteDelN(id){ //delNode //DO NOTHING } <pe:remoteCommand name="remoteDelN" actionListener="#{processTempDefinitionBean.delElement}"> <pe:assignableParam name="id" assignTo="#{processTempDefinitionBean.element.id}" /> </pe:remoteCommand>说明：

(1) name: js函数名。

(2) 调用Java后台方法时使用actionListener, 不能使用action, 因为action不能触发Java方法。

(3) js需要向后台传递参数时，使用pe:assignableParam.

官方示例：

Primefaces Extensions Showcase RemoteCommand:

https://www.primefaces.org/showcase-ext/views/remoteCommand.jsf

2.1.Basic Usage

<p:commandButton value="Load" type="button" οnclick="lazyload()" style="margin-bottom: 10px;"/> <p:outputPanel id="lazypanel" layout="block"> <h:outputText value="This part of page is lazily loaded on demand using a RemoteCommand" rendered="#{requestScope.shouldRender}" /> </p:outputPanel> <pe:remoteCommand name="lazyload" update="lazypanel"> <f:setPropertyActionListener value="#{true}" target="#{requestScope.shouldRender}" /> </pe:remoteCommand>

2.2.Using AssignableParam

<p:growl id="growl" showDetail="true" /> <pe:remoteCommand id="applyDataCommand" name="applyData" process="@this" update="subject date circle growl" actionListener="#{remoteCommandController.parametersAssigned}"> <pe:assignableParam name="subject" assignTo="#{remoteCommandController.subject}"/> <pe:assignableParam name="date" assignTo="#{remoteCommandController.date}"> <f:convertDateTime type="both" dateStyle="short" locale="en"/> </pe:assignableParam> <pe:assignableParam name="circle" assignTo="#{remoteCommandController.circle}"> <pe:convertJson /> </pe:assignableParam> </pe:remoteCommand> <script type="text/javascript"> circle = { radius: 50, backgroundColor: "#FF0000", borderColor: "#DDDDDD", scaleFactor: 1.2 }; circle2 = { radius: 32, backgroundColor: "#FF0320", borderColor: "#DDFFFD", scaleFactor: 1.6 }; </script> <h:outputLabel for="subject" value="Subject: " /> <h:outputText id="subject" value="#{remoteCommandController.subject}" /> <br/> <h:outputLabel for="date" value="Date: " /> <h:outputText id="date" value="#{remoteCommandController.date}" /> <br/> <h:outputLabel for="circle" value="Circle: " /> <h:outputText id="circle" value="#{remoteCommandController.circle.radius} - #{remoteCommandController.circle.backgroundColor} - #{remoteCommandController.circle.borderColor} - #{remoteCommandController.circle.scaleFactor}" /> <br/><br/> <p:commandButton value="Apply Data" type="button" οnclick="applyData('hello world', '5/14/07 12:55:42 PM', JSON.stringify(circle))" /> <p:commandButton value="Apply Second Data" type="button" οnclick="applyData('hello user', '7/11/01 11:55:42 PM', JSON.stringify(circle2))" /> 2.3.Using MethodParam <p:growl id="growl" showDetail="true" /> <pe:remoteCommand id="applyDataCommand" name="applyData" process="@this" update="growl" actionListener="#{remoteCommandController.printMethodParams}"> <pe:methodSignature parameters="java.lang.String, java.util.Date, org.primefaces.extensions.showcase.model.Circle" /> <pe:methodParam name="subject"/> <pe:methodParam name="date"> <f:convertDateTime type="both" dateStyle="short" locale="en"/> </pe:methodParam> <pe:methodParam name="circle"> <pe:convertJson /> </pe:methodParam> </pe:remoteCommand> <script type="text/javascript"> circle = { radius: 50, backgroundColor: "#FF0000", borderColor: "#DDDDDD", scaleFactor: 1.2 }; circle2 = { radius: 32, backgroundColor: "#FF0320", borderColor: "#DDFFFD", scaleFactor: 1.6 }; </script> <p:commandButton value="Apply Data" type="button" οnclick="applyData('hello world', '5/14/07 12:55:42 PM', JSON.stringify(circle))" /> <p:commandButton value="Apply Second Data" type="button" οnclick="applyData('hello user', '7/11/01 11:55:42 PM', JSON.stringify(circle2))" /> public void printMethodParams(final String subject, final Date date, final Circle circle) { final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "ActionListener called", "Subject: " + subject + ", Date: " + date + ", Circle - backgroundColor: " + circle.getBackgroundColor()); FacesContext.getCurrentInstance().addMessage(null, msg); }