Custom Context Menu"
From Documentation
Line 4: | Line 4: | ||
# Create your own context menu | # Create your own context menu | ||
# Show custom context menu | # Show custom context menu | ||
− | # Add application logic | + | # Add application logic for context menu |
=Disable Built-in Context Menu= | =Disable Built-in Context Menu= |
Revision as of 09:36, 11 May 2015
Overview
This section describes how to pop up a new customized context menu in a Spreadsheet. The steps are simple:
- Disable built-in context menu
- Create your own context menu
- Show custom context menu
- Add application logic for context menu
Disable Built-in Context Menu
We should hide built-in context menu in order to show our customized one only.
Extracted from customContext.zul
<window apply="org.zkoss.zss.essential.advanced.customization.CustomContextMenuComposer"
width="100%" height="100%">
<spreadsheet id="ss" width="100%" height="100%" showFormulabar="true"
showContextMenu="false" showToolbar="true" showSheetbar="true" maxVisibleRows="100"
maxVisibleColumns="20" src="/WEB-INF/books/blank.xlsx" />
<!-- other components -->
</window>
- Line 4: Specify showContextMenu="false" to hide built-in context menu.
Create Your Own Context Menu
Menupopup is the most suitable component to build a context menu.
Extracted from customContext.zul
<menupopup id="myContext">
<menuitem id="display" label="Display Information" />
<menuitem id="open" label="Open Dialog" />
</menupopup>
Show Custom Context Menu
We can listen CellMouseEvent to open our Menupopup.
package org.zkoss.zss.essential.advanced.customization;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
import org.zkoss.zss.ui.event.CellMouseEvent;
import org.zkoss.zul.Menupopup;
public class CustomContextMenuComposer extends SelectorComposer<Component> {
@Wire
private Menupopup myContext;
@Listen("onCellRightClick = #ss")
public void doContext(CellMouseEvent event) {
myContext.open(event.getClientx(), event.getClienty());
myContext.setAttribute("event", event);
}
}
- Line 17: We could set CellMouseEvent as a Menupopup's attribute, and it could be used as a context information when implementing application logic for custom context menu.
Add Application Logic for Context Menu
package org.zkoss.zss.essential.advanced.customization;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zss.ui.Spreadsheet;
import org.zkoss.zss.ui.event.CellMouseEvent;
import org.zkoss.zul.*;
/**
* @author Hawk
*
*/
@SuppressWarnings("serial")
public class MyContextMenuComposer extends SelectorComposer<Component> {
@Wire
private Menupopup myContext;
@Wire
private Window dialog;
@Wire("#dialog #content")
private Label content;
@Listen("onClick = #display")
public void display(MouseEvent event) {
CellMouseEvent cellMouseEvent = (CellMouseEvent)myContext.getAttribute("event");
String message = "Selection: " + ((Spreadsheet)cellMouseEvent.getTarget()).getSelection().asString();
Clients.showNotification(message);
}