The pop-up menu in JavaScript

> > > > >

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>

Current section

Developing the client