« March 2006 | Main | May 2006 »

April 06, 2006

Custom context menus on Lists: Flex 2 Beta 2

Here's a simple example of how to add custom context menu items to your application.

It's a little awkward on a List-based component to capture the list item where the context menu was brought up.

I've heard of people capturing and storing the rollOver events on the list, and you then know that the last item rolled over is the one where the context menu was brought up.

But, if your lists itemRenderer implements mx.controls.listClasses.IDropInListItemRenderer, you can get the selectedIndex from the listData without having to pay attention to rollOver events.

This example will trace the selected list items label and rowIndex, and the caption of the selected context menu item.

Because I was using an itemRenderer it got a little weird once I was trying to get the target list item. If you right-click on the actual label in the list, the events mouseTarget is UITextField, but if you right-click on the renderer itself then the events mouseTarget is the listRenderer that you want. So here's how I check for that...

/* The user may click right on an object inside the renderer
* ... in our case it would be the label. If so, the target is the UITextField
*/
if( ! (target is listRenderer) )
{
  selectedListRenderer	 	= target.parent.parent;
				
  // otherwise they are clicking right on the renderer itself...
  // ( outside of the label )
} else {
  selectedListRenderer	 	= listRenderer(event.mouseTarget);
}
I haven't tested this with any other objects in the itemRenderer. It sure ould be nice if this worked no matter what the contents of the itemRenderer are.

Click here to view the source

April 04, 2006

Extending TreeItemRenderer in Flex 2 Beta 2

Extending TreeItemRenderer to replace default icons with icons unique to each branch/leaf

[The following was created as of Flex 2, Beta 2]

Here'a a simple example of how to extend TreeItemRenderer to modify the tree items. In this example we apply a different style for branch nodes and leaf nodes. We also remove the default icons and place an image in it's place.

For my purposes, I want to have a different image in each tree item at runtime, and this is the solution I came up with. This example just places a 'branch' image for branches, and a 'leaf' image for leaf items, but it can be easily modified to do what I just described.



CustomTreeItemRenderer.mxml

View the source here

Many thanks to Joan Tan for getting me started on this!

Lotsa Flex positions open!

All these positions are currently open... Tell your friends...
WW020602-Developer, Flex Enterprise:
TB010604-Senior Quality Engineer:
LM020604-Flex Builder QE Engineer:
SK120508-Quality Engineer:
SK010609-Computer Scientist:
SK120507-Computer Scientist:
WW020603-Architect, Flex Enterprise:
SK120506-Computer Scientist:
HW020602-Computer Scientist - Flex Builder: