PrimeFaces Beginner's Guide

上QQ阅读APP看书，第一时间看更新

Time for action – showing the search users screen in dialog

Let us see how we can display the search users page (searchUsers.xhtml) in the Dialog component.

Create a CommandButton button whose actionListener triggers open the dialog using the RequestContext.openDialog() method:

<p:commandButton value="Search Users" actionListener="#{userController.searchUsersForm}" />  

public void searchUsersForm() 
{
  RequestContext.getCurrentInstance().openDialog("searchUsers");
}

Create the search users page searchUsers.xhtml as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
        <h:head>
            <title>Search Users</title>            
        </h:head>
        <h:body>
            <h:form>
             <p:inputText value="#{userController.searchName}"/> 
             <p:commandButton value="Search" actionListener="#{userController.searchUsersByName}" update="usersTbl"/>
             <p:dataTable id="usersTbl" value="#{userController.searchUsers}" var="user">
                    <p:column headerText="EmailId">
                        #{user.emailId}
                    </p:column>
                    <p:column headerText="Name">
                        #{user.firstName} #{user.lastName}
                    </p:column>
                </p:dataTable>
             </h:form>
        </h:body>    
</html>

What just happened?

When you click on the Search Users button, a new dialog will be opened with the response of searchUsers.xhtml page content.

We can also use the other overloaded openDialog() method to pass optional configuration parameters:

RequestContext.openDialog(String outcome, Map<String,Object> options, Map<String,List<String>> params);

The following is the list of supporting options:

modal: This controls modality of the dialog. Default value is false.
resizable: When enabled, this makes dialog resizable. Default value is true.
draggable: When enabled, this makes dialog draggable. Default value is true.
width: This specifies the width of the dialog. Default value is auto.
height: This specifies the height of the dialog. Default value is auto.
contentWidth: This specifies the width of the dialog content. Default value is 640.
contentHeight: This specifies the height of the dialog content. Default value is auto.

We can open the dialog with customization options as follows:

public void searchUsersForm() 
{
  Map<String,Object> options = new HashMap<String, Object>();
  options.put("modal", true);
  options.put("resizable", false);
  options.put("contentHeight", 800);
  RequestContext.getCurrentInstance().openDialog("searchUsers", options,null);
}

Passing data from the dialog back to the source page

The dialog framework also supports passing data from the dialog back to the parent page. The trigger component, which opens the dialog, needs to have a dialogReturn AJAX event listener registered to receive data returned from the dialog.