View
259
Download
2
Embed Size (px)
Citation preview
DEV-04Building OpenEdge® Reference Architecture Applications with WebSpeed®
Chris SkeldonPrincipal Consultant
2 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Agenda
OpenEdge Reference Architecture WebSpeed architecture Writing your 4GL program Creating the user-interface
3 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
The browser has arrived?
“Increasingly ITTs require browser access”“Nearly everbody wants access through a browser”
4 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
OpenEdge Reference Architecture
Users
Presentation Layer
Business Servicing Layer
Data Access Layer
Managed Data Stores
Unmanaged Data Stores
Enterprise Services
Integration Layer
En
viro
nm
ent
Man
ager
s an
d U
tili
ties
5 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
WebSpeed Architecture
User Agent WebSpeed Transaction Server
WebServer
WebSpeed Messenger
WebSpeed Broker
WebSpeed Agent
NameServer
6 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Running a WebSpeed program
http://localhost
computer
/scripts/
directory on web server
/cgiip.exe/
WebSpeed Messenger
/wsSportsPro/
WebSpeed Broker
/main/splogin.p
Your 4GL program
7 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Your 4GL Program sends HTML
{&OUT} "<html><body>Hello World</body></html>"
8 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Writing your 4GL program
Embedded SpeedScript CGI Wrapping Mapped WebObjects eScript WebObject
All compile to Progress 4GL statements sending out HTML
9 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Embedded SpeedScript
Embeds 4GL inside HTML Allows use of HTML editors Script tags start and end 4GL blocks
<script language=SpeedScript> </script>
Expression escapes: `
Turned inside-out and compiled<body>
<table>
<SCRIPT LANGUAGE="SpeedScript">
FOR EACH Customer NO-LOCK:
{&OUT} "<body>".
{&OUT} "<table>".
FOR EACH Customer NO-LOCK:
10 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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>
11 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
CGI Wrapping
Insert HTML into 4GL procedures Standard coding structure Can generate non-HTML content
12 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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.
13 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Mapped WebObjects
15 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
eScript WebObject
WebObject at the heart of ps:eScript 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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Adding sizzle
Creating the user-interface
17 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Delivering the UI
4GL developers need some XHTML, CSS and JavaScript
Design experts create templates 4GL developers apply across application
19 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
4GL developer v. designer
20 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
4GL developer v. designer
21 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
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 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Writing invalid XHTML<HTML>
<HEAD>
<TITLE>Old Style</TITLE>
</HEAD>
<BODY>
<FONT face=arial>
<TABLE>
<tr><th>Name</th><th>Phone</th>
<tr><td>Adolphs Sporting Co</td><td>(617) 964-6633</tr>
</TABLE>
<BR>
<input type=checkbox checked > Show all
•No DTD
•Upper case elements
•Missing end tags
•Missing quotes
•Minimisation
•Empty elements
25 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Writing valid XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT face=arial>
<TABLE>
<tr><th>Name</th><th>Phone</th>
<tr><td>Adolphs Sporting Co</td><td>(617) 964-6633</tr>
</TABLE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>New Style</title>
</head>
<body>
<table style="font-family: arial;">
<tr><th>Name</th><th>Phone</th></tr>
<tr><td>Adolphs Sporting Co</td><td>(617) 964-33</td></tr>
</table>
<div>
<br/> <input type="checkbox" checked="checked" /> Show all
•DTD
•Lower case
•End tags
•…
26 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
In Summary
Have an architecture Programming model
– 4 to choose from Great UI
– design
– standards
27 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Questions?
28 DEV-04 Building OpenEdge RA Applications with WebSpeed© 2005 Progress Software Corporation
Thank you for your time!