cs2340: Web Design with Smalltalk

1
cs2340 Web Design with Smalltalk

• Summer 2007

2
Web Pages
3
Static Details
4
Dynamic Pages
5
Basic Operation

• Client (browser) requests a page
• Application Server loads page
• Embedded scripts evaluated by server
• Results of the script are merged back into stream
  to the client
• Smalltalk code enclosed in

6
Web Design

• Server is stateless
• Get / Post from client
• OK / Not Found from server
• For required state, use Cookies or Session
  Variables
• Pages static vs. dynamic

7
Designer Tasks
8
General Design (The Page Styles)
9
General Design (Site Navigation)
10
Design Backend Data/Application
Students
StudentNumber
Students
StudentNumber
11
VisualWorks Server

• System Parcel Manager load VisualWave and
  WebToolkit
• Test server by http//localhost8008/echo
• Test toolkit by http//localhost8008
• Create a directory in web for your code.
• Configure toolkit for directory

12
Then we write some code
Hey, you got HTML in my Smalltalk. Well you got
Smalltalk in my HTML.
13
Lets make a simple page (SSP)
lthtmlgtltheadgtlttitlegtBobs Test
Pagelt/titlegtlt/headgtltbody bgcolor"white"gtltcente
rgtlth1gtWelcome to CS2340lt/h1gtltpgtlt/pgtThe date
today is lt Date today gtlt/centergtlt/bodygtlt/htm
lgt
14
A more complex page
Students in CS2340
15
The Html
Students in CS2340
Students in CS2340
16
Workspace Code
empfile stream separator number firstName
lastName level studentfile 'c\Program
Files\Cincom\vw7.4.1nc\web\sandbox\db\students.txt
' asFilename. separator ,. stream
studentfile readStream lineEndCRLF. stream
atEnd whileFalse number (stream
upTo separator). level (stream upTo
separator). lastName (stream upTo
separator). firstName (stream upTo
separator). stream upTo (Character cr).
Transcript show number, level, firstName, '
', lastName cr. . stream close.
17
Convert to SSP
lthtmlgt ltheadgt lttitlegt2340 Home
Pagelt/titlegt ltlink rel"stylesheet"
type"text/css" href"cs2340.css"gt lt/headgt
ltbody bgcolorwhitegt ltcentergt lthr
width"75" size4gt lttable border0
cellpadding2 cellspacing2 width75
bgcolorFFFFFFgt lttrgt
lttd width"40" alignrightgt
ltimg srcimages/kay.jpggt lt/tdgt
lttd width"50" alignleftgt
lth3gtCS2340ltbrgtStudentltbrgtAccreditation
ltbrgtCourseltbrgtHistory Systemlt/h3gt
lt/tdgt lt/trgt lth1gtStudent Rosterlt/h1gt
lt/tablegt lthr width"75" size4gt
lttable border 1gt
18
lt directory
'c\Program Files\Cincom\vw7.4.1nc\web\sandbox\db\
'. studentFile (directory,
'students.txt') asFilename. eparator ,.
"comma" stream studentFile readStream
lineEndCRLF. stream atEnd whileFalse
number (stream upTo separator).
level (stream upTo separator). lastName
(stream upTo separator). firstName
(stream upTo separator). stream upTo
(Character cr). response
write 'lttrgt'. response write
('lttdgt',number,'lt/tdgt'). response write
('lttdgt',level,'lt/tdgt'). response write
('lttdgt',firstName,lastName,'lt/tdgt'). response
write 'lt/trgt'. . stream
close. gt lt/tablegt lth4gtWelcome to
the CS2340 home pagelt/h4gt lt/centergt
lt/bodygt lt/htmlgt
19
But

• Just using server pages is not reusable or object
  oriented.
• What if I need real classes and data?

Students
students
getStudents
CS2340Class
classData
getStudents
20
Workspace code a lot less
students students (CS2340Class new)
getStudents. students inspect.
21
And so is our SSP
lthtmlgt ltheadgt lttitlegtCS2340 Student
Reportlt/titlegt lt/headgt ltbody
bgcolor"white"gt ltcentergt lth1gtCS2340
Studentslt/h1gt lttable border1gt lttrgt
lttdgtNumberlt/tdgt lttdgtLevellt/tdgt
lttdgtNamelt/tdgt lt/trgt lt
students (CS2340Class new) getStudents.
students do each
response write 'lttrgt'.
response write ('lttdgt', each
number, 'lt/tdgt'). response write
('lttdgt', each level, 'lt/tdgt').
response write ('lttdgt', each firstName,' ',each
lastName, 'lt/tdgt').
response write ('lt/trgt').
. gt lt/tablegt lt/centergt
lt/bodygt lt/htmlgt
22
Interaction
response redirectTo URL
23
Html Form
ltinput typetext nameuserid size25
maxlength30gt
Tag
Type of control
name to refer to value
text textbox radio radiobutton checkbox
checkbox submit select combobox
24
Sending Form Data
ltform nameform1 actionpage.ssp methodgetgt
25
Using Query Strings

• key value pairs
• Part of URL, following ?
• Multiple are separated by
• http//localhost8008/sandbox/login.htm?namebobp
  assfoo

26
Saving data between pages

• Session variables
• key value dictionary
• session at key put something
• session at key