420 likes | 660 Views
ps:eScript Framework for Developing Browser-based Applications. Matt Verrinder Progress Software UK Internet & Integration Technologies. Agenda. Separating Presentation Layer in Browser-based Applications Dynamic Page Generation and Customisation Standards-based User Interface
E N D
ps:eScript Framework for Developing Browser-based Applications Matt Verrinder Progress Software UK Internet & Integration Technologies
Agenda • Separating Presentation Layer in Browser-based Applications • Dynamic Page Generation and Customisation • Standards-based User Interface • ps:eScript Framework • Continued tomorrow
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
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
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
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
Model-View-Controller (MVC) data & business logic Model change state query show contents of model receive interaction, invoke model action Controller View user-interactions
Model-View-Controller for WebSpeed Presentation Presentation Data Business logic ps:eScript WebObject Interface specific code Model Controller View
OpenEdge Reference Architecture - Components Users Enterprise Services UI Components Enterprise Service Bus ps:eScript 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
Implementation • New eScript WebObject • ADM2 Class • Super-procedure • Template • Can be used with standard WebSpeed • WebSpeed 3.1D and 3.1E • OpenEdge 10.x
How it works… Request Response ps:eScript WebObject Process customer.html include discard fetch data loop branch ps:eScript Database ps:eScript Processor Read customer.html processMarkup ( customer.html ) getData ( Customer.Name ) Application Database Business Logic
eScript tags • ASP-like syntax <%...%> • Function calls • If… else… end • While.. end • Include • Discard • Call
eScript 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
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 (!)
eScript 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 (!)
eScript tags – include • <%include:filename $title=PRGS %> • Mergres additional HTML into page • Accepts arguments • HTML passed through eScript processor • Allows HTML to be componentised
eScript tags - discard • <%discard:start%> … <%discard:end%> • Enclosed HTML not processed and not sent to client • Useful for removing example data
eScript 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 1 Dynamic Page Generation – Item List
ps: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 2 Page Customisation – Multilanguage
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 • WebSpeed developers need some XHTML, CSS and JavaScript • Design experts create templates • Small effort <10 • 4GL developers apply across application
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 ?
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
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
Demo 3 Nice HTML!
ps: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
ps: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
ps: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
ps: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)
ps: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
ps: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
ps: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
ps: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 4 Search Service
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 • ps:eScript provides everything you need to start building browser-based applications, including easy customisation of user-interface by language, device, etc.