1 / 41

ps:eScript Framework for Developing Browser-based Applications

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

lani
Download Presentation

ps:eScript Framework for Developing Browser-based Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ps:eScript 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 • ps:eScript 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 Presentation Presentation Data Business logic ps:eScript WebObject Interface specific code Model Controller View

  9. 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

  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… 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

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

  13. 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

  14. 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 (!)

  15. 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 (!)

  16. eScript tags – include • <%include:filename $title=PRGS %> • Mergres additional HTML into page • Accepts arguments • HTML passed through eScript processor • Allows HTML to be componentised

  17. eScript tags - discard • <%discard:start%> … <%discard:end%> • Enclosed HTML not processed and not sent to client • Useful for removing example data

  18. 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

  19. Demo 1 Dynamic Page Generation – Item List

  20. ps:eScript Framework

  21. 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

  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 <10 • 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. 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

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

  33. 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

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

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

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

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

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

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

  41. Questions ?

More Related