New Features of ZK Spreadsheet 1.0.0 RC

{{Template:Smalltalk_Author|
|author=Dennis Chen, Engineer, Potix Corporation
|date=July 8, 2008
|version=
}}



ZK Spreadsheet 1.0.0 RC1 has been released on 6/26. In the early articles, we were talking about the concept and use cases of ZK Spreadsheet. Now I will introduce the basic features of ZK Spreadsheet 1.0.0 RC to you.


You also can download zssnf.war file to run demos which in this introduction.


=Import from an EXCEL file=

In ZK Spreadsheet, base on MVC architecture, developer manipulates the data model org.zkoss.zss.model.Book to control the data presentation. The most efficient way to initial a data model is import from an exist EXCEL file by setting the location to the src attribute.

Following codes show how easily it could be to import an EXCEL file into ZK Spreadsheet.

<source lang="xml" >
<zk>

	<spreadsheet src="/xls/example.xls" height="500px" width="800px" />

</zk>
</source>


=Rich User Interface=

==Styles==

ZK Spreadsheet supports many styles such as font, font color, fill color ...etc. following table shows the styles that ZK Spreadsheet has supported.


{| border="1"
|-
! Style Supported  || Notes
|-
||Font / Font Color / Fill Color ||	Cause of browser limitation, font also depends on installed font on client side
|-
||Border / Border Color ||	Cause of browser limitation, only solid/dashed/dotted border are supported now.
|-
||Horizontal Alignment ||	Vertical Alignment has not implemented yet
|-
||Text Wrap & Overflow 	||
|-
||Horizontal Merged Cell ||	Vertical Merged Cell has not implemented yet
|}


Following images are the screen shoot of EXCEL and ZK Spreadsheet

'''EXCEL Screen Shoot'''

[[Image:Example excel.png]]


'''ZK Spreadsheet Screen Shoot'''

[[Image:Example.png]]


==Editing==

When user using ZK Spreadsheet, it is very easy and similar to using EXCEL. You could do in-place editing, use function, change the column size ...etc.

<gflash width="850" height="700">Editing.swf</gflash>


==Selection and Highlight==

Selection is a special rectangle to show an area of cells that been selected, it could be changed either by user or program. Highlight is a special rectangle too, but it only could be changed by program. You could use highlight to emphasize a area that are marked to do something such as copy.

<gflash width="800" height="700">Selectionhighlight.swf</gflash>


==Custom Row and Column Title==

The default title of the rows and columns are "1, 2, 3 ..." and "A, B, C ...". However you can change it to custom titles by setting rowtitles and columntitles attributes.

[[Image:Title.png]]


==Maximum Rows and Columns==

Developer can control the maximum cells to be shown by setting maxrows and maxcolumns attributes. It is useful when you want to hide some data from user. It also has better performance because avoid loading too many data, that you don't want to show it, to client side.

<gflash width="800" height="700">Maxrowscolumns.swf</gflash>


==Loading Cell on Demand==

For the performance reason when showing with big data table, ZK Spreadsheet only load the necessary data to client side when scrolling.

<gflash width="800" height="700">Large.swf</gflash>


==Freezing Row and Column==

By setting rowfreeze and columnfreeze attributes, you can freeze row and column on the left and top side of ZK Spreadsheet. This feature is useful when user browsing a report which has some title fields.

<gflash width="800" height="700">Freeze.swf</gflash>


==Image==

Image is supported in ZK Spreadsheet. In following example, it display two images in ZK Spreadsheet.

<gflash width="800" height="500">Image.swf</gflash>


=Events=

ZK Spreadsheet provide various events to notify what user have done, such as user start to edit a cell (onStartEditing) or press CTRL+C ( onCtrlKey ) to do something.


==Editing Events==

By listening onStartEditing, you can control which cell could be editing and what is the text to edit. By listening onStopEditing, you can check the commeted value and even change it. In following example, only cell in C3:E5 colud be editing and only numberic value is accepted.

<gflash width="800" height="500">Allowedvalue.swf</gflash>


==Key Events==

Like other standard ZK component, you can set keys which you are interested to ctrlKeys attribute and listen onCtrlKey event to handle it when user press those keys. In following example, it listen CTRL+C and CTRL+V to handle copy and paste of cell.

<gflash width="800" height="700">Copypaste.swf</gflash>


==Mouse Events==

Mouse events(onCellClick, onCellRightClick , onCellDoubleClick, onHeaderClick, onHeaderRightClick and onHeaderDoubleClick) are fired when user click on cell or header. In following example, it popup a menu when user right click on a header.

<gflash width="800" height="600">Menu.swf</gflash>


==Selection Events==

There are two types of Selection events: onCellSelection and onSelectionChange. onCellSelection is fired after user select a area of cells by mouse drag or key (shift + arrow key). onSelectionChange is fired after user drag the dot area(right-bottom of a selection area), which change the selection area. 


=Functions=

==Built-in Functions==

ZK Spreadsheet provides many [http://zkoss.org/smalltalks/zss1.0.0rc/functionlist.txt built-in functions] that are compatible with EXCEL formula. In following example, it uses several functions, such as PMT, IPMT, PPMT, to calculate payment for a loan.

<gflash width="800" height="400">ZssFunction.swf</gflash>


==Custom Functions==

It is also possible to plug custom functions into ZK Spreadsheet. In following example, we plug-in an 'ECHO' function which simply concatenate all given values into a string.

<gflash width="800" height="500">Customfunction.swf</gflash>


=Article Reference=

* [[Small_Talks/2007/September/A_Sip_of_the_ZK_Spreadsheet_Component | A Sip of the ZK Spreadsheet Component]]
* [[Small_Talks/2008/April/How_to_Build_a_Rich_Excel_Report_with_ZK_Spreadsheet | How to Build a Rich Excel Report with ZK Spreadsheet]]
* [[Small_Talks/2008/April/Use_JavaBean_in_Excel_with_ZK_Spreadsheet | Use JavaBean in Excel with ZK Spreadsheet]]
* [[Small_Talks/2008/April/Change_the_Style_of_Spreadsheet_within_1_Min | Change the Style of Spreadsheet within 1 Min]]
* [[Small_Talks/2008/May/Integrate_ZK_Spreadsheet_with_Spring | Integrate ZK Spreadsheet with Spring]]
* [[Small_Talks/2008/May/Generate_Huge_Data_Report_in_a_Second | Generate Huge Data Report in a Second]]
* [[Small_Talks/2008/May/Various_Functions_in_Spreadsheet | Various Functions in Spreadsheet]]

=Download=

* [http://zkoss.org/smalltalks/zss1.0.0rc/zssnf.war zssnf.war] : Demos in this article

* <tracker url="https://sourceforge.net/project/showfiles.php?group_id=213617&package_id=257375&release_id=609477"> ZK Spreadsheet 1.0.0 RC1</tracker>


<comment>/smalltalks/zss1.0.0rc/index.dsp</comment>


[[Category:ZK Spreadsheet]]
{{Template:Smalltalk_Footer|
|name=Potix Corporation
}}