ContextMenu

Vaadin 7.3 Supported! - ContextMenu is hierarchical menu allowing popup context options for multitude of components

View larger

Close

This add-on is deprecated as there is now official add-on by Vaadin Ltd for this. The old version is kept available for users with older versions of Vaadin 7.

The add-on is no longer actively maintained.

ContextMenu 3.1 is for Vaadin 6. It can be added to layout and opened up to coordinates with LayoutClickListener.

ContextMenu 4.x is Vaadin 7 extension, that can be added to any Vaadin component as an Extension. ContextMenu 4 supports in addition of Layouts also Table for which context menu can be customized based on selected Item and Property.

ContextMenu supports hierarchical menu structure and item level click listeners as well as on the fly management of menu items.

Vaadin 6 version is a component, Vaadin 7 version is an extension.

Main features:

• Support Vaadin Table and Tree on item and property level.
• Allows listening on clicks on certain item and or property
• Supports header and footer clicks on property level with Table
• Can be added to any component
• Works as Vaadin extension
• Does not require server round trip if opened from other component than Table or Tree
• Allows server round trip for all components
• Supports hierarchical menu structures
• Supports item and menu level click listening
• Supports icons
• Supports dynamic customization of menu structure based on what the source of the click was
• Works with Vaadin 7.0.0 and upwards.

Sample code

ContextMenu menu = new ContextMenu();

// Generate main level items
ContextMenuItem photos = menu.addItem("Photos");
ContextMenuItem albums = menu.addItem("Albums");
ContextMenuItem report = menu.addItem("Report");

// Generate sub item to photos menu
ContextMenuItem topRated = photos.addItem("Top rated");

photos.setIcon(new FileResource(new File("photos.png")));

// Enable separator line under this item
photos.setSeparatorVisible(true);

// Show notification when menu items are clicked
menu.addListener(new ContextMenu.ClickListener() {
   public void contextItemClick(ClickEvent event) {
      // Get reference to clicked item
      ContextMenuItem clickedItem = event.getClickedItem();

      // Do something with the reference
      getApplication().getMainWindow().showNotification(clickedItem.getName());
   }
});

// Open Context Menu to mouse coordinates when user right clicks layout
this.mainLayout.addListener(new LayoutClickListener() {
   public void layoutClick(LayoutClickEvent event) {
      if (LayoutClickEvent.BUTTON_RIGHT == event.getButton()) {
         menu.show(event.getClientX(), event.getClientY());
      }
   }
});


// Alternatively you can open Context Menu next to a button or any other component
Button button = new Button("open");

button.addListener(new Button.ClickListener() {
   public void buttonClick(com.vaadin.ui.Button.ClickEvent event) {
      menu.show(button);        
   }
});


// Remove top rated menu from photos menu
photos.removeItem(topRated);

// Remove photos menu from root menu
menu.removeItem(photos);

// Add menu to main window, will not be directly visible but must be added.
getMainWindow().addComponent(menu);

public void init(VaadinRequest request) {	
	VerticalLayout layout = new VerticalLayout();
	setContent(layout);

	ContextMenu contextMenu = new ContextMenu();
	contextMenu.addItem("Root Item").addItem("Sub item");

	contextMenu.setAsContextMenuOf(layout);
}

ContextMenuOpenedListener.TableListener tableOpenListener = new ContextMenuOpenedListener.TableListener() {

    public void onContextMenuOpenFromRow(ContextMenuOpenedOnTableRowEvent event) {
        // read clicked row item and property from event and modify menu
    }

   public void onContextMenuOpenFromHeader(ContextMenuOpenedOnTableHeaderEvent event) {
        // read clicked header property from event and modify menu
   }

   public void onContextMenuOpenFromFooter(ContextMenuOpenedOnTableFooterEvent event) {
        // read clicked footer property from event and modify menu
   }
};

Table table = ...;

ContextMenu contextMenu = new ContextMenu();
tableContextMenu.setAsContextMenuOf(table);

contextMenu.addContextMenuTableListener(tableListener);

ContextMenuOpenedListener.TreeListener treeItemListener = new ContextMenuOpenedListener.TreeListener() {
    
    public void onContextMenuOpenFromTreeItem(ContextMenuOpenedOnTreeItemEvent event) {
        // Handle click based on item from event
    }
};

Tree tree = ...;

ContextMenu contextMenu = new ContextMenu();
tableContextMenu.setAsContextMenuOf(tree);

contextMenu.addContextMenuTreeListener(treeItemListener);

ContextMenu contextMenu = new ContextMenu();

contextMenu.addItem("Test item #1").addItem("Child #1");

contextMenu.setAsContextMenuOf(component);
contextMenu.setOpenAutomatically(false);

contextMenu.addContextMenuComponentListener(new ComponentListener() {

    public void onContextMenuOpenFromComponent(ContextMenuOpenedOnComponentEvent event) {
         // perform some logic here
         // ...
         // Must open menu manually
         contextMenu.open(event.getX(), event.getY());
    }
}

// If setOpenAutomatically is set to false, the component listener is invoked instead of opening the menu
// This is useful for example server side component extensions which want to control how menu is opened.
// This can also be used if contents of the menu need to be changed before displaying.
// If setOpenAutomatically is set to true, menu is opened on the client side without server roundtrip.
// In this case content of the menu cannot be changed.

Links

• Discussion Forum (version 3.1)
• Source Code (version 3.1)
• Issue tracker (version 3.1)
• Source Code (version 4.4)
• Issue tracker (version 4.4)

Compatibility