Cincom

Using Tag Libraries
| Web Toolkit Tutorial Home | Table of Contents | Refactoring the J2EE solution | Using Registered Servlets |
The HTML author is still complaining about the amount of code in the SSP pages. The J2EE model allows us to reduce the amount of code by using tag libraries.

In this lesson, we will use a tag library to produce the drop-down list of courses.

1. If VisualWorks is not already running, please start running it now, load the Web Toolkit parcel and start a Wave HTTP server. You should also file in the code from Toyz Inc Refactored 6.

Since this lesson deals with tag libraries, it is advised that you first familiarize yourself with tag libraries before proceeding further.

Proceed to the Tag Libraries primer.

2. Since there are 3 separate components to a JSP tag library, it's best to start off with the XML mappings files or the tag library descriptor file. Below is one that will do the trick.


<?xml version="1.0" encoding="ISO-8859-1" ?>
<!--<!DOCTYPE taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
"http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd"> -->

<taglib>
  <tlibversion>1.0</tlibversion>
  <jspversion>1.1</jspversion>
  <shortname>cincom</shortname>
  <uri></uri>
  <info>An example tag library provided by Cincom </info>

  <tag>
    <name>do</name>
    <tagclass>VisualWave.DoTag</tagclass>
    <info>Like a getProperty, but expects a collection and iterates over the result, assigning to a loop variable</info>
    <bodycontent>empty</bodycontent>
    <attribute>
      <name>name</name>
      <required>true</required>
    </attribute>
    <attribute>
      <name>property</name>
      <required>true</required>
    </attribute>
    <attribute>
      <name>variable</name>
      <required>false</required>
    </attribute>
  </tag>

</taglib>

3. Save this file as producttags.tld. The tld extension stands for tag library descriptor.

4. This phase of the application will be quite similar to the last phase but with 1 subtle difference. The page to display employees by courses will use a tag library. Perhaps the easiest place to start would be to copy all files used in the last phase (xxxxxxx6.zzz) to "version 7".
  • j2eeheader6.jsp --- j2eeheader7.jsp
  • j2eefooter6.inc --- j2eefooter7.inc
  • j2ee_navigation6.jsp --- j2ee_navigation7.jsp
  • logon6.ssp --- logon7.ssp
  • main6.ssp --- main7.ssp
  • j2ee_employeecourses6.ssp --- j2ee_employeecourses7.ssp
  • j2ee_allemployeecourses6.ssp --- j2ee_allemployeecourses7.ssp
  • j2ee_listbycourse6.ssp --- j2ee_listbycourse7.ssp
5. Of these files, some contain no changes at all except for changing references to files with a "6" in them to a "7". Those files are:
  • j2eeheader7.jsp
  • j2eefooter7.inc
  • j2ee_navigation7.jsp
  • logon7.ssp
  • main7.ssp
Edit these files and globally replace all sixes with sevens.

6. The big change that we will make in this lesson is to the j2ee_listbycourses7.ssp file. Here is what the file should look like:

<jsp:usebean id="myToy" class="Toyz" scope="session"/>
<jsp:usebean id="myStuff" class="FileStuff" scope="session"/>

<jsp:setproperty name="myToy" property="title" value="Employees with a certain course" />

<jsp:include page="j2eeheader7.jsp" flush="true" />

<%@ taglib uri="file:looptags.tld" prefix="cincom" %>

<table width=90% border=0>
<tr>
<td width=200 align=center>
<jsp:include page="j2ee_navigation7.jsp" flush="true" />
</td>
<td align=left>
<form action=j2ee_listbycourse7.ssp method=post>
<table cellpadding=5 border=0>
<tr>
<td bgcolor=mediumblue colspan=2>
<font color=#ffffff><b>Please choose a course</b></font>
</td>
</tr>
<tr>
<td width=30% align=right>Course:</td>
<td width=70% align=left>
<select name=cboCourse size=1>
<option value="---">[ Select a course ]

<cincom:do name="myStuff" property="getCourses" variable="each">
<option value=
<jsp:getproperty name="each" property="courseNumber">
Course Number
</jsp:getproperty>
>
<jsp:getproperty name="each" property="courseName">
Course Name
</jsp:getproperty>
</cincom:do>

</select>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit name=action value=" Proceed ">
</td>
</tr>
</table>

<table border=1>
<%
courseNumber := request anyFormValueAt: 'cboCourse'.
((courseNumber size) > 3) ifTrue:
[
courses := myToy getXrefs.
courses do:
[ :each |
(each courseNumber = courseNumber) ifTrue:
[
response write: '<tr>'.
response write: ('<td>',each employeeNumber,'</td>').
response write: ('<td>',each employeeName,'</td>').
response write: ('<td>',each courseNumber,'</td>').
response write: ('<td>',each courseName,'</td>').
response write: '</tr>'.
].
].
].
%>
</table>

</td>
</tr>
</table>

<!-- #include file= "j2eefooter7.inc" -->

Indeed, there is a lot going on here. Let's look at all this code line by line (or chunk by chunk) and make sure you understand what each line (or chunk) does.

<jsp:usebean id="myToy" class="Toyz" scope="session"/>
<jsp:usebean id="myStuff" class="FileStuff" scope="session"/>
For this page, we will make use of two objects, Toyz and FileStuff. We will use the Toyz class to loop through the cross-reference file but we will use the FileStuff class for our drop-down list of courses.
<%@ taglib uri="file:looptags.tld" prefix="cincom" %>
This line pulls in our tag library descriptor file called looptags.tld. The prefix of cincom will we explained shortly.
<select name=cboCourse size=1>
<option value="---">[ Select a course ]

<cincom:do name="myStuff" property="getCourses" variable="each">
<option value=
<jsp:getproperty name="each" property="courseNumber">
Course Number
</jsp:getproperty>
>
<jsp:getproperty name="each" property="courseName">
Course Name
</jsp:getproperty>
</cincom:do>

</select>
These lines create the drop-down list of courses. The <select> tag informs the browser that a series of <option> tags will follow and these option tags will consist of pairs of values and descriptions. The first <option> tag is a "dummy" pair used to give instructions to the user. The following <option> tags will contain a list of all courses generated by the tag library.

The loop starts with cincom:do and end with /cincom:do. On the cincom:do tag line, the getCourses method of the FileStuff class (since the name of myStuff references the FileStuff class from the jsp:usebean directive) will return a collection of courses. Then the jsp:getproperty directives for courseNumber and courseName are used to display the value and description of the option tag, respectively.
7. From the System Browser, <Operate-Click> the category of ToyzInc and select File Out As.... Enter ToyzInc_j7.st as the filename.

Congratulations! Phase 7 of the TEACH application is complete

You now should be able to:
Use tag libraries when displaying a collection is in order
| Web Toolkit Tutorial Home | Table of Contents | Extending the use of Session Variables | Using Registered Servlets |