This example shows how to use widget's JavaScript methods block() / unblock().
They are normally used as onstart / oncomplete callbacks in ajaxified components.
Try to switch the current page, sort a table column or try to add a new message.
| Adding message... |
| Please wait, data is being processed... |
Source
<p:messages id="messages"/>
<h:panelGrid columns="2">
<h:panelGroup id="messageDetailGroup" layout="block" style="margin-right: 20px;">
<h:panelGrid id="messageDetail" columns="1" columnClasses="formColumn">
<h:outputText value="Subject *"/>
<h:inputText value="#{dataTableController.newSubject}" required="true" label="Subject"/>
<h:outputText value="Text *"/>
<h:inputText value="#{dataTableController.newText}" required="true" label="Text"/>
</h:panelGrid>
<p:commandButton id="addMsgButton" value="Add message" action="#{dataTableController.addMessage}"
process="messageDetailGroup" update="messageDetail dataTable messages"
style="margin-top: 20px;" icon="pi pi-plus"
onstart="PF('blockUIWidget1').block()" oncomplete="PF('blockUIWidget1').unblock()"/>
</h:panelGroup>
<p:dataTable id="dataTable" var="message" value="#{dataTableController.messages}" paginator="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rows="5" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
<p:ajax event="page" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
<p:ajax event="sort" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
<p:column sortBy="#{message.subject}" headerText="Subject">
<h:outputText value="#{message.subject}"/>
</p:column>
<p:column sortBy="#{message.text}" headerText="Text">
<h:outputText value="#{message.text}"/>
</p:column>
</p:dataTable>
</h:panelGrid>
<pe:blockUI target="messageDetailGroup" widgetVar="blockUIWidget1">
<h:panelGrid columns="2">
<h:graphicImage library="images" name="ajax-loader1.gif"
style="margin-right: 12px; vertical-align: middle;"/>
<h:outputText value="Adding message..." style="white-space: nowrap;"/>
</h:panelGrid>
</pe:blockUI>
<pe:blockUI target="dataTable" content="blockUIContent" widgetVar="blockUIWidget2"/>
<h:panelGrid id="blockUIContent" columns="2" style="display:none;table-layout:auto;">
<h:graphicImage library="images" name="ajax-loader1.gif"
style="margin-right: 12px; vertical-align: middle;"/>
<h:outputText value="Please wait, data is being processed..." style="white-space: nowrap;"/>
</h:panelGrid>
<h:outputStylesheet id="blockUICSS">
#blockUIContent td {
border: none !important;
padding: 0 !important;
}
</h:outputStylesheet>
@Named
@ViewScoped
public class DataTableController implements Serializable {
private static final long serialVersionUID = 20111020L;
private List<Message> messages;
private List<Message> filteredMessages;
private String newSubject = "my subject";
private String newText = "my text";
public DataTableController() {
if (messages == null) {
messages = new ArrayList<>();
for (int i = 0; i < 100; i++) {
final Message message = new Message();
message.setSubject("subject " + i);
message.setText("text " + i);
messages.add(message);
}
}
}
public List<Message> getMessages() {
return messages;
}
public void setMessages(final List<Message> messages) {
this.messages = messages;
}
public List<Message> getFilteredMessages() {
return filteredMessages;
}
public void setFilteredMessages(final List<Message> filteredMessages) {
this.filteredMessages = filteredMessages;
}
public String getNewSubject() {
return newSubject;
}
public void setNewSubject(final String newSubject) {
this.newSubject = newSubject;
}
public String getNewText() {
return newText;
}
public void setNewText(final String newText) {
this.newText = newText;
}
public String addMessage() {
doSomething();
final Message message = new Message();
message.setSubject(newSubject);
message.setText(newText);
messages.add(0, message);
newSubject = "";
newText = "";
final FacesContext fc = FacesContext.getCurrentInstance();
fc.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "New message has been added successfully", null));
return null;
}
public void doSomething() {
try {
// simulate a long running request
Thread.sleep(1500);
}
catch (final Exception e) {
// Restore interrupted state...
Thread.currentThread().interrupt();
}
}
public class Message implements Serializable {
private static final long serialVersionUID = 1L;
private String subject;
private String text;
private long time;
public Message() {
time = System.currentTimeMillis() + (long) (Math.random() * 10);
}
public final String getSubject() {
return subject;
}
public final void setSubject(final String subject) {
this.subject = subject;
}
public final String getText() {
return text;
}
public final void setText(final String text) {
this.text = text;
}
public long getTime() {
return time;
}
public void setTime(final long time) {
this.time = time;
}
}
}