Rich UI 눈금 및 GridTooltip
Rich UI 눈금 위젯은 값 배열을 테이블 형식으로 정의합니다. 새로 개발하는 경우 Rich UI dataGrid 위젯을 사용하십시오. 이는 성능과 기능면에서 더 우수하며 “Rich UI DataGrid 및 DataGridTooltip”에 설명되어 있습니다.
눈금 위젯을 사용하면 다음 세부사항을 설정할 수 있습니다.
- 해당 눈금 열에서 레코드당 한 행에 표시되는 필드 갑을 가진 레코드의 배열입니다.
- 동작. 각각 함수 배열 참조를 승인하는 필드입니다. 사용자가 셀을 클릭하면 참조되는 함수가 배열 요소 순서로 실행됩니다.
각 함수는 셀 특성을 업데이트할 수 있습니다.
이렇게 하면 열 기준으로 정렬하거나 도구 팁을 표시하는 것과 같은 조치와 마찬가지로 스타일 특성을 지정할 수 있습니다.
(도구 팁은 풍선 도움말이며, 이는 사용자가 마우스를 중지하고 커서가 눈금의 특정 영역에 있을 때 표시되는 상자입니다.)
CellBehavior라는 위임 파트에서는 눈금 위젯의 behaviors 및 headerBehaviors 필드에서 참조하는 각 함수의 특성에 대해 설명합니다.
Delegate CellBehavior(grid Grid in, cell TD in, row any in, rowNumber int in, column GridColumn in) end- grid
- 함수에 전달되는 눈금입니다.
- cell
- 눈금 셀을 나타내는 내부 위젯입니다. 해당 위젯은 HTML TD(테이블 데이터) 태그를 기반으로 합니다.
- row
- 행 데이터를 나타내는 레코드입니다. (나중에 설명된 대로 눈금의 data 특성을 설정하여 값을 지정합니다. 이 때 지정하는 유형의 레코드 배열을 사용합니다. 주어진 눈금 행의 값은 해당 배열의 요소로부터 검색됩니다.)
- rowNumber
- 행 번호입니다. 이는 1부터 눈금의 행 번호가 포함된 totalRows 특성의 값까지의 범위에 있습니다.
- column
- 열 설명을 나타내는 레코드입니다. (나중에 설명된 대로 눈금의 열 특성을 GridColumn 유형의 레코드 배열로 설정하여 열을 설명합니다.) 주어진 열에 대한 설명은 배열 요소로부터 검색됩니다.
Rich UI는 동작 필드에서 참조할 수 있는 함수 수를 제공합니다. 세부사항은 com.ibm.egl.rui 프로젝트,
EGLSource 폴더, com.ibm.egl.rui.widgets 패키지에서 다음 파일을 참조하십시오.
- GridBehaviors.egl
- GridSelector.egl
- GridSorter.egl
- GridToolTip.egl(이 주제의 뒷부분에서 다시 언금됨)
“Rich UI 메모리 관리”에 설명된 문제를 알고 있어야 합니다.
지원되는 특성 및 함수
눈금 위젯에서는 다음 특성이 지원됩니다.
- data는 ANY 유형이며 개발자가 정의한 레코드 배열입니다.
주어진 레코드 필드의 데이터는 필드 이름이 columns 특성에 지정된 눈금 열의 이름과 같은 경우에만 눈금에 표시됩니다.
눈금 선언에서 다른 특성 뒤에 data 특성이 나열됩니다.
예를 들어 다음과 같습니다.
stocks Stock[] = [ new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}, ]; Grid myGrid {..., data = stocks as any[]}; - columns는 다음 유형의 레코드 배열입니다.
Record GridColumn displayName String; name String; width int; end- displayName
- 열 제목입니다. 이 필드를 지정하지 않으면, 열 제목은 name 필드의 값입니다.
- 이름
- 기본 열 제목이며, 이는 열에 대한 값을 제공하는 data 레코드 필드의 이름입니다.
- width
- 열의 픽셀 수입니다.
- totalRows는 눈금의 열 수가 포함된 읽기 전용 특성입니다.
- behaviors는 CellBehavior 유형의 위임 배열입니다. 사용자가 헤더 행이 아닌 행을 클릭할 때마다 호출되는 함수의 배열을 지정합니다. 이 함수는 배열에 지정된 순서대로 호출됩니다.
- headerBehaviors는 CellBehavior 유형의 위임 배열입니다. 사용자가 헤더 행을 클릭할 때마다 호출되는 함수의 배열을 지정합니다. 이 함수는 배열에 지정된 순서대로 호출됩니다.
다음 규칙이 유효합니다.
- children 또는 initialUI 특성의 위젯을 참조하는 경우를 제외하고 Rich UI에서 값을 참조하려면 먼저 값을 선언해야 합니다. 눈금 특성에서 눈금 선언 외부에 있는 배열을 참조하는 경우(이전 data 특성의 예와 같음) 눈금 선언을 하기 전에 배열을 지정해야 합니다.
- 눈금을 선언할 때 data 특성 앞에 behaviors, headerBehaviors 및 column 특성이 나열되는지 확인하십시오.
- 함수에서 명령문을 작성할 때 behaviors 또는 headerBehaviors 특성 값을 변경하는 경우 눈금 특정 함수 layouts()를 호출하여 위젯을 재설정하십시오.
눈금(GridTooltip이 아님)과 관련된 다른 지원 특성 및 함수는 “위젯 특성 및 함수”에 설명되어 있습니다.
이 위젯을 사용하려면 다음 일부 또는 모든 명령문이 필요합니다.
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridSorter;
import com.ibm.egl.rui.widgets.GridToolTip;
눈금 도구 팁
눈금에 대한 도구 팁을 포함시킬 경우 다음 두 가지 기본 대체 방법이 있습니다.
- 눈금 위에 커서를 올려놓을 때마다 도구 팁이 표시되도록 하려면(셀, 행 또는 열에 따라 다르지 않음) 눈금 전체를 도구 팁에 지정하십시오. 세부사항은 Rich UI 도구 팁을 참조하십시오. 도구 팁을 글로벌 위젯으로 선언하고 일부 함수(예: on-construction 함수나 behaviors 또는 headerBehaviors 특성에서 식별된 함수)에서 이를 사용 설정(활성화)하십시오.
- 도구 팁에서 헤더 외부의 주어진 셀, 행 또는 열에 대해 다른 도구 팁 정보를 지정하도록 하려면
도구 팁과 비슷하지만 항상 눈금 도구 팁 제공자 함수를 지정해야 하는 눈금 도구 팁을 지정할 수 있습니다.
해당 함수는 사용자에게 표시할 컨텐츠를 제공하는 상자를 리턴합니다.
눈금당 하나의 도구 팁만 지정할 수 있습니다.
다음은 눈금 도구 팁을 작성하는 프로세스입니다.
- 다음 예에서와 같이 눈금 도구 팁 핸들러를 글로벌하게 선언하십시오. 이는 눈금 도구 팁 제공자(호출할 함수) 및 지연(풍선 시작과 제공자 호출 사이의 시간(밀리초))을 참조합니다.
gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };해당 선언에는 다음 import 문이 포함되어야 합니다.import egl.rui.widgets.GridToolTip; - behaviors 특성에 대한 배열을 지정할 때 눈금 도구 팁 핸들러에 있는 함수를 참조합니다. 이 예에서 해당 함수는 gridToolTip.setToolTips입니다.
- GridToolTip provider 특성에 지정된 이름으로 눈금 도구 팁 제공자 함수를 작성하십시오(이 예에서는
tooltipText 함수임). 눈금 도구 팁 제공자 함수에는 다음 위임 파트에 아웃라인된 매개변수와 리턴 값 특성이 있습니다.
Delegate GridTooltipTextProvider(row any in, fieldName String in, td TD in) returns(Box) end- row
- 함수에 제공된 행입니다. 이 입력 인수를 사용하여 특정 값을 액세스할 수 있습니다.
예를 들어 데이터가 다음과 같은 경우를 고려해 보십시오.
stocks Stock[] = [ new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false} ];제공자 함수 내에서 다음과 같은 코드를 작성하여 커서를 올려 놓아 풍선 도움말이 표시될 행을 판별할 수 있습니다.if (row.Quote as int == 200) // place content in a tooltip and return the tooltip end - fieldName
- 함수에 제공된 열의 이름입니다.
- td
- 눈금 셀을 나타내는 내부 위젯입니다. 해당 위젯은 HTML TD(테이블 데이터) 태그를 기반으로 합니다.
- 눈금 도구 팁을 사용하지 않습니다. 이를 선언하는 즉시 사용으로 설정됩니다.
예
다음은 작업공간에서 시도할 수 있는 예이며, 다른 공간에서 헤더 행에 대한 도구 팁과 눈금 도구 팁이 포함됩니다.
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridColumn;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import com.ibm.egl.rui.widgets.Tooltip;
import egl.ui.rui.Widget;
Record Filler
F1 String;
F2 String;
F3 String;
end
handler myGrid1 type RUIhandler {initialUI = [ myBox ]}
gridSelector GridSelector { color = "lightgreen" };
filler Filler[] = [
new Filler{F1 = "R3, C1", F2 = "R3, C2", F3 = "R3C3"},
new Filler{F1 = "R4, C1", F2 = "R4, C2", F3 = "R4C3"}
];
myFirstGrid Grid{
behaviors = [
GridBehaviors.whiteCells,
GridBehaviors.alternatingColor,
GridBehaviors.tightCells,
gridSelector.enableSelection,
gridTooltip.setTooltips
],
headerBehaviors = [
GridBehaviors.grayCells,
headerTooltips
],
columns = [
new GridColumn{name = "F1", displayName = "Column 1 Header", width=120},
new GridColumn{name = "F2", displayName = "Column 2 Header", width=120},
new GridColumn{name = "F3", width=50}
],
data = [
new Dictionary { F1 = "Row 1, Column 1", F2 = "Row 1, Column 2", F3 ="me"},
new Dictionary { F1 = "Row 2, Column 1", F2 = "Row 2, Column 2", F3 = "you"},
filler[1], filler[2]
]
};
myBox Box{ backgroundcolor = "peachpuff", padding=8,
children=[myFirstGrid], marginbottom=15};
HtooltipText String = "This is a Header tooltip";
headerTooltip Tooltip { text = HtooltipText, delay=1000 };
function headerTooltips(grid Grid in, td Widget in, row any in,
ignoreRowNumber int in, column GridColumn in)
headerTooltip.enable(td);
end
gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };
tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
function tooltipText(row any in, fieldName String in, td Widget in) returns(Box)
tooltipArea.text =
"In function tooltipText (a tooltip provider):" +
" \n fieldName is the column name ('"+fieldName+"')." +
"\nYou can access cell content:" +
"\n td.innerText is '"+td.innerText+"'. \nThanks to EGL dynamic access" +
"\n row[fieldName] is also '"+row[fieldName] + "'.";
return (tooltipBox);
end
tooltipBox Box {columns=1, width=475, children = [ tooltipArea ]};
end