A Rich datatable

The Datatable is used to show  tabular data. Additional to the standard <h:dataTable>, this component enables row and column spans for columns, a flexible layout for a header and a footer. DataTable supports "master-detail" pattern and allows to show the combination of a master table and detail sub-tables.


The following example shows a rich:dataTable component in use:

 


<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib
uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib
uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib
uri="http://java.sun.com/jsf/core" prefix="f"%>

<style type="text/css">
    .row1 {
    background-color: #EDEBEB;
    font-size: 10px;
    }
    .row2 {
    background-color: #ffffff;
    font-size: 10px;
    }

</style>

<html>


    <body>
        <f:view>
            <h:form>

                <rich:simpleTogglePanel switchType="client"
                    label="Trouble Ticketing system">
                    <rich:dataTable value="#{TaskListBean.dataList}"
                        var="dataItem" rowClasses="row1, row2" id="taskList" rows="4"
                        columnClasses="50,100,100,100" onRowMouseOver="this.style.backgroundColor='#B5F3FB'"
                        onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
                        width="350">
                        <f:facet name="header">
                            <rich:columnGroup>

                                <rich:column colspan="4">
                                    <h:outputText value="Trouble Tickets opened" />
                                </rich:column>

                                <rich:column breakBefore="true">
                                    <h:outputText value="Ticket Id" />
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="Status" />
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="Actor" />
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="Description" />
                                </rich:column>

                            </rich:columnGroup>
                        </f:facet>

                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value=" "
                                    title="Hack due to bug. Shuold be remoevd till release"></h:outputText>
                            </f:facet>
                            <h:outputText value="#{dataItem.taskInstanceId}" />

                        </rich:column>

                        <rich:column>
                            <h:outputText value="#{dataItem.taskNode}" />

                        </rich:column>

                        <rich:column>
                            <h:outputText value="#{dataItem.actorId}" />
                        </rich:column>

                        <rich:column>
                            <h:outputText value="#{dataItem.description}" />
                        </rich:column>

                    </rich:dataTable>
                    <rich:datascroller align="left" for="taskList"
                        maxPages="20" />
                </rich:simpleTogglePanel>
            </h:form>
        </f:view>

    </body>
</html>

The view needs a Backing bean to hold the Datalist of objects:

package com.sample;

import java.util.ArrayList;
import java.util.List;

public class TaskListBean   {

    private ArrayList dataList;

    public void loadDataList() {     

        dataList = new ArrayList();

        TaskListData data1 = new TaskListData();
        data1.setTaskInstanceId(1000l);
        data1.setActorId("Willy smith");
        data1.setTaskNode("In Charge");
        data1.setDescription("CR 123456");


        TaskListData data2 = new TaskListData();
        data2.setTaskInstanceId(1001l);
        data2.setActorId("Frank Sinatra");
        data2.setTaskNode("Rejected");
        data2.setDescription("CR 654321");

        dataList.add(data1);
        dataList.add(data2);

    }

    public List <TaskListData> getDataList() {        
        loadDataList();
        return dataList;
    }

}

package com.sample;

public class TaskListData {
    private String taskNode;
    private long taskInstanceId;
    private String actorId;
    private String description;

    public String getActorId() {
        return actorId;
    }
    public void setActorId(String actorId) {
        this.actorId = actorId;
    }
    public String getTaskNode() {
        return taskNode;
    }
    public void setTaskNode(String currentNode) {
        this.taskNode = currentNode;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public long getTaskInstanceId() {
        return taskInstanceId;
    }
    public void setTaskInstanceId(long taskInstanceId) {
        this.taskInstanceId = taskInstanceId;
    }
}

As you can see the dataList holds a couple of TaskListData objects, which are diplayed in the view.
remember: you need to register the Bean into facesconfig.xml 


<faces-config>
     <managed-bean>
       <managed-bean-name>TaskListBean</managed-bean-name>
       <managed-bean-class>com.sample.TaskListBean</managed-bean-class>
       <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
</faces-config>

This is the datatable created:
jboss richfaces demo
A few words about the Rich components:

The datatable is hold inside a  simpleTogglePanel. The Toggle Panel renders sequence of components that can be switched (toggled) by a component called Toggle Control.

switchType attribute defines the strategy of switching. The possible values for this attributes are:

client - switching happens on the client without any request to the server. The jsf form is not required in this mode
ajax - when states are switched, the content of new states comes from the server in Ajax way.
server - the whole page is reloaded when states are switched

RichDatatable is similar to the standard Datatable: in this sample you defined two styles (row1,row2) which will be used to alternate the colour of the single rows. Also you define the width of the single columns with columnClasses and the background when you move Over/out with the mouse.


<rich:dataTable value="#{TaskListBean.dataList}" var="dataItem"
      rowClasses="row1, row2" id="taskList"  rows="4"
      columnClasses="50,100,100,100"
      onRowMouseOver="this.style.backgroundColor='#B5F3FB'"
      onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
      width="350">

 

Notice at the bottom the datascroller which will be used to scroll between items when the items are more then the "rows" field of the datatable.

 <rich:datascroller align="left" for="taskList" maxPages="20" />

0
0
0
s2smodern