SMART datagrid v1.4 > Concepts
팔레트는 그리드 셀들을 그릴 때 사용하는 채우기 및 선 객체들을 미리 등록하고, 필요할 때 꺼내서 쓸 수 있도록 하는 장치다.
먼저, 그리드에 팔레트를 등록한다.
grid.registerFillPalette({
name: 'f01',
fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00', '#5000ff00']
});
grid.registerStrokePalette({
name: 's01',
strokes: ['#ff0000', '#00ff00', '#0000ff', null]
});
매개변수로 지정하는 설정 객체에 "fills" 배열이 포함되면 채우기 팔레트로, "strokes" 배열이 포함되면 선 팔레트로 등록된다. 그렇지 않은 경우 무시된다. 배열에 포함되는 채우기나 선 항목은 GridStyles에서 관련 속성 값들을 지정할 때와 동일하다. 빈 문자열이나 undefined, null 등 그리기 객체로 생성될 수 없는 값은 null 객체로 지정된다. 이렇게 지정되고 생성되는 그리기 객체는 그리드 렌더링 시점에 해당 영역과 관련된 GridStyles에 설정된다.
등록된 팔레트에 포함된 항목들은 채우기나 선 객체를 지정하는 GridStyles 속성들에 설정할 수 있다.
grid.body().setStyles({
background: 'p(f01)',
borderRight: 'p(s01)'
});
"p("과 ")" 사이에 미리 등록된 팔레트 이름을 지정한다. 이 후 실제로 그리기 객체가 필요한 시점에 팔레트에 요청하는데, 팔레트는 내부에 존재하는 현재 위치 값에 설정되어 있는 그리기 객체를 리턴하고, 위치 값을 하나 증가 시킨다. 위치 값은 팔레트 항목 개수 전까지 증가한 후 다시 0으로 초기화된다.
즉, 이런 식으로 팔레트를 지정하면 실제로 사용되는 팔레트 항목을 미리 예측할 수 없다. 실제 색상 값은 중요하지 않고, 단지 영역 사이를 구분할 필요가 있을 때 이와 같은 방식을 사용할 수 있다.
어플리케이션에서 색상 값 등이 업무적으로 결정돼서 팔레트 항목 중 특별한 값을 사용해야 한다면 위치 값을 명시한다.
colName.setStyles({
background: 'p(f01:1)'
});
colAddr.setStyles({
background: 'p(f01:2)'
});
colSalary.setStyles({
background: 'p(f01:12)'
});
팔레트 이름 다음에 ":"로 구분하고 항목 위치 값을 정수로 지정한다. 첫 번째 항목이 0이다. 팔레트 항목 개수 이상을 지정하면 개수로 나눈 나머지에 해당하는 항목을 리턴한다. 즉, 팔레트 항목 개수가 10일 때, 'pal(f10:12)"로 지정하면 세 번째 항목이 리턴된다. 또, 내부에서 위치 값을 하나씩 증가시키는 방식 대신, 위치 값을 "?"로 지정하면 팔레트에 포함된 것들 중 임의의 위치에 존재하는 항목을 리턴한다.
팔레트 항목이 리턴되는 시점에 먼저 내부 위치를 특정 위치로 재설정시킬 수 있다.
colName.setStyles({
background: 'p(f01:7:0)'
});
위치 지정 후 ":"로 구분한 후 재설정 위치 값을 지정한다. 즉, 위 예제는 팔레트가 다음에 리턴할 항목 위치를 0 번으로 초기화한다.
colAddr.setStyles({
background: 'p(f01::5)'
});
이렇게 재설정만 하고 항목 위치를 지정하지 않는 경우 초기화된 위치의 항목을 리턴한다.
항목 위치 값으로 이 팔레트를 사용하는 범위가 인식하는 변수를 지정할 수 있다.
grid.body().setRowStyles({
background: 'p(f01:row)'
});
예를 들어, rowStyles는 그리드 데이터 영역의 데이터행들을 그리는 데 사용되는 스타일셋이다. background 속성을 팔레트로 지정하면서 항목 위치값을 "row"로 지정하면 현재 그리기를 실행하는 행 위치값에 해당하는 팔레트 항목을 리턴하게 된다. 어떤 변수를 사용할 수 있는 지는 팔레트를 사용하는 개별 영역들에서 설명된다.
이와 같은 사용 방식은 코드를 단순화 해주거나, 아예 스타일 설정만으로 표시 방식을 유연하게 구현할 수 있도록 하는데 도움을 준다. 또한, 팔레트 구성을 코드와 별개로 준비하고 실행 시간에 로드하는 방식으로 어플리케이션을 구성할 수도 있다.
$(function () {
grid.loadPalettes([{
name: 'f01',
fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00']
}, {
name: 's01',
strokes: ['#ff0000', '#00ff00', '#0000ff', null]
}]);
});