4 items to check if a Flex 4 Application is leaking memory !

I have been working with Flash Builder profiler for past few months. After looking at few applications and memory leaks in them I came up with following 4 items which can cause a Flex application to leak memory.

If you don't like to read lot of text the gist is to use weak references where ever possible.

1. addEventListener is being called with the default value of false for its useWeakReference flag.

2. bindProperty and bindSetter methods of BindingUtils are called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

3. ChangeWatcher.watch method is being called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

4. Dictionaries are being used with weakKeys flag in the constructor set to false.

Items 3 and 4 can cause some hidden links to be formed and memory to leak. More on that soon.

Adobe DevSummit 2009 in Chennai and Hyderabad (India)

Adobe is conducting a developer summit in Chennai and Hyderabad on Nov 24th and Dec 1st 2009. If you are a RIA developer and want to know more about features in upcoming release of Flash Builder 4 and also on how to connect to LiveCycle DS or Blaze DS be there !

Ruby on Rails extension for FlashBuilder4

The DCD (Data Centric Development) feature of Flash Builder 4 is an extensible feature. What I mean by that is that developers can add a new plugin to FB which implements certain extension points available in FB and add support for any back end of their choice. Once added all the DCD features would work with the back end similar to other supported back ends like PHP, CF etc.

Gaurav has worked on a plugin to add support for Ruby.

Give it a try !

Adobe India Evangelism Team launches a challenge in Flex

You can also own a badge like this one ! Try it !

Tweaking OLAPCell and OLAPDataGrid to display custom formatted values

Displaying custom formatted data in OLAPDataGrid is a bit tricky because OLAPDataGrid doesn't use the OLAPCell.formattedValue at all due to a bug in its implementation.

However the tweaks I am going to mention are simple and can be used to get this to work. After the tweaks don't forget to build the datavisualization.swc using the steps I have described in one of the earlier posts.

Modifing OLAPCell.as file : Modify the constructor to set a formatted value into the _formattedValue property

public function OLAPCell(value:Number, formattedValue:String=null)

{

_value = value;

_formattedValue = insert any custom formatting logic using value ;

}

Modify OLAPDataGrid.as : Somewhere around line 769 we can find the following line

label = cell && !isNaN(cell.value) ? String(cell.value) : defaultCellString;

Modify this to read as follows

label = cell && !isNaN(cell.value) ? String(cell.formattedValue) : defaultCellString;

Build the swc and use it in your app to get custom formatting. Of-course some more tweaking it required to make this generic and supply a Flex formatter directly to OLAPDataGrid. I am sure it can be easily figured out !

CallResponders explained..

Here is some explanation about CallResponders by Tom Lane. I thought this would be useful to many developers who want to understand more about them so that it becomes easy to work with them.

"Let me take a shot at explaining asynchronous calls. Most PHP developers are used to calling functions in one way only: synchronously. In ActionScript a sychronous function call looks like this:

var stuff = getStuff();

Pretty straightforward. It's how you expect functions to work: you call them, and then immediately on line #2 of this example you have a value in the stuff variable to work with.

But when it comes to calling remote functions on services sitting on a server somewhere, Flex calls them asynchronously. This is so that the Flex client can continue working while the request is pending. An aync call looks more like this (at least, the first part):

responder.token = getStuffFromService();

What this means is, "stuff" does not come back right away as the result of the function. Instead, what it returns is a kind of ticket. Sort of like ordering some food from a lunch counter and getting a receipt with a number on it. You don't get your food right away. Instead, you go hang out or do some other stuff while your order is pending, and then your number is called when it's ready. And then you "respond" to your number.

Well, that's what a CallResponder is. When you "place your order", you hook up a CallResponder to it. When your order is ready (data comes back from the service call), the responder kicks into action. It fires a result event (or a fault if something went wrong), and it updates its bindable lastResult property.

So, if you want to work with data from an async call, you can't simply do it on line #2 of the above snippet. You have to wait until the CallResponder for that call gets its result. If you create a databinding to lastResult, that will automatically update when the result is ready. But since you want to run some script on the result, you have to trigger that script from the CallResponder's result event handler.

