Cell Clicking Event"

From Documentation
m (correct highlight (via JWB))
 
Line 23: Line 23:
 
[[File:zss-essentials-events-cellClicking.png | center]]
 
[[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.
+
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 <code>@Listen</code>. 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' highlight='4, 8,12, 16,22, 27'>
 
public class EventsComposer extends SelectorComposer<Component>{
 
public class EventsComposer extends SelectorComposer<Component>{
 
//omitted codes...
 
//omitted codes...
Line 50: Line 50:
 
 
 
</source>
 
</source>
* Line 4,12,16: 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 4,12,16: Apply <code>@Listen</code> to listen an event with the syntax <code>[EVENT NAME] = [COMPONENT SELECTOR]</code>. 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 <code>ss</code> 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.getCellRefString()</tt> is a utility method which converts row and column index into a cell reference like A1.
+
* Line 8: The <code>getRow()</code> returns 0-based row index of the cell which is in editing and <code>getColumn()</code> returns column index. The cell A1's row and column index are both 0. <code>Ranges.getCellRefString()</code> is a utility method which converts row and column index into a cell reference like A1.
  
  

Latest revision as of 12:53, 19 January 2022




Overview

There are 3 events related to cell clicking:

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 a 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.


Zss-essentials-events-cellClicking.png

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.getCellRefString(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: 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.getCellRefString() is a utility method which converts row and column index into a cell reference like A1.



All source code listed in this book is at Github.


Last Update : 2022/01/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.