Featured White Papers

• Measuring Risk to Improve Java Software Quality
• Do You Really Get Classloaders?
• Pragmatic Continuous Delivery with Jenkins, Nexus, and LiveRebel
• Your Next Java Web App: Less XML, No Long Restarts, Fewer Hassles
• Coding with JRebel, Java Forever Changed
• 2012 Developer Productivity Report: Java Tools, Tech, Devs, and Data

Sponsored Links

• Graph databases are 1000x faster than relational.

  Learn More!

• Career opportunities at Harman- Careers That'll Rock Your Socks Off.

  Learn More!

• Developer-friendly Java PDF libraries by Qoppa Software

  Live Demos

• Stop blaming your app! Diagnose Java performance issues.

  Free tool >

• UrbanCode: Go From Continuous Integration to
  Continuous Delivery

  Learn More!

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

Put on a happy MyFace

MyFaces offers an easy-to-use implementation for JSF projects

By Peter Wang, JavaWorld.com, 07/31/06

The JavaServer Faces component architecture simplifies much of JavaServer Pages design-time builds and runtime configuration data; in the JSF lifecycle, any POJO (plain-old Java object) can be the managed bean, whose attributes and methods map directly to HTTP form values and actions. In addition, the rich set of components provided by JSF simplifies and quickens the creation of Web front ends. The more complex the widgets, the simpler JSF is to use: no low-level HTML and JavaScript coding, and say goodbye to JSP scriplets. Also, JSF provides both form- and field-level validation by default. The pluggable conversion framework seamlessly converts HTML string presentation from/to any POJO type. And finally, you can easily integrate an existing JSF application into a portal environment with much less effort when compared to integrating a Struts application.

As with any framework, JSF is not a silver bullet for solving all your Web application development problems, but it does provide a good foundation where the Java community, and visual component and GUI tool vendors can come together to standardize Java Web application development. I recommend considering JSF for your next Web development project.

Once you decide to use JSF as your Web framework, the next question you might have is which JSF implementation to choose. Indeed, many JSF component sets and libraries are available, both as open source and commercial offerings. Among them, the MyFaces implementation meets most needs well in terms of building an enterprise-grade real-world application without requiring you to make your own components. MyFaces not only provides a rich set of pre-built components, it also addresses many shortcomings and issues found in JSF 1.1. Recently, Oracle ADF (Application Development Framework) components have joined the MyFaces family. Let's see how MyFaces solves a classic Web application use-case.

Employee header/detail use-case

The header/detail use-case is common in Web applications: A list of search results are presented in a table view. A user can traverse the results in the table and select a row to work on. Figure 1 shows an employee module, which demonstrates the header/detail use-case.

In this employee-header example, we use two MyFaces components: <t:dataTable> to create the table view for presenting header information and <t:dataScroller> to provide easy pagination capability. In addition, we also add the cell-level employee information update. When a user clicks the Edit icon, the employee's details display at the bottom of the screen, as shown in Figure 2.

The user can also click on the Contact tab to view other employee detail information (see Figure 3).

In the employee-detail-view page, we use <t:panelTabbedPane> to nicely group related employee information for the best GUI presentation. The MyFaces <t:panelTabbedPane> component provides both the DHTML client-side and server-side tab-toggling. In this use-case, we use the default DHTML client-side tab-toggling.

Step into the code

With JSF, the coding of the header/detail is simple and straightforward. Let's examine a few lines of employee.jsp. In Listing 1, we use MyFaces component <t:panelGrid> to lay out a table of the employee information on the screen and the MyFaces component <t:subview> to compose the header (employerHeader.jsp) and detail view (employeeDetailTab.jsp). Notice that the EmployeeTable managed bean's showDetailView attribute controls whether the employee detail displays:

