Table-Detail-View with RichFaces Data Table

AJAX !!

It’s a common task in almost every application to show a table with a list of items and a detail view with one selected item of the table. RichFaces provides a data table component with a lot of sorting and ordering features called extendedDataTable. I will show how to implement the selection of one item of the table and display the item data in separate detail component. All action is done by AJAX requests without a page reload. You need a JSF application and RichFaces components to run this. To get started see the RichFaces Developer Guide.

In your JSF backing bean you need two properties holding your data, one for the list of items and one for the selected item. In the code sample they are called taskList and selectedTask. The list values are displayed in the extendedDataTable. If the user clicks one row the selected item is set as selectedTask in the bean. There are two more fields in the bean holding Richfaces data to implement the selection of table items: table and selection. You have to add them to your bean. Disadvantage is that your nice POJO now depends on RichFaces classes. Both are bind to extendedDataTable as you can see in the second code sample.

Loading of list items is done in loadTasks() which is called only once. Selecting of a item is done in method openTask() which is called when user clicks a table row.

public class TaskBean {
    
    List<ITask> taskList;
    ITask selectedTask;
    
    private HtmlExtendedDataTable table;
    private Selection selection = new SimpleSelection();
    
    public void openTask() {  
        Iterator<Object> iterator = getSelection().getKeys();
        while (iterator.hasNext()) {
            Object key = iterator.next();
            table.setRowKey(key);
            if (table.isRowAvailable()) {
                setSelectedTask( (ITask) table.getRowData());
            }
        }     
    }

    public List<ITask> loadTasks() {   
        return taskList = getTaskService().getTaskList();
    }

    public List<ITask> getTaskList() {
        if(this.taskList==null) {
            this.taskList = loadTasks();
        }
        return taskList;
    }
    public void setTaskList(List<ITask> taskList) {     
        this.taskList = taskList;
    }

    public ITask getSelectedTask() {
        return selectedTask;
    }
    public void setSelectedTask(ITask selectedTask) {
        this.selectedTask = selectedTask;
    }

    public HtmlExtendedDataTable getTable() {
        return table;
    }
    public void setTable(HtmlExtendedDataTable table) {
        this.table = table;
    }

    public Selection getSelection() {
        return selection;
    }
    public void setSelection(Selection selection) {
        this.selection = selection;
    }
    
    private ITaskService getTaskService() {
        return (ITaskService) VeriniceContext.get(VeriniceContext.TASK_SERVICE);
    }
}

In your template you have to add a rich:extendedDataTable. Several attributes are bind to the backing bean:

  • value=“#{task.taskList}“ – The item list to dispaly in the table
  • var=“item“ – Variable name used while iterating the list.
  • binding=“#{task.table}“ – Richfaces class to hold table data, instance of org.richfaces.component.html.HtmlExtendedDataTable
  • selection=“#{task.selection}“ – Richfaces class to hold table selection, instance of org.richfaces.model.selection.Selection

There is an important nested element inside extendedDataTable: a4j:support, which handles the selection of items. When user clicks on a table row it executes the openTask method in the bean and re-renders the detailPanel afterwards. In this example the detail panel only shows the tile of the selected item. Of course you add more attributes here or to show or edit the item.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      template="/template.xhtml">
	<ui:define name="content">
		<a4j:outputPanel id="tablePanel">	     
			 <rich:extendedDataTable
			 	id="taskTable"
                value="#{task.taskList}" 
                var="item"
                binding="#{task.table}"
                selectionMode="single"
                selection="#{task.selection}"
                width="344">						                
                <rich:column id="colTitle"
					sortable="true" 
					sortBy="#{item.name}"
                    label="#{msgTask['title']}"
                    width="130">
                    <f:facet name="header">
                        <h:outputText value="#{msgTask['title']}" />
                    </f:facet>
                    <h:outputText value="#{item.name}"/>
                </rich:column>			                		                
                <rich:column id="colDate"
					sortable="true" 
					sortBy="#{item.createDate}"
                    label="bis"
                    width="84">
                    <f:facet name="header">
                        <h:outputText value="#{msgTask['createDate']}" />
                    </f:facet>
                    <h:outputText value="#{item.createDate}">
				    	<f:convertDateTime dateStyle="short" type="date" timeZone="#{task.timeZone}" />
				    </h:outputText>
                </rich:column>
                <a4j:support reRender="detailPanel"
	                    action="#{task.openTask}"
	                    event="onselectionchange" />					 
            </rich:extendedDataTable>				
		</a4j:outputPanel>
		<a4j:outputPanel id="detailPanel">
			<h:outputText value="#{task.selectedTask.name}"/>
		</a4j:outputPanel>				
	</ui:define>
</ui:composition>
  1. No trackbacks yet.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: