Give us a call 203-379-0773
Check out our new training course on AngularJS for Flex Developers

Flextras Friday Lunch - Episode 2 - 02/13/2009

This is the second episode of the Flextras Friday Lunch podcast, originally broadcast on February 13h, 2009. In this episode I demonstrate the Flextras DataSorter Code Generator Application.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Flextras Friday Lunch - Episode 1 - 02/06/2009

This is the first episode of the Flextras Friday Lunch podcast, originally broadcast on February 6th, 2009. In this episode I demonstrate the Flextras DataSorter YouTube Playlist Application.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Contact

Replacing the Flextras DataSorter Buttons with Context Menu Entries

I was presenting last night at the Hartford CT Adobe User Group about Flextras components. The manager noted that the buttons included as part of our DataSorter Flex Component took up a lot of screen real estate. The DataSorter allows for sorting any dataProvider in a manner similar to YouTube playlists and a Netflix movie queue. The buttons I built into the component are a delete button, a move up button, a move down button, and move to top button, and a move to bottom button.

Jeff asked if the buttons be removed and the functionality added as items in the context menu?

Why, yes, they can! Here is how I did it.

First, removing the buttons is easy. Each button has a property that controls the visibility of the buttons. Code like this will remove them all:

<flextras:DataSorter
deleteButtonVisible="false"
moveDownButtonVisible="false"
moveToBottomButtonVisible="false"
moveToTopButtonVisible="false"
moveUpButtonVisible="false"
>

Now that they are gone, we need a way to add this functionality to the context menu. For that I created a custom itemRenderer. First, let's start with the simple itemRenderer:

<mx:Label dataChange="onDataChange()" creationComplete="init()" paddingBottom="0" paddingTop="0">
<mx:Script><![CDATA[

public function onDataChange():void{
this.text = data.label;
}
]]>
</mx:Script>
</mx:Label>

It is label that displays text from the dataProvider. Instead of using binding, an expensive operation, I am responding to the dataChange event to change the data.

Let's implement the init / creationComplete function to add our menu items. For the purposes of this blog post, I'll only implement the MoveUp Button. full source code is available here.

public function init():void{
var moveItemUp:ContextMenuItem = new ContextMenuItem("Move Item Up");
moveItemUp.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMoveUp);

var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.customItems.push(moveItemUp);

this.contextMenu = customContextMenu;

}

This makes use of the ContextMenu and ContextMenuItem classes. Unfortunately, you cannot create submenus in a web application, as that API is only available if you're deploying to the desktop using AIR. I wrote a bit about context menu in my personal blog a while ago.

When someone selects the menu from the item, they are going to want to perform the action in the event handler. Here is how we do that:

public function onMoveUp(event:Event):void{
var dataSorterEvent : DataSorterEvent = new DataSorterEvent(DataSorterEvent.ITEM_MOVEUP,this.data,false,false, this.listData.rowIndex ,this);
this.parent.dispatchEvent(dataSorterEvent);
}

What this does is create an instance of the DataSorterEvent with the appropriate type. Then we dispatch it on the parent of the renderer. The DataSorter catches that event and responses appropriately.

Here is a sample, and a link to the full source code for the sample. Here it is embedded:

Flextras DataSorter now in Tour De Flex

The new version of Tour De Flex was just released. Along with the updates, the two demos for the Flextras DataSorter were added.

The DataSorter is an way to provide a sorting mechanism in Flex similar to YouTube playlists or NetFlix movie queues. One of our samples was built against the YouTube API, and you can view the our interactive demo and a non-iteractive one.

Here is a pretty screenshot:

There do seem to be a few problems, such as the commenting system uses the old Adobe Forums; and the comment link no longer works now that they rolled out the new system last week.

Additionally, I need to figure out how to make the links on my about page work. That would be nice. Making my text links clickable in the demos would be a nice touch too. I've pinged Greg to see if he had some insight.