Customize Row and Column Titles"

From Documentation
m (correct highlight (via JWB))
 
(29 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{ZKSpreadsheetEssentialsPageHeader}}
 
{{ZKSpreadsheetEssentialsPageHeader}}
 +
 +
{{Deprecated|url=http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials}}
 +
  
 
__TOC__
 
__TOC__
  
−
ZK Spreadsheet can set customize title by Spreadsheet.setColumntitles() and Spreadsheet.setRowtitles()
 
  
−
==Scenario==
+
===Purpose===
−
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 customized title by <javadoc directory="zss" method="setColumntitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc> or <javadoc directory="zss"  method="setRowtitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc>
  
−
===Current Title===
+
===ZUML===
  
−
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get current header that user clicked, in here, we use onHeaderDoubleClick as a example.
+
<source lang="xml" highlight="4,7">
 +
<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>
 +
</source>
 +
 
 +
===Composer===
 +
====Current Title====
 +
 
 +
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get the current header that user clicked. Here, we use onHeaderDoubleClick as an example.
  
 
1. we can get clicked header type by   
 
1. we can get clicked header type by   
−
<source lang="java" >
+
<source lang="java" highlight="1">
 
HeaderMouseEvent.getType();
 
HeaderMouseEvent.getType();
 
</source>
 
</source>
  
−
2. we can get header title by  
+
2. we can get the header title by  
−
<source lang="java" >
+
<source lang="java" highlight="5,7">
 
public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
 
public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
 
String currentTitle = null;
 
String currentTitle = null;
Line 31: Line 52:
  
 
3. Then, set the current header title to textbox and open the popup.
 
3. Then, set the current header title to textbox and open the popup.
−
<source lang="java" >
+
<source lang="java" highlight="6,7">
 
Popup inputTitlePopup;
 
Popup inputTitlePopup;
 
Textbox titleEditor;
 
Textbox titleEditor;
Line 42: Line 63:
 
}
 
}
 
</source>
 
</source>
 +
 +
[[File:ZKSsEss_Spreadsheet_HeaderTitle_DClick.png]]
 +
 +
====Edit Title====
 +
We can change the column title when the user clicks '''Enter'''
 +
<source lang="java" highlight="3,6,8">
 +
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();
 +
}
 +
</source>
 +
 +
[[File:ZKSsEss_Spreadsheet_HeaderTitle_Edit.png]]
 +
Click '''Enter''' to change title<br/>
 +
[[File:ZKSsEss_Spreadsheet_HeaderTitle_Result.png]]
 +
 +
====Cancel Editing====
 +
Close popup when the user click '''Esc'''
 +
<source lang="java" highlight="2">
 +
public void onCancel$titleEditor() {
 +
inputTitlePopup.close();
 +
}
 +
</source>
 +
 +
View the complete source of ZUML [https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/WebContent/config/headerTitle.zul headerTitle.zul]
 +
 +
View the complete source of composer [https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/src/org/zkoss/zssessentials/config/HeaderTitleComposer.java HeaderTitleComposer.java]
  
 
=Version History=
 
=Version History=

Latest revision as of 12:55, 19 January 2022


DocumentationZK Spreadsheet EssentialsWorking with ZK SpreadsheetConfigure and Control ZK SpreadsheetCustomize Row and Column Titles
Customize Row and Column Titles



Stop.png This article is out of date, please refer to http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials for more up to date information.



Purpose

ZK Spreadsheet can set customized 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 the current header that user clicked. Here, we use onHeaderDoubleClick as an example.

1. we can get clicked header type by 

HeaderMouseEvent.getType();

2. we can get the 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 the column title when the user clicks 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 the user click Esc 

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

View the complete source of ZUML headerTitle.zul

View the complete source of composer HeaderTitleComposer.java

Version History

Last Update : 2022/01/19


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2022/01/19

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Spreadsheet_Essentials/Working_with_ZK_Spreadsheet/Configure_and_Control_ZK_Spreadsheet/Customize_Row_and_Column_Titles&oldid=53618"