Overview

In this section, we will demonstrate how to make other JSF components interact with Spreadsheet in a JSF page by AJAX tag. We assume that you know some basics about JSF including life cycle, tag usage, event handling, AJAX tag, and managed bean.

The example application is a simple page to request for leave. A user fills the required field in cells and click "OK" button to submit his request for leave. Or he can clicks "Reset" button to reset what he inputs to default value. The screenshot below shows a request of a user "John":

Create a JSF Page

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:zssjsf="http://www.zkoss.org/jsf/zss"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<title>Application for Leave</title>
	<zssjsf:head/>
</h:head>
<h:body>
	<h:form id="form">
		<div>
			
			<zssjsf:spreadsheet id="myzss" 
				book="#{applicationForLeave.book}"
				actionBridge="#{applicationForLeave.actionBridge}" 
				width="800px" height="500px" 
				maxrows="50" maxcolumns="20"
				showToolbar="true" showFormulabar="true" showContextMenu="true" showSheetbar="true"/>
			<h:panelGrid columns="3">
				<h:commandButton value="Reset" action="#{applicationForLeave.doReset}" >
					<f:ajax execute="@all" render="msg zkupdate" />
				</h:commandButton>
				
				<h:commandButton value="Ok" action="#{applicationForLeave.doOk}" >
					<f:ajax execute="@all" render="msg zkupdate" />
				</h:commandButton>
				<h:messages id="msg"/>
			</h:panelGrid>
		</div>
		<zssjsf:update id="zkupdate"/>
	</h:form>
</h:body>
</html>

book, actionBridge
f:ajax
update

Implement Event Handler Method

Reset Cells

@ManagedBean
@RequestScoped
public class ApplicationForLeave {

...
public void doReset() {
		
		//use actionBridge to execute the action inside zk context
		//so the spreadsheet can get the update of book automatically
		actionBridge.execute(new Action() {
			public void execute() {
				Sheet sheet = book.getSheetAt(0);

				// reset sample data
				// you can use a cell reference to get a range
				Range from = Ranges.range(sheet, "E5");// Ranges.range(sheet,"From");
				// or you can use a name to get a range (the named rnage has to be
				// set in book);
				Range to = Ranges.rangeByName(sheet, "To");
				Range reason = Ranges.rangeByName(sheet, "Reason");
				Range applicant = Ranges.rangeByName(sheet, "Applicant");
				Range requestDate = Ranges.rangeByName(sheet, "RequestDate");

				// use range api to set the cell data
				from.setCellEditText(DateUtil.tomorrow(0, dateFormat));
				to.setCellEditText(DateUtil.tomorrow(0, dateFormat));
				reason.setCellEditText("");
				applicant.setCellEditText("");
				requestDate.setCellEditText(DateUtil.today(dateFormat));
			}
		});
		addMessage("Reset book");
	}
}

Check Cells

@ManagedBean
@RequestScoped
public class ApplicationForLeave {
...
	public void doOk() {
		//access cell data
		actionBridge.execute(new Action() {
			public void execute() {
				Sheet sheet = book.getSheetAt(0);

				Date from = Ranges.rangeByName(sheet,"From").getCellData().getDateValue();
				Date to = Ranges.rangeByName(sheet,"To").getCellData().getDateValue();
				String reason = Ranges.rangeByName(sheet,"Reason").getCellData().getStringValue();
				Double total = Ranges.rangeByName(sheet,"Total").getCellData().getDoubleValue();
				String applicant = Ranges.rangeByName(sheet,"Applicant").getCellData().getStringValue();
				Date requestDate = Ranges.rangeByName(sheet,"RequestDate").getCellData().getDateValue();
				
				if(from == null){
					addMessage("FROM is empty");
				}else if(to == null){
					addMessage("TO is empty");
				}else if(total==null || total.intValue()<0){
					addMessage("TOTAL small than 1");
				}else if(reason == null){
					addMessage("REASON is empty");
				}else if(applicant == null){
					addMessage("APPLICANT is empty");
				}else if(requestDate == null){
					addMessage("REQUEST DATE is empty");
				}else{
					//Handle your business logic here 
					
					addMessage("Your request are sent, following is your data");

					addMessage("From :" +from);//can't pass as data, use long for time
					addMessage("To :" + to);//can't pass as data, use long for time
					addMessage("Reason :"+ reason);
					addMessage("Total :"+ total.intValue());//we just need int
					addMessage("Applicant :"+ applicant);
					addMessage("RequestDate :"+ requestDate.getTime());
					
					//You can also store the book, and load it back later by export it to a file
					Exporter exporter = Exporters.getExporter();
					FileOutputStream fos = null;
					try {
						File temp = File.createTempFile("app4leave_", ".xlsx");
						fos = new FileOutputStream(temp); 
						exporter.export(sheet.getBook(), fos);
						System.out.println("file save at "+temp.getAbsolutePath());
						
						addMessage("Archive "+ temp.getName());
					} catch (IOException e) {
						e.printStackTrace();
					} finally{
						if(fos!=null)
							try {
								fos.close();
							} catch (IOException e) {//eat
							}
					}
				}
			}
		});
		
				
	}
}

Anonymous

Using Spreadsheet JSF Component

Namespaces

More

Page actions

Contents

Overview

Create a JSF Page

Implement Event Handler Method

Reset Cells

Check Cells