DEV-04 Building OpenEdge

1
DEV-04Building OpenEdge Reference Architecture
Applications with WebSpeed

• Chris Skeldon
• Principal Consultant

2
Agenda

• OpenEdge Reference Architecture
• WebSpeed architecture
• Writing your 4GL program
• Creating the user-interface

3
The browser has arrived?
Increasingly ITTs require browser access
Nearly everbody wants access through a browser
4
OpenEdge Reference Architecture
5
WebSpeed Architecture
User Agent
WebSpeed Transaction Server
NameServer
WebSpeed Broker
WebServer
WebSpeed Messenger
WebSpeed Agent
6
Running a WebSpeed program
/main/splogin.p Your 4GL program
http//localhost computer
/wsSportsPro/ WebSpeed Broker
/scripts/ directory on web server
/cgiip.exe/ WebSpeed Messenger
7
Your 4GL Program sends HTML
OUT "lthtmlgtltbodygtHello Worldlt/bodygtlt/htmlgt"
8
Writing your 4GL program

• Embedded SpeedScript
• CGI Wrapping
• Mapped WebObjects
• eScript WebObject
• All compile to Progress 4GL statements sending
  out HTML

9
Embedded SpeedScript

• Embeds 4GL inside HTML
• Allows use of HTML editors
• Script tags start and end 4GL blocks
• ltscript languageSpeedScriptgt lt/scriptgt
• Expression escapes
• Turned inside-out and compiled

ltbodygt lttablegt ltSCRIPT LANGUAGE"SpeedScript"gt
FOR EACH Customer NO-LOCK
OUT "ltbodygt". OUT "lttablegt". FOR EACH
Customer NO-LOCK
10
Example of Embedded SpeedScript
lttablegt ltSCRIPT LANGUAGE"SpeedScript"gt FOR
EACH Customer NO-LOCK WHERE lt/SCRIPTgt
lttrgtlttdgtCustomer.CustNumlt/tdgt
lttdgtCustomer.Namelt/tdgtlt/trgt ltSCRIPT
LANGUAGE"SpeedScript"gt END. lt/SCRIPTgt lt/tablegt
11
CGI Wrapping

• Insert HTML into 4GL procedures
• Standard coding structure
• Can generate non-HTML content

12
Example of CGI Wrapping
OUT "lttablegt"U. FOR EACH Customer NO-LOCK
WHERE OUT "lttrgtlttdgt"U
Customer.CustNum "lt/tdgtlttdgt"U
Customer.NAME "lt/trgtlt/tdgt"U.
END. OUT "lt/tablegt"U.
13
Mapped WebObjects

• Separates HTML from 4GL
• Allows use of HTML editors
• 4GL code manipulates widgets
• Integrates with SmartDataObjects
• Good for forms
• Uses offset file to link 4GL and HTML
• Can manipulate HTML in 4GL
• Standard coding structure

14
Mapped WebObjects
15
eScript WebObject

• WebObject at the heart of pseScript
• Absolute separation of 4GL from HTML
• HTML can be changed without recompiling
• One 4GL program can support many HTML views
• Will be on PSDN
• Not supported

http//outletservice.mmbox.co.uk/outlet.asmx?WSDL
16
Creating the user-interface
Adding sizzle
17
4GL is not enough

• Poor UI can hide a great 4GL application
• Great UI attracts people to application/site
• Great UI needs
• design presentation usability
• technical - XHTML, CSS, JavaScript

Got all these skills?
18
Delivering the UI

• 4GL developers need some XHTML, CSS and
  JavaScript
• Design experts create templates
• 4GL developers apply across application

19
4GL developer v. designer
20
4GL developer v. designer
21
UI implementation

• Standards based approach recommended
• Quicker and more consistent rendering
• Make re-skinning easier
• HTML is dead. Long live XHTML!
• HTML 4.01 December 1999
• XHTML 1.0 January 2000
• XHTML 1.1 May 2001
• XHTML 2.0 ?

22
Standards

• XHTML
• Valid XML
• Defines structure of a page
• Use standards mode
• Cascading style sheets (CSS)
• Presentation for structured documents
• ECMAScript
• Makes pages more dynamic

23
Valid XHTML

• Must conform to a DTD
• Correctly nested
• Lower case element and attribute names
• End tags
• Quoted attribute values
• No attribute minimisation
• Terminated empty elements

24
Writing invalid XHTML
ltHTMLgt ltHEADgt ltTITLEgtOld Stylelt/TITLEgt lt/HEADgt ltBO
DYgt ltFONT facearialgt ltTABLEgt
lttrgtltthgtNamelt/thgtltthgtPhonelt/thgt lttrgtlttdgtAdolphs
Sporting Colt/tdgtlttdgt(617) 964-6633lt/trgt lt/TABLEgt lt
BRgt ltinput typecheckbox checked gt Show all

• No DTD
• Upper case elements
• Missing end tags
• Missing quotes
• Minimisation
• Empty elements

25
Writing valid XHTML
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DT
D/xhtml1-strict.dtd"gt lthtmlgt ltheadgt lttitlegtNew
Stylelt/titlegt lt/headgt ltbodygt lttable
style"font-family arial"gt lttrgtltthgtNamelt/thgtltt
hgtPhonelt/thgtlt/trgt lttrgtlttdgtAdolphs Sporting
Colt/tdgtlttdgt(617) 964-33lt/tdgtlt/trgt lt/tablegt ltdivgt
ltbr/gt ltinput type"checkbox" checked"checked"
/gt Show all
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DT
D/xhtml1-strict.dtd"gt ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt
ltFONT facearialgt ltTABLEgt lttrgtltthgtNamelt/thgtltthgt
Phonelt/thgt lttrgtlttdgtAdolphs Sporting
Colt/tdgtlttdgt(617) 964-6633lt/trgt lt/TABLEgt

• DTD
• Lower case
• End tags

26
In Summary

• Have an architecture
• Programming model
• 4 to choose from
• Great UI
• design
• standards

27
Questions?
28
Thank you for your time!
29
(No Transcript)