Cell Clicking Event"
From Documentation
(Created page with "{{ZKSpreadsheetEssentials3PageHeader}} __TOC__ = Overview = * '''onCellClick''' *: This event is fired when a user left clicks on a cell. When a corresponding event listen...") |
|||
| Line 22: | Line 22: | ||
| + | [[File:zss-essentials-events-cellClicking.png | center]] | ||
| − | + | As you can see in the right panel, it shows messages when I click a cell. We can achieve this in a controller very easily with <tt>@Listen</tt>. We omit lots of similar codes and leave those codes that are worth for your reference. | |
| − | |||
| − | + | <source lang='java' high='4, 8,12, 16,22, 27'> | |
| − | <source lang='java' high='4, 8,12, 16,22, 27 | ||
public class EventsComposer extends SelectorComposer<Component>{ | public class EventsComposer extends SelectorComposer<Component>{ | ||
//omitted codes... | //omitted codes... | ||
| Line 49: | Line 48: | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
</source> | </source> | ||
| − | * Line 4,12,16,22 | + | * Line 4,12,16,22: Apply <tt>@Listen</tt> to listen an event with the syntax <tt>[EVENT NAME] = [COMPONENT SELECTOR]</tt>. All event name can be found in <javadoc directory="zss">org.zkoss.zss.ui.event.Events</javadoc>. The "#ss" is the component selector which means the component with id <tt>ss</tt> on the ZUL page. (SelectorComposer supports various selector syntax that let you select components easily. Please refer to [[ZK Developer's Reference/MVC/Controller/Wire Components]]) . |
* Line 8: The <tt>getRow()</tt> returns 0-based row index of the cell which is in editing and <tt>getColumn()</tt> returns column index. The cell A1's row and column index are both 0. <tt>Ranges.getCellReference()</tt> is a utility method which converts row and column index into a cell reference like A1. | * Line 8: The <tt>getRow()</tt> returns 0-based row index of the cell which is in editing and <tt>getColumn()</tt> returns column index. The cell A1's row and column index are both 0. <tt>Ranges.getCellReference()</tt> is a utility method which converts row and column index into a cell reference like A1. | ||
* Line 27: We can know a row or column header is clicked through <tt>getType()</tt>. | * Line 27: We can know a row or column header is clicked through <tt>getType()</tt>. | ||
Revision as of 07:15, 7 August 2013
Overview
- onCellClick
- This event is fired when a user left clicks on a cell. When a corresponding event listener is invoked, a CellMouseEvent object is passed as an argument.
- onCellDoubleClick
- This event is fired when a user double clicks on a cell. When a corresponding event listener is invoked, a CellMouseEvent object is passed as an argument.
- onCellRightClick
- This event is fired when a user right clicks on ZK Spreadsheet cell. When a corresponding event listener is invoked, a CellMouseEvent object is passed as an argument.
Event Monitor Example
During Handling Events section, we will use a "Event Monitor" application as an example to present how to listen an event and what data you can get from an event. The image Below is a screenshot of "Event Monitor" application, when we interact with the Spreadsheet on the left hand side, the panel on the right hand side will shows messages about related events.
As you can see in the right panel, it shows messages when I click a cell. We can achieve this in a controller very easily with @Listen. We omit lots of similar codes and leave those codes that are worth for your reference.
public class EventsComposer extends SelectorComposer<Component>{
//omitted codes...
@Listen("onCellClick = #ss")
public void onCellClick(CellMouseEvent event){
StringBuilder info = new StringBuilder();
info.append("Click on cell ")
.append(Ranges.getCellReference(event.getRow(),event.getColumn()));
//show event information...
}
@Listen("onCellRightClick = #ss")
public void onCellRightClick(CellMouseEvent event){
//show event information...
}
@Listen("onCellDoubleClick = #ss")
public void onCellDoubleClick(CellMouseEvent event){
//show event information...
}
}
- Line 4,12,16,22: Apply @Listen to listen an event with the syntax [EVENT NAME] = [COMPONENT SELECTOR]. All event name can be found in Events. The "#ss" is the component selector which means the component with id ss on the ZUL page. (SelectorComposer supports various selector syntax that let you select components easily. Please refer to ZK Developer's Reference/MVC/Controller/Wire Components) .
- Line 8: The getRow() returns 0-based row index of the cell which is in editing and getColumn() returns column index. The cell A1's row and column index are both 0. Ranges.getCellReference() is a utility method which converts row and column index into a cell reference like A1.
- Line 27: We can know a row or column header is clicked through getType().