JSF Framework

Home » JSF Framework » Tutorials » Read-Only listGrid

Read-Only listGrid

Incorporating grids in user interfaces is a common task in Web application development, but one which can sometimes be problematic due to large data sources. As demonstrated in this Examples Page, the issue is easily resolved when working with the JSF Edition.

Prerequisites and Intended Audience

Software

The following software is required to build and deploy the example:

  • Backbase Enterprise Ajax 4.1.0 - JSF Edition (and higher)
  • JDK 1.4.2 or above
  • Application server that supports Java Servlets 2.3 and JSP 2.0 specifications

Competencies

Experience to the level indicated is required with the following technologies:

  • Java beginner
  • JSF beginner

Resources

We will use blank.war as the starting point for the example. This is because the example relies on several resources that are outside the example scope but which can be found in the src folder of the blank application, as follows:

  • com.backbase.bjsf.examples.listgrid.common.service.ContactService—interface defining simple service used in the example.
  • com.backbase.bjsf.examples.listgrid.common.service.ContactServiceImpl—mock implementation of the service interface.
  • com.backbase.bjsf.examples.listgrid.common.domain.Contact—domain class used for our example.

Overview

When to use

With the listGrid component you can display data in a list that is feature-rich, including:

  • Column sort and resize
  • Inline editing of data
  • Data source and grid labels with HTML content

There are two modes for using listGrid in the JSF Edition: read-only and editable. The mode is dependent on the markup setting:

  • html—XHTML markup is used during the rendering phase. Using this mode results in better performance but does not allow editing row content inline.
  • btl—BTL markup is used, and allows any BTL widget to be located inside a row cell. This mode renders a richer UI but requires more resources to build the page.

Setting markup to btl is prerequisite to implement an editable grid. In this Examples Page, markup is set to btl in order to Backbase-enrich the grid contents but the grid remains read-only because editable fields and their required listeners are not used.

Feature list

The following features of the listGrid component are demonstrated in this example:

  • Pagination
  • Tooltip integration (cell and column header level)
  • Data can contain rich text and images
  • Row selection - single and multiple selection
  • Sorting (server-side only)

Other features of the listGrid, which are not covered in this example, include:

  • Aligning column label and contents
  • Columns can have specified width, column width can be changed from server
  • Columns of the grid can be hidden
  • Resize columns with user interaction
  • Column headers - labels can contain rich text and images
  • Scrolling - vertical and horizontal
  • Context menu integration

Simple listGrid Implementation

Backing bean implementation

Create the backing bean class:

package com.backbase.bjsf.examples.listgrid.readonly;

import javax.faces.model.ListDataModel;

import com.backbase.bjsf.examples.listgrid.common.service.ContactService;
import com.backbase.bjsf.examples.listgrid.common.service.ContactServiceImpl;

public class ListGridBackingBean {

    /**
     * service instance
     */
    private ContactService service;

    /**
     * default constructor; creates instance of service
     */
    public ListGridBackingBean() {
        service = new ContactServiceImpl();
    }

    public Object getNames() {
        return new ListDataModel(service.getContacts());
    }
}
       

Update the faces-config.xml file with an entry for the backing bean:

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
 "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
 "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
   ...
   <managed-bean>
      <managed-bean-name>bean</managed-bean-name>
      <managed-bean-class>com.backbase.bjsf.examples.listgrid.readonly.ListGridBackingBean</managed-bean-class>
      <managed-bean-scope>session</managed-bean-scope>
   </managed-bean>
   ...
</faces-config>
       

JSP implementation

In this substep you create an empty JSP, add the listGrid component, and set certain of its attributes, as follows:

  • id—a unique identifier for the component
  • value—current local value of the listGrid
  • var—variable name used to reference to current row object
  • markup—sets the type of renderer. In this example, the html setting, meaning that the listGrid is read-only.
<!--  -->
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.backbase.com/2007/jsf" prefix="bjsf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
   
        <title>Read-only listGrid</title>
    </head>
    <body>
        <f:view xmlns:f="http://java.sun.com/jsf/core">
            <bjsf:application xmlns:bjsf="http://www.backbase.com/2007/jsf">
                <f:verbatim>
                    <xi:include xmlns:xi="http://www.w3.org/2001/XInclude" href="<%=application.getInitParameter('com.backbase.bjsf.CLIENT_BOOT_DIR')%>/bindings/config.xhtml_btl.chameleon.xml" parse="xml"></xi:include>
                    <xi:include xmlns:xi="http://www.w3.org/2001/XInclude" href="<%=application.getInitParameter('com.backbase.bjsf.CLIENT_BOOT_DIR')%>/bindings/www.backbase.com.2007.jsf.client/server.xml" parse="xml"></xi:include>
                    <bjsfc:server xmlns:bjsfc="http://www.backbase.com/2007/jsf/client" url="listgrid.jsf" identify="id" loadingMessage="__loadingMsg"></bjsfc:server>
                    <b:loadingMessage xmlns:b="http://www.backbase.com/2006/btl" id="__loadingMsg">Loading...</b:loadingMessage>
                </f:verbatim>
                <bjsf:listGrid id="listGrid1" markup="btl" value="#{bean.names}" var="contact">
                    <bjsf:column>
                        <bjsf:outputText value="#{contact.firstName}"></bjsf:outputText>
                    </bjsf:column>
                    <bjsf:column>
                        <bjsf:outputText value="#{contact.lastName}"></bjsf:outputText>
                    </bjsf:column>
                    <bjsf:column>
                        <bjsf:outputText value="#{contact.address}"></bjsf:outputText>
                    </bjsf:column>
                    <bjsf:column>
                        <bjsf:outputText value="#{contact.mobile}"></bjsf:outputText>
                    </bjsf:column>
                </bjsf:listGrid>
            </bjsf:application>
        </f:view>
    </body>
