DEV-04 Building OpenEdge® Reference Architecture Applications with WebSpeed® Chris Skeldon...

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


The browser has arrived?

“Increasingly ITTs require browser access”“Nearly everbody wants access through a browser”


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


WebSpeed Architecture

User Agent WebSpeed Transaction Server

WebServer

WebSpeed Messenger

WebSpeed Broker

WebSpeed Agent

NameServer


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


Your 4GL Program sends HTML

{&OUT} "<html><body>Hello World</body></html>"


Writing your 4GL program

Embedded SpeedScript CGI Wrapping Mapped WebObjects eScript WebObject

All compile to Progress 4GL statements sending out HTML


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:


Example of Embedded SpeedScript<table>


FOR EACH Customer NO-LOCK WHERE … :

</SCRIPT>

<tr><td>`Customer.CustNum`</td>

<td>`Customer.Name`</td></tr>


END.

</SCRIPT>

</table>


CGI Wrapping

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


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.


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


Mapped WebObjects


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


Adding sizzle

Creating the user-interface


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?


Delivering the UI

4GL developers need some XHTML, CSS and JavaScript

Design experts create templates 4GL developers apply across application


4GL developer v. designer


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 ?


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


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


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


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

•…


In Summary

Have an architecture Programming model

– 4 to choose from Great UI

– design

– standards


Questions?


Thank you for your time!

DEV-04 Building OpenEdge® Reference Architecture Applications with WebSpeed® Chris Skeldon...

Documents

Transcript of DEV-04 Building OpenEdge® Reference Architecture Applications with WebSpeed® Chris Skeldon...