간단히 말해 callLater 메소드는 화면 리프레시와 관련해

이번이 아닌 다음번 리프레시를 기약하는 메소드이다.

이게 무슨 말이냐면,

음...

예를 들어

컬럼을 마우스로 드래그해 다른 컬럼 위치에 드롭하면

컬럼 시프트가 일어나면서

바뀐 컬럼의 모습이 나타나게 된다.

이 때,

드롭하는 시점을 1이라고 하고

바뀐 컬럼이 나타나는 시점을 2라고 하면

1에서 2로 바뀌는 게 하나의 화면 리프레시이다.

그런데 현재 상태가 2라면,

상태 2에서 callLater 메소드를 호출하면

앞으로 있을 상태 3에서 메소드의 반영 결과를 보여주게 된다.

그렇다면, 화면 리프레시는 얼마나 자주 일어날까..

예를 들어, 뭔가를 화면에 add하지 않더라도

화면 리프레시는 계속해서 일어날까?

결론은 "거의 그렇다" 이다. 모든 UIComponent에는 updateDisplayList 메소드가 정의되어 있는데,

callLater 메소드에서 말하는 화면 리프레시는

이 updateDisplayList 메소드가 호출되는 시점을 말한다.

(callLater 메소드는 UIComponent에 최초로 정의되어 있다)

서론은 이쯤으로 하고, 코드를 보도록 하자.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import mx.events.IndexChangedEvent; import mx.events.DataGridEvent; import mx.collections.ArrayCollection; private var arr:ArrayCollection = new ArrayCollection([ {no:1,a:10,b:20,c:30,d:40,e:50,f:60}, {no:2,a:20,b:30,c:40,d:50,e:60,f:70}, {no:3,a:30,b:40,c:50,d:60,e:70,f:80}, {no:4,a:40,b:50,c:60,d:70,e:80,f:90} ]); private function releaseHandler(event:DataGridEvent):void { dg.callLater(reorder); } private function reorder():void { var arr:ArrayCollection = ArrayCollection(dg.dataProvider); for (var i:int=0; i<arr.length;i++) { arr[i].no = i+1; } } private function init():void { dg.dataProvider=arr; } private function shiftHandler(event:IndexChangedEvent):void { trace(event.oldIndex); trace(event.newIndex); if (event.oldIndex==0) { //이 부분에서 기존 컬럼 중 몇번째 컬럼의 이동을 막을 지를 설정해 주면 된다.. //새로운 컬럼이 몇번째 컬럼으로 이동하지 못하게 하려면 //event.newIndex로 접근해서 해결하면 된다.. dg.callLater(reshuffle,[event.oldIndex,event.newIndex]); } } private function reshuffle(oldid:int,newid:int):void { var arr:Array = dg.columns; var column:DataGridColumn = dg.columns[newid]; arr.splice(newid,1); arr.splice(oldid,0,column); dg.columns = arr; } ]]> </mx:Script> <mx:DataGrid id="dg" headerShift="shiftHandler(event);" headerRelease="releaseHandler(event);"> <mx:columns> <mx:DataGridColumn dataField="no" /> <mx:DataGridColumn dataField="a" /> <mx:DataGridColumn dataField="b" /> <mx:DataGridColumn dataField="c" /> <mx:DataGridColumn dataField="d" /> <mx:DataGridColumn dataField="e" /> <mx:DataGridColumn dataField="f" /> </mx:columns> </mx:DataGrid> </mx:Application> 이 예제에서는 컬럼 시프트 핸들러인 shiftHandler 메소드에서 if (event.oldIndex==0) { //이 부분에서 기존 컬럼 중 몇번째 컬럼의 이동을 막을 지를 설정해 주면 된다.. //새로운 컬럼이 몇번째 컬럼으로 이동하지 못하게 하려면 //event.newIndex로 접근해서 해결하면 된다.. dg.callLater(reshuffle,[event.oldIndex,event.newIndex]); }

기존 컬럼의 인덱스가 0이면, 즉 옮기려는 컬럼이 첫 번째 컬럼이면,

데이터그리드의 callLater 메소드를 호출해 컬럼을 원 위치로 복귀시키도록 하고 있다.

callLater 메소드는 이처럼 호출할 메소드와 인자를 제한없이 받는 배열 타입의 파라미터를

메소드 시그너처로 정의하고 있다.

reshuffle 메소드가 하는 일은 간단하게 배열의 splice 메소드를 사용해
 
private function reshuffle(oldid:int,newid:int):void { var arr:Array = dg.columns; var column:DataGridColumn = dg.columns[newid]; arr.splice(newid,1); arr.splice(oldid,0,column); dg.columns = arr; }

이동한 첫번째 컬럼을 뽑아내서 다시 원래 위치인 0번째 인덱스에 집어넣은 기능이다.

액션스크립트 원리 : 배열의 splice 메소드는 배열에서 가장 강력한 기능을 하는 메소드이다. 이 메소드는 특정 원소를 한개 또는 여러개 삭제할 수 있을 뿐 아니라, 특정 위치에 원소를 집어넣는 기능 등, 배열 요소 제어와 관련한 모든 기능을 전부 제공하는 배열에 있어서 가장 강력한 메소드이다. splice 메소드를 적절히 활용하면 데이터그리드의 컬럼 순서 제어나 특정 컬럼 삭제, 삽입 등 갖가지 편리한 기능들을 얼마든지 구현할 수 있다.