XPLATFORM 101
- Grid > Data행을 종으로 표현

음 제목만 보면 딱 이해가 안되기 때문에 그림으로 보도록 하겠습니다.


잘 보이시나요. ㅠㅠ 색을 다르게 할걸 그랬나 봅니다.
하여간 그리드에서 선택한 행의 데이터를 클릭하게 되면 팝업 형태로 보여주는 예제입니다.
잘 보시면 column1의 정보가 다른데 뒤에 있는 그리드에서는 combo 타입을 사용한 것이고
팝업에서는 원래 데이터를 보여준 차이가 있습니다.

이 예제에서는 클릭시 팝업을 띄우는 기법 - 여기에는 팝업 윈도우를 생성하고 위치를 잡는 과정이 들어갑니다.
그리고 선택 행의 데이터를 가져와서 해당 데이터를 그리드로 표현하는 과정이 포함됩니다.

아래 함수는 그리드에서 셀더블클릭 이벤트가 발생했을때 연결되는 함수입니다.
function gfn_ViewRowList(oGrid:Grid, e:GridClickEventInfo, pbSave)
{
if(pbSave == null) pbSave = true;
oPdiv = _create(oGrid, e, pbSave);
var oRect = oGrid.getCellRect(e.row, e.col);
var nX = system.clientToScreenX(oGrid, oRect.left);
var nY = system.clientToScreenY(oGrid, oRect.top + oRect.height);

oPdiv.trackPopup(nX, nY);
}
getCellRect() 메소드는 지정된 셀의 정보를 가져오는 메소드라고 합니다.
클릭 이벤트에서 클릭된 row와 col의 정보를 가져올 수 있기 때문에 해당 정보를 처리할 수 있습니다.
이렇게 가져온 정보는 Rect Object 형태로 반환됩니다.
Rect는 bottom, height, left, right, top, width 의 정보를 가지고 있는 영영 좌표를 지정하는 오브젝트입니다.

예제에서 _create 함수는 PopupDiv 를 생성해주는 부분입니다.
여기서 PopupDiv 를 생성하고 데이터를 추출하고 그리드를 만드는 작업을 같이 진행을 합니다.

PopupDiv는 일반적인 Div와 동일하지만 포커스를 잃게 되면 자동으로 사라지게 됩니다.
지속적으로 참조할 데이터가 아니라 일시적으로 확인해야 하는 정보를 인용할때 사용됩니다.
<font class="Apple-style-span" color="#666666"></font>
objPopupDiv = new PopupDiv();  
objPopupDiv.init(sName, 0, 0, 240, 120);
objPopupDiv.text = sName;

// Add Object to Parent Form  
this.addChild(sName, objPopupDiv); 
// Show Object  
objPopupDiv.show(); 
동적으로 PopupDiv를 생성하는 과정입니다.
새로운 객체를 만들고 초기화하고 폼에 넣어주고 보여줍니다. 
PopupDiv 에서 text 속성은 내부 컴퍼넌트가 없는 경우에 기본적으로 보여주는 텍스트라고 합니다.

그리드를 만드는 부분은 앞에서 다룬적이 있으니 생략하고
데이터를 생성하는 부분만 살펴보겠습니다.
//데이타셋 생성
function _createDataset(oGrid:Grid, e:GridClickEventInfo, pbSave)
{
var oDsData = eval(oGrid.binddataset);
var oDsRowViw = all["_dstTmpRow"];
if(oDsRowViw == null)
{
oDsRowViw = new Dataset;
oDsRowViw.name = "_dstTmpRow";
oDsRowViw.addColumn("COL_TITLE","String");
oDsRowViw.addColumn("COL_VAL","String");
}
oDsRowViw.clearData();
var nRow, nSt;
var sVal;
if(pbSave) nSt = 3;
else       nSt = 1;
// 타이틀 정보 담기
for(var i=nSt; i<oGrid.getCellCount("head"); i++)
{
sVal = oGrid.getCellProperty("head", i, "text");
nRow = oDsRowViw.addRow();
oDsRowViw.setColumn(nRow, "COL_TITLE", sVal);
}
var sColid;
var nIdx = 0;
// 값정보 담기
for(var i=nSt; i<oGrid.getCellCount("body"); i++)
{
sColid = oGrid.getCellProperty("body", i, "text").split(":")[1];
sVal = oDsData.getColumn(e.row, sColid);
oDsRowViw.setColumn(nIdx, "COL_VAL", sVal);
nIdx++;
}
return oDsRowViw;
}
데이터셋을 만드는 과정은 UX 스튜디오에서 만드는 과정과 동일합니다.
먼저 이름을 정해주고 컬럼을 추가합니다.
그리고 값을 담아줍니다.

예제에서 하고자 하는 것은 선택한 그리드의 행 정보를 가져와 보여주는 것이기 때문에
그리드에서 head 정보를 가져와 데이터를 추가해주고 body에 있는 정보를 가져와 보여줍니다.
그리드에서 getCellProperty() 메소드로 text 속성을 가져오면 'bind:Column0'와 같은 식으로 데이터를 반환합니다.
때문에 split() 메소드로 실제 컬럼값만 가져와서 컬럼의 데이터값을 가져와 새로운 데이터셋에 넣어줍니다.

이를 활용하면 데이터 그리드가 아니라도 간단한 양식으로 정보를 보여줄 수도 있고
다양하게 활용할 수 있지 않을까 싶습니다.

마지막으로 PopupDiv 를 화면에 보여주기 위해서 trackPopup() 메소드를 실행합니다.
trackPopup() 메소드는 좌표값을 가지게 되고 실행되면서 visible 속성을 true 로 설정해준다고 합니다.
그리고 모니터 영역을 벗어나는 경우에는 자동으로 보정을 해준다고 합니다.
(자세한 내용은 도움말을 참고하세요).

http://cafe.naver.com/xplatform101/165 
XPLATFORM 101
- Grid > 컬럼 추가/생성

업무화면을 딱 정해진대로만 그릴 수 있다면 얼마나 좋을까요?
하지만 사용자가 직접 정의한 화면을 보여주어야 할 수도 있고
조건에 따라 다른 화면을 보여주어야 할 수도 있습니다.

하지만 그렇다고 각 경우의 수를 고려해서 화면을 그려주어야 한다면
아마 지금 하고 있는 작업의 수십배는 더 일을 해야 할겁니다.

RIA 구현의 장점 중 하나가 이런 동적인 화면 추가/생성이
비교적 용이하다는 것입니다.
하지만 개발자는 힘들다는거..^^

일단 아래 그림과 같은 상황에서 빨간색 영역에 새로운 컬럼을 추가해야 합니다.
이런 경우에 어떻게 하는지 살펴보겠습니다.


코드를 살펴보죠.
쇼케이스에 있는 코드를 그대로 가져온겁니다.

function Button01_onclick(obj:Button,  e:ClickEventInfo)
{
Grid00.enableredraw = false;
// 추가할 컬럼 셋팅
// 사이에 추가시 insertContentsCol
// 끝에 추가시 appendContentsCol
Grid00.insertContentsCol(2);
Grid00.setFormatColProperty(2,"size",80);
Grid00.setCellProperty("head", 2, "text", "New");
Grid00.setCellProperty("body", 2, "text", "bind:Column2");

// 추가할 컬럼의 displaytype, edittype 설정도 하여야 한다. 기본은 normal, none
Grid00.setCellProperty("body", 2, "displaytype", "normal");
Grid00.setCellProperty("body", 2, "edittype", "none");
Grid00.enableredraw = true;
}
enableredraw 속성은 거의 대부분의 컴포넌트에서 제공하고 있습니다.
동적으로 무언가 추가되거나 변경될때 컴포넌트를 다시 그려주게 되는데
설정이 완료될때까지 다시 그리기를 보류시키고 작업이 끝나면서 일괄적으로 처리되도록
변경 내역 앞뒤에 설정해주게 됩니다.

컬럼 추가는 insertContentsCol() 을 사용합니다. 2라는 숫자는 삽입될 컬럼의 index를 의미합니다.
추가가 되면서 해당 컬럼의 index 값이 되겠죠.
이후에 사용되는 index 값은 insertContentsCol()의 반환값을 사용해도 되고 이미 알고 있다면 해당 값을 사용하면 됩니다.
예제에서는 2 라는 숫자를 계속 사용했네요.
설정에서 크기는 그리드에서 autofittype을 어떻게 설정했는지에 따라 달라집니다.
설정을 하지 않았다면 지정된 크기로 들어갈 수 있지만 자동설정이 되어있다면 알아서 크기가 조정됩니다.


데이터셋만 가지고 그리드 구현하기
- UX 스튜디오에서는 그리드에 데이터셋을 가져다놓으면 알아서 바인딩을 하면서 알아서 포맷을 지정해줍니다.
하지만 동적인 경우에는 그렇게 하기가 어렵죠.
때문에 수작업으로 그리드 컬럼과 포맷을 지정해주어야 합니다.

일단 데이터셋이 있기 때문에 항목은 getColCount(), getColID()를 사용해서 가져올 수 있습니다.
for (var i = 0; i < ds_Type_B.getColCount(); i++)
{
// Column ID 추출
v_ColId = ds_Type_B.getColID(i);
// Column 생성
v_Columns += '<Column size="120" />\n';

// Head 생성
v_BandHead += '<Cell col="' + i.toString() + '" text="' + v_ColId + '"/>\n';
// Body 생성
v_BandBody += '<Cell col="' + i.toString() + '" text="bind:' + v_ColId + '"/>\n';
}
해당 속성이 XML 형식으로 들어가기 때문에 그냥 문자열로 만들어줍니다.
그리고 필요한 태그 안에 삽입을 시켜주는 거죠.
v_Rows += '<Row size="24" band="head" fix="fixed"/>\n';
v_Rows += '<Row size="20"/>\n';

v_Formats = '<Formats>\n';
v_Formats += '<Format id="default">\n';
v_Formats += '<Columns>\n';
v_Formats += v_Columns;
v_Formats += '</Columns>\n';
v_Formats += '<Rows>\n';
v_Formats += v_Rows;
v_Formats += '</Rows>\n';
v_Formats += '<Band id="head">\n';
v_Formats += v_BandHead;
v_Formats += '</Band>\n';
v_Formats += '<Band id="body">\n';
v_Formats += v_BandBody;
v_Formats += '</Band>\n';
v_Formats += '</Format>\n';
v_Formats += '</Formats>\n';
Grid02.enableredraw = false;
Grid02.binddataset = ds_Type_B;
Grid02.formats = v_Formats;
Grid02.enableredraw = true;
Grid02.autofittype = "col";
enableredraw 속성이 마지막에 있는 것은 실제 그리드에 영향을 미치는 부분 바로 앞에서 실행하기 때문입니다.

하지만 저렇게 하나하나 XML 형태로 만들어서 포맷을 지정해주는 것이 조금은 복잡하죠.
조금 다른 형식으로 접근할 수도 있습니다.
function Button03_onclick(obj:Button,  e:ClickEventInfo)
{
//Grid 동적생성 script
var objGrid = new Grid();
objGrid.init("Grid03", 0, 0, 0, 0);
objGrid.fillareatype = "allrow";
objGrid.position = "absolute 384 280 747 410";
// Add Object to Parent Form  
this.addChild("Grid03", objGrid); 

//addChild 이후 호출해야 정상동작함.
objGrid.createFormat();
// Show Object  
objGrid.show();
var objDs = eval("ds_Type_B");
objGrid.binddataset = objDs;
//head/body/summ 영역구성
objGrid.appendContentsRow("head");
objGrid.appendContentsRow("body");
//col생성 - appendContentsRow() 에서 컬럼이 기본으로 1개 생김
for(var r=1; r<objDs.getColCount(); r++)
{
objGrid.appendContentsCol();
}
//col size 설정
for(var r=0; r<objDs.getColCount(); r++)
{
objGrid.setFormatColProperty(r,"size",100);
}
//band별 셀속성 설정
for(var r=0; r<objDs.getColCount(); r++)
{
var colinfo = objDs.getColumnInfo(r);
objGrid.setCellProperty("head",r,"text",colinfo.name);
objGrid.setCellProperty("body",r,"text","bind:"+ colinfo.name);
}
Grid03.autofittype = "col";
}
소스를 좀 살펴보면 이번에는 아예 그리드부터 새로 만들고 있습니다.
그리드 옵션에서 fillareatype 는 데이터가 없는 영역을 어떻게 표시할지 설정하는 속성입니다.
기본값은 none 입니다. 데이터가 없는 영역은 표시하지 않습니다.
allrow로 설정하게 되면 일단 모두 다 그려주게 됩니다.
추가적인 편집이 있는 경우에는 allrow로 설정하는 것이 좀 더 직관적일 수 있겠죠.

createFormat()을 사용하는 부분은 좀 의문스럽긴 합니다.
없어도 무관한것 같기도 하고 이론적으로는 createFormat()에서 알아서 처리가 되어야 하는데...

이후 단계는 그리드 에디터에서 하는 작업과 동일합니다.
심지어는 appendContentsRow()에서 기본 컬럼을 생성해주는 것도 동일하네요.

이렇게 처리해주면 화면에 그리드가 이쁘게 나타날겁니다.

http://cafe.naver.com/xplatform101/164 
XPLATFORM 101
- Grid > Cell MovingType

언뜻 보면 잘 안쓸만한 기능이지만 사용자별로 그리드를 설정해야 하거나
관리 기능에서 보면 괜찮은 기능입니다.

cellmovingtype 
그리드에서 cellmovingtype 속성을 col로 지정해주기만 하면 됩니다.
선택한 컬럼 전체가 이동하게 되고 summary 영역도 포함됩니다.

제약이 있는 것은 병합된 셀은 이동할 수 없습니다.
하지만 단일 셀이 병합된 셀 앞뒤로 이동은 가능합니다.

cellsizingtype 
그리고 그리드 컬럼셀의 간격은 cellsizingtype 으로 설정할 수 있습니다.
셀 이동과 마찬가지로 헤드 영역에서만 조정이 가능합니다.

cellsizingtype 에서 col은 기본 헤드 영역으로 조정하면 되는데
row로 하는 경우에는 LeftBand에서만 된다는 설명이 있습니다.
LeftBand 설정은 그리드에서 틀 고정과 같은 기능입니다.

틀고정
(1) 그리드 에디터에서 고정을 원하는 컬럼을 선택하고 속성에서
Position > band = body 를 left 로 변경합니다.


그렇게 하면 선택한 항목은 고정이 되어 나머지 컬럼만 이동하게 됩니다.


left 가 아닌 right 를 설정하게 되면 오른쪽에 틀 고정이 됩니다.
그렇게 설정하여 양쪽 틀고정도 가능하게 됩니다.

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