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

Demo!

Architecture

XMLHttpRequest

simple.p

pjxsrvMT.p cgi-bin/simple.pjx

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

Demo!

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