Customize Row and Column Titles"

From Documentation
m
Line 3: Line 3:
 
__TOC__
 
__TOC__
  
ZK Spreadsheet can set customize title by Spreadsheet.setColumntitles() and Spreadsheet.setRowtitles()
 
  
 
==Scenario==
 
==Scenario==
User can double click on header to edit the title, user can click '''Enter''' to confirm change or click '''Ecs''' to cancel title editing.
+
ZK Spreadsheet can set customize title by <javadoc method="setColumntitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc> or <javadoc method="setRowtitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc>
  
===ZUML Example===
+
===ZUML===
  
 
<source lang="xml" high="4,7">
 
<source lang="xml" high="4,7">
Line 26: Line 25:
 
</source>
 
</source>
  
===Current title===
+
===Composer===
 +
====Current title====
  
 
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get current header that user clicked, in here, we use onHeaderDoubleClick as a example.
 
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get current header that user clicked, in here, we use onHeaderDoubleClick as a example.
Line 63: Line 63:
 
[[File:ZKSsEss_Spreadsheet_HeaderTitle_DClick.png]]
 
[[File:ZKSsEss_Spreadsheet_HeaderTitle_DClick.png]]
  
===Edit title===
+
====Edit title====
 
We can change column title when use click '''Enter'''
 
We can change column title when use click '''Enter'''
 
<source lang="java" high="3,6,8">
 
<source lang="java" high="3,6,8">
Line 83: Line 83:
 
[[File:ZKSsEss_Spreadsheet_HeaderTitle_Result.png]]
 
[[File:ZKSsEss_Spreadsheet_HeaderTitle_Result.png]]
  
===Cancel editing===
+
====Cancel editing====
 
Close popup when user click '''Esc'''
 
Close popup when user click '''Esc'''
 
<source lang="java" high="2">
 
<source lang="java" high="2">

Revision as of 09:41, 22 November 2010



Scenario

ZK Spreadsheet can set customize title by Spreadsheet.setColumntitles(Map) or Spreadsheet.setRowtitles(Map)

ZUML

<zk>
<div height="100%" width="100%" apply="demo.HeaderTitleComposer">
	<popup id="inputTitlePopup">
		<textbox id="titleEditor"/>
	</popup>
	<div height="3px"></div>
	<spreadsheet id="spreadsheet" src="/Untitled"	
			maxrows="200" 
			maxcolumns="40"
			width="100%"
			height="450px"></spreadsheet>
</div>
</zk>

Composer

Current title

We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get current header that user clicked, in here, we use onHeaderDoubleClick as a example.

1. we can get clicked header type by

HeaderMouseEvent.getType();

2. we can get header title by

public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
	String currentTitle = null;
	int headerType = event.getType();
	if (headerType == HeaderEvent.TOP_HEADER) {
		currentTitle = spreadsheet.getColumntitle(currentIndex);
	} else {
		currentTitle =  spreadsheet.getRowtitle(currentIndex);
	}
...

3. Then, set the current header title to textbox and open the popup.

Popup inputTitlePopup;
Textbox titleEditor;

public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
...
	inputTitlePopup.open(event.getPageX(), event.getPageY());
	titleEditor.setText(currentTitle);
	titleEditor.focus();
}

ZKSsEss Spreadsheet HeaderTitle DClick.png

Edit title

We can change column title when use click Enter

public void onOK$titleEditor() {
	HashMap<Integer, String> titles = new HashMap<Integer, String>();
	titles.put(Integer.valueOf(currentIndex), titleEditor.getText());
	
	if (isColumnHeader) {
		spreadsheet.setColumntitles(titles);
	} else {
		spreadsheet.setRowtitles(titles);
	}
	inputTitlePopup.close();
}

ZKSsEss Spreadsheet HeaderTitle Edit.png Click Enter to change title
ZKSsEss Spreadsheet HeaderTitle Result.png

Cancel editing

Close popup when user click Esc

public void onCancel$titleEditor() {
	inputTitlePopup.close();
}

Version History

Last Update : 2010/11/22


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2010/11/22

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