Dave Johnson

October 17th, 2006

We have just made a quick Flex/Ajax dashboard to show how Flex and Ajax can work together to make a very compelling user-interface for something like a corporate information dashboard. You can check it out the demo here and an article about the demo here.

Using the FABridge along with the Nitobi Ajax Grid and Adobe Flex Charting, we have created a scenario where one can view monthly sales data and then see the sales details for the month in both a tabular format in a grid and visually represented in a Flex chart.

Under the hood we have used PHP and MySQL to provide the data to both the data grids and the chart. When a user clicks on a record in the sales data grouped by month, the details grid makes a request to the server for all the sales data for that month - this ends up being between 200 to 1000 records or so. To ensure that the details grid is still fast, we only render the part of the dataset that the user is looking at rather than rendering all 1000 records say, which can take a long time when you use the DOM innerHTML property. The other thing that happens when a month is selected in the master grid is that the Flex chart is also updated with information about the sales for that month, except that the sales data is then grouped by day. Grouping of the sales data could either be done on the client or the server, however, since we have already retreived all the sales data for the month and displayed it in the detail grid we simply take that same data and group it very quickly using an XSL transformation (yes currently only IE and Moz but the latest Safari build also has it - finally!). The grouped data we output from the XSL transformation is actually formatted as JSON which is then evaluated into a JavaScript object and passed to the Flex chart for rendering. The grouping XSLT is pretty simple and uses the Muenchian method:

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ntb="http://www.nitobi.com">
  <xsl:output method="text" encoding="utf-8"/>
  <xsl:key name="sales-by-day" match="ntb:e" use="@h" />
  <xsl:template match="/">
    [<xsl:apply-templates select="//ntb:data" />{}]
  </xsl:template>
  <xsl:template match=”ntb:data”>
    <xsl:for-each select=”ntb:e[count(. | key('sales-by-day', @h)[1]) = 1]”>
      {’totalSales’: <xsl:value-of select=”sum(key(’sales-by-day’, @h)/@i)”/>,
        ’day’: <xsl:value-of select=”@h” />,
        ’month’: <xsl:value-of select=”@f” />,
        ’year’: <xsl:value-of select=”@g” />},
    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>


We have also hooked up a few other events so that the chart will be updated when changes to the data in the detail grid are made.

All in all, by using the FABridge to move data to and from a Flex chart we can create very compelling and ultimately very useful dashboard type of application by merrying the Flex and Ajax technologies.

Posted in AJAX, Components, Declarative Programming, Flex, Nitobi, RIA, Web2.0 | 12 Comments »

June 29th, 2006

Looks like Adobe’s Flex 2 has finally been released!

I am pretty excited to see how the uptake is and if people are into buying components for it - after all we are not married to Ajax!

If you are building a Flex application then don’t be a stranger and let us know what kinds of components you need. There could be a very good opportunity there for charting (of course Adobe has their own charting component already) and rich data manipulation.

On a somewhat related note, I will post some cool screencasts of Flex + Ajax copy and paste shortly with the latest copy and paste functionality of our currently only Ajax based Data Grid.

Technorati Tags: flex ajax adobe

Posted in AJAX, Flex | No Comments »

June 21st, 2006

In the latest EBA podcast we were lucky enough to have Duane “Cosmic Genius” Nickull with us from Adobe.

Mostly just discussed SOA and jabbed at SOA 2.0 a bit

I am also hacking away at a Flex component for copy and paste functionality between our AJAX Grid and a Flex DataGrid (or Microsoft Excel). I did a quick google and found that someone from Adobe already did a copy/paste to/from Flex and Excel example - just five days ago.

Check it out.

Posted in AJAX, Flex, Service Oriented Architecture, Web2.0 | No Comments »

May 24th, 2006

Well, Captain AJAX and I finally got around to making our first podcast! It is a bit long and the audio sucks but we will be sure to get that fixed for next time ;). Anyhow, Dre and I just talked about everything that happened in the past coupld weeks including Dre’s findings down at JavaOne, The AJAX Experience, DCamp and NetBeans Day.

We also talked about the launch of EBA Grid V3…and what's to come down the road - WARNING - could be considered shameless self promotion but we also talk about some AJAX technology stuff

Here is the podcast care of Audioblo. If anyone has any tips about posting and or making the old podcasts then let us know!

Technorati Tags: ajax podcast javaone ajaxexperience

Posted in AJAX, Architecture, Business, Components, Declarative Programming, Flex, JavaScript, Web2.0, XML | No Comments »

May 19th, 2006

We have just put together a little demo that uses the Adobe FABridge library for their new Flex technology and married it with our AJAX Grid control.

Check out the cool screencast here on our EBA Labs site. Essentially what it lets you do is plot data from our Grid control using the Flex / Flash.

It should be even more cool once we put in our newly released, cross-browser, AJAX Grid component (which I will post a screencast about very soon)!

Technorati Tags: ajax grid web2.0 eba flex flash

Posted in AJAX, Components, Declarative Programming, Flash, Flex, Web2.0 | 1 Comment »

March 8th, 2006

Today a few of us at EBA had a sneak peak at some really cool Flex technology from the team over at Adobe.

Essentially we saw how one can go beyond the ExternalInterface feature in Flash 8, which only supports function calls across the JavaScript / ActionScript boundary with primitive objects, to a situation where one can access Flex objects directly from JavaScript and vice versa. This is being called the Flex-AJAX Bridge or FABridge. All the info (with Alpha download) can be found here on Adobe Labs.

Today this means that AJAX developers can better leverage native Flash capabilities such as local storage (hopefully it is faster than ExternalInterface), cross-domain data access, and sockets. It should get really interesting when the AJAX Client for Flex Data Services become available (later this year) which should provide data persistence, pub/sub, push, etc.

As a component vendor, I like the idea of marrying the benefits of both AJAX and Flex - it particularly makes sense for doing anything with charting etc. With the SVG/VML/Canvas battle for vectors graphics dominance pretty much going nowhere (and they can’t even do video or audio), Flash is the best option for rich media that works on a large majority of today’s web browsers. It was a good move on Adobe’s part to provide some incremental benefit for AJAX developers rather than trying to push a full Flex framework where the open standards of the AJAX technology stack rule. Something like XAML, which is Microsoft’s next generation declarative user-interface language, will have a tough time for that exact reason.

Flex seems to be shaping up into something that should, in the near term at the very least, be a great addition to the AJAX developers toolbox. I can’t wait to get into the guts of it - just as soon as Grid V3 is done

Posted in AJAX, Flash, Flex, Web2.0 | No Comments »

February 8th, 2006

Who knew that everyone would think that URLs are so important!

James Governor has a great overview of the very informative presentation by Josh Schachter from del.icio.us.

I would have to also agree that the Adobe Flex presentation was way out of left field - I guess they were essentially paying for the conference to get in a Flex sales presentation

Tom Coates from Yahoo! also had a great presentation covering similiar stuff to Josh.

Posted in Business, Flex, Web2.0 | 1 Comment »

October 8th, 2005

Just a quick post about running AJaX offline. With the recent release of Flash 8 it seems a good time to bring this up since Flash 8 has everything you need for a robust cross-browser data persistence layer. The two main features of Flash 8 are the SharedObject (although this has been around for a few years now - since Flash 6) and more importantly full JavaScript support. The SharedObject allows you to store as much data as the end user wants to allow and this limit can be configured by the end user.

In the Flash file you can use the ExternalInterface to expose methods to the JavaScript runtime like this:

import flash.external.ExternalInterface;
ExternalInterface.addCallback("JavaScriptInterfaceName", null, FlashMethod);

Similarly you can call JavaScript functions from within the Flash file using the call method of the ExternalInterface

ExternalInterface.call("JavaScriptMethod");

And you can call methods in the Flash movie from JavaScript like this:

function CallMethod() {
if (document.getElementById)
myFlash = document.getElementById("FlashMovieNodeId");
if (myFlash)
myFlash.flashFunction();
}

The other piece of the puzzle is the SharedObject which is accessible through ActionScript in Flash.

var my_SO:SharedObject = SharedObject.getLocal("MySharedObjectName");
my_SO.data.eba = dat;
var ret_val = my_SO.flush();

It is importatnt to note that if the end user specified data size limit is smaller than the requested amount of data to be saved it needs to show the Flash movie to the user (do this simply with a little JavaScript) so the user can either increase the cache size or not. The ret_val from the SharedObject flush method can be checked to see the result and determine if the Flash movie needs to be shown for input or not.

The other great thing about this is that the upgrade path to Flash 8 has been made a bit better. You can actually have the Flash 8 player installed through the old Flash player from what I understand (called Express Install I believe).

All and all a pretty slick way to persist data with AJaX without relying on cookies or the User Data behaviour in IE.

Posted in AJAX, Flash, Flex, JavaScript | 5 Comments »