220 likes | 353 Views
ProJAX. An AJAX Framework for Progress. Tom Bascom President Greenfield Technologies http://www.greenfieldtech.com. What is ProJAX?. ProJAX = Progress + AJAX AJAX = “Asynchronous JavaScript and XML” Sometimes known as “WEB 2.0” Or “Rich Internet Applications”
E N D
ProJAX An AJAX Framework for Progress Tom Bascom President Greenfield Technologies http://www.greenfieldtech.com
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.
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.
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.
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.
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.
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…
Architecture pjxsrvMT.p cgi-bin/simple.pjx XMLHttpRequest simple.p simple.html projax.js
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.
XMLHttpRequest • Supports both GET and POST. • Can be synchronous or asynchronous. • Can return either plain text or XML.
XMLHttpRequest • Code sample: • www/pjx/simple.html • www/pjx/js/pjax.js
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.
CGI-BIN • Code sample – cgi-bin/simple.p
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.
ProJAX Service Handler • Interface to ordinary 4GL code. • Setup • Dispatch • Build Response
ProJAX Service Handler • Code walk-through – projax/service/simple.p
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.
ProJAX Advantages • Leverages your Progress Business Logic and Progress programming skills. • Works with Progress version 9 or higher. • Simple client side widget library included.
Resources http://www.openarchitect.com/pjx/pjax.html http://www.ajaxian.com http://www.quirksmode.org
? Questions