Hope this helps!

Showing different icons in each cell of OLAPDataGrid based on the cell value

I have been getting few queries on how to show different icons based on the cell value in a OLAPDataGrid.

Here is a screen shot of how it looks:

Here are the source files.

The technique is simple. Create a custom itemRenderer which can display a icon and text or anything to suite your needs. Make sure it implements the IDropInListItemRenderer interface. In the setter of listData add the logic to change the icon based on the value. Set this as itemRenderer of the OLAPDataGrid.

The sample shows this using a renderer derived from Canvas with a image control and embedded image files. You can use other light weight techniques like coloring a sprite and using UIComponent as base. If you are adventurous you can try tweaking or deriving from OLAPDataGridItemRenderer itself.

Blogs on Data Centric Development workflows in FlashBuilder 4 for PHP, HTTPService, ColdFusion and WebService

Here are some great blogs on how to use DCD feature in FlashBuilder 4:

Howto: Connect a flex application to database (for PHP developers)

Howto: Use createItem method of the generated sample PHP file

Howto: Use the update and delete methods of the generated sample code

Howto: Enable Automatic Paging in Flex Applications for Any Kind of Service

A list of many articles on Sujit's blog

BlazeDS support

Using web-services with DCD workflow

FlashBuilder (FlexBuilder renamed) 4 Beta is out

FlexBuilder has been renamed to FlashBuilder and version 4.0 Beta is out.

Rather than say the same thing over and over...here are the links which give detailed information:

The Beta site

Srinivas Annam talking about Data Centric Development (DCD)

How to use DCD work flows explained using flow charts

Sujit explains DCD workflows with BlazeDS

I am busy !

Hi All,

I have been busy at work for few months now and will continue to be so for some more time. That is the reason I have not been able to respond to mails/comments on my posts. I know some of them might have been very urgent issues but due to my own work deadlines I have not been able to respond to them.

Will try to address them as and when I get time.

Thanks for your patience

Flex OLAP aggregating strings.

I recently got many queries about support for String aggregation in Flex OLAP. The current implementation available out of the box doesn't support this.

Here are the changes to source files required to support this. The files need to be unzipped into the fbpro directory and the datavisulization.swc needs to be build using the steps mentioned here.

The result would look something like this.

The sample project has a StringAggreator implementation which can be used as a starting point to build your own logic into the StringAggregator. The sample one appends the strings to each other.

Here is the sample project.

Of-course I might have missed something while testing. So let me know if you find any bugs !

How to build datavisualization.swc from the source ?

Here are steps to build datavisualization.swc from the source that gets unzipped into a fbpro directory in FlexBuilder when a valid license is provided.

Setup

1. Download ant1.7.0.

2. Download a version of jdk 1.6.

3. Download cygwin, an open source unix shell for Windows.

4. Set environment variables. Go to Control Panels > System > Advanced > Environment Variables

• Set JAVA_HOME to the path to the jdk directory. Add path of ant1.7 to PATH. For example, C:\ant1.7.0\bin (you will already have a PATH, multiple entries are separated by semicolons)

• Add path of cygwin to PATH. For example, C:\cygwin\bin

Steps:

1. Add files build.properties and build.xml(attached) to location of datavisualization directory. For example, C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects.

2. Add the flex builder license to build.xml file (location: C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\build.xml) . Replace by license key.

3. Unzip inside_ datavisualization.zip. The build.xml and build.properties files should be copied inside datavisualization folder.For example, C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\datavisualization.

4. Make changes regarding location of sdk and output swcs to files build.properties and datavisualization\build.properties.

5. At the cygwin prompt, go to the datavisualization. For example C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\ datavisualization.

6. Run ant main to build datavisualisation.swc and datavisualization_rb.swc for en_US .

7. Run ant main_with_ja_JP to build datavisualisation.swc and datavisualization_rb.swc for en_US and ja_JP.

Note: Place the datavisualization.swc at sdk\frameworks\libs and datavisualization_rb.swc at sdk\frameworks\locale.