Primefaces Dialog example

by

The PrimeFaces library offers powerful components to enrich JavaServer Faces (JSF) applications. One such component, the PrimeFaces dialog, enables the creation of dynamic, interactive dialog boxes. In this tutorial, we’ll explore how to implement a PrimeFaces dialog within a JSF application to enhance user interactions.

Prerequisites

Before diving in, ensure you have the following:

  • Basic knowledge of JSF and PrimeFaces – You can learn the basics here: PrimeFaces Tutorial (2023)
  • Java Development Kit (JDK) installed
  • IDE (Integrated Development Environment) such as Eclipse or IntelliJ IDEA
  • A JSF project configured with PrimeFaces

Step 1: Setting Up the JSF Page

Start by creating an XHTML page within your JSF project. Use the following code snippet as a template for your JSF page (index.xhtml):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
    <h:head>

    </h:head>
    <h:body>

        <h2>Primefaces Dialog Demo</h2>
        <h:form>
                
            <p:growl id="growl" showDetail="true" />
                 
            <p:commandButton value="Show Dialog" type="button" icon="pi pi-external-link" onclick="PF('dlg1').show()" />

            <p:dialog header="Dialog example" widgetVar="dlg1" minHeight="40" width="350" showEffect="fade">
                <p class="m-0">This tutorial shows how to run a Primefaces Dialog which includes a button in it</p>
                <f:facet name="footer">
                    <p:commandButton action="#{buttonView.action1}" update="growl" value="Yes" icon="ui-icon-check"
                        style="width: auto" />
                    <p:commandButton action="#{buttonView.action2}" update="growl" value="No" icon="ui-icon-check"
                        style="width: auto" />
                </f:facet>
            </p:dialog>


        </h:form>
    </h:body>
</f:view>

</html>

Step 2: Understanding the Code

  • The <p:commandButton> triggers the display of the dialog using onclick="PF('dlg1').show()".
  • <p:dialog> defines the dialog box with a header, content, and footer.
  • Inside the dialog, two <p:commandButton> elements represent ‘Yes’ and ‘No’ actions. These buttons call methods defined in the buttonView managed bean.

Step 3: Backend Implementation (Managed Bean)

Create a managed bean with the action1 and action2 methods to handle ‘Yes’ and ‘No’ button actions, respectively.

@Named("buttonView")
@ViewScoped
public class BackingBean implements Serializable  {
   
    public void addMessage(FacesMessage.Severity severity, String summary, String detail) {
        FacesContext.getCurrentInstance().
                addMessage(null, new FacesMessage(severity, summary, detail));
    }

 
    public void action1() {
            
        addMessage(FacesMessage.SEVERITY_INFO, "Info Message", "Clicked Yes!");
    }

    public void action2() {
         
        System.out.println("Clicked No!"); 
        
        addMessage(FacesMessage.SEVERITY_INFO, "Info Message", "Clicked No!");
    }
    
}

Step 4: Testing the Primefaces Dialog

The index.html page will show a button that allows opening the Primefaces Dialog:

primefaces dialog example

Click on the Show Dialog Button and your Dialog with the Button will show up:

primefaces dialog step-by-step example

Finally, notice that by clicking on the Buttons in the Dialog will trigger messages in the growl component.

Modal Dialogs

In order to make the Dialog as Modal, you need to set the modal attribute to true:

<p:dialog header="Header" widgetVar="dlg2" minHeight="40" width="350" showEffect="fade" modal="true">
    <p class="m-0">Text here</p>
</p:dialog>

Minimize and Maximize Icon in Dialogs

Finally, you can set the attributes minimizable="true" and maximizable="true" to allow showing the minimize and maximize icons in your Primefaces Dialog:

<p:dialog header="Header" widgetVar="dlg4" minHeight="40" width="350" showEffect="fade" minimizable="true" maximizable="true">
 
</p:dialog>

Conclusion

This tutorial outlines the implementation of a PrimeFaces dialog within a JSF application, providing a user-friendly way to interact with users via pop-up dialog boxes. Customize the dialog’s content and actions according to your application’s requirements for an enhanced user experience.

Source code: https://github.com/fmarchioni/mastertheboss/tree/master/web/primefaces/dialog-primefaces