Cut,Copy,Paste"

From Documentation
m
Line 3: Line 3:
 
=Cut, Copy and Paste in ZK Spreadsheet=
 
=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.
 
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.
 
=Zul example=
 
<source lang="xml" >
 
<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>
 
</source>
 
 
=Composer=
 
  
 
=Copy function=
 
=Copy function=
Line 86: Line 63:
 
columnIndex + columnCount);
 
columnIndex + columnCount);
 
srcRange.copy(dst);
 
srcRange.copy(dst);
 +
</source>
 +
 +
 +
=Zul example=
 +
In zul, we declare a composer for event handling. 
 +
 +
<source lang="xml" >
 +
<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>
 +
</source>
 +
 +
=Composer=
 +
In composer, we need to handle events, including onCellRightClick, onClick on menu and onCtrlKey event
 +
 +
==onCellRightClick==
 +
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.
 +
 +
Also, we can retrieve mouse position from CellMouseEvent and set menupopup's popup position.
 +
 +
<source lang="xml" >
 +
public void onCellRightClick$spreadsheet(CellMouseEvent event) {
 +
cellMenu.open(event.getClientx(),
 +
                            event.getClienty());
 +
}
 
</source>
 
</source>
  

Revision as of 07:47, 29 October 2010


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

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

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

2. We can use Component.setAttribute to save 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 function

We can save a boolean object to distinguish between cut and paset command

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

Paste function

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

1. Retrieve user's previous selection,,refer to Copy, Cut
We can retrieve by Component.getAttribute, for example

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

2. Construct destination Range object
After we get 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);


Zul example

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, onClick on menu and onCtrlKey event

onCellRightClick

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.

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

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



All source code listed in this book is at Github.


Last Update : 2010/10/29

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