1. ARCH-13 Developing WebSpeed Applications
Chris Skeldon
Principal Consultant
Speakers, please put your session name in the Title: area.

2. Agenda Browser based applications OpenEdge™ RA & WebSpeed
eScript WebObject
Demonstration
ARCH-13 Developing WebSpeed Applications

3. Developing For The Browser
Uses multiple skill sets:
design & create: XHTML/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
Professional Services in the UK have been working on browser based applications since 1999 for Internet, Extranet and Intranet. Although each application is different there often are common themes, listed above.
The first of the above points is a feature medium being worked in, but the others are about generally about changing the presentation, not about changing the underlying functionality. This session is about managing this presentation layer.
ARCH-13 Developing WebSpeed Applications

4. OpenEdge Reference Architecture
Users
Enterprise
Services
UI Components
UI Controllers
Integration Layer
Business Servicing Layer
Environment Managers and Utilities
Data Access Layer
The OpenEdge Reference Architecture is a template that Progress Software recommends for structuring applications. At its core is a common set of business logic that can be shared by many interface types – browser, GUI, web services and so on.
In this session we are user-interface (UI) area shown in the upper left of the above diagram. This advocates a model-view-controller approach to designing and implementing applications.
Managed
Data Stores
Unmanaged
Data Stores
ARCH-13 Developing WebSpeed Applications

5. Model-View-Controller (MVC)
data & business logic
Model
change state
query
show contents of model
receive interaction, invoke model action
MVC was first describe by Trygve Reenskaug at Xerox Parc in 1979 (according to wikpedia), then working on Smalltalk. Also first considered in a Smalltalk context it can be implemented in many programming languages, including Progress. Adhering to the model should improve our ability to develop and maintain applications that supports multiple interfaces and devices in an economic way.
Model – data and business logic independent of interface.
View – displays a view of the model, possibly getting data from model via controller
Controller – translates interactions from the user into action to be performed in the model. In our terms the interactions are HTTP GET and POST requests.
View
Controller
user-interactions
ARCH-13 Developing WebSpeed Applications

6. MVC for WebSpeed view ps:eScript WebObject Interface specific code
Data
Business
logic
MVC is not a standard, but a pattern, a model for architecting applications. In this, the ps:eScript implementation, we are looking at a model splitting the controller from the view. That the controller and view and separate from the model is assumed and not the subject of this session.
In this case we are seeing the WebSpeed program as the controller. In the standard WebSpeed details of the view are compiled into the controller to a greater or less extent. Even with Mapped WebObjects it is often required that the 4GL code has detailed knowledge about the view, meaning that the view cannot be changed without recompiling the 4GL code. It also makes having a single controller that supports multiple views problematic – see earlier slide on developing for the browser.
The ps:eScript WebObject sits at the heart of the framework developed by Professional Services in the UK and now in use with customers in a number of countries round the World, including the UK, Netherlands, Finland and Australia. The whole framework is only available through Global Field Services, but the WebObject at its core will be available from PSDN as part of the OpenEdge Reference Implementation initiative. It is this WebObject that is to be described in the remainder of this session.
model
controller
ARCH-13 Developing WebSpeed Applications

7. ps:eScript Approach Once upon a time … No restrictions
Split XHTML/JavaScript from 4GL code
Allows XHTML/JavaScript and 4GL to be changed independently
XHTML/JavaScript can be changed without recompilation of 4GL code
Business logic agnostic
We do not want to place any restrictions on what can be built which allows us as a consulting organisation to use it irrespective of the type of browser based application the customer wants to build.
We want absolute separation of the way the view is implemented from the 4GL code. This is the key principle behind ps:eScript and from this its benefits flow.
ps:eScript is all about the UI.
ARCH-13 Developing WebSpeed Applications

8. Implementation eScript WebObject template super-procedure escript.i
Few supporting files
The plain eScript WebObject, without supporting framework, simply consists of a template for a WebObject which includes an include file, which starts a super-procedure that actually does the work. There are also a .cst file and few supporting .i files (the ps:eScript WebObject is an ADM2 class, but does not use any ADM2 services).
ARCH-13 Developing WebSpeed Applications

