Issue with using SWF files within TileList control

I ran into a small annoyance using SWF files within the Flex TileList control. Using a SWF image in the itemRenderer seems to block the broadcasting a double-click ListEvent, however using a image format (JPG, PNG, GIF) works fine. To demonstrate the issue I created a very simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

In the example above we have two items in the list, one uses a jpeg image, the other uses a swf file. I have set the doubleClickEnabled propertie to true and listen for the doubleClick event. Double-clicking the jpeg image files and alert message. Doing the same on the swf image does not fire the event.

The solution I derived for getting the the event to fire was to create a “cover” on top of the SWF image. I used a Canvas with a transparent border and fill color. This seems to proprogate the double-click event:

List ItemRenderer:

1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="220" height="220">
<mx:Image source="{data.icon}" width="200" height="200" horizontalCenter="0" top="0"/>
<mx:Label text="{data.label}" bottom="0" horizontalCenter="0" textAlign="center"/>
<mx:Canvas width="100%" height="100%" borderStyle="solid" backgroundAlpha="0" backgroundColor="0x000000" borderColor="#000000" alpha="0"/>
</mx:Canvas>

Application MXML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="540" height="600" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[import mx.controls.Alert;
[Bindable]
[Embed(source="assets/swffile.swf")]
public var swfClass:Class;[Bindable]
[Embed(source="assets/jpgfile.jpg")]
public var graphicClass:Class;private function handleListDoubleClick():void
{
Alert.show("List item was double-clicked");
}

]]>
</mx:Script>
<mx:TileList width="500" height="240" doubleClickEnabled="true" doubleClick="handleListDoubleClick()" columnWidth="220" rowHeight="220" y="44" horizontalCenter="0">
<mx:dataProvider>
<mx:Array>
<mx:Object label="SWF" icon="{swfClass}"/>
<mx:Object label="JPEG" icon="{graphicClass}"/>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
<mx:TileList width="500" height="240" doubleClickEnabled="true" doubleClick="handleListDoubleClick()" columnWidth="220" rowHeight="220" y="321" itemRenderer="listItemRenderer" x="20">
<mx:dataProvider><mx:Array>
<mx:Object label="SWF" icon="{swfClass}"/>
<mx:Object label="JPEG" icon="{graphicClass}"/>
</mx:Array>
</mx:dataProvider></mx:TileList>
<mx:Label x="20" y="295" text="TileList with SWF & JPEG images (double-click), ItemRenderer with simple cover" fontWeight="bold"/>
<mx:Label x="20" y="18" text="TileList with SWF & JPEG images (double-click)" fontWeight="bold"/>
</mx:Application>

This is the best solution and simplest I have come up with so far. I will post the example and see if anyone else might have a bette workaround.

Source Code
Example

-Mr