Monday Sep 02

JSF datatable example

PDF Print E-mail
Thursday, 02 June 2011 16:50
AddThis Social Bookmark Button

In this example, we’re going to use the JSF h:datatable tag and system properties to display a simple table. I will show you how to define a simple data model returned with a backing bean.

Definition of the backing bean data provider

JSF backing bean definition for datatable

public class ApplicationBB extends BaseBackingBean {
    public List<SystemProperty> getSystemProperties(){
        List<SystemProperty> result = new ArrayList<SystemProperty>();
        Properties props = System.getProperties();
        SortedMap<String,String> sortedSystemProperties = new TreeMap(props);
        Set<String> keySet = sortedSystemProperties.keySet();
        Iterator<String> iterator = keySet.iterator();
        while (iterator.hasNext()) {
            String key =;
            result.add (new SystemProperty(key, props.getProperty(key)));
        return result;

    public class SystemProperty implements Serializable{
        private static final long serialVersionUID = 1L;
        private final String key;
        private final String value;
        public SystemProperty(String key, String value) {
            this.key = key;
            this.value = value;
        public String getKey() {
            return key;

        public String getValue() {
            return value;

We have an Application backing bean called applicationBB thanks to the default name derived from the managed bean annotation . The backing bean has a bean property called systemProperties returning the a sorted list of SystemProperty object.

Displaying the data in a datatable

datatable jsf page

<ui:composition xmlns=""

<ui:define name="title">
    <ubiteck:text key="system"/>

<ui:define name="content">
<h:dataTable id="systemPropertiesTable" value="#{applicationBB.systemProperties}" var="prop">
        <f:facet name="header"><h:outputText style="font-weight: bold;" value="Key"/></f:facet>
        <f:facet name="header"><h:outputText style="font-weight: bold;" value="value"/></f:facet>

Datatable display

As a conclusionof the short tutorial the resulting page should look like the table below :


Key value
awt.nativeDoubleBuffering true
awt.toolkit apple.awt.CToolkit
catalina.base /Applications/Tomcat-7.0.12
catalina.home /Applications/Tomcat-7.0.12
catalina.useNaming true
common.loader ${catalina.base}/lib,${catalina.base}/lib/*.jar,${catalina.home}/lib,${catalina.home}/lib/*.jar
file.encoding MacRoman
file.separator /
ftp.nonProxyHosts local|*.local|169.254/16|*.169.254/16
gopherProxySet false
http.nonProxyHosts local|*.local|169.254/16|*.169.254/16
java.awt.graphicsenv apple.awt.CGraphicsEnvironment
java.awt.printerjob apple.awt.CPrinterJob
java.class.path /Applications/Tomcat-7.0.12/bin/bootstrap.jar:/Applications/Tomcat-7.0.12/bin/tomcat-juli.jar
java.class.version 50.0
java.endorsed.dirs /Applications/Tomcat-7.0.12/endorsed
java.ext.dirs /Library/Java/Extensions:/System/Library/Java/Extensions:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/lib/ext
java.home /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home


Tags: http , bean , public , xmlns , system , facet , value= , name= , data , datatable , backing , column , define

Add comment

Security code

Java Tutorial on Facebook