With Photoshop CC 2014.2 (implementing CEP 5.2) it’s finally possible to have flyout menus in HTML Panels too - as we had back in Flash land. This Tip shows you how to set them and deal with their click handler.
The full code of this demo extension is available on my GitHub page in the PS Panels Boilerplate project. Things are pretty simple, though: you first set an XML String which describes the menu:
Remember the \ at the lines’ end to escape the carriage return. Nothing fancy, just MenuItem tags to define the structure. Mind you, nested menus don’t work right now (in Photoshop CC 2014.2.0 - although After Effects and Premiere are OK) but the bug is going to be fixed. You actually build the menu feeding setPanelFlyoutMenu with the XML string:
An event listener has been added to respond to clicks (the event is "com.adobe.csxs.events.flyoutMenuClicked"):
When a click occurs, an event is passed to the callback. It’s data attribute is an object containing both menuId and menuName . The callback in my case is as follows:
The code above:
fires a simple alert with the Label when a menu item is clicked;
lets you check/uncheck a menu item;
toggles the enabled/disabled status of a menu item when you click on a different item.
I haven’t been able to retrieve the enabled/disabled and checked/unchecked menu items status dynamically, so I’ve worked around storing them in vars. Not ideal maybe, but it works As you see, I’ve used the updatePanelMenuItem function, which is used this way (straight from CSInterface.js sourcecode):