</html>
       

JSP enhancements

To enrich the view, define column headers and tooltips in the JSP:

...
<bjsf:listGrid xmlns:bjsf="http://www.backbase.com/2007/jsf" id="listGrid1" value="#{bean.names}" var="contact">
    <bjsf:column>
        <f:facet xmlns:f="http://java.sun.com/jsf/core" name="header">
            <bjsf:outputText value="First Name"></bjsf:outputText>
        </f:facet>
        <bjsf:outputText value="#{contact.firstName}"></bjsf:outputText>
        <bjsf:toolTip>
            <bjsf:outputText value="#{contact.firstName} "></bjsf:outputText>
            <bjsf:outputText value="#{contact.lastName} tooltip"></bjsf:outputText>
        </bjsf:toolTip>
    </bjsf:column>
    ...
</bjsf:listGrid>
...
       

Paging

To add paging, the following changes are required:

  1. Set the listGrid page size using the pageSize attribute
  2. Add a pager component

These requirements are implemented in the JSP:

...
<bjsf:pager xmlns:bjsf="http://www.backbase.com/2007/jsf" for="listGrid1"></bjsf:pager>
<bjsf:listGrid xmlns:bjsf="http://www.backbase.com/2007/jsf" id="listGrid1" value="#{bean.names}" var="contact" pageSize="5">
    ...
</bjsf:listGrid>
...
     

Sorting

To add sorting capabilities, changes are required to both the backing bean and the JSP.

Backing bean changes

Changes to the Java class consists of two parts:

  1. Add a method to the backing bean with the same name as the sortListener setting. This method will have a parameter of type com.backbase.bjsf.event.SortEvent.
  2. Make the instance of the listGrid component available to the backing bean class by adding a field of the type UIBackbaseListGrid and a getter and setter.

These requirements are implemented in the following listing. Notice that sorting is performed by the listGrid.refresh method, which processes an instance of javax.faces.model.DataModel that is based on real data in the service class.

public class ListGridBackingBean {

    private UIBackbaseListGrid listGrid;
    ...
    public UIBackbaseListGrid getListGrid() {
        return listGrid;
    }

    public void setListGrid(UIBackbaseListGrid listGrid) {
        this.listGrid = listGrid;
    }
    ...
    public void sort(SortEvent event) {
        int columnIndex = event.getColumnIndex();
        String columnLabel = event.getColumnLabel();
        boolean reverse = event.isReverse();
        if (reverse == true) {
            listGrid.refresh(new ListDataModel(service.getContacts(columnLabel,
                    ContactService.DESC)));
        } else {
            listGrid.refresh(new ListDataModel(service.getContacts(columnLabel,
                    ContactService.ASC)));
        }
        System.out.print("sort by");
        System.out.print(" columIndex=" + columnIndex);
        System.out.print(" columnLabel=" + columnLabel);
        System.out.println(" reverse=" + reverse);
    }
    ...
}
       

JSP changes

Set the attribute sortListener attribute on the listGrid, and bind the component to the backing bean field using binding.

...
<bjsf:listGrid xmlns:bjsf="http://www.backbase.com/2007/jsf" binding="#{bean.listGrid}" sortListener="#{bean.sort}">
    ...
</bjsf:listGrid>
...
       

Row selection

The JSF Edition supports executing server-side code upon row selection.

Backing bean changes

In the backing bean, add a new method which accepts one parameter of the type com.backbase.bjsf.event.SelectEvent:

public class ListGridBackingBean {
    ...
    public void select(SelectEvent event) {
        int rowIndex = event.getRowIndex();
        System.out.println("select");
        System.out.println("rowIndex = " + rowIndex);
    }
    ...
}
       

JSP changes

In the JSP, set the selectListener attribute to the method name.

...
<bjsf:listGrid xmlns:bjsf="http://www.backbase.com/2007/jsf" selectListener="#{bean.select}">
    ...
</bjsf:listGrid>
...
       

Live Demo

This examples page has demonstrated the procedures to introduce interactive data presentation components, using the listGrid component to demonstrate how you can display data in a feature-rich list.

In the following live demo, the pagination, tooltip integration, row selection, and sorting implemented in the preceding steps is shown:

Additional Resources

For more information, please refer to the following documentation, examples and reference material: