NYC4D - 19 March 2008

A talk was given at the NYC4D meeting by Julien Feason with input from Add Komoncharoensiri and Rudi Pšeničnik - software engineers at 4D, Inc.

Web 2.0 Pack AJAX Framework - latest update yesterday - release 1. The entire data grid has been redesigned (now 2.0) and is more powerful now... The version works with both v2004 and v11 SQL

Julien went over how the grid was put into the HTML. Start with an empty (styled) div tag. The body tag has onload and on unload events that login and logout the user respectively. If login is successful onAterInit is called which is defined by the developer in a script tag in the head tag of the html page. That onAfterInit is what initializes the grid and the grid is put into the empty div that's in the body of the page.

His example had three buttons and a checkbox above the grid - Create Record, Delete Record and Search, and a Hide Toolbar checkbox. The buttons were not part of the grid, but in the HTML above the grid. However the toolbar has those functionalities (and they look better than plain buttons). The point is that you can have your own buttons or use the ones provided by the framework/grid. When clicking on the Add record button it brought up a floating window which was partially transparent.

When you scroll through the selection the data are pulled as needed from the database so your selection can be very big without causing problems. When you click on a column heading it sorts the column with a call back to the database, not locally.

It's important to note that the whole point of AJAX is that you don't need to submit data via GETs and POSTs - it's asynchronous Javascript that's in the background...

The mouse wheel is now supported with the new data grid.

The search function in the toolbar has been changed it now executes a query after each keystroke (after a 3/4 second delay in typing). There's also an advanced search option with the ability to have multiple conditions. You can also save a query for use later. The saving is locally for the current session (not in a cookie) - only works while viewing the current page.

You can also select multiple rows and take action on those records (delete, etc.) This can be turned off...

You can double click and get the "input form". Again, this can be turned off as well.

You can also have preset queries in the toolbar. In these cases you set one value and it queries for that value in one particular field. Those were in grid 1.1. The new feature in 2.0 is to have these queries in a sidebar. The sidebar can be on either the left or right side. They're presented hierarchically, ordered by the field that's being queried on. You can even have the tabs and sidebars simultaneously, though it's a bit redundant...

Headers and footers are now a feature in Data Grid 2.0. Header and footer rows can be taller than a single row, and you can have multiple header and footer rows. You can do calculated values and put them in the footer (e.g. column totals). The totals are calculated in developer hooks on the backend and sent along with the response. So if you change a value, it gets sent to the backend and part of the backend response it the changed column value.

Data Grid 2.0 now supports drag and drop of data grid cells and rows between data grids (very cool). You can leave the element in the originating grid (copy) or delete it (move). Any content can be dragged and dropped. You can have a call to the backend on the drop, or not... You start by defining what items are dragable - can be particular cells or entire rows. And then you define onDragRelease which is the code that's run when you drag onto the destination data grid. You cannot use drag and drop to reorder columns in one data grid.

Data Grid 2.0 now supports column locking - both left and right.

You can also programmatically show and hide columns. The values are still there - just hidden...

Previously you were able to manually resize columns. Now you can do it programmatically as well.

You can also programmatically control the CSS style of any cell, row or column (including headers and footers).

Data Grid 2.0 also has inline editing! You have to enable inline editing and then there's an icon that shows up on the left side. You click on that and the fields become editable. Escape will cancel the changes, click back on the icon and the changes are saved. As you'd expect, tab takes you to the next field. It also supports choice lists from 4D during data entry.

You can also hover over a column with picture data - the grid will be showing a "view image" link and it will display the image floating over the data grid - basically image preview... Hovering previews is coming on other data types as well (hover over a text cell and see the entire value including text that's been cropped from view).

Dashboards can now support charts in PNG, SVG, and Google Chart API. However, IE doesn't support SVG. If you choose PNG, it will convert whatever picture you give it to PNG.

They strongly suggest that you use the condensed version of the Javascript. White space is removed, variable names are made shorter, comments are removed, and so on...

Tags: NYC4D
Categories: 4D, AJAX, Databases, Technology, Web 2.0