How to create a table component dynamically

One of the questions often asked by the Sun Java Studio Creator customers is - How to create a table component dynamically?. This tip gives some hint on how to create a table component programmatically in a web application.

The preferred way to create a table component is by dragging and dropping it from the palette on to the designer and then bind it to a data provider. However, some advance users might want to create the table component programmatically based on some dynamic logic.

Creating a table component programmatically is tedious and requires a bit of coding by hand (not a recommended way, unless absolutely necessary). I've created a sample project to explain how to achieve this. This project can be downloaded from here.

Steps:

Let us say we already have a data provider and want to create a table component programmatically and bind it to this data provider.

Create a project (call it DynamicTable).
Drag and drop a JDBC table from the servers tab, say Data Sources -> travel -> trip, on to the designer.
This would create the data provider called tripDataProvider
Drag and drop Palette -> Layout -> Grid Panel on to the designer
Edit the java source (page1.java) and add the method createTable()(Listing 1)
Now create and add the table component to the Grid Panel in the method getGridPanel()
(expand the code fold Creator-managed component definition to see the method).(Listing 2)
Since you have not dragged and dropped the table component on to the designer your JSP page will look much simpler as in Listing 3
Deploy the application and the page should look as in Figure 1.

The table component is created dynamically and bound to the data provider. As you can see from listing 1, the amount of code required to create a table component programmatically is tediously high, compared to, how a simple drag and drop would do most of the work for you.

Note: If you want to create more than one table make sure the setId() of the table, table row group, table column and static text are unique. More over if the page is resubmitted, table and its sub components are reconstructed by faces application during restore view phase, so they should not be recreated again.

Listing 1:

    private Table createTable() {
       //Create the Table Dynamically
        Table table = new Table();
        table.setId("table1");
        table.setTitle("Dynamically Created Table"); 
        table.setPaginateButton(true);
        table.setPaginationControls(true);
        
        // Create the Table Row group dynamically
        TableRowGroup rowGroup = new TableRowGroup();
        rowGroup.setId("rowGroup1");  
        rowGroup.setSourceVar("currentRow");  
        rowGroup.setValueBinding("sourceData", getApplication().
              createValueBinding("#{Page1.tripDataProvider}"));
        rowGroup.setRows(5);
        
        // Add the table row group to the table as a child
        table.getChildren().add(rowGroup);
        
        // Create the first table Column
        TableColumn tableColumn1 = new TableColumn();
        tableColumn1.setId("tableColumn1");
        tableColumn1.setHeaderText("Trip ID");
        
        // Add the first table Column to the table row group
        rowGroup.getChildren().add(tableColumn1);
        
        // Create the Static text and set its value as TRIPID
        StaticText staticText1 = new StaticText();
        staticText1.setValueBinding("text", getApplication().
            createValueBinding("#{currentRow.value['TRIP.TRIPID']}"));
        
        // Add the static text to the table column1
        tableColumn1.getChildren().add(staticText1);
        
        // Create the second table Column
        TableColumn tableColumn2 = new TableColumn();
        tableColumn2.setId("tableColumn2"); 
        tableColumn2.setHeaderText("Trip Date");
        
        // Add the second table Column to the table row group
        rowGroup.getChildren().add(tableColumn2);
        
        // Create the Static text and set its value as DEPDATE
        StaticText staticText2 = new StaticText();
        staticText2.setValueBinding("text", getApplication().
                   createValueBinding("#{currentRow.value['TRIP.DEPDATE']}"));
        
        // Add the Static Text2 to the table column2
        tableColumn2.getChildren().add(staticText2);
        
        // Create the third table Column
        TableColumn tableColumn3 = new TableColumn();
        tableColumn3.setId("tableColumn3"); 
        tableColumn3.setHeaderText("Departure City");
        
        // Add the third table Column to the table row group
        rowGroup.getChildren().add(tableColumn3);
        
        // Create the Static text and set its value as DEPDATE
        StaticText staticText3 = new StaticText();
        staticText3.setValueBinding("text", getApplication().
                 createValueBinding("#{currentRow.value['TRIP.DEPCITY']}"));
        
        // Add the Static Text3 to the table column3
        tableColumn3.getChildren().add(staticText3);

        return table;
    }

Listing 2:

    public HtmlPanelGrid getGridPanel1() {
        // Add the dynamically created table to the grid panel
        Table dynamicTable =  createTable();
        gridPanel1.getChildren().add(dynamicTable);
        return gridPanel1;
    }

Listing 3:

 
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" 
        xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
   <f:view>
        <ui:page binding="#{Page1.page1}" id="page1">
            <ui:html binding="#{Page1.html1}" id="html1">
                <ui:head binding="#{Page1.head1}" id="head1">
                  <ui:link binding="#{Page1.link1}" id="link1" url="/resources/stylesheet.css"/>
                </ui:head>
                <ui:body binding="#{Page1.body1}" id="body1" style="-rave-layout: grid">
                    <ui:form binding="#{Page1.form1}" id="form1">
                        <h:panelGrid binding="#{Page1.gridPanel1}" id="gridPanel1" 
                          style="height: 96px; left: 24px; top: 24px; position: absolute" width="168"/>
                    </ui:form>
            </ui:body>
          </ui:html>
      </ui:page>
   </f:view>
</jsp:root>

Figure 1:

Dr. Winston Prakash Ph.D.

Personal Website

How to create a table component dynamically