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:

   view plainprintabout
1  <mx:DataGridColumn dataField="filename_thumbnail" headerText="Thumbnail" width="250">
2      <mx:itemRenderer>
3      <mx:Component>
4          <mx:Image height="50" width="50" source="{(data.thumbnail_filename!=null)?baseurl+'/images/spotlight/'+data.thumbnail_filename:baseurl+'/images/spotlight/'+data.filename}" />
5      </mx:Component>
6      </mx:itemRenderer>
7  </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. http://livedocs.adobe.com/flex/201/langref/mxml/component.html
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:
   view plainprintabout
1  <mx:DataGridColumn dataField="filename_thumbnail" headerText="Thumbnail" width="250">
2      <mx:itemRenderer>
3      <mx:Component>
4          <mx:Image height="50" width="50" source="{(data.thumbnail_filename!=null)?outerDocument.baseurl+'/images/spotlight/'+data.thumbnail_filename:outerDocument.baseurl+'/images/spotlight/'+data.filename}" />
5      </mx:Component>
6      </mx:itemRenderer>
7  </mx:DataGridColumn>