When debugging suspected memory leaks when loading/unloading SWFs, I generally do the following:
1) Set up the app or a test harness to load and unload the SWF multiple times (at least 3) and force a garbage collection pass after each unload or unload, then use the profiler to see how many copies of the module's xxx_FlexModuleFactory or the subapplication's xxx_SystemManager are in memory. If more than 1, keep loading and unloading and see if that number continues to grow. Any module or SWF that introduces a new component with styles will register those styles with the StyleManager and stick around forever the first time it loads. You can prevent that from happening by pre-loading the styles in the main app or via a CSS module. A second copy might stay around if it was the last thing loaded because the player or FocusManager might still be hanging onto it. If you see more than 2, that's definitely a leak and you should use the profiler to find the leak.
2) After several loads and unloads, I take a memory snapshot, then do more loads and unloads and take another snapshot. I clear all filters, remove percentages, sort by class name and compare manually the number of instances of every class. They should match exactly, except maybe for a few Strings and sometimes, WeakReference. Everything else is suspect and deserves investigation.
3) Once I think I got all references to the SWF cleaned up, I next run several loads and unloads in the debugger and check the console. I am looking for lines in the debug output that start with:
[UnloadSWF]
That tells me that the player thought everything was cleaned up and unloaded the SWF. Note that it may not say that right away, even after GC requests as sometimes the player has internal references to a SWF that get cleaned up "later". If I don't see that, I go back to step 2 and compare memory snapshots looking for other things that might be leaking
4) Now that I'm convinced that even the player thinks it is ok to unload the SWF, if System.totalMemory is still increasing, the final test is to export release builds for all swfs and run them in a release player. The debugger player seems to hang onto debug information in the SWFs and can skew System.totalMemory. In recent tests, once I get past step 3, the release player's reporting of System.totalMemory is much more acceptable, capping at a much smaller and acceptable maximum memory value.
5) Once you get past that, some of you might still see memory attributed to the player still growing when using OS tools to examine the player process. That remains an open area of investigation by the player team. For Internet Explorer, one often finds that minimizing IE causes its claim on memory to shrink, implying that it is something to do with IE's memory management and not the Flash Player or your application. We don't know of any way to programatically force IE to give up that memory. We also have seen reports of other browsers reporting memory growth even though Flash thinks things should be unloaded. If you can reproduce that in a small test case, file bugs with those test cases.
Tree does have one major flaw, and that is that it can't handle a dataProvider that throws ItemPendingErrors as data sets that come from LiveCycle DataServices do. Tree uses an undocumented pair of classes to effectively linearize the current set of open nodes into a dataProvider that its base class (List) can handle. The code for that was scrambled together at the last minute and wasn't deemed sufficient enough for the AdvancedDataGrid, so our AdvancedDataGrid team developed their own HierarchicalCollectionView classes and beefed them up to handle ItemPendingErrors. Due to various scheduling and logistical issues, Tree was left by the side of the road, stuck with its undocumented HierarchicalCollection classes that can't handle ItemPendingErrors.
At the tail end of Flex 3, several customers were in need of a Tree that could handle ItemPendingErrors. THe shortest route to such a thing was to create a subclass of Tree that could handle the AdvancedDataGrid's HierarchicalCollectionView. Example and source code are below. You'll see the acronym "DMV" throughout because the AdvancedDataGrid and HierarchicalCollectionView are part of the Data Management and Visualization package (which requires the Professional versions and/or more money) so those of you trying to go the cheap route won't be able to leverage this code. Also, you won't need this unless your data source throws ItemPendingErrors when an attempt is made to fetch data that hasn't been paged in yet, and unless you developed your own, you are using one of our data services which also cost you some money.
The example comes with a test tool we wrote that throws lots of ItemPendingErrors so we can try to find all the code paths that are sensitive to it. Unlike most of the posts on my blog, this one actually got some QA time, but the usual caveats apply.
]]>Hope it helps. It should work with any Flex 3 SDK version.
In the example, the top DataGrid is not optimized, the bottom one is. Make the screen bigger and you'll start to see and feel the difference.
]]>Instead of using PowerPoint, I actually created a SWF so you can use the SWF to both view the presentation and learn how to use the Profiler. I cover the differences between profiler memory, System.totalMemory and process memory and show how I analyze the two most common memory leak scenarios.
As usual, caveats apply.
The SWF also demonstrates an approach to another topic I've heard about often, and that is how to do XML-driven or data-driven UI. The presentation in this SWF is controlled by an XML file. A single engine parses the XML and creates the UI widgets as dictated by the XML. To change the presentation, all I have to do is change the XML. I can also add new widgets easily. Source is available here:
The SWF also demonstrates a technique for improving startup time. Because our blog system is painful to use, I don't like uploading more than one or two files per blog post, but this presentation had more than a dozen images. So, instead of loading images externally, I embedded them into the SWF, but normally, that delays startup by the download time of all of those images. To get around that, I pack all the images into frame 3 of the SWF so that Flex can get up and running while the images download at the end of the SWF. I can get away with that because the images are not needed right away.
Hope this helps.
]]>There is a series of demos in the presentation. The code and source are linked below. To get the third child to load you will need to download zoomer.swf and copy it to a server somewhere and fix the URL that loads it
Zoomer is a simple app that has a rectangle you drag around and it will magnify the area under the rectangle. The demo shows how it needs to be modified for being loaded by a main application in different applicationDomain and securityDomain configurations
Pattern 1 would the the standard first attempt. You can run zoomer.swf and see how it works on its own, run mainApplication.swf and see how, when zoomer is loaded, you can't drag the rectangle out of the area owned by zoomer. See slide Demo #1.
Run Zoomer
Run Zoomer as a sub-app
Pattern 2 works for the first copy of Zoomer, but not for the second or third. See the slides for Demo#2
Run Zoomer
Run Zoomer as a sub-app
Pattern 3 uses getSandboxRoot() so the first and second copy of Zoomer works, but still the third is broken. See slide for Demo#3.
Run Zoomer
Run Zoomer as a sub-app
THe Final Pattern fixes that by listening for MarshalMouseEvent. See slide Demo#4
Run Zoomer
Run Zoomer as a sub-app
Source code is here:
Download Source
You will need a pre-release of 3.2 to build the source.
Preliminary write-up on the Marshall Plan is here:
Marshall Plan Wiki
As usual, caveats apply to all content
]]>It is tricky to do so because of a bug in DataGrid plus the complexities of focus handlng and how it is normally used to end the edit session.
Here's a workaround for the bug and my take on how to create popup editors. Usual caveats apply.
]]>It's a bit tricky because of some missing pieces in the underlying Flash focus APIs and because of how Focus events work. Here is my take on how to do it. Usual caveats apply (i.e, code is not supported and may have bugs etc).
]]>I'm short on time so the example isn't fully fleshed out. It could definitely use some optimization as to when and how often it refreshes. It probably needs masking if horizontal scrollbars are on, but at least it should show up in the right place relative to the horizontal scroll bar. There's probably bugs as well, so the usual caveats apply, but it should get you started in the right direction. Also, I did not try this with AdvancedDataGrid. It is actually developed by an entirely different team.
]]>If the user fills out the new entry, it is added to the actual collection and another new entry is faked. Additional logic dictates that if the user strips all information out of an entry, that entry is removed from the actual collection.
Usual caveats apply
]]>Such a thing might be useful in a situation where you want to add more than one prompt to a ComboBox. In the example, I have the days of the week to choose from, but also want to add "Every Day", "Weekdays" and "Weekends" without modifying the original days of the week collection. Of course, if you concatenate the two collections, it offsets your selectedIndex.
If you have a selected field in your data, then the code to handle checkbox selection is quite different. You basically shut down the DataGrid's selection code and update the collection instead. You can see that in the source code for this example.
This example goes one step further, however. It assumes that you want to store selection in the dataProvider, but the dataProvider items don't have a selected field and are "immutable". The example code shows how to use a custom IList to merge two arrays or ArrayCollections into one merged collection where the data objects contain fields from both arrays. By doing that you can "add" a selected field to each item.
Custom ILists are a powerful way to change data without having to process each data item. The example code merges the items on-demand instead of up-front thus saving startup time. It would be wasteful to process 1000 items if you only show 7 and the user doesn't scroll past 20.
Anyway, here's the code. Usual caveats apply.
]]>Here's my approach:
]]>It's too bad we didn't finish the job as there are some difficult things to workaround in trying to get smooth scrolling to work, but I cooked this prototype up to give you a sense for how you might be able to get it working in your apps. Note that the prototype assumes that all rows are the same height. If you have variableRowHeight, that's a whole different problem.
Usual caveats apply, and no, I don't currently have time to make examples for TileList and DataGrid. Maybe some one else will have the time.
]]>