Transition Strategy:

1
Transition Strategy
Developing Web Apps with HTML Templates and Java
Servlets
Russ Tokuyama ltruss_at_hawaii.edugt
2
Web Apps HTML Templates

• Motivation
• Overview
• Web Basics
• Framework
• Process

3
Web Apps HTML Templates

• Motivation
• Lack of skilled developers
• Why not JSP?
• How are templates faster?

4
Web Apps HTML Templates

• Overview
• Simple, easy to understand
• Separate content from presentation
• Provides a structure
• Emphasize different skills

5
Web Apps HTML Templates

• Web Basics
• HTTP - request-response
• HTML - presentation
• CGI - server-side processing

6
Web Apps HTML Templates

• Web Basics
• HTTP - request-response

request
response
7
Web Apps HTML Templates

• Web Basics
• HTML - presentation

lthtmlgtltheadgtlttitlegtMy HomePagelt/titlegtlt/headgtltb
odygtThis is my home page.lt/bodygtlt/htmlgt
8
Web Apps HTML Templates

• Web Basics
• HTML - presentation

9
Web Apps HTML Templates

• Web Basics
• CGI - server-side processing

request
CGI
response
10
Web Apps HTML Templates

• Web Basics
• CGI - server-side processing

request
CGI
response
11
Web Apps HTML Templates

• Framework
• Users goals and interaction
• Data and processing
• Clear and focused

12
Web Apps HTML Templates

• Process (1-4)
• Mock up site in HTML
• User feedback
• Site map
• Transitions between pages

13
Web Apps HTML Templates

• Process (1-4)
• Mock up site in HTML

nextPage.html
firstPage.html
link
lta hrefnextPage.htmlgtnextlt/agt
anotherPage.html
14
Web Apps HTML Templates

• Process (1-4)
• User feedback
• Content (data)
• Look and Feel
• Processing

15
Web Apps HTML Templates

• Process (1-4)
• Site map

16
Web Apps HTML Templates

• Process (1-4)
• Site map

Page Action Next PageMain Login Menu Menu Create
Requisition Vendor Search Work w/
Requisition Requisition Search Logout Login Vendo
r Search Select Vendor New Requisition Search
for Vendor Search Results Logout Main
17
Web Apps HTML Templates

• Process (1-4)
• Transitions between pages

18
Web Apps HTML Templates

• Process (5-8)
• Assign variables to data
• Identify processing
• Add special tags
• Change links to URLs

19
Web Apps HTML Templates

• Process (5-8)
• Assign variables to data

ltinput type"text name"vendorName"gt ltinput
type"text name"vendorID"gtltselect
namenumRecords"gt ltoption value"10 gt 10
recordslt/optiongt lt/selectgt
20
Web Apps HTML Templates

• Process (5-8)
• Assign variables to data

Form CGI/Servlet TablevendorName vendorName
vendorName vendorID vendorID vendorID numRecord
s numRecords n/a
21
Web Apps HTML Templates

• Process (5-8)
• Identify processing
• What does the user want to do?
• Actions possible on a page
• Processing required to return next page for
  action selected

22
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• HTML comment
• Replaced by data value
• Depends on type of field

23
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• text input field

ltINPUT TYPETEXT NAMENamegt Name
24
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• text input field

lt!-- TEXTname --gt
ltINPUT TYPETEXT NAMEName VALUElt!--
TEXTname--gt gt Name
25
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• text input field

JA-SIG
nameJA-SIG
ltINPUT TYPETEXT NAMEName
VALUEJA-SIG gt Name
26
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• Replaced by data value

nameJA-SIG
VALUEJA-SIG
lt!-- TEXTname --gt
27
Web Apps HTML Templates

• Process (5-8)
• Add special tags
• Depends on type of field

ltINPUT NAMEpc TYPECHECKBOX gt PC ltBRgt ltINPUT
NAMEmac TYPECHECKBOX CHECKEDgt Mac
28
Web Apps HTML Templates

• Process (5-8)
• Change links to URLs

From
ltA HREFnextPage.htmlgtCreate new
requisitionlt/Agt ltA HREFhttp//server/servlet/pu
rchase?cmdnewReqgt Create new
requisitionlt/Agt
To
29
Web Apps HTML Templates

• Process (9-11)
• Program processing
• Test processing from command line
• Install templates and programs

30
Web Apps HTML Templates

• Process (9-11)
• Program processing

command
31
Web Apps HTML Templates

• Process (9-11)
• Program processing

if command equals New Requisition do New
Requisition processelse if command equals Work
With Existing Requisition do Existing
Requisition processelse if command equals
do process
32
Web Apps HTML Templates

• Process (9-11)
• Program processing

doGet(HttpServletRequest req, HttpServletResponse
res) throws ServletException, IOException
if ( cmd.equals(newReq) ) do
processNewReq() else if (
cmd.equals(oldReq) ) do
processOldReq() else if ( cmd.equals( )
) do process...
33
Web Apps HTML Templates

• Process (9-11)
• Test processing from command line

gt java TestProcessNewReq
34
Web Apps HTML Templates

• Process (9-11)
• Install templates and programs

35
Web Apps HTML Templates

• Process (12-14)
• Test site with templates and programs
• Test site with users
• Go live!

36
Web Apps HTML Templates

• Conclusion
• Flexible and easy to use
• Basic Web skills
• Use with your favorite CGI language