John W Baker's Weblog

In previous blog entries, I've briefly discussed a Creator 1.0-built Dashboard architecture and showed some screenshots.

Today, I'll discuss the central point of a Dashboard - how to dynamically populate a Table with relevant data. The features of Creator used to develop such a Dashboard are the Table component, Java ArrayList, POJO (plain old Java object), ObjectArrayDataProvider and CachedRowSetDataProvider and a SessionBean.

First I need to determine the type of data to display. For this example, I want to display Criteria description, status text, status color, and the count (against the Criteria). Each data item will represent a column in a Table. Each column will be represented by a POJO, a Java class with fields and accessors, like a struct in C.

To start, create a new Java Class Library project. In Creator, choose File->New Project | General | Java Class Library. Name the project as QualityDashboardData. Next, from the Project Window, create a new Package by selecting "Source Packages" right-click and choose New Package and assign a name. If you so desire, you can create a extended package by separating each package with a '.' (dot) Next, still in the Projects window, expand the new package, and create a new File/Folder then select "Java Classes" - Java Class and give the new Java class a name, say CriteriaBean.

To use the CriteriaBean POJO, create a new Web Application (or Portlet) project. Next, import the Java Class Library. From the Projects window, expand the Web Application project one level, select Library References, right-click and choose Add Project. Navigate to the Java Class Library project path then add.

In your Web Application, again use the Project window, expand Source Packages then select Page1.java, right-click and choose Add Property. Name the property, qcdata and the type of the property will be an array of type CriteriaBean .

Message Bundles
To make modifcation of criteria easier, put the criteria data in property files. To create a new property file, in the same folder as Page1.java, right click on the package and create a new File/Folder | Java Classes - Property file.

Add some properties and value (note, the best way to edit a properties file is to choose the Open menuitem, not Edit):

criteria0=P1/S1-P2/S2 bugs addressed (incl P3/S2s)

criteria1=All Regressions addressed

criteria2=Customer reported bug count

num_criteria=3

If needed, create other property files for additional data , such as to hold SQL queries.

Next, in Page1.java, you'll need to load a properties file:
props.load(getClass().getResourceAsStream("/qualitycriteriadashboardweb/criteria.properties"));


To use the CriteriaBean POJO, you'll need to set the size of the array and instantiate each element. The reason for using an array is that an ObjectArrayDataProvider supports arrays. Each instantiation of an element of the array creates a row, just like a database row. DataProviders treat any data the same,whether the data comes from a JDBC rowset, Enterprise JavaBean or Web Service. Check out the Javadoc for DataProvider.

            // ( number of quality criteria ) to track

            this.qcdata = new CriteriaBean[cpm.getNumCriteria()];

            for (int i =0; i< qcdata.length; i++) {

                this.qcdata[i] = new CriteriaBean();

            }

Notice the size of the POJO is obtained from the property file above.
Also, you will see a red squiggly line where CriteriaBean is used. To resolve this, right-click on the Page in the Java view and choose Fix Imports.

Next, since there are multiple rows, depending on the number of criteria. Notice in the property file above, the criteria are indexed. The number of criteria must match up for any other data. If you have property files for SQL queries then the number of SQL queries must be the same as the number of criteria. To hold data for multiple rows, hold data per column using ArrayLists.

Basically, retrieve the values from the property files and store in the corresponding ArrayList. For example, for SQL queries which return a count, store the count in an ArrayList named count.
Speaking of SQL queries, here is how to retrieve a count from a query using a CachedRowSetDataProvider. Create a new page, named criteria.jsp and add a Table component and drop a database table rowset onto the page (don't drop the rowset directly on the table). Instead use the Table layout customizer to bind the Table component to the CachedRowSetDataProvider

 try {

            change_requestsRowSet.setDataSourceName("java:comp/env/jdbc/bt2");

            change_requestsRowSet.setCommand(query);

            change_requestsRowSet.setTableName("CHANGE_REQUESTS");

            change_requestsDataProvider.setCachedRowSet((javax.sql.rowset.CachedRowSet)getValue("#{SessionBean1.change_requestsRowSet}"));

            change_requestsDataProvider.refresh();

            change_requestsDataProvider.cursorFirst();

            count = (new Integer(((BigDecimal)change_requestsDataProvider.getValue("qcount")).toString())).intValue();

            change_requestsRowSet.release();

            change_requestsRowSet.close();

        } catch (Exception ex) {

            log("Error Description", ex);

        }

Notice the setCommand statement. The query is generated dynamically based on the criteria item. The criteria item is obtained by using request parameters. The parameter passed to a page is the value of the corresponding criteria (no Priority 1 defects). This means the query has contraints on priority 1 defects and possibly other constraints. I'll explain more about how to setup the url with a request parameter a little later.

Here's how to get the request parameter.

        HttpServletRequest request = (HttpServletRequest)getExternalContext().getRequest();

        Integer item = new Integer(request.getParameter("criteria_item").substring(0));

Next to populate the ObjectArrayDataProvider, first populate the CriteriaBean array instances in Page1:

           for (int i =0; i< qcdata.length; i++) {

                qcdata[i].setCriteria_values((String)pm.getCriteria_values().get(i));

                qcdata[i].setStatus((String)pm.getStatus_values().get(i));

                qcdata[i].setStatusColor((String)pm.getStatusColor().get(i));

                qcdata[i].setCount((Integer)pm.getCounts().get(i));

                qcdata[i].setIndex(new Integer(i));



            }

Notice the status value, well there are some conditions I set to determine the resulting color. Constraints may have differing status, such as Red/Green or Yellow/Green. Red indicates the criteria is not met and must be resolved. Yellow, indicates that criteria is not met, but may be acceptable at a particular stage of a release. An example of a yellow colored criteria is the evaluation of lower priority bugs.

Also, notice the status color. Actually, this field holds the url value of an image, where there are red, yellow and green ball images used. For the count the value is an Integer, however, this value is assigned to the value of a hyperlink component. The hyperlink component is used to navigate to a details page which shows the nitty gritty details of defects' status.

The final step is to bind the ObjectArrayDataProvider's array property to the CriteriaBean array instance. To do this switch to the Page1 design view and select the ObjectArrayDataProvider in the Outline, then in the Property sheet, there is an array property and a dropdown to select the value. Bind the array property to qcdata.

Also, for the Table, change the component type for the status color to be an Image and change the component type of count to be a hyperlink. Next, select the Table, right-click and bind the Table to the ObjectArrayDataProvider. The columns should automagically become defined. Next, select the hyperlink representing count and set the url property to http://myserver:28080/mydashboard/faces/criteria.jsp?criteria_item=#{currentRow.value['index']}

Notice the '?' This is the final piece for completing the setup of the request parameter. The page criteria.jsp just contains a table, setup for the request parameter and binding to a query, which is defined in a properties file.

Here's some jsp source showing the component bindings to the Bean properties (I removed the Table's Javascript to make it easier to read):

(Click image for full size)


Here's the final result, at runtime:



Running Creator 2.0 Dashboard

I tried to be fairly complete and concise. If there's questions, please post comments. I hope to write a technical article to explain Dashboard development, fully.