Ps:eScript Framework for Developing Browser-based Applications Matt Verrinder Progress Software UK Internet & Integration Technologies.

ps:eScript Framework for Developing Browser-based Applications

ps:eScript Framework for Developing Browser-based Applications

Matt VerrinderProgress Software UKInternet & Integration Technologies

© 2004 Progress Software Ltd2

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

AgendaAgenda

Separating Presentation Layer in Browser-based Applications

Dynamic Page Generation and Customisation

Standards-based User Interface ps:eScript Framework

– Continued tomorrow

© 2004 Progress Software Ltd3

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Developing Browser-based ApplicationsDeveloping Browser-based Applications

Uses multiple skill sets:– Design & create: (X)HTML/CSS/JavaScript

– Programming: database/4GL User-interface subject to design changes

throughout development and beyond Support for multiple browser versions

often specified Ability to alter pages by site, language,

etc. often required

© 2004 Progress Software Ltd4

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript approacheScript approach

No restrictions on the type of site/application that can be created– Take any site from web

Separates HTML from 4GL code– Allows HTML and 4GL to be changed

independently– HTML can be changed without

recompilation of 4GL code Business logic agnostic

– Non-prescriptive

© 2004 Progress Software Ltd5

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Model 2 ArchitectureModel 2 Architecture

Based on Model-View-Controller design pattern– Economical support multiple interfaces

Model 1 (page-centric) for simple, static applications

Model 2 recommended for medium, large or complex applications

© 2004 Progress Software Ltd6

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Model-View-ControllerModel-View-Controller

Model– Data and business logic independent of

interface View

– Display contents of the model Controller

– Translates interactions from the user into actions to be performed against the model

© 2004 Progress Software Ltd7

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

change statequery

Model-View-Controller (MVC)Model-View-Controller (MVC)

Model

View Controlleruser-interactions

data & business

logic

show contents of model

receive interaction,

invoke model action

© 2004 Progress Software Ltd8

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Model-View-Controller for WebSpeedModel-View-Controller for WebSpeed

Presentation

DataBusiness

logic

ps:eScript WebObject

Interface specific

code

Presentation

Model Controller View

© 2004 Progress Software Ltd9

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

OpenEdge Reference Architecture - ComponentsOpenEdge Reference Architecture - Components

UI Components

UI Controllers

Service Interface and Environment Utilities

BusinessWorkflows

Business Tasks

BusinessEntities

Data Access ServicesPersistent Storage

Services

Managed Data Store

Unmanaged Data Store

Users Enterprise Services

Enterprise Service Bus

Integration Adapters

Ad

min

, B

usi

nes

s M

od

elin

g,

Ma

nag

emen

t an

d M

on

ito

rin

g

© 2004 Progress Software Ltd10

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ImplementationImplementation

New eScript WebObject– ADM2 Class

– Super-procedure

– Template Can be used with standard WebSpeed

– WebSpeed 3.1D and 3.1E

– OpenEdge 10.x

© 2004 Progress Software Ltd11

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript

WebObject

How it works…How it works…

Business

Logic

Application

Database

ps:eScript

Processor

ps:eScript

Database

processMarkup ( customer.html )

Read customer.html

Process customer.htmlinclude

discard

fetch data

loop

branch

getData ( Customer.Name )

Response

Request

© 2004 Progress Software Ltd12

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tagseScript tags

ASP-like syntax <%...%> Function calls If… else… end While.. end Include Discard Call

© 2004 Progress Software Ltd13

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags – function calleScript tags – function call

<%=functionName(params)%> Used insert data into page 4GL function invoked in web object Function return value included in the page

<%functionName(params)%> Used to pass information from the HTML

to the 4GL program Function return value ignored

© 2004 Progress Software Ltd14

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags – if … else …eScript tags – if … else …

<%if:functionName(params)%>…

<%else:functionName%> …

<%end:functionName%> Enables HTML to be conditionally output Function returns TRUE if HTML is to be

output Supports NOT operator (!)

© 2004 Progress Software Ltd15

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags - whileeScript tags - while

<%while:functionName(params)%> …<%end:functionName%>

Enables a section of HTML to be output between 0 and n times

Function returns TRUE if HTML is to be output

After output function called again Supports NOT operator (!)

© 2004 Progress Software Ltd16

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags – includeeScript tags – include

<%include:filename $title=PRGS %> Mergres additional HTML into page

– Accepts arguments HTML passed through eScript processor Allows HTML to be componentised

© 2004 Progress Software Ltd17

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags - discardeScript tags - discard

<%discard:start%> …

<%discard:end%> Enclosed HTML not processed and not

sent to client Useful for removing example data

© 2004 Progress Software Ltd18

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

eScript tags - calleScript tags - call

<%call:functionName(params)%> …

<%end:functionName%> Enclosed HTML passed into function as

parameter Function return value output into page Minimise use