9. How It Works… Process customer.html Response ps:eScript Processor
loop
fetch data
branch
include
discard
Response
ps:eScript
Processor
.html files
Read customer.html
processMarkup ( customer.html )
getData ( Customer.Name )
If we are going to keep the view separate from the 4GL code we need a way to incorporate data into it at runtime. We do this by putting custom tags into the .html and then using a script processor (actually a super-procedure of the eScript WebObject) to merge them together.
Request
ps:eScript
WebObject
Business
Logic
Application
Database
ARCH-13 Developing WebSpeed Applications

10. ps:eScript Tags Function call While Data request If Include Discard
ARCH-13 Developing WebSpeed Applications

11. ps:eScript Tags – Function Call
Used to pass information from the HTML to the 4GL program
Does not directly change outgoing page
<%functionname(params)%>
ARCH-13 Developing WebSpeed Applications

12. ps:eScript Tags - While
Enables a section of HTML to be output between 0 and n times
<%while:functionname(params)%> …
<%end:functionname%>
Function returns TRUE if HTML is to be output
After output function called again
Result can be reversed with ! or not
ARCH-13 Developing WebSpeed Applications

13. ps:eScript Tags – Data Request
Enabled 4GL program to return data to be included in the page
<%=functionname(params)%>
ARCH-13 Developing WebSpeed Applications

14. ps:eScript Tags – If … Else …
Enables HTML to be conditionally output
<%if:functionname(params)%> …
<%else:functionname%>
<%end:functionname%>
Function returns TRUE if HTML is to be output
Result can be reversed with ! or not
ARCH-13 Developing WebSpeed Applications

15. ps:escript Tags – Include
Loads text from file into page
<%include:filename $title=PRGS %>
Used to modularise site
Text processed after loading
Accepts arguments
ARCH-13 Developing WebSpeed Applications

16. ps:eScript Tags - Discard
XHTML not processed or sent to client
<%discard:start%> …
<%discard:end%>
Useful for removing example data
ARCH-13 Developing WebSpeed Applications

17. Developing With ps:eScript
Create HTML
Create ps:eScript WebObject
Call appropriate web page
Add custom tags to HTML
Conditional sections
Repeating sections
Data
Add support functions to WebObject
Test
ARCH-13 Developing WebSpeed Applications

18. Demonstration
eScript
ARCH-13 Developing WebSpeed Applications

19. Creating a New WebObject
Once the psescript.cst file has been added to the AppBuilder’s Object Palette the eScript template can be used as the starting point from creating a new WebObject. This template contains a single internal-procedure with has a call to processMarkup() in, passing it the name of the HTML file to load.
ARCH-13 Developing WebSpeed Applications

20. Demo eScript WebObject
To the template the functions shown above have been added. These can be thought of as ‘services’ that the HTML designer can call on in constructing the page.
process-web-request has been amended so that processMarkup() is passed the name of our HTML file, customersrch.html.
ARCH-13 Developing WebSpeed Applications

21. Demo
ARCH-13 Developing WebSpeed Applications

22. ps:eScript Framework ARCH-13 Developing WebSpeed Applications
The ps:eScript WebObject we have been talking about sits at the heart of a much more complete framework. Which provides a firm foundation on which to build browser based application, allowing developers to get on with developing the application, rather than spending time and on the infrastructure and utilities needed for all applications, but do not actually contributing directly to the business functionality that customers are buying.
If you are interested in the full ps:eScript framework speak to your Professional Services Representative. For the core eScript WebObject visit PSDN, where it should be available soon.
ARCH-13 Developing WebSpeed Applications

23. In Summary Separate XHTML & 4GL Look at eScript WebObject
Consider ps:eScript
Implementation and expectations of browser based applications means that they is considerable benefit to be had from splitting XHTML ‘view’ from 4GL ‘controller’.
The eScript WebObject offers a model for splitting XHTML and 4GL and allowing one to be change independently of the other.
If you are considering embarking on your first (or perhaps first major) WebSpeed project then consider ps:eScript. Developed by consultants whose prime role is working with customers on WebSpeed it provided a code base, tools and techniques that have been proven to be a highly effective way of build WebSpeed applications.
ARCH-13 Developing WebSpeed Applications

24. Questions?
ARCH-13 Developing WebSpeed Applications

25. Thank you for your time!
ARCH-13 Developing WebSpeed Applications

26. ARCH-13 Developing WebSpeed Applications