The following example uses the MenuBuilder framework to define
a context menu for a region of text using a JSON array as the data
source. For an application that specifies an identical menu structure
in XML, see
Example: An XML MenuBuilder data source
.
The application consists of two files.
The first file is the menu data source, in a file named “textContextMenu.js.”
[
{label: "MenuItem A"},
{label: "MenuItem B", type: "check", toggled: "true"},
{label: "MenuItem C", enabled: "false"},
{type: "separator"},
{label: "MenuItem D", items:
[
{label: "SubMenuItem D-1"},
{label: "SubMenuItem D-2"},
{label: "SubMenuItem D-3"}
]
}
]
The second file is the source code for the application user interface
(the HTML file specified as the initial window in the application.xml
file:
<html>
<head>
<title>JSON-based menu data source example</title>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="AIRMenuBuilder.js"></script>
<style type="text/css">
#contextEnabledText
{
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 50%
}
</style>
</head>
<body>
<div id="contextEnabledText">This block of text is context menu enabled. Right click or Command-click on the text to view the context menu.</div>
<script type="text/javascript">
// Create a NativeMenu from "textContextMenu.js" and set it
// as context menu for the "contextEnabledText" DOM element:
var textMenu = air.ui.Menu.createFromJSON("textContextMenu.js");
air.ui.Menu.setAsContextMenu(textMenu, "contextEnabledText");
// Remove the default context menu from the page:
air.ui.Menu.setAsContextMenu(null);
</script>
</body>
</html>
