Author Archive: Alex Harui

Tree and Lazy or Paged Data

The Flex Tree control (mx.controls.Tree) is the subject of many complaints. It’s pretty finicky if you don’t use a dataProvider where the data is “all there”. Any attempts to lazily load in nodes must be coded carefully. If you don’t tweak the DataDescriptor properly it won’t work.
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.
Run Example
Download Source

Faster DataGrid Horizontal Scrolling

Lately, I’ve heard many complaints about horizontal scrolling performance in DataGrid. Vertical scrolling has been optimized, but horizontal has not. I found a bit of time to put together how to subclass DataGrid and try to optimize horizontal scrolling. I’m sure there’s bugs and I don’t know if I’ll have time to fix them and the usual caveats apply.
Hope it helps. It should work with any Flex 3 SDK version.
Download Source
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.
Run Example

Using the Flex Builder 3.x Profiler

I’ve been getting lots of questions about memory leaks lately. I finally found some time to put my techniques for analyzing memory leaks into writing.
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.
Run Presentation
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:
Download FlexBuilder Project
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.

Flex Authority Magazine

I think I can finally say I got something published! Gordon Smith and I contributed to the first issue of Flex Authority, a new magazine (made of actual paper!) that focuses on Flex and AIR. We hope to be regular contributors. The link to find out more is: Buy your subscription today. We won’t make any money from it, but this post is to thank them for working with us and to help them get the word out so they can make some money.

Marshall Plan At 360Flex Conference

Today I presented more information about the Marshall Plan at the 360Flex conference in San Jose. The PowerPoint presentation can be downloaded here.
Download Presentation
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

DataGrid With PopUp Editor

Some folks seem to be in need of an itemEditor in the DataGrid that can popup or float over the DataGrid. The DataGrid currently limits the editor to fit within its size and if you need more space than that, you’ll need to popup an editor.
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.
Download Source
Run Example

DataGrid ItemEditor with Two Input Fields

Several folks have been asking about how to have a DataGrid ItemEditor with two input fields (say you want to separately edit first name and last name or something like that).
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).
Download Source
Run Example

Flex 3.x Versioning and Portals

While most of my colleagues are busy working on Flex 4, a few of us have been working on something we’re calling the “Marshall Plan”. Most of you won’t ever need it, but some really important customers do. If you want to make a Flex Portal, or have the kind of application where it is impractical to update all of the SWFs that make up the application to the latest version, or if you just have a lot of time on your hands, then the following link might be of interest to you.
The Marshall Plan

Flex 3 DataGrid Footers

I took a few minutes to prove that there is another way to add Footers to DataGrid in Flex 3. The old blog post showed how to add footers to the border. In Flex 3 we added more hooks so you can add other “content areas” to the DataGrid.
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.
Download Source
Run Demo

Custom ArrayCollections, Adding New Items to DataGrid

The previous posts used custom ILists to merge or concatenate other ILists. This example uses a custom subclass of ArrayCollection to fake an empty object at the end of the actual ArrayCollection which can be used to add new entries to the DataGrid.
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
Download Source
Run Demo