Thursday, May 24, 2012

JSF - Richfaces Datatable

A very common scenario in UI is to show a data table.

Usually a method gets a list of objects from a database, and we need to present them as a table.

Let us use Richfaces to display such a data table.

In your /src/main/java/org/confucius, create a class called Greet.java like this:

 package org.confucius;  
 public class Greet {  
      private String language;  
      private String greeting;  
      public Greet(String language, String greeting) {  
           this.language = language;  
           this.greeting = greeting;  
      }  
      public String getLanguage() {  
           return language;  
      }  
      public void setLanguage(String language) {  
           this.language = language;  
      }  
      public String getGreeting() {  
           return greeting;  
      }  
      public void setGreeting(String greeting) {  
           this.greeting = greeting;  
      }  
 }  

In your HelloBean.java, create a new method which returns a List of Greet objects, like this:

 package org.confucius;  
 import java.util.ArrayList;  
 import java.util.List;  
 import javax.faces.bean.ManagedBean;  
 import javax.faces.bean.SessionScoped;  
 @ManagedBean(name="helloBean")  
 @SessionScoped  
 public class HelloBean {  
      private String greeting;  
      public HelloBean(){  
           this.greeting = "Hello World JSF!";  
      }  
      public String getGreeting() {  
           return this.greeting;  
      }  
      public void setGreeting(String greeting) {  
           this.greeting = greeting;  
      }  
      public String getInternationalGreets() {  
           return "international_greets";  
      }  
      public String getAmericanGreets() {  
           return "american_greets";  
      }  
      public List<Greet> getInternationalGreetsList(){  
           List<Greet> greetList = new ArrayList<Greet>();  
           Greet englishGreet = new Greet("English", "Hello World!");  
           greetList.add(englishGreet);  
           Greet frenchGreet = new Greet("French", "Bonjour tout le Monde!");  
           greetList.add(frenchGreet);  
           Greet italianGreet = new Greet("Italian", "Buongiorno a Tutti!");  
           greetList.add(italianGreet);  
           Greet spanishGreet = new Greet("Spanish", "Hola Mundo!");  
           greetList.add(spanishGreet);  
           Greet swahiliGreet = new Greet("Swahili", "Jambo!");  
           greetList.add(swahiliGreet);  
           return greetList;  
      }  
 }  

Update your international_greets.xhtml to display the Greet objects in a data table, like this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <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:rich="http://richfaces.org/rich">  
       <ui:composition template="/templates/template.xhtml">  
           <ui:define name="title">International Greets</ui:define>  
           <ui:define name="content">  
                <h:form>  
               <rich:dataTable value="#{helloBean.internationalGreetsList}" var="greet" id="greettable">  
                      <rich:column>  
                        <f:facet name="header">  
                          <h:outputText value="Language"/>  
                                  </f:facet>  
                     <h:outputText value="#{greet.language}"/>                  
                      </rich:column>  
                      <rich:column>  
                        <f:facet name="header">  
                          <h:outputText value="Greeting"/>  
                                  </f:facet>  
                     <h:outputText value="#{greet.greeting}"/>                  
                      </rich:column>  
               </rich:dataTable>  
                </h:form>  
           </ui:define>  
   </ui:composition>  
 </html>  

The Richfaces DataTable will automatically iterate through the list, and populate the table.

If you rebuild and redeploy HelloWorldJSF, you will see a DataTable displaying all the greets in different languages.

No comments: