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 Important to 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 Important to 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 not ever 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 XMLHttpRequest simple.p pjxsrvMT.p cgi-bin/simple.pjx 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. Q uestions