Custom Context Menu"
From Documentation
(Created page with "= 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 m...") |
|||
| Line 1: | Line 1: | ||
= Overview = | = Overview = | ||
| − | This section describes how to pop up a new customized context menu in a Spreadsheet. The steps are simple | + | This section describes how to pop up a new customized context menu in a Spreadsheet. The steps are simple: |
# Disable built-in context menu | # Disable built-in context menu | ||
# Create your own context menu | # Create your own context menu | ||
# Show custom context menu | # Show custom context menu | ||
| − | =Disable | + | =Disable Built-in Context Menu= |
We should hide built-in context menu in order to show our customized one only. | We should hide built-in context menu in order to show our customized one only. | ||
'''Extracted from customContext.zul''' | '''Extracted from customContext.zul''' | ||
| − | <source lang='xml' high=' | + | <source lang='xml' high='4'> |
| + | <window apply="org.zkoss.zss.essential.advanced.customization.CustomContextMenuComposer" | ||
| + | width="100%" height="100%"> | ||
<spreadsheet id="ss" width="100%" height="100%" showFormulabar="true" | <spreadsheet id="ss" width="100%" height="100%" showFormulabar="true" | ||
showContextMenu="false" showToolbar="true" showSheetbar="true" maxVisibleRows="100" | showContextMenu="false" showToolbar="true" showSheetbar="true" maxVisibleRows="100" | ||
maxVisibleColumns="20" src="/WEB-INF/books/blank.xlsx" /> | maxVisibleColumns="20" src="/WEB-INF/books/blank.xlsx" /> | ||
| + | <!-- other components --> | ||
| + | </window> | ||
</source> | </source> | ||
| − | * Line | + | * Line 4: Specify <tt>showContextMenu="false"</tt> to hide built-in context menu. |
| − | = Create | + | = Create Your Own Context Menu= |
Menupopup is the most suitable component to build a context menu. | Menupopup is the most suitable component to build a context menu. | ||
| Line 27: | Line 31: | ||
<menuitem id="open" label="Open Dialog" /> | <menuitem id="open" label="Open Dialog" /> | ||
</menupopup> | </menupopup> | ||
| + | </source> | ||
| + | |||
| + | |||
| + | =Show Custom Context Menu = | ||
| + | |||
| + | We can listen <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> to open our Menupopup. | ||
| + | |||
| + | <source lang='java' high='16, 17'> | ||
| + | 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); | ||
| + | } | ||
| + | } | ||
</source> | </source> | ||
Revision as of 08:29, 7 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
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);
}
}