New Features of ZK Spreadsheet 1.0.0 RC2"
m (Created page with '{{Template:Smalltalk_Author| |author=kindalu, Engineer, Potix Corporation |date=Apr 27, 2009 |version=ZK 3.6.1 & ZK Spreadsheet 1.0 RC2 }} =Introduction= ZK Spreadsheet 1.0 RC…') |
m |
||
| Line 17: | Line 17: | ||
=A Spreadsheet Application= | =A Spreadsheet Application= | ||
| − | <gflash width="1000" height="700"> | + | <gflash width="1000" height="700">2009-04-28_0838.swf</gflash> |
===<u>Menu of Functions</u>=== | ===<u>Menu of Functions</u>=== | ||
It provides a list of category of function like File, Edit, Insert... | It provides a list of category of function like File, Edit, Insert... | ||
| Line 92: | Line 92: | ||
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. | 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="900" height="700"> | + | <gflash width="900" height="700">Editing.swf</gflash> |
==Selection and Highlight== | ==Selection and Highlight== | ||
| Line 98: | Line 98: | ||
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. | 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="900" height="700"> | + | <gflash width="900" height="700">Selectionhighlight.swf</gflash> |
==Custom Row and Column Title== | ==Custom Row and Column Title== | ||
| Line 111: | Line 111: | ||
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. | 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"> | + | <gflash width="800" height="700">Maxrowscolumns.swf</gflash> |
| Line 118: | Line 118: | ||
For the performance reason when showing with big data table, ZK Spreadsheet only load the necessary data to client side when scrolling. | 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"> | + | <gflash width="800" height="700">Large.swf</gflash> |
| Line 125: | Line 125: | ||
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. | 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"> | + | <gflash width="800" height="700">Freeze.swf</gflash> |
| Line 132: | Line 132: | ||
Image is supported in ZK Spreadsheet. In following example, it display two images in ZK Spreadsheet. | Image is supported in ZK Spreadsheet. In following example, it display two images in ZK Spreadsheet. | ||
| − | <gflash width="800" height="500"> | + | <gflash width="800" height="500">Image.swf</gflash> |
| Line 144: | Line 144: | ||
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 committed value and even change it. In following example, only cell in C3:E5 could be editing and only numeric value is accepted. | 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 committed value and even change it. In following example, only cell in C3:E5 could be editing and only numeric value is accepted. | ||
| − | <gflash width="800" height="500"> | + | <gflash width="800" height="500">Allowedvalue.swf</gflash> |
| Line 151: | Line 151: | ||
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. | 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"> | + | <gflash width="800" height="700">Copypaste.swf</gflash> |
| Line 158: | Line 158: | ||
Mouse events(onCellClick, onCellRightClick , onCellDoubleClick, onHeaderClick, onHeaderRightClick and onHeaderDoubleClick) are fired when user click on cell or header. In following example, it pop up a menu when user right click on a header. | Mouse events(onCellClick, onCellRightClick , onCellDoubleClick, onHeaderClick, onHeaderRightClick and onHeaderDoubleClick) are fired when user click on cell or header. In following example, it pop up a menu when user right click on a header. | ||
| − | <gflash width="800" height="600"> | + | <gflash width="800" height="600">Menu.swf</gflash> |
| Line 172: | Line 172: | ||
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. | 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"> | + | <gflash width="800" height="400">ZssFunction.swf</gflash> |
| Line 179: | Line 179: | ||
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. | 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"> | + | <gflash width="800" height="500">Customfunction.swf</gflash> |
Revision as of 03:12, 14 September 2010
kindalu, Engineer, Potix Corporation
Apr 27, 2009
ZK 3.6.1 & ZK Spreadsheet 1.0 RC2
Introduction
ZK Spreadsheet 1.0 RC2 is an online-spreadsheet Component.
It implements both User Interface at Client Side and Excel-like logic (225+ build in functions) at Server Side.
With RC2, we introduce an online spreadsheet application for demonstrating the power of this component with ZK Framework.
In addition to over 19 bug fixes, there are 11 new features.
A Spreadsheet Application
Menu of Functions
It provides a list of category of function like File, Edit, Insert...
Fast Icon Toolbar
Fast Icon Toolbar let user can quickly access the most common functions.
And also show the format of current selected area.
Formula Bar
Formula Bar give user a larger space for entering longer formula or text
Muti-Sheets Supported Tabs
Just one click to change current sheet and all related sheet operations.
Quick Style Menu & Color Picker
Right click on the Selected Area, then the quick menu will pop up like row header/col header etc.
Quick Keyboard Shortcut
When the focus on the spreadsheet, user can use keyboard shortcuts
Chart
You can click one button then add a chart.
Version Control
- After saving file, the previous version will not disappear, you can roll back at anytime.(By File->Version history)
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.
| 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
ZK Spreadsheet Screen Shoot
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.
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.
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.
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.
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.
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.
Image
Image is supported in ZK Spreadsheet. In following example, it display two images in ZK Spreadsheet.
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 committed value and even change it. In following example, only cell in C3:E5 could be editing and only numeric value is accepted.
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.
Mouse Events
Mouse events(onCellClick, onCellRightClick , onCellDoubleClick, onHeaderClick, onHeaderRightClick and onHeaderDoubleClick) are fired when user click on cell or header. In following example, it pop up a menu when user right click on a header.
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 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.
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.
Undo/Redo
Supported Operations
- edit/change cell value, style and format
- delete/insert row/column
- merge/unmerge cell
- cut/copy/paste
- change size of row/column
how to use
- call the spreadsheet.pushCellState()/pushRowColSizeState() or other according functions before doing operation. It will save related state on selected area.
- call the spreadsheet.undo() or redo()
Frequently Asked Questions
- Q: What is Excel File Format supported?
- A: excel 97~2003 format based on 3rd party jxl library.
- Q: Where could I get source code?
- A: currently we are working on the license.
Downloads
Other Resources and Links
A Preview Of ZK Spreadsheet 1.0(with live demo)
New Features of ZK Spreadsheet 1.0.0 RC
Various Functions in Spreadsheet
Generate Huge Data Report in a Second
Integrate ZK Spreadsheet with Spring
Change the Style of Spreadsheet within 1 Min
Use JavaBean in Excel with ZK Spreadsheet
How to Build a Rich Excel Report with ZK Spreadsheet
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |