ps:eScript Framework for Developing Browser-based Applications

1
pseScript Framework for Developing Browser-based
Applications

• Matt Verrinder
• Progress Software UK
• Internet Integration Technologies

2
Agenda

• Separating Presentation Layer in Browser-based
  Applications
• Dynamic Page Generation and Customisation
• Standards-based User Interface
• pseScript Framework
• Continued tomorrow

3
Developing 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

4
eScript 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

5
Model 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

6
Model-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

7
Model-View-Controller (MVC)
data business logic
Model
change state
query
show contents of model
receive interaction, invoke model action
Controller
View
user-interactions
8
Model-View-Controller for WebSpeed
Model
Controller
View
9
OpenEdge Reference Architecture - Components
Users
Enterprise Services
UI Components
Enterprise Service Bus
pseScript
UI Controllers
Integration Adapters
Service Interface and Environment Utilities
Admin, Business Modeling, Management and
Monitoring
BusinessWorkflows
Business Tasks
BusinessEntities
Data Access Services
Persistent Storage Services
Managed Data Store
Unmanaged Data Store
10
Implementation

• New eScript WebObject
• ADM2 Class
• Super-procedure
• Template
• Can be used with standard WebSpeed
• WebSpeed 3.1D and 3.1E
• OpenEdge 10.x

11
How it works
Process customer.html include discard fetch
data loop branch
pseScript Database
pseScript Processor
Read customer.html
processMarkup ( customer.html )
getData ( Customer.Name )
Application Database
Business Logic
12
eScript tags

• ASP-like syntax lt...gt
• Function calls
• If else end
• While.. end
• Include
• Discard
• Call

13
eScript tags function call

• ltfunctionName(params)gt
• Used insert data into page
• 4GL function invoked in web object
• Function return value included in the page
• ltfunctionName(params)gt
• Used to pass information from the HTML to the 4GL
  program
• Function return value ignored

14
eScript tags if else

• ltiffunctionName(params)gt
• ltelsefunctionNamegt
• ltendfunctionNamegt
• Enables HTML to be conditionally output
• Function returns TRUE if HTML is to be output
• Supports NOT operator (!)

15
eScript tags - while

• ltwhilefunctionName(params)gt
• ltendfunctionNamegt
• 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 (!)

16
eScript tags include

• ltincludefilename titlePRGS gt
• Mergres additional HTML into page
• Accepts arguments
• HTML passed through eScript processor
• Allows HTML to be componentised

17
eScript tags - discard

• ltdiscardstartgt
• ltdiscardendgt
• Enclosed HTML not processed and not sent to
  client
• Useful for removing example data

18
eScript tags - call

• ltcallfunctionName(params)gt
• ltendfunctionNamegt
• Enclosed HTML passed into function as parameter
• Function return value output into page
• Minimise use
• Requires HTML knowledge in 4GL

19
Demo 1
Dynamic Page Generation Item List
20
pseScript Framework
21
pseScript Framework

• Allows multiple versions of the same piece of
  XHTML or text
• Automatically selects XHTML and text
• based on users language (or browser preferences)
• based on users browser or device
• based on application defined criteria
• based on activation date/time

22
Demo 2
Page Customisation Multilanguage
23
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?
24
Delivering the UI

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

25
4GL Developer vs HTML Designer
26
4GL Developer vs HTML Designer
27
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
• Reformulation of HTML as XML
• XHTML 1.1 May 2001
• Modularisation of XHTML
• XHTML 2.0 ?

28
Standards 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

29
Valid 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

30
Demo 3
Nice HTML!
31
pseScript Benefits

• Reduces initial development time
• Encapsulates Professional Services experience
  (estimated gt40 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

32
pseScript 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

33
pseScript Features - Context

• Supports context management, with and without
  login
• Context management without cookies
• Context API for developers
• Automatically selects text/(X)HTML
• based on users language (or browser preferences)
• based on users browser or device
• based on application defined criteria
• based on activation date/time

34
pseScript 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)

35
pseScript 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

36
pseScript 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

37
pseScript 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

38
pseScript 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

39
Demo 4
Search Service
40
Summary

• 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
• pseScript provides everything you need to start
  building browser-based applications, including
  easy customisation of user-interface by language,
  device, etc.

41
Questions

• ?