Cincom VisualWorks Web Toolkit Tutorial : Fundamentals of Smalltalk Server Pages

Fundamentals of Smalltalk Server Pages (SSP)

We're about to create our first Smalltalk Server Page (SSP). Our page will display a list of employees. In order to do this, the SSP will need to read the employee file and format that data in a way that a web browser can understand. This lesson will give you an idea of how this can be done in two different ways.

This lesson will demonstrate how to display the list of employees in a web page using the ASP model. It will first describe a solution where all you need is a single SSP. It will then explain how to use a combination of SSP and custom objects. The idea is to get a good understand of where Smalltalk code can reside in the ASP model.

1. If VisualWorks is not already running, please start running it now, load the Web Toolkit parcel and start a Wave HTTP server.

2. We need a place to store the 3 files used to support this application. Under both the sandbox and teach directories, create two directories called db and images.

Figure 1. The db and images sub-directories

Place the Toyz Inc logo in the images directory and the 3 text files in the db directory. You can find the image file and the 3 text files at the following links:

3. Everything is now in place for coding to start. But before you do that, you first need to understand what you are trying to do. The goal of this lesson is to write code that generates the following output in your browser:

Figure 2. Desired page

4. If you were to do a "view page source" from the browser, you would see the following HTML:

Figure 3. Desired HTML

5. If we closely examine this HTML document, we will notice that it has some interesting characteristics:

Figure 4. Areas in blue tend to repeat

The text in yellow is static - it represents the "top" and "bottom" portions of our document
The text in blue-shaded areas needs to be dynamically created
We need code to loop through the file and generate HTML that looks like this

6. Let's first solve this "problem" in a workspace. Below is code that will display the list of employees in the Transcript

Figure 5. Code to loop through the employee file and display it in the Transcript

All we need to do is tweak the workspace code so that it “plays in an HTML world”. In other words, we need to place HTML tags around our data. In terms of SSP, this would requires a means by which data can be written to the HTML output buffer from within a code block. That means is the ASP model's intrinsic response object.

response write: 'Your HTML output stream goes here'.

7. Let's take the HTML file, keep everything that was colored in yellow, and let Smalltalk generate the HTML that was colored in blue. The result would be the following:

Figure 6. A total "SSP" solution

Figure 7. The "SSP" solution as displayed in our browser

Note that employee information is being pulled from the employee (text) file. Go ahead - edit the employee file and add a fourth (or fifth) employee and refresh the page. You will see that this page will return all employees listed in the file.

A "View Source" or "View Page Source" from the browser will reveal no Smalltalk code – just HTML.

8. In the ASP model, this is a typical situation. A Smalltalk Server Page will contain a mixture of both HTML and code.

Figure 8. A Diagram depicting the simple ASP model

Pros

Easy to read / debug

All code found in one place

Cons

Not reusable

Not efficient

Lots of code in the page

Not conducive to a team development environment

9. A better approach would be to create custom classes and methods (let the logic reside there) and use SSP to display the data.

Figure 9. A better approach to the ASP model

Code becomes reusable
Less code in your SSP files
Still easy to debug

10. We can simplify our solution by using a "best of breed" approach. You typically do not want to have very much code in your SSP. Let your objects do most of the work and let your SSP do most of the presentation.

Figure 10. The custom classes for our employee solution

Employee - Used to hold information about an employee at Toyz Inc.
FileStuff - Used to retrieve data from the ASCII (text) files
Toyz - the class that will be used by SSP. The instance variable of toyzData will be an instance of the FileStuff class.

These classes can be found here

11. Once these classes (and methods) have been created, it will take a lot less code in our SSP to create a list of employees. As you can see, if it doesn't take much less code to retrieve the list of employees in a workspace, the same will be true in the SSP.

Figure 11. A workspace solution

12. Below is a solution that uses a combination of custom classes and SSP. With this solution, there is much less code in the SSP to list employees. In short, objects do the work; SSP does the display.

Figure 12. The custom class solution

13. Finally, a word about readability. The use of response write: is necessary when you need to insert something into the HTML output buffer while you are still within a code block. It is, however, optional.

The code samples shown below (2 of them) will generate the same exact output streams. The code sample at the top uses 1 set of percent tags. The code sample at the bottom uses 12 sets of percent tags. All those percent tags (which stops and starts the scripting engine) can sometimes be confusing when mixed with standard HTML tags and normal text. Either code will work but which coding style you choose will simply be a matter of personal preference.

Is the code at the top easier to read (therefore debug) than the code at the bottom? You decide.

Figure 13. The matter of readability.

Congratulations!
You have successfully written your first SSP page that pulled data from a file and displayed it on the web. And you did this in 2 ways; one using all SSP and another using a combination of SSP and custom classes.

You should now be able to:

	Use the response write: method
	Create an “SSP” only solution
	Use a combination of SSP and custom objects
	Identify various ways of outputting to the HTML data stream

You now have a choice as to which section you would like to start. You can proceed either to the ASP section or the J2EE section. As stated before, the two sections are completely independent of one another and do not require pre-requisite knowledge from the other section. The language in the tutorials does not assume you have progressed through either section first. As such, much of the concepts will be the same and explained in the same way. The only difference will be in the code used to accomplish a certain task.