Rich UI GridLayout
Rich UI 눈금 레이아웃에는 하위 위젯이 임베드되는 가변적인 간격의 행과 열이 있습니다. 각 하위 위젯에는 layoutData 특성이 있으며 해당 특성에 값을 지정하여 위젯의 위치를 지정합니다. 또한 layoutData 설정은 위치 내에서 위젯을 가로와 세로로 맞추어 위젯을 여러 행과 열에 놓이게 할 수 있습니다.
- children은 위젯 특성 및 함수에 설명된 위젯 배열입니다.
- columns는 레이아웃의 열 수를 식별하는 정수 값입니다.
- row는 레이아웃의 행 수를 식별하는 정수 값입니다.
- cellPadding은 하위 위젯과 상위 위젯 사이의 간격(픽셀)을 식별하는 정수 값입니다. 이 경우 위젯과
gridLayout 셀 사이의 간격입니다.
하위 위젯은 나중에 설명된 대로 추가 채우기를 제공합니다.
셀 사이에 채우기가 없도록 하려면 Rich UI 핸들러에서 참조하는 CSS 파일에 다음 코드를 추가하십시오.
.EglRuiGridLayout table{ border-collapse: collapse; }
기타 지원되는 특성과 함수는 “위젯 특성 및 함수”에서 설명됩니다.
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
- 레이아웃에서 위젯이 예약한 행과 열 위치.
- 위젯이 놓이는 행과 열 수.
- 위젯이 예약할 셀 내에서 위젯의 가로 위치(왼쪽, 가운데 또는 오른쪽)
- 위젯이 예약할 셀 내에서 위젯의 세로 맞추기(맨 위, 가운데, 맨 아래)
- 채우기로 작동하는 픽셀 수(위젯이 예약하는 영역 주변의 추가 공간).
- 레이아웃 행의 높이는 모든 채우기를 포함하여 행에서 가장 큰 위젯에 필요한 높이와 같습니다. 그러나 여러 행에 걸쳐 있는 위젯은 열 높이를 계산하는 데 사용되지 않습니다.
- 레이아웃 열의 너비는 모든 채우기를 포함하여 열에서 가장 넓은 위젯에 필요한 너비입니다. 그러나 여러 열에 걸쳐 있는 위젯은 열 너비를 계산하는 데 사용되지 않습니다.
- 팔레트에서 눈금 레이아웃의 특정 셀로 위젯을 끌어서 놓으십시오.
- 한 셀에서 다른 셀로 위젯을 이동하십시오.
- 데이터 보기에서 레코드를 끌어서 놓으십시오.
- 유효성 검증을 포함하여 양식 동작을 제공하는 EGL 코드가 자동으로 작성되게 하십시오.
- “Rich UI 편집기에 대한 소개”
- “Rich UI 편집기의 디자인 탭으로 레코드 끌어오기”
- “Rich UI를 사용하여 양식 처리”
예
다음 사용자 인터페이스를 고려하십시오.

handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }
myGridLayout GridLayout{
rows = 4, columns = 4, cellPadding = 4,
children = [ Button3, Button1, Button2 ]
};
...
end
myGridLayout 레이아웃에는 4개의 행, 4개의 열과 각 셀 주변에 4픽셀의 채우기가 있습니다. 세 개의 하위 요소가 지정되는데, children 배열에 나열되는 순서는 중요하지 않습니다. 그러나 위젯을 동일한 위치에 있도록 하는 layoutData 값이 여러 위젯에 있는 경우 해당 위젯 중 먼저 나열된 위젯이 표시됩니다.
각 위젯에 대한 layoutData 특성 값은 ANY 유형입니다. 이 때 특성 값은 항상 GridLayoutData 유형의 레코드(나중에 설명됨)를 사용합니다.
myLayoutData GridLayoutData{ row = 1, column = 2 };
Button2 및 Button3의 layoutData 특성에 필요한 레코드 선언은 위젯 선언에 있습니다. 다음은 세 개의 모든 단추에 대한 선언입니다.
Button1 Button{ layoutData = myLayoutData, text = "Button1", onClick ::= respond };
Button2 Button{ layoutData = new GridLayoutData{ row = 2, column = 3 },
text = "Button2" };
Button3 Button{ layoutData = new GridLayoutData{ row = 3, column = 4 },
text = "Button3" };
GridLayoutData 유형의 레코드를 눈금 레이아웃에 임베드되는 위젯의 layoutData 특성에 지정하는 경우 레코드의 row 및 column 필드를 설정해야 하며 해당 값이 레이아웃에 적절해야 합니다. 그러나 layoutData 특성에 널을 지정할 수 있습니다. 이 경우 임베디드 위젯은 표시되지 않고 레이아웃 전체를 사용자 정의하는 너비와 높이 계산에 포함되지 않습니다.
레이아웃에 대한 런타임 업데이트
레이아웃을 동적으로 업데이트할 수 있습니다. 예를 들어 다음을 표시하기 위해 사용자가 Button1을 클릭할 수 있습니다.

