1. ProJAX An AJAX Framework for Progress Tom Bascom President Greenfield Technologies http://www.greenfieldtech.com

2. What is ProJAX? • ProJAX = Progress + AJAX • AJAX = “Asynchronous JavaScript and XML” • Sometimes known as “WEB 2.0” • Or “Rich Internet Applications” • Really just a cute name for a set of technologies that have serendipitously matured together.

3. Why Is AJAX Importantto IT? • Browser-based, zero footprint install. • No ActiveX. • No Flash. • Operating system independent. • Works on all standards compliant browsers. • Works with Internet Explorer too. • No single vendor controls AJAX. • In Other Words -- AJAX is as close as we have ever been to a universal, open platform.

4. Why Is AJAX Importantto users? • It can greatly enrich the user experience by: • Eliminating page refreshes by using XMLHttpRequest. • Implementing GUI eye-candy by exploiting: • CSS • DHTML • JavaScript • Better usability through smoother, less fragmented UI.

5. Wait! Isn’t JavaScript a “toy” language? • No, JavaScript is actually quite powerful. • Object-oriented. • Event driven. • Multi-threaded. • Fast. • Of course like any language it does have warts – but not so many as you may have heard.

6. But isn’t JavaScript famously incompatible between browsers? • No, the famous browser incompatibilities are not JavaScript related – they are centered in 3 areas: • CSS differences • DOM differences • Event model differences • Smart JavaScript coding handles all of these differences with ease.

7. Smart JavaScript • Develop using FireFox first!!! • Test with IE last. • Do notever use browser detects! • Instead always use feature detects. • Do not use onload, onclick etc. Except in demos ;-) • Instead register event handlers. • Use CSS to signal behavior. • An element can have multiple styles…

8. Demo!

9. Architecture pjxsrvMT.p cgi-bin/simple.pjx XMLHttpRequest simple.p simple.html projax.js

10. XMLHttpRequest • Introduced, as an ActiveX, by Microsoft to support Exchange Webmail. • Just to keep everyone on their toes there are 2 major versions of the ActiveX. • Natively supported by all other modern browsers.

11. XMLHttpRequest • Supports both GET and POST. • Can be synchronous or asynchronous. • Can return either plain text or XML.

12. XMLHttpRequest • Code sample: • www/pjx/simple.html • www/pjx/js/pjax.js

13. CGI-BIN • Simplest way to connect a web page to dynamic content. • Standard input comes from the web browser via GET or POST. • Standard output goes back to the browser.

14. CGI-BIN • Code sample – cgi-bin/simple.p

15. The ProJAX Server • Listens for a request. • Validates requests. • Must be well formed. • Must have a valid session id. • May need to login. • Dispatches requests. • Returns responses. • Provides persistence for session state. • Provides logging and debugging support.

16. ProJAX Service Handler • Interface to ordinary 4GL code. • Setup • Dispatch • Build Response

17. ProJAX Service Handler • Code walk-through – projax/service/simple.p

18. Demo!

19. Caveats… • Show restraint! • Make sure to USE rather than ABUSE AJAX. • Best when used to augment or supplement a page. • Be careful about public facing applications: • Not everyone turns on JS • Accessibility is a big issue • Leverage client-side CPU power. • Bring information to the user rather than forcing them to navigate to it.

20. ProJAX Advantages • Leverages your Progress Business Logic and Progress programming skills. • Works with Progress version 9 or higher. • Simple client side widget library included.

21. Resources http://www.openarchitect.com/pjx/pjax.html http://www.ajaxian.com http://www.quirksmode.org

22. ? Questions