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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Demonstration eScript ARCH-13 Developing WebSpeed Applications

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

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

Demo ARCH-13 Developing WebSpeed Applications

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

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

Questions? ARCH-13 Developing WebSpeed Applications

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

ARCH-13 Developing WebSpeed Applications