What happens if I drag & drop an ArrayCollection item and a XMLList item into a List ?

May 8, 2007

A pretty interesting question. When Rajesh Bhadra posed this question to me, I thought I should write about this. The answer is pretty straight-forward (though may not be obvious). You’ll have to handle the data type before you add/ render/ manipulate the data. i.e, your itemRenderer code will look like this

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”100″ height=”20″>
<mx:Script>
<![CDATA[
[Bindable]public var txt:String = “”;
override public function set data(value:Object):void{
super.data = value;
txt = (value is XML)? value.@name : value.name;
}
]]>
</mx:Script>
<mx:Label id=”lbl” text=”{txt}”/>
</mx:Canvas>

So, in short, the check looks like…

if(value is XML) {return value.@name}
else {return value.name}

or, converted to a ternary operator

return((value is XML)? value.@name : value.name);

A similar inspection is also needed on the selected object to extract info (as in the inspectSelection() method in code).

The application below, contains a List (with an XMLList dataProvider and a labelFunction) and a TileList (with an ArrayCollection dataProvider and an itemRenderer). The third control is a HorizontalList with the itemRenderer code that i mentioned earlier.

You can drag & drop from the List & Tile to the HList without data loss… that’s the idea. For details…

P.S. This application has been constructed from the skeleton of a code-snippet that was given to me by Rajesh Bhadra

Advertisements

PageDown, PageUp seek in VideoDisplay

May 8, 2007

I read somewhere that it would be cool to have the Flex VideoDisplay do a forward & reverse seek when the user presses PageDown and PageUp keys respectively. I just tried it and it was simple to get this to work, but not without learning something new 🙂

I first put an addEventListener on application complete on the VideoDisplay…

vd.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

But it didnt work.

The problem is that inherently, no containers by itself is focusEnabled in Flex. So the listener on Video doesn’t work as there is no focus on it (even with focusEnabled property set to true).

I worked around it by putting the listener on the application. Though the application is also a container, focusing on any of its children (that are focusEnabled, like Button, TextInput… etc) bubbles the keyboard event to the application and eventually triggers the listener. So when I altered my applicationComplete code to

this.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

it trigerred the listener that checks for the pageUp, pageDown keys and calls for the updation of the playheadTime property on VideoDisplay.

private function kbListener(event:KeyboardEvent):void{
var num:Number = Number(ti.text);
if(event.keyCode == Keyboard.PAGE_DOWN){
movePlayhead(num);
}
else if(event.keyCode == Keyboard.PAGE_UP){
movePlayhead(num*-1);
}
}

private function movePlayhead(num:Number):void{
if(vd.playheadTime+num >0){vd.playheadTime += num;}
}

This works… but its not a perfect solution. The problem here is that even if the pageUp & down are intended for some other purpose in the application (like for an Accordion), still the video will skip forward.

Finally thanks to Srini, i found a solution. The trick is to make VideoDisplay focusable, which is achieved by implementing the IFocusManagerComponent Interface by extending the VideoDisplay Class. So I have MyVideoDisplay which looks like this

package
{
import mx.controls.VideoDisplay;
import mx.managers.IFocusManagerComponent;
public class MyVideoDisplay extends VideoDisplay implements IFocusManagerComponent
{

}
}

And then use

<MyVideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

instead of

<mx:VideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

and revert to applying the eventListener on the VideoDisplay and Hola… Everything falls in place…

Now only if you click on the Video and then press pageDown/Up does it work. Also, now the Video appears in the tab loop of the application too. The code & app is here