Something to remember when working with inline components in Flex

Last night I ran into an issue I just couldn’t understand with some Flex development I was doing. Let me show the code that wasn’t working: <mx:DataGridColumn dataField="filename_thumbnail" headerText="Thumbnail" width="250"> <mx:itemRenderer> <mx:Component> <mx:Image height="50" width="50" source="{(data.thumbnail_filename!=null)?baseurl+'/images/spotlight/'+data.thumbnail_filename:baseurl+'/images/spotlight/'+data.filename}" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>

This code creates an inline component to render an image in a data grid. I use some simple logic to see if the thumbnail column has a value. If it does, I want to show that image. If not, I want to show the value in the image column.

My original code had a hard coded path in it, which of course didn’t work when the code was sent to production. (Duh.) So I switched to using a variable baseurl. This was a valid variable (I could Alert it inside my MXML file), but I kept getting an unknown variable error when I tried to compile it.

Luckily I was able to find help on the cfflex IRC channel. Toby Tremayne found this from the docs:

The <mx:Component> tag defines a new scope within an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <mx:Component> and </mx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.

Turns out - this inline component acted like a whole other MXML file. A bit like how a ColdFusion custom tag would act if we could define one inline. What I don’t quite get is why I can access data ok. I’m assuming Flex passes it in automatically since it recognizes I’m in a datagrid.

As the docs say, it is easy enough to fix. I simply add the outerDocument keyword like so:

<mx:DataGridColumn dataField="filename_thumbnail" headerText="Thumbnail" width="250"> <mx:itemRenderer> <mx:Component> <mx:Image height="50" width="50" source="{(data.thumbnail_filename!=null)?outerDocument.baseurl+'/images/spotlight/'+data.thumbnail_filename:outerDocument.baseurl+'/images/spotlight/'+data.filename}" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA