How can I load images as icons dynamically into a TileList using flex?

Question

Ok, so I have a custom render that I have created:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center"
  verticalAlign="middle"
  width="100"
  height="100">
  <mx:Script>
    <![CDATA[
      [Bindable]
      private var fileLabel:String;

      [Bindable]
      private var fileIcon:Class;

      override public function set data(value:Object):void{
        fileLabel = value.label;
        fileIcon = value.file.url;
      }
    ]]>
  </mx:Script>
  <mx:Image source="{fileIcon}" />
  <mx:Label text="{fileLabel}" />
</mx:VBox>

That I want to use for a photo gallery with images that are dragged and dropped onto a TileList. I have that part down, but I can't seem to get the icon thing to work.

Given: value is sort of wrapper for a File class. I want to set the mx:Image source to something that needs to be of type Class. Using nativePath or url gives me a cast error. I see tons of examples online using XML and something like "Embed(/url/to/img.jpg)". I promise you that if you give me one of those examples (using a static image) I will give you a negative vote. THAT IS NOT WHAT IM LOOKING FOR HERE!

Answer 1

The reason that this isn't working is because the type of the fileIcon property is Class. You would generally would only want an object of type Class if you plan to use it like a factory, creating instances of that class with it. When you use the [Embed] metadata, you are indicating to the compiler that it should embed the specified asset into the SWF and also generate a Class to act as a factory for vending object instances that can represent that asset. However, as you had already discovered before posting this question, the problem with [Embed] is that you need to hard-code the reference, it doesn't let you supply a value at runtime (because the compiler needs to literally embed the asset, at compile-time).

Fortunately, mx:Image.source is a very flexible property that also accepts Strings (despite the fact that most documentation demonstrates using it with embedded assets). As long as the Flex application is capable of loading the asset, you can just supply a String-typed URL as the source.

Change the type of fileIcon to a String, and also verify that value.file.url is actually a URL of an image that your application can load. (You can test this just by hardcoding this URL into the mx:Image's source attribute.)