Flex 2 Context Menus
One of the first tips I give to Flash developers getting into Flex for the first time is to forget what they know about Flash. I was helping a customer with a proof of concept application the other day, and got bit by not following my own advice when the requirement to have context menus came up. This feature has been available since Flash Player 7, but I wasn’t familiar with how to implement it on Flash Player 9 with Flex 2. After burning several hours trying it the Flash 7 way, I landed at the Flash 9 way.
[UPDATE: Due to security sandbox limitations, here on the blog, you won’t be seeing exotic images from Flickr’s most interesting, but rather a small sampling of rather bland imagery I’ve selected from my personal library. The problem with Flickr isn’t the policy file to access the Flickr API’s, but rather the permissions to physically copy bitmap data from images loaded from Flickr into my SWF served here from MXNA. The bits in the source archive remain unchanged from the original Flickr version. You can download the source and run the example locally to enjoy interesting Flickr content. Content aside, this post is really about context menus anyways, so my boring photos will have to suffice.]
The Flash 7 way means following a restriction that only top-level elements can have context menus. That means that if you have a screen that’s done as a component, only that component can have a context menu, and not the control inside of that component. The way around this is to track roll-over and roll-out events. Those events can be bubbled to the component level where it can change the context menu respectively.
One trick to this is that when the context menu is activated, a roll-out even is triggered. This means that when a context menu item is selected, and the event listener goes to back to the sub-control that last triggered the roll-over, but that sub-control no longer exists in that state. The way around this problem is to track at the top-level if there’s a context menu. If there is, then don’t trigger a roll-out and don’t mess with the context menu.
Again, this is all the Flash 7 way, and the Flash 9 way with Flex 2 is much easier and far more robust.
I found that using the Flash 7 way inside the Flex 2 framework, worked pretty consistently. When it didn’t work though, it brought the Flash Player and the entire browser crashing down. With Flash Player 9 a browser crash should never occur, so I was clearly doing something horribly wrong. After spending a long time looking over the debugging information however, I was at a loss.
Eventually I learned that with Flex 2 every interactive object gets its own context menu property. All you have to do as a developer is assign a context menu to that property and you’re done. The Flex Framework takes care of monitoring which interactive object is active and what context menu should be displayed. Of course if I had ignored the temptation to use what I thought I knew, and had actually referenced the documentation, I would have seen the context menu property front and center just about everywhere.
The customer’s requirement was pretty simple. There were defined hot-spots over an image that needed to respond to right-clicks by presenting a single, common, context menu. Having been bit by not following my own advice however, I decided that I need to push this area of my knowledge quite a bit further. I set out with a concept that would allow me to explore context menus, and this is where I landed:
Essentially, when the application starts, it makes a request out to Flickr to get the list of the most interesting photos (the top 100). I initially wanted to show hot-spots over the images wherever there were notes. It turns out however that precious few interesting photos get notes, so I just forced some random ones of my own. You can right-click over the note hot-spots and extract a single note or all the notes on the image. You can also click over the image and select to extract all the notes on that image. Once you have extracted notes, you can drag-and-drop them to move them around. You can also right-click over an extracted note to remove it outright.
What exactly is an “extracted note”? Well, you’ll just have to try the application see what I mean.
This could obviously be extended quite a bit, and I’ve really just touched the surface. You could add a context menu item that triggers free transforms of the extracted notes as an example. There are also a number of optimizations that could be made. For example, you might pick up after the rotation effect is done playing and apply smoothing. Also rather than have hundreds of image sprites hanging around, you might choose to composite them into one single large bitmap that overlays the entire screen.
As for me, I got the context menu experience I was wanting, so I’m on to the next project. The source is available should you want to run this application locally, study the source, or make the suggested improvements.