The Future of Flex

After having a look at the current RIA technologies in the market, I have to say that Adobe RIAs are falling back wrt the JavaScript based ones. Did I hear somebody talk about Microsoft's Silverlight? I feel there is nothing special about it absolutely; I guess web applications is not exactly Microsoft's forte, so I would not consider it very seriously for now. An interesting addition in the foray has been Google with its smart data visualization API.

I think that there are a few weaknesses of JavaScript based RIAs. Firstly, JavaScript itself is not a very ordered language. It is easy to copy and using it to build a competitive advantage is difficult, if not down-right impossible. What adds to this difficulty is the absence of any tool that tries to make this development comprehensive. Adobe is trying to move towards it with a combination of its Dreamweaver and Spry framework, but there is still a long way to go. A little discipline in coding can make the JavaScript code manageable, as demonstrated by products like YUI and ext.

Secondly, JavaScript's charting capabilities are pretty limited. For serious dashboards demanded by analytics, this is a handicap. Interestingly, JavaScript developers have attempted to cover this gap by using, guess what, flash. With a better integration between swf files and javascript, this has become increasingly possible. While ext has just started on the path, Google's data visualization API and charting widgets are something to watch for. Buying charts from Fusion Charts can give you some headstart as well.

On the other end of the spectrum lies the flash/flex based RIAs. A few years ago they held a distinct advantage over their JavaScript counterparts in terms of possibilities. The Flex based projects are especially easier to maintain and develop when compared to JavaScript. However, the apparent growth has more or less stagnated. For example, the Datagrid and even the Advanced Datagrid lack the basic pagination feature available in most JavaScript based tables. With very competitive graphing options available in form of Google APIs and Fusion Charts, the case for using Flex becomes weaker. The debugging and testing ability has not improved much over time either. If this continues, in the next two-three years JavaScript based RIA's can play hardball to firmly displace Flex, leaving Adobe to play the catch-up game. It seems Adobe has the right ideas, but its willingness and ability to put these ideas into action will decide the final outcome. With the flex SDK out in the open and javascript using flash to plugin its charting gap, Adobe can win this war by promising to increase the developer's productivity by doing what it does best: developing a desktop IDE for helping RIA developers to become more effective.

Using Flex Within an Ext Panel

Here is an interesting one: integrating ext with flex :p. We built a dashboard application using ext, but realized that for certain visualization needs flex is better equipped. So now, we wanted one panel in the ext tabbed layout to have a flex chart. A brief step-by-step guide to achieve it:

1. Generate the swf file for your flex project. This will, normally, generate the following in the bin-debug folder:

• An HTML rendering of the whole thing and the main swf file, which will have the same name as your project
• playerProductInstall.swf, a swf file to help install latest version of flash player if need be
• AC_OETags.js, a javascript file that takes care of the actual writing of the swf object to the html dom
• a history folder with three files to help the swf maintain history

2. Copy all the files generated above EXCEPT the HTML rendering into an appropriate location in your webapp. For example, to a folder /resources/flex/graphs/

3. In the ext tab panel add another tab. Set the content to be an ext Panel:

var visualizationPanel = new Ext.Panel({

id:'graphPanel',

title:'Analysis Graphs',

bodyStyle:'margin:0;padding:0;',

height:400,

width:'100%',

contentEl:'graphDiv'

});

Note that we are using the "contentEl" property that will try to find an HTML div by this name in the DOM to render to this panel

4. In you main HTML where you have the ext tab panel, add this to your <head> (lifted and modified from the rendered HTML. Get your paths right)

5. To your <body> add this script and a <noscript> tag. The main changes to be noticed have been made bold.

6. Now, open AC_OETags.js and add a statement in the switch inside AC_GetArgs function :

case "content_el":

ret.params["content_el"] = args[i+1];

break;

7. In the same file, change the AC_Generateobj function.

Here is the full AC_OETags.js file

Cool, now you are ready to go. Your very own flex graph in an ext tab.