Memory Leak in Flex 3.2 Lists & Grids February 5, 2009
Posted by Hob in Adobe, Flex, Open Source, RIA, User Experience, memory leak, workday.11 comments
Ok…so to say that there’s a memory leak in Lists and Grids is a bit redundant as they all inherit from one class, ListBase, which is where the problem is, but a bit of redundancy can be eye-catching.
Anyway…recently I was tracking down an issue filed by one of our testers, and stumbled across a nasty little memory leak in the 3.2 SDK. Adobe’s already corrected the problem in the 3.3 nightlies, but I thought I’d post my findings here on the chance that anyone else needs the fix in their 3.2 SDK.
The problem is a small class called StageEventProxy. SystemManager creates an instance of StageEventProxy passing to it your listener whenever one of the following types of events is listened for from SystemManager:
- MouseEvent.MOUSE_MOVE
- MouseEvent.MOUSE_UP
- MouseEvent.MOUSE_DOWN
- Event.ACTIVATE
- Event.DEACTIVATE
The problem is that StageEventProxy keeps a hard reference to your listener function. This means that when garbage collection runs, that listener and the object its attached to will never get marked for garbage collection.
Now, you’re probably thinking, “I’ve never added any of those listeners to SystemManager so I’m free and clear. Woot!” Unfortunately you’re not off the hook just yet. Adobe adds a MOUSE_UP listener to SystemManager in ListBase’s mouseDownHandler():
systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true, 0, true);
The consequence of this line is that any object that’s an instance of a sub-class of this class (a quick search through the source code revealed List, DataGrid, AdvancedDataGrid, and TileList) will never be garbage collected once the user has clicked on any of the rows in the list. Additionally, because all UIComponents keep a hard reference to their parent component, the garbage collector will also neglect to clean up any of your list’s ancestors in the document hierarchy.
The implications of that for most people are that lists in pop-ups will cause the entirety of your pop-up to never get garbage collected. Here at Workday its a much larger issue, however. Our pages are dynamically created based on XML page definitions we get from the server. These pages are also dynamically unloaded when a new page is received. As a result of the patch for this fix, we’ve seen dramatically reduced memory usage over time in our Flex applications.
Here’s the culprit so you can see what was going on:
////////////////////////////////////////////////////////////////////////////////
//
// ADOBE SYSTEMS INCORPORATED
// Copyright 2003-2006 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file
// in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////
package mx.managers.systemClasses
{
[ExcludeClass]
import flash.display.Stage;
import flash.events.Event;
/**
* An object that filters stage
*/
public class StageEventProxy
{
private var listener:Function;
public function StageEventProxy(listener:Function)
{
this.listener = listener;
}
public function stageListener(event:Event):void
{
if (event.target is Stage)
listener(event);
}
}
}
Here’s the updated version Adobe’s including in the 3.3 SDK:
////////////////////////////////////////////////////////////////////////////////
//
// ADOBE SYSTEMS INCORPORATED
// Copyright 2003-2006 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file
// in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////
package mx.managers.systemClasses
{
[ExcludeClass]
import flash.display.Stage;
import flash.events.Event;
import flash.utils.Dictionary;
/**
* An object that filters stage
*/
public class StageEventProxy
{
private var weakRef: Dictionary = new Dictionary(true);
public function StageEventProxy(listener:Function)
{
this.weakRef[listener] = 1;
}
public function stageListener(event:Event):void
{
if (event.target is Stage)
{
for (var p:* in weakRef)
{
var f:Function = p as Function;
f(event);
}
}
}
}
}
And finally…Here’s a patch file you can drop in your Lib folder that will solve the problem: PATCH FILE
Dave Interview & Podcasts In General September 19, 2008
Posted by Tom Ortega II in Dave, Flex, erp, podcast, workday.4 comments
In case you somehow missed it, I wanted to point out an interview with our humble leader, Dave Duffield. He recently participated in the Bill Kutik Radio Show podcast. One of the highlights in this great podcast is Dave’s rundown of his companies and the technology changes that occurred during each.
Podcasts are a really great technology. The quality of the recordings can be just as good as what you find on the radio, but with the flexibility of the content to be what you care most about. I’ll have to admit that I don’t listen to as many podcasts as I should, but that’s just because I get too engrossed in them. Therefore, that means they’re not an option when coding. I’d listen to them on my “commute” but since that’s only 10 minutes long, I don’t think I’d get much in that way either.
If you do like podcasts and want to learn a little more about Flex (the technology that powers Workday’s UI), there’s a really great podcast put on by two friends of mine: Jeff Houser and John Wilker. It’s called The Flex Show and it covers the Adobe Flex technology world. I’ll have to get Khurram and Frank from the Workday UI team to do an interview with them soon, so you can find out some juicy details about our amazing UI. In the meantime, you can listen to a brief interview with Charlie Boyle (the UI team’s manager). You can zoom to minute 14 to get to Charlie in that episode.
FlexSpy enhancements June 3, 2008
Posted by Hob in Adobe, Flex, workday.Tags: Flex FlexSpy development debugging tools
1 comment so far
Here at Workday the Flex application we’re building is extremely complex (like a fine wine) because our components are built dynamically. As such, debugging visual and styling issues can often be onerous. One of my favorite tools for aiding in that task is FlexSpy. It’s a great tool that lets you view your application’s object hierarchy and inspect the properties on each object in that hierarchy. Its the closest thing I’ve found in Flex to what Firebug is for Ajax apps. It even has a “finder” similar to Firebug’s “Inspect” functionality.
There are a couple of problems with FlexSpy, however:
- FlexSpy does not have the ability to use SystemManager as its root. By default it chooses the current Application as its root, thereby rendering you unable to inspect anything else attached to system manager (like pop-ups).
- The “finder” mostly works, but doesn’t always let you drill into the child-most component. For example, if you’re trying to get to a component that’s in a DataGrid cell, the finder will only take you as deep as the grid itself. From there, you then have to use the tree view to get to the component you’re looking for.
I’ve added a couple enhancements to FlexSpy to try and tackle these problems and posted them in an issue filed on their Google Code page. The 2 attachments change FlexSpy so it uses SystemManager as its root, and make the finder much more accurate.
I hope that folks will find these changes useful. If you find any problems with the changes, please feel free to comment here, and I”ll see if I can figure out what’s going on.
Problems moving within a radio group May 12, 2008
Posted by Hob in Flex, RIA, erp, workday.add a comment
I’ve recently been trying to add better keyboard control to some of our components. One such component is basically a container with a set of radio buttons. The radio buttons not only have labels, but also associated fields (TextInputs, ComboBoxes, etc.) that are only applicable when the radio button next to it is selected. Thus, the radio button and its associated field both get wrapped in a container for alignment.
This particular component also supports the inclusion of a “None of the above” radio button. For that particular item in the radio button list we were using a standard Flex RadioButton as there needs to be no associated field next to it. The result of one of these instances might have a structure similar to this:
<mx:HBox> <mx:RadioButton/> <mx:ComboBox/> </mx:HBox> <mx:HBox> <mx:RadioButton/> <mx:TextInput/> </mx:HBox> <mx:HBox> <mx:RadioButton/> <mx:CheckBox/> </mx:HBox> <mx:RadioButton label="None of the above"/>
The problem I ran into was this: My focus being set on any of the radio buttons in the list, I would start hitting the up arrow. Once the arrow took me to the radio button physically at the top of the list, it would allow me to move one further, and take me back to the “None of the above” radio button. For some reason it thought that “None of the above” was first in the list.
I started digging around and here’s what I found: When RadioButtons are assigned a RadioButtonGroup (via their group property), they register themselves with that RadioButtonGroup via call to the addInstance() method. The problem is that the registration does not happen as soon as the group is added. There are actually several possible places where it can happen, including commitProperties() and updateDisplayList().
This means that the order in which RadioButtons are added to their groups’ array of radio buttons is dependent on the flow of the component lifecycle. The reason “None of the above” was at the top of the groups movement list was because it was the only one in the list of radio buttons that wasn’t also wrapped in another container. The extra level of nesting for all the other radio buttons meant that they would get their updateDisplayList and commitProperties methods called after the “None of the above” button’s.
I wound up resolving the problem by wrapping the last radio button in the same type of container as all the rest. Hopefully this helps someone else avoid having to spend a bunch of time on the same problem.
AutoSizingAdvancedDataGrid that fixes the variableRowHeight issues with mx.controls.AdvancedDataGrid May 9, 2008
Posted by khurram in Adobe, Flex, workday.Tags: AdvancedDataGrid, AutoSizingAdvancedDataGrid, variableRowHeight
16 comments
When variableRowHeight is set to true on AdvancedDataGrid,
(a) mx.controls.AdvancedDataGrid ignores attributes such as rowCount.
(b) there is no way to figure out the height of the AdvancedDataGrid instance because we don’t know how much height we will need to show the rows of data in our dataProvider. We can set the height to maxHeight but what of the sum of heights of all rows in our grid is less than the maxHeight, we need our grid to adjust itself to the shorter height but the AdvancedDataGrid does not.
(c) When opening/closing trees in hierarchical data inside the grid, we need the grid to automatically adjust its height. AdvancedDataGrid does not do that when variableRowHeight == true
The AutoSizingAdvancedDataGrid fixes this issues. It does this by dynamically increasing the height of the array until (a) all the rows in the dataProvider have been displayed or (b) maxHeight has been reached.
Click the image or here to see the example app. You can right-click and view source as well.
Viewing Workday Through a Prism October 27, 2007
Posted by Tom Ortega II in Desktop, Prism, RIA, erp, workday.3 comments
Workday’s web application is currently built on top of Adobe’s Flex Framework. Flex let’s us build really cool widgets, which the application developers then turn into useful applications. Flex is great for developing. The current way to access the application is via a web browser, which is great for some reasons (zero-deployment, lightweight client, etc.) and not so great for other reasons (back/forward buttons, tabs in the browser, bookmarking, etc.)
Just because an application is deployed via a web browser doesn’t make it a “website”. Workday is a tool that our customers will use everyday of their work life. They should be able to access it like an other application they use at work by double clicking an icon on the desktop, single clicking an icon in the Quick Launch bar, or choosing an item from the Start menu (Yes, this is a Window’s users view).
Prism offers that functionality. It does it easily without much complication. The nice thing about Prism is that it’s an end-user technology. You don’t have to be a developer to convert your favorite web app into a desktop application. You just need to know a url and you’re done. Yes, it’s currently for Windows only and still pretty slim on features. However, for Workday, we build plenty of features ourselves into the application and it’s nice to see it shine on it’s own. If you’re interested in a bit of the Prism story, read Alex’s entry (he’s working on User Experience at Mozilla).
Below is a screenshot of my desktop. You can see the Workday app running in a tab inside Firefox. This is how I normally access the application. Moving forward though, I’ll be using the “Workday Dev” application instead. It’s the window with the red box outline around it (the red box is my doing to call out the window, Prism doen’t do that). You can also see 2 red circles highlighting the Desktop icon and Quick Launch icon.
If you use Workday and want it to access it like a desktop application, then go to the Mozilla Labs site and give Prism a twirl. Remember, it’s currently Windows only, but Mac and Linux support should be out soon.
Really funny Workday videos on YouTube May 11, 2007
Posted by khurram in erp, workday.add a comment
check ‘em out -
Clip 1: Intro http://www.youtube.com/watch?v=jHBwaJLhaR4
Clip 2: Global http://www.youtube.com/watch?v=9U3SsC2jqdo
Clip 3: Upgrade http://www.youtube.com/watch?v=_8-LSfNKVXw

