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

Page 2 of 3

Listing 3

 <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>

The <t:commandLink> action attribute links the HTTP action to the EmployeeTable.viewEmployee method; we use the selected row index from the request parameter to retrieve the employee information from the employee list collection. Listing 4 is a code snippet from the viewEmployee() method. You can achieve the same result using different approaches available in the MyFaces wiki.

Listing 4

 public String  viewEmployee()
{
      
setSelectedRowIndex(Integer.parseInt((String)getParameter("selectedRowIndex")));
setEmployee((Employee)(getEmployees().get(this.getSelectedRowIndex())));


setShowDetailView(true);
return "OK";
     
} 

In EmployeeDetailTab.jsp, shown in the code below, employee detail information is divided into three sections presented by the <t:panelTabbedPane> component. Each nested <t:panelTab> includes a corresponding section of employee information. The content of the tabbed panel is simple and clean, but provides powerful GUI presentation.

 <t:panelTabbedPane 
activeTabStyleClass="googleHouse_panelTabbedPane_activeHeaderCell"  
   tabContentStyleClass="googleHouse_panelTabbedPane" 
   activeSubStyleClass="googleHouse_panelTabbedPane_subHeaderCell_active" >
 <t:panelTab label="General Information" style="width:35%" >
  <f:subview id="ltinc1">
    <jsp:include page="employeeInfo.jsp" flush="false"/>
  </f:subview>
 </t:panelTab> 
 <t:panelTab label="Contact" style="width:30%" >
  <f:subview id="ltinc2">
    <jsp:include page="employeeContact.jsp" flush="false"/>
  </f:subview>
 </t:panelTab> 
 <t:panelTab label="Work Information" style="width:35%" >
  <f:subview id="ltinc3">
    <jsp:include page="employeeWork.jsp" flush="false"/>
  </f:subview>
 </t:panelTab> 
</t:panelTabbedPane>

MyFaces configuration files

Like any other Web frameworks, JSF also has the configuration file to deal with; it contains your managed bean information, navigation rules, and your converter and validation classes. You can define your entire managed bean in one or more configuration files to better organize the content of JSF configuration files. In this use-case, we have two MyFaces configuration files; faces-config.xml and data-config.xml. The first one contains one EmployeeTable managed bean and one navigation rule, as shown in Listing 5; the second file has all the employee data information (see Listing 6):

Listing 5

 <managed-bean>
  <managed-bean-name>employeeTable</managed-bean-name>
  
<managed-bean-class>com.googlehouse.usecases.listtable.EmployeeTable</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  <managed-property>
   <property-name>employees</property-name>
   <property-class>java.util.List</property-class>
   <list-entries>
    
<value-class>com.googlehouse.usecases.listtable.data.Employee</value-class>
    <value>#{employee1}</value>
    <value>#{employee2}</value>
    <value>#{employee3}</value>
    <value>#{employee4}</value>
    <value>#{employee5}</value>
    <value>#{employee6}</value>
    <value>#{employee7}</value>
    <value>#{employee8}</value>
    <value>#{employee9}</value>
    <value>#{employee10}</value>
    
    
   </list-entries>
  </managed-property>
 </managed-bean>
 
 
 
 
 <navigation-rule>
 <navigation-case>
 <from-outcome>home</from-outcome>


 <to-view-id>/employee.jsp</to-view-id>
 
 </navigation-case>
 
 </navigation-rule>

Listing 6

 <faces-config>
 <managed-bean>
  <managed-bean-name>employee1</managed-bean-name>
  
<managed-bean-class>com.googlehouse.usecases.listtable.data.Employee</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
  <managed-property>
   <property-name>address</property-name>
   
<property-class>com.googlehouse.usecases.listtable.data.Address</property-class>
   <value>#{address1}</value>
  </managed-property>
  <managed-property>
   <property-name>firstName</property-name>
   <property-class>java.lang.String</property-class>
   <value>Peter</value>
  </managed-property>
  <managed-property>
   <property-name>lastName</property-name>
   <property-class>java.lang.String</property-class>
   <value>Wang</value>
  </managed-property>
  <managed-property>
   <property-name>middleName</property-name>
   <property-class>java.lang.String</property-class>
   <value/>
  </managed-property>
  <managed-property>
   <property-name>cellPhone</property-name>
   <property-class>java.lang.String</property-class>
   <value>678-923-2719</value>
  </managed-property>
  
  <managed-property>
   <property-name>workPhone</property-name>
   <property-class>java.lang.String</property-class>
   <value>678-923-2719</value>
  </managed-property>
  
  <managed-property>
   <property-name>title</property-name>
   <property-class>java.lang.String</property-class>
   <value>IT Manager</value>
  </managed-property>
  
  <managed-property>
   <property-name>SSN</property-name>
   <property-class>java.lang.String</property-class>
   <value>678-93-2719</value>
  </managed-property>
  
  <managed-property>
   <property-name>emailAddress</property-name>
   <property-class>java.lang.String</property-class>
   <value>pwang33@yahoo.com</value>
  </managed-property>
  
  
  <managed-property>
   <property-name>workEmailAddress</property-name>
   <property-class>java.lang.String</property-class>
   <value>pwang@googlehouse.com</value>
  </managed-property>
  
 </managed-bean>
 <managed-bean>
  <managed-bean-name>address1</managed-bean-name>
  
