Flex 4

• Spark – The main change in next version of this completely open source framework extraordinaire is no doubt, Spark, the new component architecture introduced in this version. At first it was a bit daunting, and I didn’t even know why Adobe felt the earlier Halo components needed tweaking. However, after reading more and with just a little effort, the advantages were obvious. Spark was designed to completely separate appearance from behavior, and achieves just that. New users of Flex, not used to MX, will find Spark much more easier to learn.
• States – This is one change I’m sure no one will complain about. The earlier implementation of states in Flex was something archaic and one that always felt out of place. The new process is much easier and simply speaking, makes much more sense.
• FXG – A new format that helps exporting project files within the platform. Developers/designers who use multiple tools will definitely like this. I used it when testing out the Flash Catalyst.
• Easier binding – Throw out the [Bindable]. Welcome ‘@’.

Other new or improved features in Flex 4 include a new video component and wrapper, an ASDoc tool and support for the text layout framework. The text layout framework is a highly powerful framework that greatly enhances our text display capabilities. Something I’ve experienced in an earlier project. Now it comes built-in.

Flash Builder 4

• Automatic getter/setter generation – The surprise would have been if this wasn’t included.
• Network monitor – Something for which I had to rely upon third party tools, and that too in a non-direct methods. Extremely useful in testing and optimization. The built in network monitor helps easily identify which part of my Flex application eats up network resources so that I can modify it and make it more efficient. The feature is doubly useful when you are also in charge of the server side.
• The data/service model – What I would rank as the best new feature. The data/service model and related features incorporated make development of client-server architecture solutions rapid and mind bogglingly easier. We can now view all the server side logic listed as a tree, what are the required parameters and the output types. We can now even unit test with test data each function and view the output. And if you are feeling lazy, it can even develop some server side Coldfusion or PHP classes for you on properly defining the database tables. A very helpful feature for developers who hate working on anything other than ActionScript. This feature is so powerful, it’s hard to believe that it’s a standard part of the IDE. I would have hardly minded throwing out some more money just for this feature alone.
• Package explorer – You no longer have to make do with the old Flex Builder explorer which was just a file explorer posing as a package explorer.

Some of you might say that I missed the most obvious and most hyped introduction, the Flash Catalyst based work flow. It does simplify things, and definitely speeds up the process, but it still is a separate tool. Extremely useful for coders who have a designing handicap. Again, Flash builder 4 also features many other enhancements and features and also many under the hood changes such as improved debugger and others.

When a user reaches a page with cfcharts in flash format by clicking the browser ‘back’ button, instead of the original flash chart, an image that says “Image expired. Please refresh the page to view the image” is displayed.(Sample image shown below) Very clearly, not desirable.

The problem occurs for two reasons.

1. Lack of session management.
2. Short image caching duration.

When we use the cfchart tag to create a chart, coldfusion creates a temporary SWF or JPG or PNG image for display. If no session management is enabled, the cluster manager will send the user to a different server each time and hence there will not be any image to display. This can be prevented by enabling session management and the process is called session affinity.

However, in this user’s case, I doubt whether this was the case as he most probably uses a developer edition for such purposes and hence no clustering is involved as it is a single server setup. Thus it must be reason number two – The cache.

Once a request has been made, by default, the images will only kept for a duration of 5 seconds in the cache. Hence when the user hits the back button, the request no longer exists. This duration can be extended by following the few simple steps listed below, courtesy Prayank’s blog.

1. Stop the CFServer.
2. Open coldfusion x.x\lib\webcharts3d.xml
3. Find and change the values “minTimeOut” & “maxTimeOut”.
4. Restart the server.

Thats it. You are ready to go. But please remember that this solution is inefficient when you have a large number of charts to display.

Now lets have a look at the code required to generate the above CFCharts.

<cfchart format=”png” name=”mychart” title=”Fruits Harvest” showlegend=”true”>
<cfchartseries type=”pie”>
<cfchartdata item=”Mangoes Harvest” value=”5000″/>
<cfchartdata item=”Oranges Harvest” value=”4000″/>
<cfchartdata item=”Apples Harvest” value=”3000″/>
<cfchartdata item=”Grapes Harvest” value=”2000”/>
</cfchartseries>
</cfchart>

The result of a query may directly be converted to a chart by using the code below. Coldfusion will generate the chart data items on its own from the query

<cfchartseries type=”bar” query=”data” itemcolumn=”name” valuecolumn=”sales”/>

Cfchart and Cfchartseries have a large number of attributes which maybe used to customize chart. You can check the complete list on Adobe Livedocs at http://bit.ly/cjiRPs and http://bit.ly/b3pioP

The type attribute of Cfchartseries is the most important among the list. It lets you choose from a wide array of chart types such as bar, line, pyramid, area, horizontalbar, cone, curve, cylinder, step, scatter and pie.

But what really takes the pie is the amount of styling options Coldfusion gives to the developers. Instead of setting each of the attributes, I found an easy way of doing this by modifying the built in style files in the folder cf_root\charting\styles and saving them under a new name to access. The style files are simple XML files and modifying them is really easy. One of the coolest attributes was the “show3D” attribute, which gives the chart a 3D effect. The appearance maybe modified to such extents that people will have a hard time figuring out it is custom generated and not designed by a web designer specifically.

The Pros

• The event-map approach of Mate makes complete sense since Flex itself is event driven. The command based approach of Cairngorm seems like a big stretch and increases complexity.

• Again, the command approach adds many more classes and lines of codes in Cairngorm which are considerably lessened when using Mate.
• The application code is much more tightly bound with framework code in Cairngorm, such as the use of Cairngorm events. This is not the case with Mate.

• Event bubbling can be caught/listened without having to write any excess code.

• Easy learning curve. I remember Cairngorm gave me a hard time as a beginner. Compared with that, learning Mate was a breeze. The documentation is excellent. Furthermore, the tag based of Mate approach is always easier to learn.

The Cons

• Cairngorm has a much more modular structure, more suited to the Flex MVC architecture that adheres to basic OOP concepts. This offers great advantages in larger enterprise level application development scenarios. Projects are more readable and work can easily be split into various parts and assigned to different teams.

• The use of delegates makes use of dummy data simple to replicate server side behaviour. Client side development is not hindered by server side development issues.

• And lastly, the thing that bugs me the most. While tag based approach is simpler and easier to learn, it is also hard to debug. Small errors are hard to find and more than a few times, problems are detected only during runtime and not during compiling. Simple mistakes such as a spelling here or there can lose you a lot of time.

While it may seem to some that the balance is tipped in Mate’s favour, it would be a rather harsh judgement. A closer look would show us that depending on the scenario, there is room for both. In fact, there is a NEED for both. The advantages of Cairngorm makes it much more suited for larger, enterprise level applications that are robust while Mate is more suited for smaller applications which needed to be executed swiftly.

My conclusion – it is important that a good Flex developer be able to easily switch between both the frameworks if he wants to deliver his clients the best that Flex has to offer.