MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Hint If you process the right mouse button click event for an element, be aware that the default
behavior to show the app bar will be suppressed over that element. Therefore, use the right-click event
judiciously, because users will become accustomed to right-clicking around the app to bring up the app
bar. Note also that you can programmatically invoke the app bar yourself using its show method.
The Context menu sample gives us some context here—I know, it’s a bad pun! In all cases, you need
only listen to the HTML contextmenu event on the appropriate element; you don’t need to worry about
mouse, touch, and keyboard separately. Scenario 1 of the sample, for instance, has a nonselectable
attachment element on which it listens for the event (html/scenario1.html):
document.getElementById("attachment").addEventListener("contextmenu",
attachmentHandler, false);
In the event handler, you then create a Windows.UI.Popups.PopupMenu object (which comes from
WinRT, not WinJS!), populate it with Windows.UI.Popups.UICommand objects (that contain an item label
and click handler) or UICommandSeparator objects, and then call the menu’s showAsync method
(js/scenario1.js):
function attachmentHandler(e) {
var menu = new Windows.UI.Popups.PopupMenu();
menu.commands.append(new Windows.UI.Popups.UICommand("Open with", onOpenWith));
menu.commands.append(new Windows.UI.Popups.UICommand("Save attachment",
onSaveAttachment));
}
menu.showAsync({ x: e.clientX, y: e.clientY }).done(function (invokedCommand) {
if (invokedCommand === null) {
// The command is null if no command was invoked.
}
});
Notice that the results of the showAsync method 40 is the UICommand object that was invoked; you can
examine its id property to take further action. Also, the parameter you give to showAsync is a
Windows.Foundation.Point object that indicates where the menu should appear relative to the mouse
pointer or the touch point. The menu is placed above and centered on this point.
The PopupMenu object also supports a method called showForSelectionAsync, whose first argument is
a Windows.Foundation.Rect that describes the applicable selection. Again, the menu is placed above
and centered on this rectangle. This is demonstrated in Scenario 2 of the sample in js/scenario2.js:
40 The sample actually calls then and not done here. If you’re wondering why such consistencies exist, it’s because the done
method was introduced mid-way during the production of Windows 8 when it became clear that we needed a better
mechanism for surfacing exceptions within chained promises. As a result, numerous SDK samples and code in the
documentation still use then instead of done when handling the last promise in a chain. It still works; it’s just that
exceptions in the chain will be swallowed, thus hiding possible errors.
302