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" onclick="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" onclick="applyData('hello world', '5/14/07 12:55:42 PM', JSON.stringify(circle))" />
<p:commandButton value="Apply Second Data" type="button" onclick="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" onclick="applyData('hello world', '5/14/07 12:55:42 PM', JSON.stringify(circle))" />
<p:commandButton value="Apply Second Data" type="button" onclick="applyData('hello user', '7/11/01 11:55:42 PM', JSON.stringify(circle2))" />

public void printMethodParams(final String subject, final Date date, final C
99d2
ircle circle) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "ActionListener called",
"Subject: " + subject + ", Date: " + date + ", Circle - backgroundColor: " + circle.getBackgroundColor());

FacesContext.getCurrentInstance().addMessage(null, msg);
}