Cincom VisualWorks Web Toolkit Tutorial : Extending the use of Session Variables

Extending the use of Session Variables

Now that we have laid the groundwork for using session variables and server-side include files, it's time to take advantage of the power they give us.

This lesson will demonstrate how to make more extensive use of session variables.

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 J5 and make sure the initialize method of the Filestuff class sets the correct location of the directory variable (i.e. the directory that contains the 3 data files).

2. We are now ready to develop a few more SSP pages. However, another issue has been raised. Although not many people pay attention to the title bar (window caption) of their browser, some of the Toyz Inc. employees have noticed that the title is the same on every page (The Toyz Inc. TEACH System). They would like to see the title change and reflect what page they are really viewing.

The reason the title bar (window caption) of their browser is the same on every page is because of our include file. The title is "hard-coded" in our header include file. In order to do this, as well as further the functionality of our application, we must create some new classes and methods. But first, let's get the list of employees working.

3. There will not be any changes to the logon page so for now, simply change all references of "5" to "6" and save it as logon6.ssp.

4. Do the same for the files main5.ssp, j2eeheader5.inc, j2eefooter5.inc, and j2ee_navigation5.jsp: change all references of "5" to "6".

5. Finally, do the same for our servlet. Start with ServletVerify5 and change all references of "5" to "6" and save it as ServletVerify6.

6. At this point, you should have a clone of phase 5 except that all pages/servlets are named with a 6. Test your pages and make sure everything works.

7. We are now ready to develop a few more SSP pages. However, in order to do that, we must create some new classes and methods.

Figure 1. The new set of classes and methods needed for our application

In short, what we have added to our Toyz class are 2 more methods:

getCourses - returns a collection of Courses

getXrefs - returns a collection of Xrefs (courses employees have taken)

You should now file in the code from Toyz Inc 5. We now have enough code to make things interesting on the SSP side.

8. Now let's do something interesting with our session variable. This would be the page j2ee_employeecourses6.ssp. This page will display a list of courses taken by the person who logged in. The page will look something like the following:

Figure 2. The courses taken by employee John Johnson

Below is the code for this file:

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