– Requires HTML knowledge in 4GL

Demo 1Demo 1Dynamic Page Generation – Item List

© 2004 Progress Software Ltd20

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Frameworkps:eScript Framework

© 2004 Progress Software Ltd21

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Frameworkps:eScript Framework

Allows multiple versions of the same piece of XHTML or text

Automatically selects XHTML and text– based on user’s language (or browser

preferences)

– based on user’s browser or device

– based on application defined criteria

– based on activation date/time

Demo 2Demo 2Page Customisation – Multilanguage

© 2004 Progress Software Ltd23

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

4GL is Not Enough4GL 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?

© 2004 Progress Software Ltd24

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Delivering the UIDelivering the UI

WebSpeed developers need some XHTML, CSS and JavaScript

Design experts create templates– Small effort <10

4GL developers apply across application

© 2004 Progress Software Ltd25

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

4GL Developer vs HTML Designer4GL Developer vs HTML Designer

© 2004 Progress Software Ltd26

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

4GL Developer vs HTML Designer4GL Developer vs HTML Designer

© 2004 Progress Software Ltd27

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

UI ImplementationUI 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

Reformulation of HTML as XML– XHTML 1.1 May 2001

Modularisation of XHTML– XHTML 2.0 ?

© 2004 Progress Software Ltd28

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Standards – W3CStandards – W3C

XHTML– Valid XML– Conforms to a DTD– Defines structure of a page

Cascading style sheets– presentation

ECMA Script– Standard scripting language based on

JavaScript– Makes pages more dynamic

© 2004 Progress Software Ltd29

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Valid XHTMLValid XHTML

Well-formed XML– Correctly nested

– All tags must be closed

– Lower-case element and attribute names

– Quoted attribute values

– No attribute minimisation Must conform to a DTD

– Check generated pages, not templates

Demo 3Demo 3Nice HTML!

© 2004 Progress Software Ltd31

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Benefitsps:eScript Benefits

Reduces initial development time– Encapsulates Professional Services’

experience (estimated >40 man-years!)

– Provides many of the facilities need for browser based applications

– Allows user-interface and logic to be developed in parallel by different teams

© 2004 Progress Software Ltd32

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Benefitsps:eScript Benefits

Minimises on going develop and support costs for diverse range of users through – Modularisation of pages

– Customisation by exception - allow pages, or parts of a page, to be selected based on context (user, browser type, organisation, language, etc.)

– Supports activation of pages, or parts of pages, by date and time

– Allow different skill sets to work separately

© 2004 Progress Software Ltd33

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Features - Contextps:eScript Features - Context

Supports context management, with and without login

Context management without cookies Context API for developers Automatically selects text/(X)HTML

– based on user’s language (or browser preferences)

– based on user’s browser or device– based on application defined criteria– based on activation date/time

© 2004 Progress Software Ltd34

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Features - Applicationps:eScript Features - Application

Query and paging through results Automatic transfer of data from page and

data-type checking Error handling with ‘rich’ error messages Exception handling for critical errors Event logging & site usage tracking Transformation of generated documents

(e.g. encryption, PDF)

© 2004 Progress Software Ltd35

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Features - Securityps:eScript Features - Security

Definition of users and user groups Password management – expiry,

validation rules, reuse Login/logout mechanism Token based security model Can prohibit access to pages that the user

does not have access to Menus and menu security Spoof protection Database auditing & trigger generation

© 2004 Progress Software Ltd36

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Features - Configurationps:eScript Features - Configuration

Parameter driven system configuration Developer API to system parameters Links changed without recompilation Hosts changed for all or part of an

application without recompilation Supports mixed HTTP and HTTPS sites

© 2004 Progress Software Ltd37

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Featuresps:eScript Features

Progress v9.1d and OpenEdge 10 Module based deployment Service model for stateless AppServers Generic 4GL object for static pages Email

– SMTP 4GL client for sending email

– POP3 4GL client for receiving email Streaming of files from disk XML utilities

© 2004 Progress Software Ltd38

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

ps:eScript Toolsps:eScript Tools

Browser & GUI tools for maintenance of framework including text and (X)HTML

GUI tools integrated into AppBuilder– Templates for WebObject and Service procedures

– Search and Detail/Update templates

– Can run standalone Additional browser-based utilities

– Application compiler

– Session viewer

– Event Log viewer

Demo 4Demo 4Search Service

© 2004 Progress Software Ltd40

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

SummarySummary

Good browser-based applications require new skills

Separating HTML and 4GL allows parallel development and UI changes without recompilation/redeployment of r-code

eScript provides a Model 2-complient architecture for building applications

ps:eScript provides everything you need to start building browser-based applications, including easy customisation of user-interface by language, device, etc.

© 2004 Progress Software Ltd41

Sim

plify

you

r bu

sin

ess

Sim

plify

you

r bu

sin

ess

Questions