Cut,Copy,Paste"

From Documentation
 
(43 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{ZKSpreadsheetEssentialsPageHeader}}
 
{{ZKSpreadsheetEssentialsPageHeader}}
  
=Cut, Copy and Paste in ZK Spreadsheet=
 
ZK Spreadsheet use Range to represents a cell, a row, a column, or selection of cells. We can use Range to get information or execute command. In here, we use Range to demonstrate how to implement cut, copy, and paste function by menu and control keys.
 
  
=Copy function=
+
{{Deprecated|url=http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials}}
1. We can construct Range object by Ranges, it has various functions, for example
+
 
<source lang="xml" >
+
__TOC__
 +
 
 +
===Purpose===
 +
ZK Spreadsheet uses Range to represent a cell, a row, a column, or selection of cells. We can use Range to get information or execute command. Here, we use Range to demonstrate how to implement cut, copy, and paste command.
 +
 
 +
===Copy===
 +
1. We can construct Range object by Ranges. It has various functions, for example
 +
<source lang="java" >
 
Ranges.range(sheet, "A1:D4");
 
Ranges.range(sheet, "A1:D4");
 
</source>
 
</source>
  
2. We can use <javadoc>org.zkoss.zul.Component.setAttribute</javadoc> to save user's current selection range
+
2. We can use <javadoc directory="zss" method="getAttribute(java.lang.String)">org.zkoss.zk.ui.AbstractComponent</javadoc> to save the user's current selection range
<source lang="xml" >
+
<source lang="java" >
 
