The pop-up menu component is attached to the
main view. This pop-up menu is triggered by a right-click in the
view.
To use the pop-up menu, you must first
include the following scripts.
The pop-up menu component is IlvPopupMenu.
<script TYPE="text/javascript" src="script/IlvAbstractPopupMenu.js"></script> <script TYPE="text/javascript" src="script/framework/IlvPopupMenu.js"></script>
The pop-up menu can be contextual or static.
Static pop-up menu
The menu is static, that is, not conditioned by the context in
which it is called, and is defined in the HTML file by using IlvMenu and IlvMenuItem instances. The menu is a pure
client-side object and there is no round trip to the server to
generate the menu.
Defining a static pop-up menu in the HTML file at the JViews Framework level
//Creates the pop-up menu. var popupMenu = new IlvPopupMenu(); //Creates the menu model. var root = new IlvMenu("root"); var item1 = new IlvMenuItem("item1", true, "alert('item1 clicked')"); var item2 = new IlvMenuItem("item2", true, "alert('item2 clicked')"); root.add(item1); root.add(item2); //Sets the menu model to the pop-up menu. popupMenu.setMenu(root); [...] //Sets the pop-up menu to the view. view.setPopupMenu(popupMenu);
On the server side, you need to
configure the servlet support to handle pop-up menu server-side
actions.
Configuring servlet support for a pop-up menu at the JViews Framework level
public class XmlGrapherServlet extends IlvManagerServlet { public XmlGrapherServlet() { [...] getSupport().setPopupEnabled(true); } [...] }
Contextual pop-up menu
The pop-up menu is dynamically generated
by the server depending on:
- The
menuModelId
property of the current interactor set on the view. - The object selected when the user triggered the pop-up menu.
On the client side, you need only declare
the pop-up menu and set it on the view.
Declaring a contextual pop-up menu and setting it on the view,
client side (JViews
Framework level)
var popupMenu = new IlvPopupMenu(); //Sets the pop-up menu to the view view.setPopupMenu(popupMenu);
On the server side, you need to
configure the servlet support to handle pop-up menus and to set
the factory that generates the menu.
Configuring servlet support and setting the factory, server
side (JViews
Framework level)
public class XmlGrapherServlet extends IlvManagerServlet { public XmlGrapherServlet() { getSupport().setPopupEnabled(true); getSupport().getPopupMenuSupport().setMenuFactory (new XmlGrapherMenuFactory()); } [...] }
The factory must implement the IlvMenuFactory interface.
Styling the pop-up menu
You can style the pop-up menu by setting a
CSS class name in the following properties:
itemStyleClass
: the base CSS class name applied to a menu item.itemHighlightedStyleClass
: the style applied over the base style when the cursor is over the item.itemDisabledStyleClass
: the style applied over the base style when the cursor is disabled.
The following example shows how to use CSS
to style the pop-up menu.
At the JViews
Framework level
[...] <style> .PopupMenuItem { background: #21bdbd; color: black; font-family: sans-serif; font-size: 12px; } .PopupMenuItemHighlighted { background: #057879; font-style: italic; color: white; } .PopupMenuItemDisabled { background-color: #EEEEEE; font-style: italic; color: black; } </style> [...] <script> var popupMenu = new IlvPopupMenu(); popupMenu.setItemStyleClass('PopupMenuItem'); popupMenu.setItemHighlightedStyleClass('PopupMenuItemHighlighted'); popupMenu.setItemDisabledStyleClass('PopupMenuItemDisabled'); </script>