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

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…

• The Application
• Basic MXML Source Code
• HListItemRenderer
• Thumbnail (itemRenderer for TileList)

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

PageDown, PageUp seek in VideoDisplay

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

• The Application
• The MXML Code
• MyVideoDisplayClass

Conditional Drag & Drop

We had a small presentation lined up for some Flex users today at our office. I did a presentation on E4X, something I have been discussing a lot on this blog. Harish was taking a session on Drag & Drop and someone in the audience had a very interesting question.

He wanted conditional drag & drop. This meant that he wanted to decide on “dragEnter“, if the data was good enough to be accepted by the destination. I just put together an app which i wanted to share here.

Here, I have 2 DataGrids, one which is a Stock List and the other, a Buying List. You can drag and drop items from the Stock List to the Buying one, but subject to availability. What it does is that, on dragEnter, the following function is executed.

private function enterDrag(event:DragEvent):void{
var obj:Object = event.dragSource.dataForFormat(“items”);
if(!obj[0].available){
event.stopImmediatePropagation();
}
}

The function checks the availability of the item and if unavailable, calls the event.stopImmediatePropagation() method, which doesn’t allow the drop operation on the grid for that item.

You can view the application and the source here

AWS WebService App

Here’s the AWS WebService Application I mentioned in my last post.

Thanks to e4x, i could query the AWS (Amazon Web Service), get books with the tag of “Flex” and populate them in a DataGrid (complete with itemRenderers and all) . The challendges i faced in the application were as follows

• Understanding the way of using the required namespaces to access the result of the WebService. This was done using

private namespace AWSNS = “http://webservices.amazon.com/AWSECommerceService&#8221;;
use namespace AWSNS;

• Since the data was coming in as e4x XML, the sort functionality of DataGrid was not working as expected. I needed to write sortCompareFunctions to get that to work.

So, here’s the AWS WebService App

and its source

My Favorites – My first Apollo App

Apollo has been out for some days now and being one of the guys on the Flex team working on Apollo, i felt that i should put out some Apollo App. I was planning stuff for so long that it never materialized

So today i decided to write one and wrote it in half hour. Its called “My Favorite App”. It reads your favorites from a text file on the file system (saved as links.txt) and loads them into your app and you can use it to switch between each of these easily. As of now the app, by default has Orkut, Yahoo Mail & Google Mail as the favorites.

My Favorites App

I’ll be soon getting out another version where you can edit/add favourites thru the app itself. But for now, you will have to manually edit the links.txt. What’s more i have also bundled the source of the app with the app itself. You can see how easy it is to write an app like this for the desktop.

But you’ll need the Apollo Runtime before you install this (like you need .NET framework to run .NET applications)

Then download the Installer for my App (called MyFavorites.air)

ThreeStateCheckBox… Bundled

I have bundled the 3 state checkbox now as a SWC (Shockwave Component). Also have done some changes to the component.You can download the SWC here and also view the source here

1. Changed the cross property to crossed
2. As per an anonymous’ comment, you cannot now set both crossed & selected properties on the component.

 

One thing to remember while using the SWC… You need to have the following namespace in the Application tag.

xmlns=”http://www.raghunathrao.com&#8221;

I have made a example to illustrate the above. You can view the source and the application at these links

The ominipresent Flickr Viewer

This is one of the most omini-present FLEX apps of all, the Flickr Viewer, the grandDad of all Flex Mashups. Here’s one on the Adobe Showcase. There are so many of them that people are sick of it (read this).

I did my own version of Flickr Viewer when i was doing a FLEX Workshop at Manipal in MIT. This was as a part of my alma mater’s technical fest TechTatva ’06. I thought I’ll put it up.

My Flickr Viewer
Everyone seems to be having one

This app uses Juan’s MAC OSX Theme. There are some known issues (I’ll try to sort them out as i get time)

• It only gives you the first page of results
• There’s a bug in the drag and drop functionality into the image when run remotely. Funny enough it works fine on the local system.

