Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007
Smalltalk and html with tips! - Jun Hyuk Yim
Trying to hook smalltalk to html for the first time can be pretty tricky, especially for people who have no experience in web development. I also went through a lot of difficulties trying to understand how smalltalk, which needs to be dynamically updated, integrates with html, which is a static language, so I decided to make a tutorial on how to do this.
SSP is similar to PHP
For those of you who have had web development experience before, you will be delighted to know that SSP, Smalltalk Server Page, works exactly like PHP. If you did not have any web development training before, that is OK too because the concept is not that hard to understand. The most standard way of inputting PHP code into a html file by using <'?php *php code here* ?>. SSP works the same way. For SSP, use <% *smalltalk code here* %>. SSP can be used anywhere in the html file, even in the middle of a html code.
Ex. <'a href="<% response write: fileName %>"> a File! /a>
To write html in a SSP code block, you can use the response function which is similar to PHP's echo function.
Some SSP code here.
reponse write:('Any HTML code or strings here').
The response write: function displays any html code or strings on the ssp page.
The reponse redirectTo: aURL function is also very useful when wanting to redirect to a certain page after completing some SSP code.
Make sure that any page that has any smalltalk code in it is saved as a .ssp file.
Forms are the trickiest part of using ssp with html. First lets take a look at an example ssp code:
<'form id="posForm" name="posForm" method="get" action="pos.ssp">
<'input type="hidden" name="name" value="<% response write: theName. %>">
<'label for="posInventory">Item Inventory:
<'select name="posInventory" multiple size="10" style="width: 150px;">
"Returns the items to Sell list"
(thePos itemsSold) do:[:i|
response write:('<'option>', i name,'').
<'fieldset style="position: relative; width: 100px; left: -150px; margin-top: 50px;">
<'legend>button set 1<'center>
<'input type="submit" name="remove" id="remove" value="Remove Item" />
The method of a form can be a get or post depending on what you want to do. The action should refer to a page that has directions for what to do when submit buttons are pushed. For this example, the form directs any event triggered to the pos.ssp file. In the pos.ssp file we can have code like:
(request anyParameterValueAt: 'add') = 'Order Item' ifTrue:[
(request anyParameterValueAt: 'remove') = 'Remove Item' ifTrue:[
The code above receives action parameters and does actions depending on what button was clicked.
testwindow= open ("../posAddItem.ssp?name=<% response write: theName. %>", "mywindow",
This is a brief tutorial on things that helped me out while I was coding the website portion of the project. I hope this tutorial helped. :)
Note: I put a ' in every html tag so that this site wont recognize it as a real html tag.
Link to this Page
- Cases last edited on 30 July 2011 at 2:33 am by r59h132.res.gatech.edu