<table width=90% border=0>
<tr>
<td width=200 align=center>
<jsp:include page="j2ee_navigation6.jsp" flush="true" />
</td>
<td align=left>
<table border=1>
<%
signon := session at: 'signon' ifPresent:
[ :signon |
response write: '<tr><td colspan=4><h5>'.
response write: (signon firstName,', here are the courses you have taken</h5>').
response write: '</td></tr>'.
toyz := Toyz new.
courses := toyz getXrefs.
courses do: [ :each |
((signon number) = (each employeeNumber))
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>

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

The first part of this file is taken directly from main6.ssp. We then change the logic to fit the needs of the page.

get a list of all courses taken by all employees (courses := toyz getXrefs)

iterate through the list of courses (courses do: [ :each |)

test to see if the employee number matches the one found on the xref file
((signon number) = (each employeeNumber))

if so, create a entry in an HTML table list all four fields from our xref file (the response write: lines)

9. Now would be a good time to test this page. A good test would be to sign on as all three different employees. Each employee has taken a different number of courses.

Figure 3. The courses taken by employee Carl Carlson

10. Note that Carl has a link to a page that will display a list of all courses taken by all employees. This one should be very much like the page we just wrote (in fact it should be easier since we don't need to check the file against an employee. It would look something like the following:

Figure 4. All courses taken by all employees

Below is the code for this file:

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

<table width=90% border=0>
<tr>
<td width=200 align=center>
<jsp:include page="j2ee_navigation6.jsp" flush="true" />
</td>
<td align=left>
<h5>All Courses taken by all Employees</h5>
<table border=1>
<%
signon := session at: 'signon' ifPresent:
[ :signon |
toyz := Toyz new.
courses := toyz getXrefs.
courses do: [ :each |
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>

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

At this point, a Toyz object has been instanciated 3 times

If Carl is the one who signs on and selects all the pages that he can, he will have instanciated the Toyz class 3 separate times.

servlet
j2ee_allemployeecourses6.ssp
j2ee_employeecourses6.ssp

The 3 separate Toyz objects will not persist across the separate pages; however, this can be solved by storing the first instance of the Toyz class in a session object and then reference that session object on the pages that require a Toyz instance (object).

This is much more efficient: create an instance of Toyz just once and reuse it in all SSP pages that require it. Not only that, this also solves our title issue. We can create an instance variable (called title) and set it on every page. So here's how to accomplish all this:

Create the instance in the servlet and store it in a session variable
In all other SSP pages, pull the object from the session variable
Use the ifAbsent: method in conjunction with pulling the object from the session variable - there may have been a timeout

11. Add the instance variable title to the Toyz class and create accessing (setter and getter) methods for this variable.

12. Our first change will be in the logon page. Start with logon6.ssp and make the first 3 lines as follows:

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

<jsp:setproperty name="myToy" property="title" value="Toyz Inc. Logon Page" />

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

The first line will reference an instance of the Toyz class which is stored in a session variable called myToy. If the object has already been instancitated, it will be contained in the session variable. If the object has not already been instancitated, it will create an instance and store it in the session variable.

The second line will set the value of the instance variable title. Understand that title is the method that sets the value of the title variable.

The third line now references j2eeheader6.jsp instead of j2eeheader6.inc because our include file will now contain code to extract the value of title from our Toyz object.

13. Our next change would be the j2eeheader6.inc include file. The first 7 lines should look like the following:

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

<html>
<head>
<title>
<jsp:getproperty name="myToy" property="title" />
</title>

The first line is the same as the first line in the logon page. In fact, from now one, this will always be the first line of every SSP page in our application.

Between the title (HTML) tags is the JSP directive to fetch the value of the instance variable title. Understand that title in this case is the method that gets the value of the title variable.

And because of the <jsp:usebean> directive, this file must be saved as j2eeheader6.jsp.

14. Our next change is to our home page. Start with main6.ssp and make the first 3 lines as follows:

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

<jsp:setproperty name="myToy" property="title" value="Toyz Inc. Home Page" />

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

Aside from the value of the title variable, these are the same first 3 lines of the logon page.

15. Make the same type of changes to:

j2ee_allemployeecourses6.ssp
j2ee_employeecourses6.ssp

The verification servlet does not need to change.

16. At this time, test your changes. Sign on as Carl and verify that the titles do indeed change on each page.

17. Now for the page that displays a list of employees who have taken a particular course. This page will seem a little strange at first since it is referred to as a "postback" form page. What this means is that the page will submit itself to itself. The diagram below depicts this graphically.

Figure 6. A form that submits itself to itself

The users want a drop-down list of all available courses. They will select the course they want, click the submit button and see a list of employees who have taken that course. They intend to do this several times (over and over again). Because they want a drop-down list, the page has to be a form since a drop-down list is a form control. And since they want to submit the form over and over again, it does not make sense to take them to a separate page - keep sending them to this same page. This is what's called a postback form - it posts back to itself.

This form (page) will feature some new ideas which are outlined below.

The name of this file is j2ee_listbycourse6.ssp and in order to create a postback form, simply specify the name of the file itself in the action attribute of the form tag.

<select name="cboCourse" size="1">
<option value="---">[ Select a course ]
<%
courses := myToy getCourses.
courses do:
[ :each |
response write: ('<option value=', each courseNumber, '>', each courseName).
].
%>
</select>

These lines of code will create a drop-down (selection) list. The first line is a standard HTML tag that informs the browser that a drop-down (selection) list is about to be created. The value of what the user choses goes into the named-pair of cboCourse. The first option tag after the select tag is commonly used for 2 purposes. The first is to give instructions to the user as to what to choose ([ Select a course ]). The second purpose is to initialize this choice with some "nonsense" value (---) so that if this value is extracted when the form is submitted, you can tell that they did not choose any real value while they were on the form.

The lines in the code block (the percent tags) builds the list of options. These options come directly from the courses file - the getCourses method of the Toyz class will return a collection of Course objects. We iterate through the collection to build our list of options. Should the user choose a particular option, the value of the option gets paired with the name of the selection control (cboCourse).

Note also that we are using myToy as our instance of the Toyz class. This comes directly from the first line of the page where we use the <jsp:usebean> directive.

<%
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>'.
].
].
].
%>

This code block is very powerful. First, it extracts the value of cboCourse from the form. The next line (the test for the value of cboCourse) does two things. First, if the employee comes into the form for the first time, the value of cboCourse will be nil and our test will fail. Second, if the employee fails to choose an option, the value of cboCourse will be "---" (which does not have a size greater than 3) and it will fail as well. Naturally, this line of code was dependent on the fact that all courses have a course number of 3 letters and 3 numbers, a size of 6.

Should the test succeed, then we iterate through the collection of courses and see if any of them match the course number from our drop-down selection list. If so, then we will create a table to display it.

18. The code for this page will look something like this:

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

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

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

<table width=90% border=0>
<tr>
<td width=200 align=center>
<jsp:include page="j2ee_navigation6.jsp" flush="true" />
</td>
<td align=left>
<form action=j2ee_listbycourse6.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 ]
<%
courses := myToy getCourses.
courses do:
[ :each |
response write: ('<option value=', each courseNumber, '>', each courseName).
].
%>
</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:
[
" response write: '<tr><td colspan=4>Yes, I'''m here</td</tr>'."
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>

19. Save this file as j2ee_listbycourse6.ssp. Now would be a good time to test this page.

20. From the System Browser, <Operate-Click> the category of ToyzInc and select File Out As.... Enter ToyzInc_j6.st as the filename.

Congratulations! Phase 6 of the TEACH application is complete

We have now made more extensive use of the session variable which contains an instance of the Toyz class, giving us a lot of flexibility and functionality.

You now should be able to:

Make use of a session variable to hold an object instance and reuse it