Title: cs2340: Web Design with Smalltalk
1cs2340 Web Design with Smalltalk
2Web Pages
3Static Details
4Dynamic Pages
5Basic 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
6Web 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
7Designer Tasks
8General Design (The Page Styles)
9General Design (Site Navigation)
10Design Backend Data/Application
Students
StudentNumber
Students
StudentNumber
11VisualWorks 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
12Then we write some code
Hey, you got HTML in my Smalltalk. Well you got
Smalltalk in my HTML.
13Lets 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
14A more complex page
Students in CS2340
15The Html
Students in CS2340
Students in CS2340
16Workspace 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.
17Convert 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
18lt 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
19But
- Just using server pages is not reusable or object
oriented. - What if I need real classes and data?
Students
students
getStudents
CS2340Class
classData
getStudents
20Workspace code a lot less
students students (CS2340Class new)
getStudents. students inspect.
21And 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
22Interaction
response redirectTo URL
23Html Form
ltinput typetext nameuserid size25
maxlength30gt
Tag
Type of control
name to refer to value
text textbox radio radiobutton checkbox
checkbox submit select combobox
24Sending Form Data
ltform nameform1 actionpage.ssp methodgetgt
25Using Query Strings
- key value pairs
- Part of URL, following ?
- Multiple are separated by
- http//localhost8008/sandbox/login.htm?namebobp
assfoo
26Saving data between pages
- Session variables
- key value dictionary
- session at key put something
- session at key