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

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.
Ex.
%
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
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>
<'label>
<'input onClick="javascript:itemWindow()" type="submit" name="add" id="add" value="Order Item" />

<'label>
<'input type="submit" name="remove" id="remove" value="Remove Item" />
<'center>



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:[
Smalltalk code to do here: 

].
(request anyParameterValueAt: 'remove') = 'Remove Item' ifTrue:[
Smalltalk code to do here: 

].

The code above receives action parameters and does actions depending on what button was clicked.
Sometimes you may find it useful to have other windows pop up when a button is pushed. I suggest you use javascript for that. In the form example code above, I have "javascript:itemWindow()" being performed when the Order Item button is clicked. For this to work, you need a javascript code before this.
Ex.
<'script language="JavaScript">
function itemWindow()
{
testwindow= open ("../posAddItem.ssp?name=<% response write: theName. %>", "mywindow",
"location=1,status=1,scrollbars=1,width=300,height=500");
}





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