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:
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: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.
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:
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:
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]