Listing 1

 <f:view>
   <h:form>
       <t:div style="width:70%">
        <s:fieldset legend="Employee Information" >
         <%-- employee header information list--%>
        <t:panelGrid columns="1" cellpadding="2" cellspacing="2"  >
         <t:column>
          <f:subview id="eh">
            <jsp:include page="employeeHeader.jsp" flush="false"/>
          </f:subview>


         </t:column>  
         <t:column></t:column>
         <%-- employee detail information list--%>
         <t:column>
           <f:subview id="ed" rendered="#{employeeTable.showDetailView}">
             <jsp:include page="employeeDetailTab.jsp" flush="false"/>
           </f:subview>
          </t:column>
          <t:column>
            <t:commandButton action="#{employeeTable.save}" value="Save" />
            <t:commandButton action="#{employeeTable.cancel}" value="Cancel" />
          </t:column>
         </t:panelGrid>     
        </s:fieldset> 
       </t:div>              
      </h:form>
</f:view> 

In employeeHeader.jsp (see Listing 2), we use <t:dataTable> to display the employee header information. The employee data binds to the data table value attribute: <t:dataTable value="#{employeeTable.employees}" ...>.

In the MyFaces implementation, <t:dataTable> also provides many additional features like row index, row style class, column sorting, and row highlighting capabilities (see Figure 2). Another interesting MyFaces component is <t:saveState>, illustrated in Listing 2, which preserves employee list information in a so-called page context. <t:saveState> is one component widely used in MyFaces JSF Web applications. It literally can save your managed bean state anywhere you want.

Listing 2

 <t:saveState value="#{employeeTable}" ></t:saveState>


<!-- core list table usage and tag reference -->
 <t:dataTable value="#{employeeTable.employees}" var="employee" 
            id="employeeData"
            cellpadding="0" cellspacing="0" width="100%" border="0"
            preserveDataModel="false"
            forceId="true"
            rows="6"
            rowClasses    ="odd,odd,odd,even,even,even"
            rowIndexVar   ="rowIndex"
                        sortColumn    ="#{employeeTable.sort}"
            sortAscending ="#{employeeTable.ascending}" >


            <!-- core column table cells -->
   <t:column>
     <t:graphicImage value="/resources/images/icons/checkmark.gif" 
        alt="Current Selection"
        rendered="#{rowIndex==employeeTable.selectedRowIndex 
        && employeeTable.employee!=null}"></t:graphicImage>
   </t:column>
   <t:column>


     <f:facet name="header" >
       <h:outputText value="Select One" id="h1"/>
     </f:facet>
      <t:commandLink  action="#{employeeTable.viewEmployee}"  >
      <t:graphicImage value="/resources/images/icons/edit_icon.gif"
       border="0" alt="Click here to edit the record" />
       <f:param name="selectedRowIndex" value="#{rowIndex}"/>
      </t:commandLink>    
     </t:column>
     <t:column id="c1">
       <f:facet name="header" >
         <t:commandSortHeader columnName="name" arrow="true"  id="s1">
          <h:outputText value="Name" id="h2"/>
         </t:commandSortHeader>
       </f:facet>
       <t:inputText value="#{employee.firstName}" id="p1"/>
       <f:verbatim>  </f:verbatim>
       <t:inputText value="#{employee.lastName}"  id="p2"/>
     </t:column>
      <t:column id="c3">
        <f:facet name="header">
          <h:outputText value="Address" id="h3"/>
        </f:facet>
        <t:inputText value="#{employee.address.addressOne}" 
        id="a1" size="35" maxlength="100" /> 
        <f:verbatim>  </f:verbatim>
        <t:inputText value="#{employee.address.city}" 
        size="10" maxlength="20" id="a2"/>
        <f:verbatim>  </f:verbatim>
        <t:inputText value="#{employee.address.state}" 
        size="2" maxlength="2"       id="a3"/> 
        <f:verbatim>  </f:verbatim>
        <t:inputText     value="#{employee.address.zipCode}" 
        size="5" maxlength="10" id="a4"/>
      </t:column>

In our example, when a user clicks on the Edit icon, the system retrieves the employee's details. JSF offers numerous approaches for passing selected employee information to a corresponding page. In Listing 3, we use both the <t:commandLink> and <f:param> MyFaces components to pass the selected row index for the employee information lookup: