XPLATFORM 101

- Grid > Copy & Paste 1


타이틀이 많이 익숙한거죠. 이른바 개발자들의 신공이라 불리는...

물론 예제에서 설명하는 것은 그런건 아니고..

그리드의 데이터를 엑셀처럼 복사해다가 붙여넣는 여러가지 방법을 제안하고 있습니다.


그런건 엑셀에서 다 되는건데 엑스플랫폼에서는 복잡하게 뭔가 해야되는건가 싶을 수도 있지만

엑셀에서도 연산식이 포함된 셀을 복사하는 경우에는 셀 데이터만 복사하도록 설정해야 하는 과정이 있습니다.

그리고 엑셀과 그리드는 용도가 다르니깐...^^


첫 번째 예제에서는 2개의 그리드가 배치되어 있고

양쪽의 그리드에서 데이터를 복사해서 다른쪽으로 옮기거나 같은 그리드내에서 계속 작업을 진행할 수 있습니다.


그리드에 설정된 이벤트는 onkeydown 이벤트만 사용합니다.

이때 keyEventInfo가 전달되는데 altkey, ctrlkey, shiftkey는 상수로 제공되고

나머지는 keycode로 제공됩니다.

keycode 값은 해당 운영체제의 코드가 전달된다고 합니다.


기본적인 코드값은 도움말 Appendix > Key 에서 참고할 수 있습니다.

예제에서는 복사(Ctrl+C)와 붙여넣기(Ctrl+V) 입력값에 대한 처리를 진행합니다.

var strGrdDsNm = obj.binddataset;

var v_clip = "";

var strSeperate = " ";

for (var i=obj.selectstartrow;i<=obj.selectendrow;i++) {

for (var j=obj.selectstartcol;j<=obj.selectendcol;j++) {

if (j < obj.selectendcol) {

v_clip += obj.getCellValue(i,j) + strSeperate;

} else {

v_clip += obj.getCellValue(i,j);

}

}

if (i < obj.selectendrow) {

v_clip += "\r\n";

}

}

v_clip += "\r\n";

system.clearClipboard();

system.setClipboard("CF_TEXT",v_clip);

복사하기에서는 선택된 셀의 값을 v_clip에 텍스트 형식으로 담아주고 해당값을 시스템 클립보드에 담아주고 있습니다.

시스템 클립보드에 담아주기 때문에 외부 메모장 등에도 붙여넣을 수 있습니다.

예제이기 때문에 간단한 구분자만으로 데이터를 분리해주었습니다.


붙여넣기 작업은 이와 반대로 이루어지겠죠.

해당 위치를 확인하고 클립보드에서 데이터를 가져와서 배열에 담은 다음에 

데이터를 붙여넣습니다.

//Dataset setcolumn

for (var j=nGrdCellPos;j<nLoopCnt;j++) {

obj.setCellPos(j);

obj.showEditor(true);

obj.setEditText(arrText2[k]);

k++;

obj.showEditor(false);

}

데이터를 복사할때 해당하는 셀의 위치를 선택(setCellPos)하고
편집할 수 있는 모드로 전환한 다음(showEditor)
데이터를 붙여넣습니다(setEditText)
그리고 편집 모드를 닫아줍니다.

편집모드를 신경쓰지 않으려면 그리드에서 autoenter 설정을 바꾸어주어도 됩니다.

http://cafe.naver.com/xplatform101/174 
XPLATFORM 101

- Grid > Copy & Move


좀 아쉬운 기능이긴 합니다.

예제는 그리드에 있는 데이터를 드래그해서 텍스트 영역에 붙여넣는 예제입니다.

소스도 어렵지 않은데 문제는 그리드에서의 드래그 이벤트를 텍스트에서 받을 수 없다는 겁니다.

function Grid00_ondrag(obj:Grid, e:GridDragEventInfo)

{

var col_id = obj.getCellProperty("body", e.cell, "text");

col_id = col_id.slice(5);

drag_data = ds_bind.getColumn(e.row, col_id);

return true;

}

drag_data 라는 변수에 전달될 데이터를 넣기 위한 부분입니다.

물론 그리드에서 이벤트가 전달되는 경우에는 하나의 셀만 지정하는 경우도 있지만 그렇지 않은 경우도 있기 때문에

실제 드롭된 곳에서 sourceobject 로 선택된 셀에 대한 정보를 참고할 수 있습니다.




이번 경우에는 그리드의 속성으로 넘어오겠죠.


하지만 Edit 컴포넌트에서 Edit 컴포넌트로 넘기는 경우에는 아주 간단해집니다.

기본적으로 Edit 컴포넌트에서 드래그하기 위해 선택된 값은 이벤트의 dragdata 라는 속성으로 담기게 됩니다.

그래서 그냥 아래와 같이 처리해주면 끝납니다.

function Edit01_ondrop(obj:Edit, e:DragEventInfo)

{

Edit01.value = e.dragdata;

}

그리드에서 값을 다루는 부분은 이후에 좀 더 자세하게 다루도록 하겠습니다.

http://cafe.naver.com/xplatform101/172 

XPLATFORM 101
- Grid > Drag & Drop

우리말로 하면 끌어다놓기인데 참 설명하기 어렵죠. ^^
GUI가 도입된 이후 익숙한 방식이긴 하지만 웹에서 이런걸 구현한다는 것은 아직은 낯선 방법입니다.
일부 쇼핑몰에서는 이런 방식을 도입했다가 다시 이전으로 되돌리기도 했지만
업무용 애플리케이션의 경우에는 필요에 따라 적절히 배치하게 되면
업무의 효율을 극대화시킬 수 있습니다.

* 마우스 인터랙션에 너무 의존하게 되면 접근성에 문제가 생길 수 있습니다.
하위 호환성을 먼저 확보하는것이 더 중요하겠죠.


예제에서는 트리 형식을 사용하고 있네요.
앞에서 배운것처럼 그리드 에디터에서 displaytype을 tree 로 바꾸어줍니다.
그리도 바인딩 설정에서 treelevel과 treestate를 설정해줍니다.

드래그앤드롭에는 3가지 이벤트가 사용됩니다.
ondrag, ondragmove, ondrop
물론 좀 더 섬세한 제어가 가능하지만 기본적으로는 3가지 이벤트만으로 처리가 가능합니다.

ondrag는 드래그가 발생했을때 일어나는 이벤트입니다.
GridDragEventInfo 에 이벤트와 관련된 정보를 담게 됩니다.
기본적으로 해당 하는 cell, row, col에 대한 정보를 전달하고
병합이 되었을 경우에 해당하는 정보까지 담게 됩니다.

ondragmove는 이동중에 이벤트가 발생하게 됩니다.
역시 이벤트에 대한 정보는 GridDragEventInfo에 담게 됩니다.

그리고 마우스를 놓는 시점에서 드롭 이벤트가 발생하고 ondrop이 처리됩니다.
이후에 필요한 데이터를 처리해주면 됩니다.

* 드래그 이벤트까지는 어렵지 않은데 드롭 이후에 데이터를 바꾸는 부분이 사실 혼란스러운 부분이라..
자세한 내용은 소스를 참고하세요.

http://cafe.naver.com/xplatform101/170