The ZK Spreadsheet Component"

From Documentation
 
(14 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{ZKSpreadsheetEssentialsPageHeader}}
 
{{ZKSpreadsheetEssentialsPageHeader}}
 +
 +
 +
{{Deprecated|url=http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials}}
 +
  
 
__TOC__
 
__TOC__
−
===The ZK Spreadsheet Component===
+
===Purpose===
−
In this section, a brief overview is given on how developers work with the ZK Spreadsheet component.
+
A brief overview on how to work with the ZK Spreadsheet component.
−
====The Bare Spreadsheet Component====
+
 
−
----
+
===ZUML===
 +
 
 
ZK Spreadsheet is a single ZK component. Developers could declare it within any ZK container components, such as Window,  tabs, groupbox, etc.
 
ZK Spreadsheet is a single ZK component. Developers could declare it within any ZK container components, such as Window,  tabs, groupbox, etc.
  
 
For example:<br>
 
For example:<br>
 
<source lang="xml">
 
<source lang="xml">
−
<window title="Bare ZK Spreadsheet" border="normal" height="600px">
+
<window title="Bare ZK Spreadsheet" border="normal" height="500px">
 
<spreadsheet src="/demo_sample.xls"
 
<spreadsheet src="/demo_sample.xls"
 
maxrows="200"  
 
maxrows="200"  
 
maxcolumns="40"
 
maxcolumns="40"
−
width="500px"
+
width="100%"
−
height="300px"></spreadsheet>
+
height="450px"></spreadsheet>
 
</window>
 
</window>
 
</source>
 
</source>
−
which renders:<br/>
+
Note: View the complete source of ZUML [http://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/WebContent/gettingstarted/bare.zul here]
−
[[Image: bareSpreadsheet.png]]<br/>
 
  
−
====Spreadsheet Component Attributes====
 
−
----
 
 
Developers customize the spreadsheet component by declaring its attributes, for example:
 
Developers customize the spreadsheet component by declaring its attributes, for example:
 
*the source file of the spreadsheet, for example src="/demo_sample.xls"
 
*the source file of the spreadsheet, for example src="/demo_sample.xls"
 
*the maximum number of rows of this spread sheet, for example maxrows="200"  
 
*the maximum number of rows of this spread sheet, for example maxrows="200"  
 
*the maximum number of columns of  this spread sheet, for example maxcolumns="40"
 
*the maximum number of columns of  this spread sheet, for example maxcolumns="40"
−
*size of the spreadsheet component, for example: width="500px" height="300px"
+
*the size of the spreadsheet component, for example: width="500px" height="300px"
  
  
−
====Triggered Spreadsheet Events====
+
which renders:<br/>
−
----
+
[[Image: bareSpreadsheet.png]]<br/>
−
=====Cell Event=====
+
[https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/WebContent/gettingstarted/bare.zul bare.zul]
−
 
 
−
{| border="1" | width="100%"
 
−
! <center>Name</center>
 
−
! <center>Event Type</center>
 
  
 +
=Version History=
 +
{{LastUpdated}}
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 
|-
 
|-
−
| <center><tt>onCellFocused</tt></center>
+
| &nbsp;
−
| <javadoc>org.zkoss.zss.ui.event.CellEvent</javadoc>
+
| &nbsp;
−
 
+
| &nbsp;
−
<tt>'''Description:''' Notifies one that the user has a focus on cell</tt>
 
−
|-
 
−
| <center><tt>onCellClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.CellMouseEvent</javadoc>
 
−
 
 
−
<tt>'''Description:''' Notifies one that the user has left click on a cell</tt>
 
−
 
 
−
|-
 
−
| <center><tt>onCellRightClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.CellMouseEvent</javadoc>
 
−
 
 
−
<tt>'''Description:''' Notifies one that the user has right click on a cell</tt>
 
−
 
 
−
|-
 
−
| <center><tt>onCellDoubleClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.CellMouseEvent</javadoc>
 
−
 
 
−
<tt>'''Description:''' Notifies one that the user has double click on a cell</tt>
 
 
|}
 
|}
−
 
−
=====Header Event=====
 
−
 
−
{| border="1" | width="100%"
 
−
! <center>Name</center>
 
−
! <center>Event Type</center>
 
−
 
−
|-
 
−
| <center><tt>onHeaderClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that the user has left click on a header</tt>
 
−
|-
 
−
| <center><tt>onHeaderRightClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that the user has right click on a header</tt>
 
−
 
−
|-
 
−
| <center><tt>onHeaderDoubleClick</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.HeaderMouseEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that the user has double click on a header</tt>
 
−
 
−
|-
 
−
| <center><tt>onHeaderSize</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.HeaderEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that the user has resize a header</tt>
 
−
|}
 
−
 
−
=====Edit Event=====
 
−
 
−
{| border="1" | width="100%"
 
−
! <center>Name</center>
 
−
! <center>Event Type</center>
 
−
 
−
|-
 
−
| <center><tt>onStartEditing</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.CellEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that user has start editing cell</tt>
 
−
|-
 
−
| <center><tt>onStopEditing</tt></center>
 
−
| <javadoc>org.zkoss.zss.ui.event.StopEditingEvent</javadoc>
 
−
 
−
<tt>'''Description:''' Notifies one that the user has stop editing cell</tt>
 
−
|}
 
−
 
−
=====Selection Event=====
 
−
*onCellSelection, trigger when user select a range of cells
 
−
*onSelectionChange, trigger when user move or modify the range of a selection
 
−
 
−
=====Hyperlink Event=====
 
−
*onHyperlink, trigger when user click on the hyperlink of a cell
 
−
 
−
====Spreadsheet Event Data Objects====
 
−
*CellEvent
 
−
 
  
 
{{ZKSpreadsheetEssentialsPageFooter}}
 
{{ZKSpreadsheetEssentialsPageFooter}}

Latest revision as of 06:35, 22 August 2013


DocumentationZK Spreadsheet EssentialsGetting Started with ZK SpreadsheetThe ZK Spreadsheet Component
The ZK Spreadsheet Component




Stop.png This article is out of date, please refer to http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials for more up to date information.


Purpose

A brief overview on how to work with the ZK Spreadsheet component.

ZUML

ZK Spreadsheet is a single ZK component. Developers could declare it within any ZK container components, such as Window, tabs, groupbox, etc.

For example:

<window title="Bare ZK Spreadsheet" border="normal" height="500px">
<spreadsheet src="/demo_sample.xls"	
			maxrows="200" 
			maxcolumns="40"
			width="100%"
			height="450px"></spreadsheet>
</window>

Note: View the complete source of ZUML here

Developers customize the spreadsheet component by declaring its attributes, for example:

  • the source file of the spreadsheet, for example src="/demo_sample.xls"
  • the maximum number of rows of this spread sheet, for example maxrows="200"
  • the maximum number of columns of this spread sheet, for example maxcolumns="40"
  • the size of the spreadsheet component, for example: width="500px" height="300px"


which renders:
BareSpreadsheet.png
bare.zul

Version History

Last Update : 2013/08/22


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2013/08/22

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Spreadsheet_Essentials/Getting_Started_with_ZK_Spreadsheet/The_ZK_Spreadsheet_Component&oldid=39049"