function respond(e Event in)
Button2.layoutData = null;
end
respond 함수가 실행되면 두 번째 행의 높이와 두 번째 열의 높이에 눈금 레이아웃 정의에 지정된 채우기만 포함됩니다. 세 번째 단추(Button3)를 왼쪽 위로 이동하지만 Button1에 대해 상대적인 위치는 변경되지 않습니다.
또는 다음을 표시하기 위해 사용자가 Button1을 클릭할 수 있습니다.

function respond(e Event in)
myLabel TextLabel {text="replace button 2"};
myLabel.layoutData = new GridLayoutData {row=2, column=3};
Button2.layoutData = null;
myGridLayout.appendChild(myLabel);
end
이 경우 행 2, 열 3의 현재 컨텐츠를 바꾸려면 Button2의 layoutData 특성이 널이어야 합니다. 새 컨텐츠는 Button2보다 더 넓고 더 짧아야 하며 세 번째 단추가 오른쪽 위로 이동합니다.
일반적으로 눈금 레이아웃에서 제외하는 위젯의 layoutData 특성은 항상 널로 두십시오. 열 또는 행에 걸쳐 있는 하위 위젯을 바꾸는 경우 해당 위젯을 널로 설정하면 런타임 오류를 방지할 수 있습니다.
스팬과 맞추기의 예
다음 사용자 인터페이스를 고려하십시오.

Rich UI 편집기의 디자인 탭에 표시된 대로 눈금 레이아웃에는 4개의 행과 3개의 열이 있습니다.

- 행 1에서는 레이블이 첫 번째 열에 있고, 텍스트 필드는 두 번째부터 세 번째 열까지 가로로 확장됩니다.
- 행 2에서는 선택란이 두 번째 열에 있지만 세 번째 행까지 세로로 확장됩니다.
- 행 3에서는 단추가 첫 번째부터 두 번째 열까지 가로로 확장되고 이 두 열의 가운데에 옵니다.
handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }
myGridLayout GridLayout{
rows = 4, columns = 3, cellPadding = 4,
children = [ myLabel, myTextField, myCheckBox, myButton ]
};
myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
text = "Label: " };
myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2,
horizontalSpan = 2 }, text = "Text field"};
myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2,
verticalSpan = 2 }, text="Check box" };
myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
horizontalSpan = 2,
horizontalAlignment = GridLayoutLib.Align_Center },
text="Button" };
end
다음 절은 GridLayoutData 필드에 대한 세부사항을 제공합니다.
GridLayoutData
- column
- 위젯이 상주하는 가장 왼쪽의 레이아웃 열을 나타내는 정수입니다.
- cellPadding
- 위젯이 예약한 영역의 맨 위, 맨 아래, 왼쪽과 오른쪽 테두리에 있는 픽셀 수를 나타내는 정수입니다.
- heightHint
- 위젯이 예약한 영역의 높이를 픽셀 수로 나타내는 정수입니다.
이 값은 다른 값을 강제 사용할 수 있는 브라우저에 대한 힌트입니다.
예를 들어 다음 경우 더 높은 영역이 제공됩니다.
- 위젯의 높이가 heightHint 값보다 큰 경우. 또는
- 레이아웃 눈금의 높이가 제안된 행 높이보다 큰 경우.
- horizontalAlignment
- 위젯이 예약한 열 내에 있는 위젯의 가로 위치입니다.
다음 값 중 하나입니다.
- GridLayoutLib.ALIGN_LEFT
- 열의 왼쪽에 있습니다.
- GridLayoutLib.ALIGN_CENTER
- 열의 가운데에 있습니다.
- GridLayoutLib.ALIGN_RIGHT
- 열의 오른쪽에 있습니다.
- horizontalSpan
- column 필드에 지정된 열을 포함하여 위젯에서 사용하는 열 수입니다.
- row
- 위젯이 상주하는 가장 위쪽의 레이아웃 행을 나타내는 정수입니다.
- verticalAlignment
- 위젯이 예약한 행 내에 있는 위젯의 세로 위치입니다.
다음 값 중 하나입니다.
- GridLayoutLib.VALIGN_TOP
- 행의 맨 위에 있습니다.
- GridLayoutLib.VALIGN_MIDDLE
- 행의 중간에 있습니다.
- GridLayoutLib.VALIGN_BOTTOM
- 행의 맨 아래에 있습니다.
- verticalSpan
- row 필드에 지정된 행을 포함하여 위젯에서 사용하는 행 수입니다.
- widthHint
- 위젯이 예약한 영역의 너비를 픽셀 수로 나타내는 정수입니다.
이 값은 다른 값을 강제 사용할 수 있는 브라우저에 대한 힌트입니다.
예를 들어 다음 경우 더 넓은 영역이 제공됩니다.
- 위젯의 너비가 widthHint 값보다 큰 경우. 또는
- 레이아웃 눈금의 너비가 제안된 행 너비보다 큰 경우.