Custom dragIndicator on Spark List Control

Question

I have a Spark List Control that is displaying a tilelayout of dynamically imported Images.  Basically, a bunch of thumbnail Images that are displayed in a tile layout.  I have drag drop enabled so that I can reorder these thumbnails and everything is working great except for one thing, the dragIndicator.  In my itemrenderer, I have the Image included in the "dragging" state, but the image is not showing in the dragIndicator.  I am basically just getting a semi-transparent square as my dragIndicator, but I want to be able to actually drag my thumbnail.  Any ideas how to do this?
Here is my List:
<s:List id="ImageList1" x="77" y="95" width="858" height="412" dataProvider="{imageAC}"
     itemRenderer="renderers.ImageACSmallItemRenderer" contentBackgroundColor="0x000000"
     borderVisible="false" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
     allowMultipleSelection="true" skinClass="skins.General.ListSkin" focusAlpha="0" mouseMove="getImageProxy(event)">
     <s:layout>
          <s:TileLayout columnWidth="76" rowHeight="76" horizontalAlign="center" verticalAlign="middle"
                 horizontalGap="8" verticalGap="8"/>
     </s:layout>
</s:List>
Here is my Itemrenderer:
<fx:Script>
     <![CDATA[
          import mx.utils.ObjectProxy;
          [Bindable]
          public var dataProxy:ObjectProxy;
          private function init():void {
               dataProxy = new ObjectProxy(data);
     ]]>
</fx:Script>
     <s:states>
          <s:State name="normal" />
          <s:State name="hovered" />
          <s:State name="selected" />
          <s:State name="dragging" />
     </s:states>
     <mx:Image source="{dataProxy.pathSmall}" horizontalCenter="0" verticalCenter="0" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Thanks for any insight!

Answer 1

Hi Evtim,
Earlier this summer, you helped me to create an itemRenderer that would allow me to drag photos in a list with a grid layout so that I could re-order them, and the dragIndicator would remain the photo instead of a empty box.  We accomplished this by using the contentCache feature with the Spark BitmapImage.  Now when I drag my photos, they remain photos even while being dragged.  Your very elegant solution ended up looking like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        width="76" height="76" focusEnabled="false">
          <fx:Script>
                    <![CDATA[
                              import spark.core.ContentCache;
                              static private const contentCache:ContentCache = new ContentCache();
                    ]]>
          </fx:Script>
          <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" />
                    <s:State name="selected" />
                    <s:State name="dragging" />
          </s:states>
          <s:BitmapImage source="{data.pathSmall}" width="70" height="70" contentLoader="{contentCache}"
                                            horizontalCenter="0" verticalCenter="0" alpha.dragging="2" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Now I have another little interesting challenge with this itemRenderer.  I don't want to bore you with details, but the situation is that I will no longer be loading thumbnails that are 70x70 pixels in size, but I will be loading photos with various dimensions that have to be displayed as a 70x70 pixel thumbnail.  So I am going to create a Group that is 70x70 pixels, turn on the clipAndEnableScrolling for the Group, and then place the photos within the Group so that they essentially get cropped.  The images that I import will have to be resized to either 70 pixels wide or 70 pixels high depending on what is the larger dimension of the of the image, and then placed inside the Group so that I get a perfect center-crop of the images.
So to summarize, I need to load the photos using a loader.  Then I can figure out with the height and width of the photos is.  Then I can scale the photo so that the smaller dimension is 70 pixels, and then I can place it in the Group.  But to do all of this, I can no longer do it in MXML but have to do it in ActionScript... and thus my dilema.  I can't figure out how to use the contentCache properly in ActionScript so that the images stay images when dragged.  Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        width="76" height="76" focusEnabled="false" dataChange="init(event)">
          <fx:Script>
                    <![CDATA[
                              import mx.core.FlexGlobals;
                              import mx.events.FlexEvent;
                              import spark.core.ContentCache; 
                              private var contentCache:ContentCache = new ContentCache();
                              private var imageLoader:Loader = new Loader();
                              private var bitmapImg:BitmapImage = new BitmapImage();
                              private var widthHolder:int;
                              private var heightHolder:int;
                              protected function init(event:FlexEvent):void {
                                        var request:URLRequest = new URLRequest(FlexGlobals.topLevelApplication.imageAC[this.itemIndex].pathSmall);
                                        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createVisuals);
                                        imageLoader.load(request);
                              private function createVisuals(event:Event):void{
                                        bitmapImg.source = Bitmap(imageLoader.content);
                                        bitmapImg.horizontalCenter = 0;
                                        bitmapImg.verticalCenter = 0;
                                        bitmapImg.smooth = true;
                                        bitmapImg.smoothingQuality = "high";
                                        widthHolder = imageLoader.width;
                                        heightHolder = imageLoader.height;
                                        if (widthHolder > heightHolder) {
                                                  bitmapImg.width = int(Math.round(70*widthHolder/heightHolder));
                                                  bitmapImg.height = 70;
                                        else {
                                                  bitmapImg.width = 70;
                                                  bitmapImg.height = int(Math.round(70*heightHolder/widthHolder));
                                        imageGroup.addElement(bitmapImg);
                    ]]>
          </fx:Script>
          <s:states>
                    <s:State name="normal" />
                    <s:State name="hovered" />
                    <s:State name="selected" />
                    <s:State name="dragging"/>
          </s:states>
          <s:Group id="imageGroup" width="70" height="70" horizontalCenter="0" verticalCenter="0" clipAndEnableScrolling="true"/>
</s:ItemRenderer>
So when there is a dataChange in my List, the init() function gets called to load the image.  When the load is complete, the createVisuals() method resizes the image and places it in the Group. Everything is working as expected.  The images get resized, centered and cropped within the group, and smoothed out so that they look nice.  But now when I drag them, I get an empty box while dragging.  I am unsure of how to tie in the contentCache with my bitmapImage object so that it will stay an image while being dragged using actionScript.  I don't know if it is as simple as setting the contentLoader property for the bitmapImage object, or if it is more complicated and I need to set the image source for the "dragging" state.  Could you possibly give me some insight as to how to make this happen in ActionScript?
Thanks for any insight!
Bill