Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
RemoteCommand
RemoteCommand executes backing bean methods and does a partial update, triggered by custom client side script.
It can pass parameters with pe:assignableParam (assigned to bean properties) or pe:methodParam
(arguments of a bean method).
Basic Usage
A certain part of a page can be lazily loaded on demand.
Using AssignableParam
Assign JavaScript parameters to a property in a bean with pe:remoteCommand and pe:assignableParam.
AssignableParam specifies a name of the parameter and an EL expression for the corresponding setter the parameter
is applied to (assignTo). A converter can be attached as a child or with the converter attribute.
Using MethodParam
Call a remote Java method with any parameters from JavaScript with pe:remoteCommand, pe:methodParam
and pe:methodSignature. MethodParam specifies the name of a parameter and MethodSignature a comma
separated list of fully qualified class names, in the same order as the passed parameters.
Usage
<div class="card">
<h5>Basic Usage</h5>
<p>A certain part of a page can be lazily loaded on demand.</p>
<h:form id="formBasicUsage">
<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>
</h:form>
</div>
<div class="card">
<h5>Using AssignableParam</h5>
<p>Assign JavaScript parameters to a property in a bean with <code>pe:remoteCommand</code> and <code>pe:assignableParam</code>.
AssignableParam specifies a <code>name</code> of the parameter and an EL expression for the corresponding setter the parameter
is applied to (<code>assignTo</code>). A converter can be attached as a child or with the <code>converter</code> attribute.</p>
<h:form id="formAssignableParam">
<p:growl id="growl" showDetail="true"/>
<pe:remoteCommand id="assignDataCommand" name="assignData" 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" pattern="MM/dd/yyyy HH:mm:ss"/>
</pe:assignableParam>
<pe:assignableParam name="circle" assignTo="#{remoteCommandController.circle}">
<pe:convertJson/>
</pe:assignableParam>
</pe:remoteCommand>
<script type="text/javascript">
var assignCircle = {
radius: 50,
backgroundColor: "#FF0000",
borderColor: "#DDDDDD",
scaleFactor: 1.2
};
var assignCircle2 = {
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="assignData('hello world', '05/14/2007 12:55:42', JSON.stringify(assignCircle))"/>
<p:commandButton value="Apply Second Data" type="button" onclick="assignData('hello user', '07/11/2001 11:55:42', JSON.stringify(assignCircle2))"/>
</h:form>
</div>
<div class="card">
<h5>Using MethodParam</h5>
<p>Call a remote Java method with any parameters from JavaScript with <code>pe:remoteCommand</code>, <code>pe:methodParam</code>
and <code>pe:methodSignature</code>. MethodParam specifies the <code>name</code> of a parameter and MethodSignature a comma
separated list of fully qualified class names, in the same order as the passed parameters.</p>
<h:form id="formMethodParam">
<p:growl id="growl" showDetail="true"/>
<pe:remoteCommand id="callMethodCommand" name="callMethod" 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" pattern="MM/dd/yyyy HH:mm:ss"/>
</pe:methodParam>
<pe:methodParam name="circle">
<pe:convertJson/>
</pe:methodParam>
</pe:remoteCommand>
<script type="text/javascript">
var methodCircle = {
radius: 50,
backgroundColor: "#FF0000",
borderColor: "#DDDDDD",
scaleFactor: 1.2
};
var methodCircle2 = {
radius: 32,
backgroundColor: "#FF0320",
borderColor: "#DDFFFD",
scaleFactor: 1.6
};
</script>
<p:commandButton value="Apply Data" type="button" onclick="callMethod('hello world', '05/14/2007 12:55:42', JSON.stringify(methodCircle))"/>
<p:commandButton value="Apply Second Data" type="button" onclick="callMethod('hello user', '07/11/2001 11:55:42', JSON.stringify(methodCircle2))"/>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller;
import java.util.Date;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
import org.primefaces.extensions.showcase.model.Circle;
/**
* RemoteCommandController
*
* @author Thomas Andraschko / last modified by $Author: $
* @version $Revision: 1.0 $
*/
@Named
@RequestScoped
public class RemoteCommandController {
private String subject;
private Date date;
private Circle circle;
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);
}
public void parametersAssigned() {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "ActionListener called",
"Parameters assigned");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public String getSubject() {
return subject;
}
public void setSubject(final String subject) {
this.subject = subject;
}
public Date getDate() {
return date;
}
public void setDate(final Date date) {
this.date = date;
}
public Circle getCircle() {
return circle;
}
public void setCircle(final Circle circle) {
this.circle = circle;
}
}
package org.primefaces.extensions.showcase.model;
import java.io.Serial;
import java.io.Serializable;
/**
* Circle
*
* @author Thomas Andraschko / last modified by $Author: $
* @version $Revision: 1.0 $
*/
public class Circle implements Serializable {
@Serial
private static final long serialVersionUID = 20111020L;
private int radius;
private String backgroundColor;
private String borderColor;
private double scaleFactor;
public final int getRadius() {
return radius;
}
public final void setRadius(int radius) {
this.radius = radius;
}
public final String getBackgroundColor() {
return backgroundColor;
}
public final void setBackgroundColor(String backgroundColor) {
this.backgroundColor = backgroundColor;
}
public final String getBorderColor() {
return borderColor;
}
public final void setBorderColor(String borderColor) {
this.borderColor = borderColor;
}
public final double getScaleFactor() {
return scaleFactor;
}
public final void setScaleFactor(double scaleFactor) {
this.scaleFactor = scaleFactor;
}
}