PrimeFaces Beginner's Guide

书名：PrimeFaces Beginner's Guide
作者名：K. Siva Prasad Reddy
本章字数：152字
更新时间：2021-07-21 17:59:06

Time for action – using the Fragment component

Let us look at how we can use two fragments for the User Details and Contact Details sections and partially process each of them individually. Perform the following steps for using two fragment components:

Create a form with two fragments for User Details and Contact Details sections as follows:

<h:form>
  <p:panel header="User Account>
  <p:fragment autoUpdate="true"> 
  <p:fieldset legend="User Details"> 
  <h:panelGrid columns="3">  
     <h:outputLabel for="emailId" value="EmailId:" />  
    <p:inputText id="emailId" value="#{userController.emailId}" required="true" label="emailId"/>
    <p:message for="emailId" display="icon"/>
      
    <h:outputLabel for="firstName" value="FirstName:" />
    <p:inputText id="firstName" value="#{userController.firstName}" required="true" label="FirstName"/>
    <p:message for="firstName" display="icon"/>
      
    <h:outputLabel for="lastName" value="LastName:" />
    <p:inputText id="lastName" value="#{userController.lastName}" />
    <p:message for="lastName" display="icon"/>    
    <p:commandButton value="Save" actionListener="#{userController.updateUserDetails()}"/>  
     </h:panelGrid>  
  </p:fieldset>
  </p:fragment>
 
  <p:fragment autoUpdate="true">  
   <p:fieldset legend="Contact Details"> 
      <h:panelGrid columns="3">  
    <h:outputLabel for="phone" value="Phone:" />  
    <p:inputText id="phone" value="#{userController.phone}" required="true" label="Phone"/>
    <p:message for="phone" display="icon"/>
 
    <h:outputLabel for="fax" value="Fax:" />  
    <p:inputText id="fax" value="#{userController.fax}" />
    <p:message for="fax" display="icon"/>

    <p:commandButton value="Save" actionListener="#{userController.updateContactDetails()}"/>
      </h:panelGrid> 
  </p:fieldset>
  </p:fragment>
  </p:panel>
</h:form>

What just happened?

We have created two <p:fragment> components to wrap each of the User Details and Contact Details sections. Have a look at the following screenshot:

When you click on the Save button in the User Details section, only EmailId, FirstName, and LastName fields will be processed and updated. Similarly, when you click on the Save button in the Contact Details section, only Phone and Fax fields will be partially processed and updated. Even though some required fields in other fragments are blank, they won't be processed and hence no error messages will be displayed.