private void setSource() {
 
private void setSource() {
 
Rect selectedRect = spreadsheet.getSelection();
 
Rect selectedRect = spreadsheet.getSelection();
Line 26: Line 31:
 
</source>
 
</source>
  
=Cut function=
+
===Cut===
 +
 
 +
We can save a boolean object to distinguish between cut and paset command.<br/>
 +
The reason why we need save this variable is because paste function needs to know whether it is cut or paste.<br/>
 +
If it is cut, we need to clear the previous selection's content; if it is copy, we can keep the previous selection.
  
We can save a boolean object to distinguish between cut and paset command
+
<source lang="java" >
<source lang="xml" >
 
 
private void onCut() {
 
private void onCut() {
 
   spreadsheet.setAttribute(KEY_IS_CUT, Boolean.valueOf(true));
 
   spreadsheet.setAttribute(KEY_IS_CUT, Boolean.valueOf(true));
 
.....
 
.....
 +
}
 +
 +
private boolean isCut() {
 +
Boolean isCut = (Boolean)spreadsheet.getAttribute(KEY_IS_CUT);
 +
return isCut != null && isCut;
 +
}
 
</source>
 
</source>
  
==Paste function==
+
===Paste===
We can use Range.copy(Range destination) to copy user's selection
+
We can use <javadoc directory="zss" method="copy(org.zkoss.zss.model.Range)">org.zkoss.zss.model.Range</javadoc> to copy the user's selection
  
1. Retrieve user's previous selection,,refer to Copy, Cut<br/>
+
1. Retrieve the user's previous selection.
We can retrieve by <javadoc>org.zkoss.zul.Component.getAttribute</javadoc>, for example
+
We can retrieve by <javadoc directory="zss" method="getAttribute(java.lang.String, java.lang.Object)">org.zkoss.zk.ui.AbstractComponent</javadoc>, for example
<source lang="xml" >
+
<source lang="java" >
 
private void onPaste() {
 
private void onPaste() {
 
   Range srcRange = (Range)spreadsheet.getAttribute(KEY_SOURCE_RANGE);
 
   Range srcRange = (Range)spreadsheet.getAttribute(KEY_SOURCE_RANGE);
Line 47: Line 61:
 
</source>
 
</source>
  
2. Construct destination Range object<br/>
+
2. Construct the destination Range object<br/>
After we get previous selection range and current position, we can construct destination Range, and execute copy
+
 
<source lang="xml" >
+
After we get the previous selection range and current position, we can construct destination Range, and execute copy
 +
<source lang="java" >
 
int columnCount = srcRect.getRight() - srcRect.getLeft();
 
int columnCount = srcRect.getRight() - srcRect.getLeft();
 
int rowCount = srcRect.getBottom() - srcRect.getTop();
 
int rowCount = srcRect.getBottom() - srcRect.getTop();
Line 65: Line 80:
 
</source>
 
</source>
  
 +
3. If command is cut, clear the highlight area of a spreadsheet and clear the previous selection's content.
 +
<source lang="java" >
 +
private void clearCutRangeIfNeeded() {
 +
if (!isCut())
 +
return;
 +
 +
Range srcRange = (Range)spreadsheet.getAttribute(KEY_SOURCE_RANGE);
 +
srcRange.clearContents();
 +
/* clear cell style*/
 +
CellStyle defaultCellStyle = spreadsheet.getBook().getCellStyleAt((short)0);
 +
srcRange.setStyle(defaultCellStyle);
 +
}
 +
 +
 +
private void clearHighlightIfNeeded() {
 +
if (isCut())
 +
spreadsheet.setHighlight(null);
 +
}
 +
</source>
  
=Zul example=
+
===ZUML===
 
In zul, we declare a composer for event handling.   
 
In zul, we declare a composer for event handling.   
  
Line 89: Line 123:
 
</source>
 
</source>
  
=Composer=
+
===Composer===
In composer, we need to handle events, including onCellRightClick, onClick on menu and onCtrlKey event
+
In composer, we need to handle events, including onCellRightClick, Menuitem's onClick event and onCtrlKey event.
 +
 
 +
Here, we use <javadoc directory="zss">org.zkoss.zk.ui.util.GenericForwardComposer</javadoc> as it allow us to write intuitive onXxx$myid event handler methods and it can auto-wired variable.
  
==onCellRightClick==
+
====Open Menu====
onCellRightClick is spreadsheet's event, this event occurs when user right click on a cell. We use this event to popup menu, allow user to select cut, copy or paste function.  
+
onCellRightClick is a spreadsheet's event, this event occurs when the user right clicks on a cell. We use this event to popup menu, allowing users to select cut, copy or paste function.  
  
Also, we can retrieve mouse position from CellMouseEvent and set menupopup's popup position.
+
Also, we can retrieve the mouse position from CellMouseEvent and set menupopup's popup position.
  
<source lang="xml" >
+
<source lang="java">
 
public void onCellRightClick$spreadsheet(CellMouseEvent event) {
 
public void onCellRightClick$spreadsheet(CellMouseEvent event) {
 
cellMenu.open(event.getClientx(),  event.getClienty());
 
cellMenu.open(event.getClientx(),  event.getClienty());
Line 103: Line 139:
 
</source>
 
</source>
  
 +
====Execute Command====
 +
We can register menuitem's onClick event to execute corresponding command.
 +
<source lang="java">
 +
public void onClick$cutMenu() {
 +
onCut();
 +
}
 +
 +
public void onClick$copyMenu(Event evt) {
 +
onCopy();
 +
}
 +
 +
public void onClick$pasteMenu(Event evt) {
 +
onPaste();
 +
}
 +
</source>
 +
 +
====Use Control Key====
 +
We can also register control key event to execute corresponding command.
 +
<source lang="java">
 +
public void onCtrlKey$spreadsheet(KeyEvent evt) {
 +
if (evt.isCtrlKey()) {
 +
switch (evt.getKeyCode()) {
 +
case 'C':
 +
onCopy();
 +
break;
 +
case 'V':
 +
onPaste();
 +
break;
 +
case 'X':
 +
onCut();
 +
break;
 +
}
 +
 +
}
 +
}
 +
</source>
 +
 +
View the complete source of ZUML [https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/WebContent/config/copyAndPaste.zul copyAndPaste.zul]
 +
 +
View the complete source of composer [https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/src/org/zkoss/zssessentials/config/CopyPasteComposer.java CopyPasteComposer.java]
  
 +
=Version History=
 +
{{LastUpdated}}
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
  
 
{{ZKSpreadsheetEssentialsPageFooter}}
 
{{ZKSpreadsheetEssentialsPageFooter}}

Latest revision as of 06:40, 22 August 2013



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 uses Range to represent a cell, a row, a column, or selection of cells. We can use Range to get information or execute command. Here, we use Range to demonstrate how to implement cut, copy, and paste command.

Copy

1. We can construct Range object by Ranges. It has various functions, for example

Ranges.range(sheet, "A1:D4");

2. We can use AbstractComponent.getAttribute(String) to save the user's current selection range

private void setSource() {
	Rect selectedRect = spreadsheet.getSelection();
	Range range = Ranges.range(spreadsheet.getSelectedSheet(), 
				selectedRect.getTop(), 
				selectedRect.getLeft(), 
				selectedRect.getBottom(),
				selectedRect.getRight());

        //save user selection range
	spreadsheet.setAttribute(KEY_SOURCE_RANGE, range);
	spreadsheet.setAttribute(KEY_SOURCE_RECT, selectedRect);
	}

Cut

We can save a boolean object to distinguish between cut and paset command.
The reason why we need save this variable is because paste function needs to know whether it is cut or paste.
If it is cut, we need to clear the previous selection's content; if it is copy, we can keep the previous selection.

private void onCut() {
   spreadsheet.setAttribute(KEY_IS_CUT, Boolean.valueOf(true));
.....
}

private boolean isCut() {
	Boolean isCut = (Boolean)spreadsheet.getAttribute(KEY_IS_CUT);
	return isCut != null && isCut;
}

Paste

We can use Range.copy(Range) to copy the user's selection

1. Retrieve the user's previous selection. We can retrieve by AbstractComponent.getAttribute(String, Object), for example

private void onPaste() {
   Range srcRange = (Range)spreadsheet.getAttribute(KEY_SOURCE_RANGE);
   Rect srcRect = (Rect)spreadsheet.getAttribute(KEY_SOURCE_RECT);
....

2. Construct the destination Range object

After we get the previous selection range and current position, we can construct destination Range, and execute copy

int columnCount = srcRect.getRight() - srcRect.getLeft();
int rowCount = srcRect.getBottom() - srcRect.getTop();

Rect dstRect = spreadsheet.getSelection();
int rowIndex = dstRect.getTop();
int columnIndex = dstRect.getLeft();

Range dst = Ranges.range(spreadsheet.getSelectedSheet(),
					rowIndex, 
					columnIndex, 
					rowIndex + rowCount, 
					columnIndex + columnCount);
srcRange.copy(dst);

3. If command is cut, clear the highlight area of a spreadsheet and clear the previous selection's content.

private void clearCutRangeIfNeeded() {
	if (!isCut())
		return;
		
	Range srcRange = (Range)spreadsheet.getAttribute(KEY_SOURCE_RANGE);
	srcRange.clearContents();
	/* clear cell style*/
	CellStyle defaultCellStyle = spreadsheet.getBook().getCellStyleAt((short)0);
	srcRange.setStyle(defaultCellStyle);
}


private void clearHighlightIfNeeded() {
	if (isCut())
		spreadsheet.setHighlight(null);
}

ZUML

In zul, we declare a composer for event handling.

<zk>
	<div height="100%" width="100%" apply="demo.CopyPasteComposer">
		<spreadsheet id="spreadsheet" 
			src="/demo_sample.xls"
			maxrows="200" 
			maxcolumns="40" 
			vflex="1" 
			width="100%"
			ctrlKeys="^c^v^x">
		</spreadsheet>
		<menupopup id="cellMenu">
			<menuitem id="cutMenu" label="Cut" />
			<menuitem id="copyMenu" label="Copy" />
			<menuitem id="pasteMenu" label="Paste" />
		</menupopup>
	</div>
</zk>

Composer

In composer, we need to handle events, including onCellRightClick, Menuitem's onClick event and onCtrlKey event.

Here, we use GenericForwardComposer as it allow us to write intuitive onXxx$myid event handler methods and it can auto-wired variable.

Open Menu

onCellRightClick is a spreadsheet's event, this event occurs when the user right clicks on a cell. We use this event to popup menu, allowing users to select cut, copy or paste function.

Also, we can retrieve the mouse position from CellMouseEvent and set menupopup's popup position.

public void onCellRightClick$spreadsheet(CellMouseEvent event) {
	cellMenu.open(event.getClientx(),  event.getClienty());
}

Execute Command

We can register menuitem's onClick event to execute corresponding command.

public void onClick$cutMenu() {
	onCut();
}
	
public void onClick$copyMenu(Event evt) {
	onCopy();
}

public void onClick$pasteMenu(Event evt) {
	onPaste();
}

Use Control Key

We can also register control key event to execute corresponding command.

public void onCtrlKey$spreadsheet(KeyEvent evt) {
	if (evt.isCtrlKey()) {
		switch (evt.getKeyCode()) {
		case 'C':
			onCopy();
			break;
		case 'V':
			onPaste();
			break;
		case 'X':
			onCut();
			break;
		}
			
		}
	}

View the complete source of ZUML copyAndPaste.zul

View the complete source of composer CopyPasteComposer.java

Version History

Last Update : 2013/08/22


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2013/08/22

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