Keikai Spreadsheet supports various Excel® styles, patterns, number/date formatting, built-in tables, charting, text wrapping, alignment, rich text and much more, helping users from all walks of life to fulfill different real-life scenarios.

1. Grouped Balance: A typical multi-level grouped balance sheet. This demo features rich text and grouping/ungrouping.
2. Balance Sheet: One of the common use cases of spreadsheet. This demo features charting and built-in table styles and other useful features, such as filtering, number formatting and formulas.
3. Cash Flow Overview: Spreadsheet is often used in financial reports, and cash flow is one of the popular use cases. The example supports both basic cell styling, such as border, font color, background color, bold font, and advanced ones like fill pattern.
4. Conference Planning: Gantt chart is extremely useful for project planning in which fill pattern and merged cell play an important role.
5. Expense Summary: The demo showcases the essential calculations. Such operations may be applied to many kinds of monetary/ financial reports.
6. Project Cost Management: This use case displays helpful features like cell rich text, where the styled text stand out from others in the same cell. 90 degree text is used to group different categories.
7. Invoice: This simple yet useful example covers many commonly used features like text wrapping, alignment, custom cell height and merged cell, etc.

<?xml version="1.0" encoding="UTF-8"?>
<?component name="case" templateURI="useCase.zul"?>
<zk>
	<div height="100%" apply="demo.compatibility.CompatibilityController">
		<groupbox id="fileBox" >
			<caption label="Demo Option List" sclass="subtitle"/>
			<custom-attributes org.zkoss.zul.image.preload="true"/>
			<hlayout>
				<case imageSrc="/img/group.png" subTitle="Group" fileName="Group.xlsx" caseId="defaultCase"/>
				<case imageSrc="/img/balance_sheet.png" subTitle="Balance Sheet" fileName="Balance sheet.xlsx"/>
				<case imageSrc="/img/cash_flow.png" subTitle="Cash Flow Overview" fileName="Cash flow overview.xlsx"/>
				<case imageSrc="/img/conference_planning.png" subTitle="Conference Planning" fileName="Conference planning.xlsx"/>
				<case imageSrc="/img/expense_summary.png" subTitle="Expense Summary" fileName="Expense Summary.xlsx"/>
				<case imageSrc="/img/project_cost_management.png" subTitle="Project Cost Management" fileName="Project cost management.xlsx"/>
				<case imageSrc="/img/invoice.png" subTitle="Invoice" fileName="Invoice.xlsx"/>
			</hlayout>
		</groupbox>
		<groupbox vflex="1">
			<caption id="fileTitle" sclass="subtitle"/>
			<spreadsheet id="spreadsheet" height="100%" width="100%" showFormulabar="true" showContextMenu="true" />
		</groupbox>
	</div>
	<style src="/demo/compatibility/style.css"/>
</zk>

package demo.compatibility;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.MouseEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import io.keikai.ui.Spreadsheet;
import org.zkoss.zul.Caption;
import org.zkoss.zul.Image;
import org.zkoss.zul.Label;

public class CompatibilityController extends SelectorComposer<Component> {

	@Wire
	private Spreadsheet spreadsheet;
	@Wire
	private Label defaultCase;
	@Wire 
	private Caption fileTitle;
	
	private String SELECTED_CSS = "sheetThumb selectedThumb";
	private String DEFAULT_CSS = "sheetThumb";
	private String SELECTED_LABEL_CSS = "selectedLabel";
	
	private Image previouslySelected;
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		showOneCase(defaultCase.getTooltiptext(), defaultCase.getValue());
		previouslySelected = (Image)defaultCase.getPreviousSibling().getPreviousSibling();
		previouslySelected.setSclass(SELECTED_CSS);
		defaultCase.setSclass(SELECTED_LABEL_CSS);
	}

	/**
	 * Switch CSS when selecting a file
	 * @param event
	 * @throws Exception
	 */
	@Listen("onClick = image")
	public void displayFile(MouseEvent event) throws Exception{
		clearPreviousSelection();
		Image selectedImage = ((Image)event.getTarget());
		previouslySelected = selectedImage;
		selectedImage.setSclass(SELECTED_CSS);
		Label selectedLabel = (Label)selectedImage.getNextSibling().getNextSibling();
		selectedLabel.setSclass(SELECTED_LABEL_CSS);
		showOneCase(selectedLabel.getTooltiptext(), selectedLabel.getValue());
	}
	
	private void showOneCase(String fileName, String title){
		spreadsheet.setSrc("/WEB-INF/books/compatibility/"+fileName);
		fileTitle.setLabel(title);
		spreadsheet.focusTo(0, 0);
	}
	
	private void clearPreviousSelection(){
		previouslySelected.setSclass(DEFAULT_CSS);
		((Label)previouslySelected.getNextSibling().getNextSibling()).setSclass("");
	}
}