Time for action – displaying a dialog

Let us see how to create a basic Dialog component and show/hide based on button click events by performing the following steps:

1. Create a form with a Dialog component and two buttons to show and hide the dialog using the following code:

   <h:form>
     <p:commandButton value="ShowDialog" onclick="dlg1.show();" type="button" />
     <p:commandButton value="HideDialog" onclick="dlg1.hide();" type="button" />
     <p:dialog id="simpleDialog" header="Simple Dialog" widgetVar="dlg1" width="300" height="50">
       <h:outputText value="PrimeFaces Simple Dialog" />
     </p:dialog>
   </h:form>

What just happened?

We have created a Dialog component using <p:dialog> and used two <p:commandButton> components to perform show and hide actions on the dialog box using client-side API calls dlg1.show() and dlg1.hide().

The Dialog component has the following attributes, which can be used to customize its behavior:

• widgetVar: This specifies...