View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Creating Simple Textual HTML Pages with Embedded Smalltalk Code

by Justin Dobbs

When you're typing smalltalk code you use the <% & %> brakets to surround your code:
EX:
 <% graph := Graph.AdjacencyMatrix new. %> 

When you save your smalltalk forms you use .ssp as the extension.

EX:
 myGraph.ssp 

Now lets say you want users to input data and you want to pass that data as a parameter to one of your methods.

Radio Buttons


This example uses radio buttons as the input methods.
             <html>
             <form action="startForm2.ssp" method="post">

             Do you want your graph to be directed?
             <input type="radio" name="directed" value="True">yes
             <input type="radio" name="directed" value="False">no

             <td colspan=2 align=center> 
             <input type="submit" name="create" value=" Make my graph "> 
             </td>
             

This code will create a form where you ask a yes or no question and you supply two radio buttons to get the response.

The last line
 <input type="submit" name="create" value=" Make my graph "> 
is how you make a submit button in html. The name that will be displayed on the button is Make my graph.

Pay attention to the second line.
 <form action="startForm2.ssp" method="post"> 
This supplies the next form that you want to appear after the user clicks the submit button. In this example it is startForm2.ssp.

Here is the code in startForm2.ssp
             <html>
             <form action="code.ssp" method="post">

             <%  d := request anyFormValueAt: 'directed'.
             (d = 'True')ifTrue:[graph := Graph.WeightedAdjacencyMatrix directed: true.].
             (d = 'False')ifTrue:[graph := Graph.WeightedAdjacencyMatrix directed: false.].
             (d = 'True')ifFalse:[(d = 'False')ifFalse:[response redirectTo:'startForm1.ssp'.].].
             session at: 'graph' put: graph. %>
             

Lets examine each line:

 <%  d := request anyFormValueAt: 'directed'. 

This line asks for the value that the user inputted into the radio button. What will the variable d be equal to? Well there are three possibilites, 'True', 'False', and something we don't know.

It'll be true if they select the yes button, because we assigned the yes button the value 'True' in startForm1.ssp:
 <input type="radio" name="directed" value="True">yes 

It'll be false for the same reason.

But when will it be something we don't know? This will happen if the user doesn't select either radio button but they still hit the submit button. If you don't handle this case then it'll cause you big time errors.

So now the variable d is equal to what the user selected. Check what d is and make a decision based on that.

If it's true, I make a new instance of Graph.WeightedAdjacencyMatrix:
 (d = 'True') ifTrue:[graph := Graph.WeightedAdjacencyMatrix directed: true.].

Same if it's false:
 (d = 'False')ifTrue:[graph := Graph.WeightedAdjacencyMatrix directed: false.]. 

If isn't true or false:
 (d = 'True')ifFalse:[(d = 'False')ifFalse:[response redirectTo:'startForm1.ssp'.].]. 

response redirectTo: anSSPPage will send you to a different page. In this case it will keep taking you back to startForm1.ssp until the user selects one of the radio buttons.
This could be very useful if you can't proceed without a response from the user.

This a good time to bring up another point. When you're using your smalltalk code you must prefix your classes with their namespace: Graph.WeightedAdjacencyMatrix.
You have to do this because smalltalk needs to know where to look for the class.

The last line could also be very useful:
 session at: 'graph' put: graph. %> 

This is called a session variable. It is used to send variables between .ssp pages. This is useful if you have one instance of a class and need it on a different .ssp page than the one it is created on.
This code actually creates a session variable called 'graph' and saves the value of graph there.

To retrieve the session variable on another page:
 myGraph := session at: 'graph' 

This will assign the variable myGraph with the value at 'graph'.

If you want to know more about session variables then click here. This will take you to a cincom tutorial on session variables.

Text Boxes


This example uses text boxes as the input method.
            <html>
            <form action="code.ssp" method="post">
            Name the Node: 
            <input type="text" name="nodeName" value="" size=15 maxlength=30> 
            <input type="submit" name="doIt" value=" Create & Add Node ">
            

We've already discussed what the first line does:
 <form action="code.ssp" method="post"> 

The next line 'Name the Node' is just a label for the text box.

The next line is how you create a text box in html:
 <input type="text" name="nodeName" value="" size=15 maxlength=30> 

The internal name of the text box is 'nodeName'. This will be useful soon.

We've also looked at what the last line does:
 <input type="submit" name="doIt" value=" Create & Add Node "> 

Here is some code from code.ssp
            <% myGraph := session at: 'graph'.
            name := request anyFormValueAt: 'nodeName'. %>
            

The first line just retrieves our session variable again. However, what is the second line doing?

 name := request anyFormValueAt: 'nodeName'. %> 

This line is just retrieving the data that the user entered into our text box. The method is:
 request anyFormValueAt: aTextBoxName 

One more thing. What if the name that you wanted the user to enter was actually a number. How would you convert the raw text from a string into a number. You can only input text into an html form, no numbers, and Smalltalk doesn't have casting so...
Well here's a simple way.
           name := request anyFormValueAt: 'nodename'.
           (name = nil) 
                     ifFalse:[ numName := 0.
                               name := name asIntegerArray.
                               1 to: name size do:[:index | numName := numName * 10 + ((name at: index) - 48).].].
           

This is basically a simple atoi function. You have to use asIntegerArray to convert the bytestring to an array of ascii integers, then you just iterate through converting them from ascii to actual numbers.

I know I've gone through a lot but hopefully this will be very helpful.

If you need more help the cincom tutorials helped me a lot. http://www.cincomsmalltalk.com/tutorials/version7/webtoolkit/webtoolkit_toc.htm

Links to this Page