Guide‎ > ‎JSF 2.0‎ > ‎

3. Getting Started - Simple Datatable with Managed bean in JSF 2.0

Create New Java Class For Bean

right click source package create new java class named as Person (or your wish) and mention package name com.thiyagaraaj.example(or your wish).

Step 1:

Create three Variables Name,No and Address (depending upon Faclets (refer previous chapter)).

Step 2:

Declare Constructor for these variables.

Step 3:

Create Getter and Setter Functions for three Variables.

Full Code For Data Model Java Class

package com.thiyagaraaj.example;

/**
 *
 * @author thiyagaraaj
 * @webiste little drops @ thiyagaraaj.com
 */
public class Person {
    String Name;
    String No;
    String Address;    

    public Person(String Name, String No, String Address) {
        this.Name = Name;
        this.No = No;
        this.Address = Address;
    }

    public String getAddress() {
        return Address;
    }

    public void setAddress(String Address) {
        this.Address = Address;
    }

    public String getName() {
        return Name;
    }

    public void setName(String Name) {
        this.Name = Name;
    }

    public String getNo() {
        return No;
    }

    public void setNo(String No) {
        this.No = No;
    }             
}

Create Manages Bean with session Scope

Step 1:  Create New JSF Manged Bean

  • Right Click com.thiyagaraaj.example package select New -> Other .
  • Select JavaServerFaces -> JSF Managed Bean in Dialog Box (see figure).
  • Click Next.

Step 2: Set Session Scope for JSF Managed Bean:

  • Give Class Name PersonController(Your Wish).
  • In Scope you choose session
  • Click Finish

Step 3 : Create List Varibale for DataTable

Create List Variable for Person in PersonController Class (this list varibale will have all data of the Person)
List<Person> personList = new ArrayList<Person>();

create Getter and Setter for this List Variable
    // Getter and Setter Methods

    public List<Person> getPersonList() {
        return personList;
    }

    public void setPersonList(List<Person> personList) {
        this.personList = personList;
    }

Step 4 : Declare default Values in Constructor

create constructor and declare values in PersonController Class
public PersonController() {
        personList.add(new Person("Google","1","Search Engine"));
        personList.add(new Person("Windows","2","Operating System"));
        personList.add(new Person("Oracle","3","Database"));
        personList.add(new Person("Facebook","4","Social Networking"));
    }

Full Code of the Managed Bean Class


package com.thiyagaraaj.example;

import com.thiyagaraaj.example.Person;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

/**
 *
 * @author thiyagaraaj
 * @webiste little drops @ thiyagaraaj.com
 */

@ManagedBean
@SessionScoped
public class PersonController {

    List<Person> personList = new ArrayList<Person>();
    /** Creates a new instance of PersonController */
    public PersonController() {
        personList.add(new Person("Google","1","Search Engine"));
        personList.add(new Person("Windows","2","Operating System"));
        personList.add(new Person("Oracle","3","Database"));
        personList.add(new Person("Facebook","4","Social Networking"));
    }    
    
    // Getter and Setter Methods
    public List<Person> getPersonList() {
        return personList;
    }

    public void setPersonList(List<Person> personList) {
        this.personList = personList;
    }    
}

Declare Datatable In Facelets(XHTML) for List

Step 1: Meaning

DataTable Value Is personList.here variable local variable name is person. Datatable act as a loop. It automatically filled all values. no need for loop.           

Step 2: Insert these Code in index XHTML 

            <p:dataTable value="#{personController.personList}" var="person">
                <p:column>
                    <f:facet name="header">Name</f:facet>  
                    <h:outputText value="#{person.name}"/>
                </p:column> 
                <p:column>
                    <f:facet name="header">Number</f:facet>  
                    <h:outputText value="#{person.no}"/>
                </p:column> 
                <p:column>
                    <f:facet name="header">Address</f:facet>  
                    <h:outputText value="#{person.address}"/>
                </p:column> 
            </p:dataTable>

Full Code of the Index Facelet(XHTML)

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <p:panel header="Simple Form in JSF 2.0 - little drops @ thiyagaraaj.com">
                <h:panelGrid columns="2">
                    <h:outputText value="Name" />  
                    <p:inputText />
                    <h:outputText value="No" />                      
                    <p:inputText/>
                    <h:outputText value="Address" />  
                    <p:inputText/>

                </h:panelGrid>
                <f:facet name="footer">    
                    <p:commandButton value="Finish"  onclick="dlg1.show();" type="button" />
                </f:facet>
            </p:panel>
            <p:dialog header="Conformation Dialog" widgetVar="dlg1" width="500">
            Simple Form In JSF 2.0 - little drops @ thiyagaraaj.com</p:dialog>
            <p:separator/>
            <p:dataTable value="#{personController.personList}" var="person">
                <p:column>
                    <f:facet name="header">Name</f:facet>  
                    <h:outputText value="#{person.name}"/>
                </p:column> 
                <p:column>
                    <f:facet name="header">Number</f:facet>  
                    <h:outputText value="#{person.no}"/>
                </p:column> 
                <p:column>
                    <f:facet name="header">Address</f:facet>  
                    <h:outputText value="#{person.address}"/>
                </p:column> 
            </p:dataTable>
        </h:form>
    </h:body>
</html>

Sample Output:

now you can run. output is.