BlockUI blocks other components. It can be used with special ajax integration or manually with client side api.
<div class="card">
<h:form>
<h5 class="mt-0">Basic</h5>
<p:panel id="pnl" header="New User">
<h:panelGrid columns="3" cellpadding="7">
<h:outputLabel for="firstname" value="Firstname: *"/>
<p:inputText id="firstname" value="#{blockUIView.firstname}" required="true" label="Firstname">
<f:validateLength minimum="2"/>
</p:inputText>
<p:message for="firstname"/>
<h:outputLabel for="lastname" value="Lastname: *"/>
<p:inputText id="lastname" value="#{blockUIView.lastname}" required="true" label="Lastname"/>
<p:message for="lastname"/>
</h:panelGrid>
<p:commandButton id="saveBtn" value="Save" icon="pi pi-check" action="#{blockUIView.save}" update="growl" styleClass="mt-3" />
</p:panel>
<p:blockUI block="pnl" trigger="saveBtn" widgetVar="buiBasic"/>
<h5>Custom Content</h5>
<p:dataTable id="dataTable" var="customer" value="#{blockUIView.customers}"
paginator="true" rows="5" paginatorPosition="bottom">
<f:facet name="header">
Customers
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{customer.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Country"/>
</f:facet>
<h:outputText value="#{customer.country.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Company"/>
</f:facet>
<h:outputText value="#{customer.company}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Status"/>
</f:facet>
<span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
</p:column>
</p:dataTable>
<p:blockUI block="dataTable" trigger="dataTable" widgetVar="buiDatatable">
<i class="pi pi-spin pi-spinner" style="font-size: 3rem"></i>
</p:blockUI>
<h5>Client Side API</h5>
<p:accordionPanel id="accordion" multiple="true">
<p:tab title="Header I">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</h:panelGrid>
</p:tab>
<p:tab title="Header II">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText
value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi."/>
</h:panelGrid>
</p:tab>
<p:tab title="Header III">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText
value="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus."/>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
<p:commandButton id="pnlBtn" value="Block Panel" type="button" onclick="PF('bui').show()" styleClass="mt-5 mr-2" />
<p:commandButton id="pnlBtn2" value="Unblock Panel" type="button" onclick="PF('bui').hide()" styleClass="mt-5 ui-button-outlined" />
<p:blockUI block="accordion" widgetVar="bui"/>
<p:growl id="growl"/>
</h:form>
</div>
package org.primefaces.showcase.view.misc;
import java.util.List;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Inject;
import jakarta.inject.Named;
import org.primefaces.showcase.domain.Customer;
import org.primefaces.showcase.service.CustomerService;
@Named
@RequestScoped
public class BlockUIView {
@Inject
CustomerService service;
private String firstname;
private String lastname;
private List<Customer> customers;
@PostConstruct
public void init() {
customers = service.getCustomers(10);
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public void save() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've registered"));
}
public void setService(CustomerService service) {
this.service = service;
}
public List<Customer> getCustomers() {
return customers;
}
public void setCustomers(List<Customer> customers) {
this.customers = customers;
}
}
package org.primefaces.showcase.service;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.concurrent.ThreadLocalRandom;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.ApplicationScoped;
import jakarta.inject.Named;
import org.primefaces.showcase.domain.*;
@Named
@ApplicationScoped
public class CustomerService {
List<Customer> customers;
private Country[] countries;
private Representative[] representatives;
private String[] names;
private String[] companies;
@PostConstruct
public void init() {
customers = new ArrayList<>();
countries = new Country[]{
new Country(0, "Argentina", "ar"),
new Country(1, "Australia", "au"),
new Country(2, "Brazil", "br"),
new Country(3, "Canada", "ca"),
new Country(4, "Germany", "de"),
new Country(5, "France", "fr"),
new Country(6, "India", "in"),
new Country(7, "Italy", "it"),
new Country(8, "Japan", "jp"),
new Country(9, "Russia", "ru"),
new Country(10, "Spain", "es"),
new Country(11, "United Kingdom", "gb")};
companies = new String[]{"Benton, John B Jr", "Chanay, Jeffrey A Esq", "Chemel, James L Cpa", "Feltz Printing Service",
"Printing Dimensions", "Chapman, Ross E Esq", "Morlong Associates", "Commercial Press", "Truhlar And Truhlar Attys",
"King, Christopher A Esq","Dorl, James J Esq","Rangoni Of Florence","Feiner Bros","Buckley Miller Wright","Rousseaux, Michael Esq",};
representatives = new Representative[]{new Representative("Amy Elsner", "amyelsner.png"), new Representative("Anna Fali", "annafali.png"),
new Representative("Asiya Javayant", "asiyajavayant.png"), new Representative("Bernardo Dominic", "bernardodominic.png"),
new Representative("Elwin Sharvill", "elwinsharvill.png"), new Representative("Ioni Bowcher", "ionibowcher.png"),
new Representative("Ivan Magalhaes", "ivanmagalhaes.png"), new Representative("Onyama Limba", "onyamalimba.png"),
new Representative("Stephen Shaw", "stephenshaw.png"), new Representative("Xuxue Feng", "xuxuefeng.png")};
names = new String[]{"James Butt", "David Darakjy", "Jeanfrancois Venere", "Ivar Paprocki", "Tony Foller",
"Adams Morasca", "Claire Tollner", "Costa Dilliard", "Juan Wieser", "Maria Marrier", "Jennifer Amigon",
"Stacey Maclead", "Leja Caldarera", "Morrow Ruta", "Arvin Albares", "Darci Poquette", "Izzy Garufi",
"Ricardo Gaucho", "Clifford Rim", "Emily Whobrey", "Kadeem Flosi", "Mujtaba Nicka", "Aika Inouye",
"Mayumi Kolmetz", "Misaki Royster", "Silvio Slusarski", "Nicolas Iturbide", "Antonio Caudy", """
Deepesh Chui\
""", "Aditya Kusko", "Aruna Figeroa", "Jones Vocelka", "Julie Stenseth", "Smith Glick",
"Johnson Sergi", "Francesco Shinko", "Salvatore Stockham", "Kaitlin Ostrosky", "Faith Gillian",
"Maisha Rulapaugh", "Jefferson Schemmer", "Leon Oldroyd", "Rodrigues Campain", "Alejandro Perin",
"Munro Ferencz", "Cody Saylors", "Chavez Briddick", "Sinclair Waycott", "Isabel Bowley", "Octavia Malet",
"Murillo Malet", "Greenwood Bolognia", "Wickens Nestle", "Ashley Doe"};
}
public List<Customer> getCustomers(int number) {
List<Customer> customers = new ArrayList<>();
for (int i = 0; i < number; i++) {
customers.add(new Customer(i + 1000, getName(), getCompany(), getCountry(), getDate(), CustomerStatus.random(), getActivity(), getRepresentative()));
}
return customers;
}
public List<Country> getCountries() {
return Arrays.asList(countries);
}
public CustomerStatus[] getCustomerStatus() {
return CustomerStatus.values();
}
public List<Representative> getRepresentatives() {
return Arrays.asList(representatives);
}
private String getName() {
return names[(int) (Math.random() * names.length)];
}
private Country getCountry() {
return countries[(int) (Math.random() * countries.length)];
}
private String getCompany() {
return companies[(int) (Math.random() * companies.length)];
}
private LocalDate getDate() {
LocalDate now = LocalDate.now();
long randomDay = ThreadLocalRandom.current().nextLong(now.minusDays(30).toEpochDay(), now.toEpochDay());
return LocalDate.ofEpochDay(randomDay);
}
private int getActivity() {
return (int) (Math.random() * 100);
}
private Representative getRepresentative() {
return representatives[(int) (Math.random() * representatives.length)];
}
}
package org.primefaces.showcase.domain;
import java.io.Serializable;
import java.time.LocalDate;
import java.util.Objects;
import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
public class Customer implements Serializable {
private static final long serialVersionUID = 1L;
private int id;
private String name;
private String company;
private Country country;
private LocalDate date;
private CustomerStatus status;
private int activity;
private Representative representative;
public Customer() {
}
public Customer(int id, String name, String company, Country country, LocalDate date, CustomerStatus status, int activity,
Representative representative) {
this.id = id;
this.name = name;
this.company = company;
this.country = country;
this.date = date;
this.status = status;
this.activity = activity;
this.representative = representative;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public Country getCountry() {
return country;
}
public void setCountry(Country country) {
this.country = country;
}
public LocalDate getDate() {
return date;
}
public void setDate(LocalDate date) {
this.date = date;
}
public CustomerStatus getStatus() {
return status;
}
public void setStatus(CustomerStatus status) {
this.status = status;
}
public int getActivity() {
return activity;
}
public void setActivity(int activity) {
this.activity = activity;
}
public Representative getRepresentative() {
return representative;
}
public void setRepresentative(Representative representative) {
this.representative = representative;
}
@Override
public boolean equals(Object o) {
if (this == o) {
return true;
}
if (o == null || getClass() != o.getClass()) {
return false;
}
Customer customer = (Customer) o;
return id == customer.id
&& activity == customer.activity
&& Objects.equals(name, customer.name)
&& Objects.equals(company, customer.company)
&& Objects.equals(country, customer.country)
&& Objects.equals(date, customer.date)
&& status == customer.status
&& Objects.equals(representative, customer.representative);
}
@Override
public int hashCode() {
return Objects.hash(id, name, company, country, date, status, activity, representative);
}
}
package org.primefaces.showcase.domain;
import java.io.Serializable;
import java.util.Locale;
import java.util.Objects;
import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
public class Country implements Serializable, Comparable<Country> {
private int id;
private String name;
private String code;
private Locale locale;
private boolean rtl;
public Country() {
}
public Country(int id, Locale locale) {
this(id, locale.getDisplayCountry(), locale.getCountry().toLowerCase(), locale);
}
public Country(int id, Locale locale, boolean rtl) {
this(id, locale.getDisplayCountry(), locale.getCountry().toLowerCase(), locale);
this.rtl = rtl;
}
public Country(int id, String name, String code) {
this(id, name, code, null);
}
public Country(int id, String name, String code, Locale locale) {
this.id = id;
this.name = name;
this.code = code;
this.locale = locale;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public Locale getLocale() {
return locale;
}
public void setLocale(Locale locale) {
this.locale = locale;
}
public String getLanguage() {
return locale == null ? "en" : locale.getLanguage();
}
public String getDisplayLanguage() {
return locale == null ? "English" : locale.getDisplayLanguage();
}
public boolean isRtl() {
return rtl;
}
public void setRtl(boolean rtl) {
this.rtl = rtl;
}
@Override
public boolean equals(Object o) {
if (this == o) {
return true;
}
if (o == null || getClass() != o.getClass()) {
return false;
}
Country country = (Country) o;
return id == country.id
&& Objects.equals(name, country.name)
&& Objects.equals(code, country.code);
}
@Override
public int hashCode() {
return Objects.hash(id, name, code);
}
@Override
public String toString() {
return name;
}
@Override
public int compareTo(Country o) {
return name.compareTo(o.name);
}
}
package org.primefaces.showcase.domain;
import java.util.Random;
import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
public enum CustomerStatus {
QUALIFIED,
UNQUALIFIED,
NEGOTIATION,
NEW,
RENEWAL,
PROPOSAL;
public static CustomerStatus random() {
Random random = new Random();
return values()[random.nextInt(values().length)];
}
public String getStatusName() {
return name();
}
}
package org.primefaces.showcase.domain;
import java.io.Serializable;
import java.util.Objects;
import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
public class Representative implements Serializable, Comparable<Representative> {
private static final long serialVersionUID = 1L;
private String name;
private String image;
public Representative() {
}
public Representative(String name, String image) {
this.name = name;
this.image = image;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
@Override
public boolean equals(Object o) {
if (this == o) {
return true;
}
if (o == null || getClass() != o.getClass()) {
return false;
}
Representative that = (Representative) o;
return Objects.equals(name, that.name)
&& Objects.equals(image, that.image);
}
@Override
public int hashCode() {
return Objects.hash(name, image);
}
@Override
public String toString() {
return name;
}
@Override
public int compareTo(Representative o) {
return name.compareTo(o.name);
}
}