Thursday, October 18, 2007

Developing 4D Ajax Framework Applications

Rudi Pšeničnik and Julien Feasson giving talk at 4D SummitThese are notes from the "Developing 4D Ajax Framework Applications" presentation given by Rudi (Rudolf) Pšeničnik and Julien Feasson of 4D, Inc at 4D Summit 2007.

Web 2.0 is about Rich Internet Applications (RIAs). The web is a platform, and more interactive for users. Good examples are Google Maps, Flickr and the social networking sites.

RIAs are a lot like desktop apps, and work a lot like client server applications with the web server being the server or middleware server for a backend database.

The asynchronous nature of Ajax is important because it means the connections to the backend happen while the person is on the page doing other things - no delays...

The layers of 4D Ajax Framework Applications...

4DAF Client
4DAF Libraries
4DAF Data Services

4DAF Server
4D / 4D Server

You can replace any of the client side portions, if you need/want to.

The framework is tied into the 4D user/password system and offers session management, but both can be disabled in lieu of whatever system the developer already has in place.

You can add 4DAF to existing pages or create new pages with it.

To add to an existing page - you add links to Javascript libraries and a CSS stylesheet.

The login function is added as an onLoad event to the tag.

You'll also want to add a script tag for Javascript in the tag with an onAfterInit() function for what happens after the page loads - this is a new data window which will be your Ajax area. You'll use the DataWindow function to create the object and someObject.customize to change the features of the data window.

DataWindow takes two parameters - the name of the view and the name of the object the data window will go into. If you put null in for the object that will contain the data window then it will open a new window. Otherwise it will replace the contents of the div with the id equal to the name you pass. Actually you pas the name using $('someDiv').

The four parameters that are passed when you customize are 1) Toolbar, 2) Status, 3) Tabs, 4) Editor.

The files that are called are as follows:
  • basic.css - includes all the basic styles
  • framework.js - used interpreted
  • dax.js - used interpreted
  • compiled.js - compiled, much smaller
  • callbacks.js - used in all cases
  • resources_en.js - for language localization
Its a good practice to create a new view for each web page so you don't mess up other pages when you make modifications.

Presentation Modes:
  • Grid
  • Calendar
  • Data Tree
  • Data Matrix
  • Image Matrix
You can have tabs along the top each of which does a preset query. If you have too many tabs it won't blow up - instead it will have a way to scroll through the tabs.

There are a number of ways to do preset queries - it's relatively flexible.

While the admin interface is relatively powerful, you can also drop down to code to do other things.

callbacks.js let you have hooks for different browser events. For example you could format data that comes from 4D, but many times it's better to do whatever you're doing in 4D code.

There are actually a lot of files that make up the framework. When possible use the compiled version - it's just one file and heavily compressed.

The bridge portion of the framework can be used on it's own.

There's a new, much improved data grid coming out soon which will include locked columns. You can get or set values of particular cells, resize columns and rows on-the-fly, sort the data, etc.

Just about everything about the look and feel can be customized - you can override the CSS or do things via the framework if you're changing something dynamically based on data (e.g. change the color to red if it's over $10,000).

The framework also supports calendars. Obviously dates are required.

Data trees are expandable lists up to 8 layers deep.

Data matrix and image matrix are similar - they're grouped areas of data (the image matrix just has an image as one of the data elements).

Labels: , , , , ,

Digg It!  Add to del.icio.us  Add to StumbleUpon  Add to Reddit  Add to Technorati  Add to Furl  Add to Netscape

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home