A Preview of ZK Spreadsheet Component

Author
Dennis Chen, Engineer, Potix Corporation

Date
December 21, 2007

Version

Introduction

In the previous article, Henri Chen explained the concept of the ZK Spreadsheet Component. Because the UI part was not ready, he proved the concept by integrating ZK Spreadsheet Model with ZK components (Grid and Textbox). In this article I will show you the preview of ZK Spreadsheet Component, which already has UI and is easy to use for user and developer.

Live Demo - A Simple Travel Expense Example

I use the same Excel file from previous article, the Excel file is a simple travel expense calculator, it sums the expenses by formula. In this demo, you can see the looks of Spreadsheet Component, the formula supporting and the interactivity of ZK Spreadsheet Component and other components.

ERROR: Width and Height not set

The demo zul file is shown below, the deference between this and previous article is I use the spreadsheet component.

<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/ss/function" prefix="ss" ?>
<zk>
  <window title="Travel Expense Calculator" use="org.zkoss.ss.demo.MainWindow"
	border="normal" style="heigth:300px;width:400px">
	<hbox>
	  <label style="font-weight:bold" id="lbpos" value="A1"/>
	  <textbox id="tbxval" width="300px" />
	</hbox>
	<spreadsheet id="ss1" url="/WEB-INF/travel.xls" maxrow="20" maxcolumn="20" height="300px" width="390px" />
	<vbox>
	  <hbox>Reimbursement (Total * 0.5) : <label id="lb" value="${ss:formula(ss1.book, '=Sheet1!B5 * 0.5')}"/></hbox>
	</vbox>
	<zscript>
	  ss1.book.addFormulaListener(new SimpleFormulaListener(lb, "value", "=Sheet1!B5 * 0.5"));
	</zscript>
  </window>
</zk>

How to play?

1. Down the demo war file and deploy it into your web application server, then open the url(for example http://localhost:8080/zssdemo/index.zul, please modify url to correct value of you) by browser.
2. In browser, you must click the Spreadsheet UI first, then you could use keys: UP, DOWN, LEFT, RIGHT, PAGEUP, PAGEDOWN, HOME and END to move the cell focus. Of course you could click a cell directly by mouse.
3. To Edit a cell, you could double click on it or press F2, then it will show a in-line editing textbox.
4. When editing, you can input a simple text, number, even a formula.(for example: =SUM(B1:B4) )
5. To end an editing, you can accept the value by ENTER or cancel it by ESC. If you click out side the editing textbox, it will auto accept the editing value and stop the editing.

Download

• Down the demo application : zssdemo.war

Summary

In this article you saw the looks and functions of the ZK Spreadsheet Component. It shows the possibility of embedding a spreadsheet into your web application and interactivity with other ZK components. We are keeping developing the ZK Spreadsheet Component, hoping you like this feature. We also need your feedbacks on this component and we can make it fit your needs.

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