Mouse Event"
From Documentation
(2 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
− | + | There are two kinds of mouse events. One is cell mouse events such as onCellClick, onCellDoubleClick and onCellRightClick | |
− | There are two | + | * '''onCellClick''' |
− | * '''onCellClick''' | + | *: 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''' | |
− | * '''onHeaderClick''' | + | *: 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''' | + | |
− | * '''onHeaderRightClick''' | + | * '''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().