These are notes from the "Ajax Primer" session at the 2007 4D Summit, presented by Joe Resuello, Technical Marketing Engineer with 4D Inc. The session started at 6:30 AM and it was a bit brutal without any coffee or juice...

People know that Ajax powers things like Google Mail or Google Maps, but they don't really know what it is... That gives Ajax a dark, foggy, mysterious persona.

In non-Ajax applications you don't get told you did something wrong until you submit the form by clicking on a button at the bottom of the page. There's no feedback before you submit. Ajax apps give feed back as you do things. For example, how strong your password is as you type it in.

Ajax is not a new technology, there is no Ajax plug-in, not a new language... It's not proprietary, not a company, not a product and not like Adobe's Flash.

Ajax is just a technique that uses existing technologies - Javascript, XML, HTML, CSS. It works on open standards and (theoretically) works in any browser (write once, debug everywhere).

Jesse Garrett was the guy who put it all together back in 2005. People were doing it, but there wasn't a name for it - he put a name to it.

One of the key characteristics of Ajax is that the URL doesn't change. It all happens on one page.

Taking Google Maps as an example... The interface is done in XHTML and CSS. The dynanmic communication with the web server is done with XML using XMLHttpRequest object that lets you asychronously communicate with the server. And lastly, Javascript is what glues it all together.

Flickr has some other good, powerful examples...

In the future there will be a lot of Ajax powered services available for people to drop into their web sites - word processing apps, instant messaging, etc. Examples - meebo for instant messaging, Ajax Write (http://us.Ajax13.com) for word processing, IOS provides an internet operating system.

Frameworks consists of two parts - the client-side Javascript functions, and the server-side processes that catch and process requests.

The 4D Ajax frame work is a set of libraries, custom object styles with plug-and-play with minimal Javascript on the part of the developer.

The 4D Framework Layers:

4D Ajax Framework Client
4D Ajax Framework Libraries
4D Ajax Data Services

4D Ajax Framework Server
4D Server

The 4D Ajax framework is installed as a component in 4D databases. After you install you'll want to go into the Web preferences, and make sure everything is set properly (port number, directory, etc.)

The default environment when you connect shows your tables on the left. There's an option at the bottom so administrators can go into a control panel and configure options.

"Views" are linked tables. So you can set up a link between two related tables and users can see data from both.

You can change the style that the data are presented to the user. There are 5 options including image matrix which shows images with textual data around the image. DCS allows you to present array data. Data Grid is like output forms. Data Filler (I think it's like subforms - missed that one). Data Matrix is like image matrix, without pictures. And lastly, there are calendars.

He then showed the 4D Apartment tech note... One of the key points is that data are only pulled from 4D as they're displayed on-screen - no long waits for all the data. He also showed the Contacts database example. The implementations were pretty slick, but I wondered how much the framework determines the design of the page (without extraordinary coding). The other item that concerned me was the warning when starting up the demos of the limited number of browsers that were supported.

They have a 4D Ajax for Dreamweaver Extension which lets you embed objects without any code at all. There are icons at the top for "import structure", "insert login" and buttons for importing a variety of object types. When you click on each button it will popup windows with forms that step you through the basic things you need to define (your cursor should be where you want the obect embedded). There's no code to write. Of course, it's probably not as customizeable as if you dropped down to code to handle things, but since it's writing the code for you, you can always drop down to the code afterwards and tweak it.

Q&A

[Brendan Coveney stepped in at this point to help answer questions.]

There is communication with the server in Ajax - it's as needed and it doesn't involve page reloads - it just partial data loads as needed.

Developer Created Selections (DCS) allow you to display arrays. The front end and back end are decoupled. The front end doesn't need to know where it's coming from - can be a table or an array.

Tags: 4D, 4D-summit, AJAX, Dreamweaver
Categories: 4D, AJAX, Web Application Development