November 21, 2014
Hot Topics:

Extend Your Java Studio Creator Options with JSTL

  • May 4, 2005
  • By Dick Wall
  • Send Email »
  • More Articles »
Add the JSTL Core include

To use JSTL on a Creator page, you have to include the JSTL core library in the jsp:root tag of the page. To do this, switch to the source view of the page, find the jsp:root tag at the top of the page, and just before the closing > add:

xmlns:c="http://java.sun.com/jstl/core"

This includes the JSTL tags using the namespace c; in other words, you can now use <c:if>, <c:forEach>, and so forth.

Add the JSTL Grid Code

For this article, I chose to implement a table for formatting grid data. To do this, a normal HTML table definition is interspersed with JSTL core tags to provide iterations over data items in a TreeMap using the <c:forEach> tag. Also some of the table headers are generated using another form of the <c:forEach> tag that works more like a traditional for loop (providing a begin and end value, and a loop index variable. Finally, I use a c:choose..c:when..c:otherwise tag combination to detect a status code indicating a mismatch, and change the color of the data values based on that status.

Table Header JSTL code

To create the table header, the code looks like this:

<table cellpadding="3" cellspacing="2">
   <thead>
      <tr>
         <th class="list-header" nowrap="nowrap" scope="col">
            Schedule
         </th>
         <th class="list-header" nowrap="nowrap" scope="col">
            Series
         </th>
         <th class="list-header" nowrap="nowrap" scope="col">
            From
         </th>
         <th class="list-header" nowrap="nowrap" scope="col">
            To
         </th>
         <c:forEach var="i" begin="1" end="24">
            <th class="list-header" nowrap="nowrap" scope="col">
               <c:out value="${i}"/>
            </th>
         </c:forEach>
         <th> </th>
         <th> </th>
      </tr>
   </thead>

Note the use of <c:forEach var="i" begin="1" end="24"> and <c:out value="${i}"/>, which are used to create the 24 numbered column headers in the table, instead of writing entries for all of them. Apart from that, this is a fairly standard HTML table header definition. The two empty <th></th> entries at the end provide some padding space for the scrollbar that may be needed when the table is displayed (see below).

Table Body JSTL code

The JSTL code for the table body is:

<tbody style="overflow: auto; max-height: 210px">
  <c:forEach items="${Page1.schedules}" var="scheduleMapEntry">
    <c:set var="schedule" value="${scheduleMapEntry.value}"/>
    <!-- first do the in schedule -->
    <tr class="list-row-odd">
      <td nowrap="nowrap">
        <c:out value="${scheduleMapEntry.key}"/>
      </td>
      <td nowrap="nowrap">
        <c:out value="${schedule.inTimeSeries.timeSeriesName}"/>
      </td>
      <td nowrap="nowrap">
        <c:out value="${schedule.fromParty}"/>
      </td>
      <td>
        <c:out value="${schedule.toParty}"/>
      </td>
      <c:forEach var="hourly"
                 items="${schedule.inTimeSeries.hourlyValues}">
        <td nowrap="nowrap">
          <c:out value="${hourly}"/>
        </td>
      </c:forEach>
    </tr>
    <tr class="list-row-even">
      <td nowrap="nowrap">
      </td>
      <td nowrap="nowrap">
      </td>
      <td nowrap="nowrap">
        <c:out value="${schedule.toParty}"/>
      </td>
      <td nowrap="nowrap">
        <c:out value="${schedule.fromParty}"/>
      </td>
      <c:forEach var="hourly"
                 items="${schedule.outTimeSeries.hourlyValues}">
        <td nowrap="nowrap">
          <c:choose>
            <c:when test="${schedule.outTimeSeries.status == 1}">
              <font color="green">
                <c:out value="${hourly}"/>
              </font>
            </c:when>
            <c:otherwise>
              <font color="red">
                <c:out value="${hourly}"/>
              </font>
            </c:otherwise>
          </c:choose>
        </td>
      </c:forEach>
    </tr>
  </c:forEach>
</tbody>
</table>

A few notes about this:

The style="overflow: auto; max-height: 210px" in the tbody definition means that the table body will have a maximum height of 210 pixels on screen, and when the table data can no longer be displayed in this area, a scrollbar will be automatically added (the overflow: auto part does this). This requires a modern browser such as Mozilla, Firefox, or IE 5.5+ to work correctly.

For each Schedule in the list of schedules iterated over by the <c:forEach items="${Page1.schedules}" var="scheduleMapEntry">, two rows are actually output. The first row is the "in" data, and the second is the "out" data. This also makes it easy to differentiate the rows by using CSS styles to color the row backgrounds differently (the effect is the striping you see when you run the project).

The <c:set var="schedule" value="${scheduleMapEntry.value}"/> sets a variable schedule with the value of the current schedule map item. This is a Schedule bean with two TimeSeries beans nested inside. Once the c:set> tag has been used, you can reference schedule directly within your JSTL EL expressions.

The hourly interval values are output using the:

<c:forEach var="hourly" items="${schedule.inTimeSeries.hourlyValues}">
    <td nowrap="nowrap">
        <c:out value="${hourly}"/>
    </td>
</c:forEach>

and the equivalent part for outTimeSeries. This iterates over the hourly data in the time series and outputs table cells for each value in turn.

Finally, the conditional:

<c:choose>
   <c:when test="${schedule.outTimeSeries.status == 1}">
      <font color="green">
      <c:out value="${hourly}"/>
      </font>
   </c:when>
   <c:otherwise>
      <font color="red">
      <c:out value="${hourly}"/>
      </font>
   </c:otherwise>
</c:choose>

is used to color the values to green if the time series is marked as matched, and to color them red if marked as mismatched.

Test the Example Page

Go ahead and run the sample project to see the JSTL grid in action. The project generates some random values to display in the grid. For the third schedule, a deliberate mismatch is generated to illustrate the conditional in action (the second row in the third schedule should be red rather than green indicating that there is a mismatch in the values).

Note also how the table body scrolls while leaving the table headers in place (this is a nice feature and one I have yet to accomplish using the Grid control provided by Creator).





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel