How to display data table in JSF page with database data

Question

I have a table in a database which is used for storing application configuration data.

This is the table structure - it's very simple example:

SessionTTL             MaxActiveUsers         
---------------------- ---------------------- 
30                     787                    

I want to display the table data in this way:

<table border="1">
   <tr>
     <td>SessionTTL</td>
     <td>30</td>
   </tr>
   <tr>
     <td>MaxActiveUsers</td>
     <td>787</td>
   </tr>
   <tr>
     <td>option</td>
     <td>value</td>
   </tr>
   <tr>
     <td>option</td>
     <td>value</td>
   </tr>
</table> 

I tried to display the data using this JSF code and this Java code, but the result was not what I want:

              <h:dataTable id="books"
                         columnClasses="list-column-center,
                         list-column-right, list-column-center,
                         list-column-right" headerClass="list-header"
                         rowClasses="list-row" styleClass="list-
                         background" value="#{DashboardController.getDashboardList()}" var="store">   
                <h:column>
                      <h:outputText  value="Session Timeout"/>
                      <h:outputText  value="Maximum Logged Users"/>
                </h:column>
                <h:column>                       
                      <h:outputText value="#{store.sessionTTL} minutes"/>
                      <h:outputText value="#{store.maxActiveUsers}"/>
                </h:column>

            </h:dataTable> 




public List<Dashboard> getDashboardList()throws SQLException{

        List<Dashboard> list = new ArrayList<Dashboard>();

        if(ds == null) {
                throw new SQLException("Can't get data source");
        }

        Connection conn = ds.getConnection(); 

        if(conn == null) {
                throw new SQLException("Can't get database connection");
        }

        PreparedStatement ps = conn.prepareStatement("SELECT * from GLOBALSETTINGS");

        try{
            //get data from database        
            ResultSet result = ps.executeQuery();
            while (result.next()){
                Dashboard cust = new Dashboard();
                cust.setSessionTTL(result.getString("SessionTTL"));
                cust.setMaxActiveUsers(result.getString("MaxActiveUsers"));
                list.add(cust);
            }
        }
        catch(Exception e1){
            // Log the exception.
        }
        finally{
            try{
                ps.close();
                conn.close();
            }
            catch(Exception e2){
                // Log the exception.
            }
        }
        return list; 
    }

How I can display the data the way I want?

Best wishes

Answer 1

getDataList() you can write some normal getter method. you write some of the method dataList() and implement your business code in that method.

Method declaration in the xhtml or jsp file in dataTable in jsf.

<h:dataTable id="books" type="submit" value="#{DashboardController.dataList}" var="dashbord">

   <h: column name="ID">

      <f:facet name="header">

         <h:outputText value="#{dashbord.id}"/>

      </f:facet>

   </h:column>

...your another columns...

</h:dataTable>

Answer 2

You must not assign the get method with the parenthesis. You must use a List attribute from your managed bean.

value="#{DashboardController.getDashboardList()}" //WRONG!

Your managed bean should look like this:

public class DashboardController {
    private List<Dashboard> lstDashboard;
    public DashboardController() {
        try {
            lstDashboard = getDashboardList();
        } catch (Exception e) {
            //log the exception or something else...
        }
    }
    //getter and setter...
    public List<Dashboard> getLstDashboard() {
        return this.lstDashboard;
    }
    public void setLstDashboard(List<Dashboard> lstDashboard) {
        this.lstDashboard = lstDashboard;
    }
    //your other methods here...
}

Second, you set the design of every column in your table, not the design of the rows. You're setting 1 column with 2 values and another column with the real output.

Fixing your datatable code:

<h:dataTable id="books"
    columnClasses="list-column-center,
        list-column-right, list-column-center,
        list-column-right" headerClass="list-header"
        rowClasses="list-row"
    styleClass="list-background"
    value="#{DashboardController.lstDashboard}"
    var="store">   

    <h:column>
        <f:facet name="header">
            <h:outputText value="Session Timeout" />
        </f:facet>
        <h:outputText value="#{store.sessionTTL} minutes"/>
    </h:column>
    <h:column>                       
        <f:facet name="header">
            <h:outputText value="MaxActiveUsers" />
        </f:facet>
        <h:outputText value="#{store.maxActiveUsers}"/>
    </h:column>

</h:dataTable> 

@BalusC is the StackOverflow JSF expert. He has a very nice example about using JSF DataTable in his blog entry.

Answer 3

Besides some design flaws that I already remarked in your previous questions, at least you have to use the correct value attribute for your dataTable.

Replace:

value="#{DashboardController.getDashboardList()}"

with:

value="#{DashboardController.dashboardList}"

The "get" prefix will automatically be added. The brackets can be omitted.