JSF2 – p:remoteCommand Example Chat Primefaces

p:remoteCommand chiama un metodo di un backing bean (tramite actionlistener) e, fondamentalemnte, fa da trigger ad uno javascript(oncomplete):

<p:remoteCommand name="nextMessage"
actionListener="#{messageBean.firstUnreadMessage}"
oncomplete="javascript:updateMessages(xhr, status, args);" />

Back-End

MessageBean.java

package com;

import java.io.Serializable;
import java.util.Collections;
import java.util.Date;
import java.util.LinkedList;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
import org.primefaces.context.RequestContext;


@ManagedBean
@ViewScoped
public class MessageBean implements Serializable {



private final List messages;
private Date lastUpdate;
private Message message;

/**
* Creates a new instance of MessageBean
*/
public MessageBean() {
messages = Collections.synchronizedList(new LinkedList());
lastUpdate = new Date(0);
message = new Message();
}

public Date getLastUpdate() {
return lastUpdate;
}

public void setLastUpdate(Date lastUpdate) {
this.lastUpdate = lastUpdate;
}

public Message getMessage() {
return message;
}

public void setMessage(Message message) {
this.message = message;
}


public void firstUnreadMessage(ActionEvent evt) {
RequestContext ctx = RequestContext.getCurrentInstance();

ctx.addCallbackParam("ok", message!=null);
if(message==null)
return;

lastUpdate = message.getDateSent();

ctx.addCallbackParam("user", message.getUser());
ctx.addCallbackParam("dateSent", new Date().toString());
ctx.addCallbackParam("text", message.getMessage());

}

}

Message.java
package com;
import java.io.Serializable;

public class Message implements Serializable {
private Date dateSent;
private String user;
private String message;

public Date getDateSent() {
return dateSent;
}

public void setDateSent(Date dateSent) {
this.dateSent = dateSent;
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

public String getUser() {
return user;
}

public void setUser(String user) {
this.user = user;
}
}

Front-End

Chat1.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Chat test!</title>
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/util.js"></script>

</h:head>

<h:body>
<h:form prependId="false">
<h:panelGrid columns="2">
Name: <p:inputText value="#{messageBean.message.user}" />
Text: <p:inputText
value="#{messageBean.message.message}" />
<p:commandButton type="reset" value="Clear" />
<p:commandButton value="Send!"
actionListener="#{messageBean.sendMessage}" onclick="nextMessage();" />
</h:panelGrid>
<p:remoteCommand name="nextMessage"
actionListener="#{messageBean.firstUnreadMessage}"
oncomplete="javascript:updateMessages(xhr, status, args);" />
</h:form>

<hr />
<h3>Live chat</h3>
<div id="chat"></div>
</h:body>
</html>


util.js

function updateMessages(xhr, status, args) {
if(!args.ok) return;
$('#chat').append('<div class="msg">[' +args.dateSent+ '] <strong>'+args.user+'</strong>: '+args.text+'</div>');
}

Esecuzione

lanciando da browser l’url
http://localhost:8080/JSFProject/faces/chat1.xhtml

si ha una simulazione di chat 


Lascia un commento

Il tuo indirizzo email non sarà pubblicato.