Introduction

I’m the sole developer on most of my projects. After years of working with Flex, a handful of architectural frameworks, various server-side languages, and deployment strategies, I’ve come up with a highly productive combination thereof that also performs and scales very well.

Intended Audience

This article is aimed at Flex developers that build larger applications warranting the use of an architectural framework and modules seeking a more productive workflow. This is the most productive solution I’ve found. You can view and download the full source on GitHub
Continue reading →

Introduction
After working on a simple e-commerce implementation I realized that ItemEditors are fairly poorly documented. I wanted a somewhat purist approach to my implementation meaning I didn’t want to use the default implementation of ListEvent.ITEM_EDIT_END in the List control which depends on naming a labelField and editorDataField. I just wanted to pass data in and out of my renderers and editors without worrying about the Objects themselves.

DataGrid handles complex Objects well, List handles simple Objects well. I needed List to handle a complex Object. It turns out Flex doesn’t make this easy out of the box.

Inside the itemEditorItemEditEndHandler method (mx.controls.List:2613), you’ll find the following:

var newData:Object = itemEditorInstance[editorDataField];
var data:Object = event.itemRenderer.data;

// trace("itemEditEndHandler", event.rowIndex, data);

if (data is String)
{
    if (!(newData is String))
        newData = newData.toString();
}
else if (data is uint)
{
    if (!(newData is uint))
        newData = uint(newData);
}
else if (data is int)
{
    if (!(newData is int))
        newData = int(newData);
}
else if (data is Number)
{
    if (!(newData is int))
        newData = Number(newData);
}
else    // assume some sort of object
{
    bFieldChanged = true;
    try
    {
        data[labelField] = newData;
        if (!(data is IPropertyChangeNotifier))
        {
            // update the underlying collection if a data effect is running
            if (actualCollection)
                actualCollection.itemUpdated(data, labelField);
            else
                collection.itemUpdated(data, labelField);
        }
    }
    catch(e:Error)
    {
        trace("attempt to write to", labelField, "failed.  You may need a custom ITEM_EDIT_END handler");
    }
}

What this boils down to if data is an Object is this:

data[labelField] = itemEditorInstance[editorDataField];

Again, this is great for most inline components or IDropInListItemRenderers with simple data but not for a complex Object and not if you don’t want to be dependent on your Object’s properties.

Solution
Handle the itemEditEnd event in your List like this:

private function handleItemEditEnd( e : ListEvent ) : void {
	//this will override much of the logic in
	//mx.controls.List.itemEditorItemEditEndHandler
	e.preventDefault();

	var list : List = e.currentTarget as List;

	//e.itemRenderer == list.editedItemRenderer
	//if you need to update the renderer explicitly, do it like this
	//list.editedItemRenderer.data = list.itemEditorInstance.data;

	//I just updated the dataprovider
	var i : uint = 0;
	for each( var oldData : Object in list.dataProvider ) {
		if( oldData == list.editedItemRenderer.data ) {
			list.dataProvider.setItemAt(list.itemEditorInstance.data,i);
			break;
		}
		i++;
	}

	//clean up
	list.destroyItemEditor();
}

This is a simple solution to the problem of handling complex Objects in a control designed for simple ones.