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.

Challenging Adobe: Possibilities

Dreamweaver can be a handy website development tool as it can double up as your content management system as well. For PHP websites not looking for too much of RIA, Joomla and Drupal should suffice. For RIA, Joomla and Dreamweaver both can be seriously inadequate. Which brings us back to our friend Flex. As things are at this moment, Flex rules.

Pure JavaScript based RIA can be serious challengers to Flex. However, in absence of an IDE seriously focused on developing RIAs using JavaScript AND manage the content effectively, Flex holds an almost unassailable position. In fact, it seems that by slowly (but steadily) developing Spry and integrating the same with Dreamweaver, Adobe may already be working in that direction. That way Adobe would be ultimately able to hold two winners - whichever way people turn.

Nevertheless, that may not be Adobe's intentions. It certainly doesn't look like the way it is promoting Flex. I think it would make fabulous business sense to make an IDE at par with Flex that exclusively focuses on making an RIA using JavaScript et al. This would not only break Adobe's impending monopoly but may also benefit the developer community in general.

A Skeleton Tabbed Layout in ext

Using ext for UI is not a pleasant task after experiencing Flex. Nevertheless, we do what we need to do :).

I needed to build a tabbed layout and in a series of article I will explain my experience with the same. The first thing to do (after downloading ext) is place a basic skeleton in place - the jsp/html and the javascript.

Skeleton html for guidance

The basic tab manager javascript guidance

Ext or Flex?

For the past few months I have been evaluating another claimant to the realm of RIA:Ext. Ext looks good. In fact it can be quite formidable if combined with Google Charts and Google Visualization. So, given a choice, what should one pick? A brief comparison before I give my views:

Flex

• Cost per license: $699


• Technology: Flash and ActionScript


• USP:
  
  • More developer friendly and reliable than JavaScript any day
  
  
  • Hides your UI code
  
  
  • Produces very maintainable and testable code for complex dashboards
  
  
  • Very well tested and reasonably predictable
  
  
  • Strong user community and support, thanks to Flash and ActionScript legacy
  
  
  • From Flex 3, communication between JavaScript and Flex has become easier.BlazeDS is now available as open-source and facilitates integration with various backends


• Weaknesses:
  
  • Cost
  
  
  • Learning curve
  
  
  • Flex can prove to be a hammer to kill a fly for most web applications.

Ext

• Cost per license: $289


• Technology: javaScript


• USP:
  
  • If you don't have a reasonably complex dashboard that needs significant data visualization,it is a good alternative
  
  
  • Hides your UI code
  
  
  • Lesser cost
  
  
  • Less complicated than Flex


• Weaknesses:
  
  • Can be difficult to debug
  
  
  • JavaScript
  
  
  • Not that strong user community yet
  
  

I feel, Ext is impressive but not as good enough as Flex due to the inherent evil nature of JavaScript :). I could not find too much help on the web either to address the countless bugs I face when I use Ext. The fact that I expose some part of my business logic when I use a JS based RIA still holds true for Ext. In its attempt to prevent its precious JS code from being nicked away, Ext has taken great pains to obfuscate its files. Even with it debug javascripts, it can get very frustrating and difficult to debug any issues. This brings in my concern for a maintainable and testable code if my UI is reasonably complex.

Nevertheless, it builds significantly on top of other available RIA options and tries to integrate with JQuery, Protoype, YUI and even AIR. It is definitely an upcoming force that will mature in 2-3 years. It also holds the cost advantage against Flex. All-in-all one may think of using it if one's UI is not as complicated.

But if I have a UI to build that has to be complex, extremely reliable, maintainable and testable, my vote goes to Flex any day.

Removing and Adding Options Dynamically

Using DHTML is beautiful because you can play with the DOM as you please. However JavaScript is not that consistent. Of all sources I find the one by W3C: W3 Schools the most comprehensive and technically correct.

If you are looking to add or remove options from a select box dynamically, using add and remove methods on select element is the most reliable way. For gory details have a look here:

Select Object Reference

Flex Data Services(FDS): FMS

FDS enables you to access and synchronize data across one or more applications built with Flex framework. FDS itself is a server-side java app designed to work with most Java app servers. FDS consists of four parts:

• Flex Message Service (FMS)
  
• Flex Data Management Service (FDMS)
  
• Flex Proxy Service (FPS)
  
• Remoting Service
  

FMS helps to build apps that support real-time chat and collaboration. Idea is to update app whenever server side data changes. In this article let us see how we can use FMS Java API (MessageBroker, AsyncMessage) to receive message in Flex.

1. Take the FDS blank application as your starting point

2. Open WEB-INF/flex/messaging-config.xml and add this destination node below default-adapter node:Destination Node Code

3. Define message consumer in MXML

<mx:Consumer id="consumer" destination="feed" message="messageHandler(event.message)"/>

4. Subscribe/Unsubscribe to message at desired part of the flex code as:

consumer.subscribe();
consumer.unsubscribe();

5. Whenever there is a message generated at the backend, now your flex application will hear it. A very simple sample java file that generates message will look like this:

Sample Java Message Generator