<managed-bean-class>com.googlehouse.usecases.listtable.data.Address</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
  <managed-property>
   <property-name>addressOne</property-name>
   <property-class>java.lang.String</property-class>
   <value>1234 Google House St</value>
  </managed-property>
  <managed-property>
   <property-name>addressTwo</property-name>
   <property-class>java.lang.String</property-class>
   <value/>
  </managed-property>
  <managed-property>
   <property-name>city</property-name>
   <property-class>java.lang.String</property-class>
   <value>Atlanta</value>
  </managed-property>
  <managed-property>
   <property-name>state</property-name>
   <property-class>java.lang.String</property-class>
   <value>GA</value>
  </managed-property>
  <managed-property>
   <property-name>zipCode</property-name>
   <property-class>java.lang.String</property-class>
   <value>30394</value>
  </managed-property>
 </managed-bean>

Thanks to <t:saveState>, we don't have to declare the EmployeeTable managed bean in the session scope, but in the request scope. The JSF framework injects the employee list content into EmployeeTable's employees attribute for you. This kind of injection is often called IoC, or Inversion of Control. In our case, JSF constructs a list instance based on the <list-entries> value in the configuration file and calls EmployeeTable's setEmployees() method. We only need a navigation rule. When a user clicks on the Cancel button, JSF routes the return page to employee.jsp since the cancel() method returns home as the value:

Listing 7

 public String  cancel()
      {
           setSelectedRowIndex(-1);
           setEmployee(null);
           setShowDetailView(false);
           return "home";
     
     
      }

Set up and run your JSF project

Now that we have done the code review, let’s see how we can run the application. With the help of a free version of the Exadel Studio Eclipse plug-in, you can create an empty JSF project easily. The following quick steps help you get there:

1. Download the free version of the Exadel Studio Eclipse plug-in.
2. Run the Exadel installer, extract the plug-in into the location of your choice, and follow the instructions on the screen to finish the installation.
   
   
3. Start Eclipse. Select File, then New, then Project. Then select Exadel Studio, then JSF, then JSF Project, and click on Next. You will see the following screen.
   
   

   

   Figure 4. Exadel New Project's select-wizard window. Click on thumbnail to view full-sized image.

4. Type your project name in the Project Name field, select MyFaces 1.1.1 as the JSF environment, and MyFacesBlank, or any other template, as your template of choice. You could also introduce your own template in Exadel Studio. Click on Finish to create the JSF project (see Figure 5).
   
   

   

   Figure 5. New JSF Project window. Click on thumbnail to view full-sized image.

   To run our use-case in your Exadel Studio Eclipse environment, you can follow the steps below.

   1. Start Eclipse, select File, then Import, then JSF Project From *.war. Click on Next (see Figure 6).
      
      

      

      Figure 6. Import window. Click on thumbnail to view full-sized image.

   2. Locate the googlehousemyface.war file (available for download from Resources) and type googlehousemyface in the Name and Context Path fields (as shown in Figure 7). Click on Finish when you are done.
      
      

      

      Figure 7. Import JSF Project window. Click on thumbnail to view full-sized image.

   3. Exadel Studio creates the JSF project and publishes the application to the default Tomcat 5.0 server. Once that is done, you will see the screen shown in Figure 8. In the Server view, select Tomcat Server instance and click on the Start Server icon.
      
      

      

      Figure 8. Exadel Tomcat server console window. Click on thumbnail to view full-sized image.

   4. Open your browser and type http://localhost:8080/googlehousemyface/employee.jsf in your browser after the Tomcat instance has started successfully (see Figure 9). For the first-time user, you might have to add tools.jar from the JDK library to your $ExadelStudioHOME\tomcat\common\lib. $ExadelStudioHOME is the home directory of Exadel Studio.
      
      

      

      Figure 9. View employee list. Click on thumbnail to view full-sized image.

      Conclusion

      With just a few MyFaces JSF components like <t:dataTable>, <t:dataScroller>, <t:panelTabbedPane>, and <t:saveState>, we have seen what JSF has promised: a simple and powerful component-based Web application framework. The developer now can leave the details and complexity to the component builder and focus on what's important for the business.

      In this article, I only demonstrate a small fraction of MyFaces components that are part of MyFaces Tomahawk. As of Tomahawk version 1.1.1, about 27 components are ready to use. These Tomahawk components are 100 percent compatible with other JSF 1.1 reference implementations like the Sun RI or MyFaces RI.

      • < Prev
      • 1
      • 2
      • 3
      • Next >