Transcript DEV-04 - TR
DEV-04
Building OpenEdge®
Reference Architecture
Applications with
WebSpeed®
Chris Skeldon
Principal Consultant
Agenda
OpenEdge Reference Architecture
WebSpeed architecture
Writing your 4GL program
Creating the user-interface
2 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
The browser has arrived?
3 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Enterprise
Services
Users
Presentation Layer
Integration Layer
Business Servicing Layer
Data Access Layer
Managed
Data Stores
4 © 2005 Progress Software Corporation
Unmanaged
Data Stores
Environment Managers and Utilities
OpenEdge Reference Architecture
DEV-04 Building OpenEdge RA Applications with WebSpeed
WebSpeed Architecture
User Agent
WebSpeed Transaction
Server
NameServer
WebServer
WebSpeed
Messenger
5 © 2005 Progress Software Corporation
WebSpeed
Broker
WebSpeed
Agent
DEV-04 Building OpenEdge RA Applications with WebSpeed
Running a WebSpeed program
http://localhost
/main/splogin.p
computer
Your 4GL program
/scripts/
directory on
web server
/wsSportsPro/
/cgiip.exe/
WebSpeed
Messenger
6 © 2005 Progress Software Corporation
WebSpeed
Broker
DEV-04 Building OpenEdge RA Applications with WebSpeed
Your 4GL Program sends HTML
{&OUT} "<html><body>Hello World</body></html>"
7 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Writing your 4GL program
Embedded SpeedScript
CGI Wrapping
Mapped WebObjects
eScript WebObject
All compile to Progress 4GL statements
sending out HTML
8 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Embedded SpeedScript
Embeds 4GL inside HTML
Allows use of HTML editors
Script tags start and end 4GL blocks
<script language=SpeedScript>
Expression escapes: `
</script>
Turned inside-out and compiled
<body>
{&OUT} "<body>".
<table>
{&OUT} "<table>".
<SCRIPT LANGUAGE="SpeedScript">
FOR EACH Customer NO-LOCK:
FOR EACH Customer NO-LOCK:
9 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Example of Embedded SpeedScript
<table>
<SCRIPT LANGUAGE="SpeedScript">
FOR EACH Customer NO-LOCK WHERE … :
</SCRIPT>
<tr><td>`Customer.CustNum`</td>
<td>`Customer.Name`</td></tr>
<SCRIPT LANGUAGE="SpeedScript">
END.
</SCRIPT>
</table>
10 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
CGI Wrapping
Insert HTML into 4GL procedures
Standard coding structure
Can generate non-HTML content
11 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Example of CGI Wrapping
{&OUT} "<table>":U.
FOR EACH Customer NO-LOCK WHERE … :
{&OUT} "<tr><td>":U
Customer.CustNum
"</td><td>":U
Customer.NAME
"</tr></td>":U.
END.
{&OUT} "</table>":U.
12 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
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
13 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Mapped WebObjects
14 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
eScript WebObject
WebObject at the heart of ps:eScript
Absolute separation of 4GL from HTML
HTML can be changed without
http://outletservice.mmbox.co.uk/outlet.asmx?WSDL
recompiling
One 4GL program can support many
HTML ‘views’
Will be on PSDN
Not supported
15 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Creating the user-interface
Adding sizzle
16 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
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?
17 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Delivering the UI
4GL developers need some XHTML, CSS
and JavaScript
Design experts create templates
4GL developers apply across application
18 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
4GL developer v. designer
19 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
4GL developer v. designer
20 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
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 ?
21 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
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
22 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
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
23 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Writing invalid XHTML
<HTML>
•No DTD
<HEAD>
•Upper case elements
<TITLE>Old Style</TITLE>
</HEAD>
•Missing end tags
<BODY>
•Missing quotes
<FONT face=arial>
•Minimisation
<TABLE>
<tr><th>Name</th><th>Phone</th>
•Empty elements
<tr><td>Adolphs Sporting Co</td><td>(617) 964-6633</tr>
</TABLE>
<BR>
<input type=checkbox checked > Show all
24 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Writing valid XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<HTML>
•DTD
<head>
<HEAD>
•Lower case
<title>New Style</title>
</HEAD>
</head>
•End tags
<BODY>
<body>
<FONT face=arial>
•…
<table style="font-family: arial;">
<TABLE>
<tr><th>Name</th><th>Phone</th></tr>
<tr><th>Name</th><th>Phone</th>
<tr><td>Adolphs Sporting Co</td><td>(617) 964-33</td></tr>
<tr><td>Adolphs Sporting Co</td><td>(617) 964-6633</tr>
</table>
</TABLE>
<div>
<br/> <input type="checkbox" checked="checked" /> Show all
25 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
In Summary
Have an architecture
Programming model
– 4 to choose from
Great UI
– design
– standards
26 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Questions?
27 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
Thank you for
your time!
28 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed
29 © 2005 Progress Software Corporation
DEV-04 Building OpenEdge RA Applications with WebSpeed