Mouse Event"

From Documentation
 
(2 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
  
===Mouse events===
+
There are two kinds of mouse events. One is cell mouse events such as onCellClick, onCellDoubleClick and onCellRightClick  
There are two types of Mouse events. One is cell mouse events such as onCellClick, onCellDoubleClick and onCellRightClick  
+
* '''onCellClick'''
* '''onCellClick''' - This event is fired when the user left clicks on ZK Spreadsheet cell. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> in the event listener.
+
*: This event is fired when a user left clicks on a cell. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> object is passed as an argument.
* '''onCellDoubleClick''' - This event is fired when the user double clicks on ZK Spreadsheet cell. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> in the event listener.
 
* '''onCellRightClick''' - This event is fired when the user right clicks on ZK Spreadsheet cell. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> in the event listener.
 
  
and the other is header mouse events such as onHeaderClick, onHeaderDoubleClick and onHeaderRightClick.
+
* '''onCellDoubleClick'''
* '''onHeaderClick''' - This event is fired when the user left clicks on ZK Spreadsheet header. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> in the event listener.
+
*: This event is fired when a user double clicks on a cell. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> object is passed as an argument.
* '''onHeaderDoubleClick''' - This event is fired when the user double clicks on ZK Spreadsheet header. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> in the event listener.
+
 
* '''onHeaderRightClick''' - This event is fired when the user right clicks on ZK Spreadsheet header. Event listeners are provided with <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> in the event listener.
+
* '''onCellRightClick'''
 +
*: This event is fired when a user right clicks on ZK Spreadsheet cell. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.CellMouseEvent</javadoc> object is passed as an argument.
 +
 
 +
 
 +
Another is header mouse events such as onHeaderClick, onHeaderDoubleClick and onHeaderRightClick.
 +
* '''onHeaderClick'''
 +
*: This event is fired when a user left clicks on Spreadsheet's header. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> object is passed as an argument.
 +
 
 +
* '''onHeaderDoubleClick'''
 +
*: This event is fired when a user double clicks on Spreadsheet header. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> object is passed as an argument.
 +
* '''onHeaderRightClick'''
 +
*: This event is fired when a user right clicks on Spreadsheet header. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc> object is passed as an argument.
 +
 
 +
* '''onHeaderUpdate'''
 +
*: This event is fired when a user resize a row (or column) header. When a corresponding event listener is invoked, a <javadoc directory="zss">org.zkoss.zss.ui.event.HeaderUpdateEvent</javadoc> object is passed as an argument.
 +
 
 +
 
 +
= Example =
 +
 
 +
We still use previous "Event Monitor" application demonstrate event listening.
 +
 
 +
[[File:zss-essentials-events-mouse.png | center]]
 +
 
 +
As you can see in the right panel, it shows messages when I click a cell or header and resize a column header. We also 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, 38, 42, 47'>
 +
public class EventsComposer extends SelectorComposer<Component>{
 +
//omitted codes...
 +
 
 +
@Listen("onCellClick = spreadsheet")
 +
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 = spreadsheet")
 +
public void onCellRightClick(CellMouseEvent event){
 +
//show event information...
 +
}
 +
@Listen("onCellDoubleClick = spreadsheet")
 +
public void onCellDoubleClick(CellMouseEvent event){
 +
//show event information...
 +
}
 +
 +
 +
@Listen("onHeaderClick = spreadsheet")
 +
public void onHeaderClick(HeaderMouseEvent event){
 +
StringBuilder info = new StringBuilder();
 +
info.append("Click on ").append(event.getType()).append(" ");
 +
 +
switch(event.getType()){
 +
case COLUMN:
 +
info.append(Ranges.getColumnReference(event.getIndex()));
 +
break;
 +
case ROW:
 +
info.append(Ranges.toRowReference(event.getIndex()));
 +
break;
 +
}
 +
 +
//show event information...
 +
}
 +
@Listen("onHeaderRightClick = spreadsheet")
 +
public void onHeaderRightClick(HeaderMouseEvent event){
 +
//show event information...
 +
}
 +
@Listen("onHeaderDoubleClick = spreadsheet")
 +
public void onHeaderDoubleClick(HeaderMouseEvent event){
 +
//show event information...
 +
}
 +
 
 +
@Listen("onHeaderUpdate = spreadsheet")
 +
public void onHeaderUpdate(HeaderUpdateEvent event){
 +
StringBuilder info = new StringBuilder();
 +
info.append("Header ").append(event.getAction())
 +
.append(" on ").append(event.getType());
 +
switch(event.getType()){
 +
case COLUMN:
 +
info.append(" ").append(Ranges.getColumnReference(event.getIndex()));
 +
break;
 +
case ROW:
 +
info.append(" ").append(Ranges.toRowReference(event.getIndex()));
 +
break;
 +
}
 +
 
 +
switch(event.getAction()){
 +
case RESIZE:
 +
if(event.isHidden()){
 +
info.append(" hides ");
 +
}else{
 +
info.append(" changes to ").append(event.getSize());
 +
}
 +
break;
 +
}
 +
 +
//show event information...
 +
}
 +
}
 +
 +
</source>
 +
* 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>.

Latest revision as of 01:26, 5 July 2013




There are two kinds of mouse events. One is cell mouse events such as onCellClick, onCellDoubleClick and onCellRightClick

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


Another is header mouse events such as onHeaderClick, onHeaderDoubleClick and onHeaderRightClick.

  • onHeaderClick
    This event is fired when a user left clicks on Spreadsheet's header. When a corresponding event listener is invoked, a HeaderMouseEvent object is passed as an argument.
  • onHeaderDoubleClick
    This event is fired when a user double clicks on Spreadsheet header. When a corresponding event listener is invoked, a HeaderMouseEvent object is passed as an argument.
  • onHeaderRightClick
    This event is fired when a user right clicks on Spreadsheet header. When a corresponding event listener is invoked, a HeaderMouseEvent object is passed as an argument.
  • onHeaderUpdate
    This event is fired when a user resize a row (or column) header. When a corresponding event listener is invoked, a HeaderUpdateEvent object is passed as an argument.


Example

We still use previous "Event Monitor" application demonstrate event listening.

As you can see in the right panel, it shows messages when I click a cell or header and resize a column header. We also 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 = spreadsheet")
	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 = spreadsheet")
	public void onCellRightClick(CellMouseEvent event){
		//show event information...
	}
	@Listen("onCellDoubleClick = spreadsheet")
	public void onCellDoubleClick(CellMouseEvent event){
		//show event information...
	}
	
	
	@Listen("onHeaderClick = spreadsheet")
	public void onHeaderClick(HeaderMouseEvent event){
				StringBuilder info = new StringBuilder();
		info.append("Click on ").append(event.getType()).append(" ");
		
		switch(event.getType()){
		case COLUMN:
			info.append(Ranges.getColumnReference(event.getIndex()));
			break;
		case ROW:
			info.append(Ranges.toRowReference(event.getIndex()));
			break;
		}
		
		//show event information...
	}
	@Listen("onHeaderRightClick = spreadsheet")
	public void onHeaderRightClick(HeaderMouseEvent event){
		//show event information...
	}
	@Listen("onHeaderDoubleClick = spreadsheet")
	public void onHeaderDoubleClick(HeaderMouseEvent event){
		//show event information...
	}

	@Listen("onHeaderUpdate = spreadsheet")
	public void onHeaderUpdate(HeaderUpdateEvent event){
		StringBuilder info = new StringBuilder();
		info.append("Header ").append(event.getAction())
			.append(" on ").append(event.getType());
		switch(event.getType()){
		case COLUMN:
			info.append(" ").append(Ranges.getColumnReference(event.getIndex()));
			break;
		case ROW:
			info.append(" ").append(Ranges.toRowReference(event.getIndex()));
			break;
		}

		switch(event.getAction()){
		case RESIZE:
			if(event.isHidden()){
				info.append(" hides ");
			}else{
				info.append(" changes to ").append(event.getSize());
			}
			break;
		}
		
		//show event information...
	}
}
  • 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().