My version of 3 State CheckBox

I was just looking at the compoenets on Mrinal’s FlexBox when I came across the 3 state checkbox by Alessandro Crugnola. It seemed a useful thing but what struck me was a bit different. This can be extended to a checkbox that can be used for a “Yes/No/Dont Know” Scenario, rather than having the initial state blank. So i edited Alessandro’s code and chnaged it to have 3 states. The 3 states are decided on the status of 2 flags – selected & cross

• State 1- Undecided State (default) – selected & cross = false
• State 2 – Crossed State – selected=false, cross=true – Shows the “NO” state
• State 3 – Checked State – selected=true – Shows “YES” State

I know it could have been made better, but i just spent some 3 hrs on the component + the application below. Use the below Application to vote for my component. You can use the “View Source” to view and download the source of the application and the component.

Let me know what you think… Click this link to see the Application

I have observed that the View Source on the blogger page does not work. So go to the application and see the source

Error on adding FullScreenListener in creationComplete handler

This is an issue i hit upon while i was doing the Full Screen App (you can see it here). I wanted to add a listener to listen for the FullScreenEvent (package flash.events.FullScreenEvent) in my Application. So i put that onto my creationComplete handler on the Application, i.e.

mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”100%” height=”100%” creationComplete=”initStuff()”

and

private function initStuff():void{
stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);
}

But, this threw a real time error (RTE) saying…

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at JustFullScreen/::initStuff()
at JustFullScreen/_Application1_creationComplete()

The above error means that the “stage” object is null when it is trying to set the listener. What perplexes me is that if i put this addListener code in a later part of the application, it works. Which means that the stage is getting intitialized between the Application’s creationComplete and the place in the code where i’m calling it. Is this a bug or does the stage get initialized later, dispatching a different event? I’m still digging.

Addendum (half hour later): I observed now that including the SystemManager class (mx.managers.SystemManager) and then using the following code in the creationComplete handler works.

import mx.managers.SystemManager;

private function initStuff():void{
systemManager.stage.addEventListener(
FullScreenEvent.FULL_SCREEN, handleFullScreen);
}

So why is the systemManager object required if it is in the creationComplete handler and not if it is in a later part of the code… I’m confused now!!! Gotta tread back to the Flex Gurus
The code is here…

• The one using SystemManager
• The one where it is being called later

Addendum again (the next day) – Thanks Joan for the info. Thanks to her, i found the solution for the above problem…

It seems that the stage is available only after the updateComplete or applicationComplete Events. Read the post that demystified things for me…

My Full Screen Video App – Ver 1.0

I wrote about full screen support in flash, a long time back in Nov ’06 (see that post here). I have been planning to write one myself. So finally i got myself down to write it. Before i put you through the app, some details on the API.

To make your application have a fullscreen support you need to do the following things.

1) Have the latest Flash Player (get it here)

2) Use the new Full Screen API
import flash.display.StageDisplayState into your Application and set the displayState of the stage. I have the following function toggling the FullScreen feature. “fsChk” is a CheckBox, based on which I’m toggling the functionality

private function toggleFullScreen():void{

stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);

if(fsChk.selected) {
stage.displayState = StageDisplayState.FULL_SCREEN}else {
stage.displayState = StageDisplayState.NORMAL}
}

3) Update the html-template in which you have the flash App
In the object & embed parts of the html code of the page in which the flash app is inserted, you need to add a new parameter allowFullScreen to true. You can refer the source of the app and view the html for details.

If you want to know more about this feature, refer the Adobe DevCenter article on the same or view the PDF that i have created, collating all that information.

Now the Application. This is just a small video player which can go full screen by checking a Flex CheckBox. This is written in Flex2.0 and you can find all the source files here…

Click here to view the Application
(confirm that you have the latest Flash player)

P.S – I have muted the video to start with, un-mute it if it pleases you

Update March 07 2008: A lot of people have complained that they got a security error when they tried using the code above. Here is a post articulating the problem and the solution.