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;
다음 세부사항은 눈금 레이아웃의 하위에 대한 layoutData 특성에 포함되어 있습니다.
  • 레이아웃에서 위젯이 예약한 행과 열 위치.
  • 위젯이 놓이는 행과 열 수.
  • 위젯이 예약할 셀 내에서 위젯의 가로 위치(왼쪽, 가운데 또는 오른쪽)
  • 위젯이 예약할 셀 내에서 위젯의 세로 맞추기(맨 위, 가운데, 맨 아래)
  • 채우기로 작동하는 픽셀 수(위젯이 예약하는 영역 주변의 추가 공간).
하위 위젯은 전체적으로 레이아웃에 영향을 미칠 수 있습니다.
  • 레이아웃 행의 높이는 모든 채우기를 포함하여 행에서 가장 큰 위젯에 필요한 높이와 같습니다. 그러나 여러 행에 걸쳐 있는 위젯은 열 높이를 계산하는 데 사용되지 않습니다.
  • 레이아웃 열의 너비는 모든 채우기를 포함하여 열에서 가장 넓은 위젯에 필요한 너비입니다. 그러나 여러 열에 걸쳐 있는 위젯은 열 너비를 계산하는 데 사용되지 않습니다.
Rich UI 편집기는 눈금 레이아웃 작업에 대한 많은 도움을 제공합니다. 특히 다음 태스크를 수행할 수 있습니다.
  • 팔레트에서 눈금 레이아웃의 특정 셀로 위젯을 끌어서 놓으십시오.
  • 한 셀에서 다른 셀로 위젯을 이동하십시오.
  • 데이터 보기에서 레코드를 끌어서 놓으십시오.
  • 유효성 검증을 포함하여 양식 동작을 제공하는 EGL 코드가 자동으로 작성되게 하십시오.
이러한 편집기 기능에 대한 세부사항은 다음 주제를 참조하십시오.
  • “Rich UI 편집기에 대한 소개”
  • “Rich UI 편집기의 디자인 탭으로 레코드 끌어오기”
  • “Rich UI를 사용하여 양식 처리”

다음 사용자 인터페이스를 고려하십시오.

Rich
UI GridLayout 예

다음은 인터페이스 양식을 구성하는 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 레코드가 Button1 단추의 layoutData 특성에 지정됩니다. 다음은 레코드 선언입니다.
myLayoutData GridLayoutData{ row = 1, column = 2 };

Button2Button3layoutData 특성에 필요한 레코드 선언은 위젯 선언에 있습니다. 다음은 세 개의 모든 단추에 대한 선언입니다.

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 특성에 지정하는 경우 레코드의 rowcolumn 필드를 설정해야 하며 해당 값이 레이아웃에 적절해야 합니다. 그러나 layoutData 특성에 널을 지정할 수 있습니다. 이 경우 임베디드 위젯은 표시되지 않고 레이아웃 전체를 사용자 정의하는 너비와 높이 계산에 포함되지 않습니다.

레이아웃에 대한 런타임 업데이트

레이아웃을 동적으로 업데이트할 수 있습니다. 예를 들어 다음을 표시하기 위해 사용자가 Button1을 클릭할 수 있습니다.

Rich
UI GridLayout 예2

다음은 사용자가 Button1을 클릭할 때 표시되도록 하는 함수입니다.
function respond(e Event in)
   Button2.layoutData = null;
end	

respond 함수가 실행되면 두 번째 행의 높이와 두 번째 열의 높이에 눈금 레이아웃 정의에 지정된 채우기만 포함됩니다. 세 번째 단추(Button3)를 왼쪽 위로 이동하지만 Button1에 대해 상대적인 위치는 변경되지 않습니다.

또는 다음을 표시하기 위해 사용자가 Button1을 클릭할 수 있습니다.

Rich
UI GridLayout 예3

다음은 개정된 respond 함수입니다.
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의 현재 컨텐츠를 바꾸려면 Button2layoutData 특성이 널이어야 합니다. 새 컨텐츠는 Button2보다 더 넓고 더 짧아야 하며 세 번째 단추가 오른쪽 위로 이동합니다.

일반적으로 눈금 레이아웃에서 제외하는 위젯의 layoutData 특성은 항상 널로 두십시오. 열 또는 행에 걸쳐 있는 하위 위젯을 바꾸는 경우 해당 위젯을 널로 설정하면 런타임 오류를 방지할 수 있습니다.

스팬과 맞추기의 예

다음 사용자 인터페이스를 고려하십시오.

Rich
UI GridLayout 예4, 미리보기

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

Rich
UI GridLayout 예4, 디자인

인터페이스의 다음 측면을 고려하십시오.
  • 행 1에서는 레이블이 첫 번째 열에 있고, 텍스트 필드는 두 번째부터 세 번째 열까지 가로로 확장됩니다.
  • 행 2에서는 선택란이 두 번째 열에 있지만 세 번째 행까지 세로로 확장됩니다.
  • 행 3에서는 단추가 첫 번째부터 두 번째 열까지 가로로 확장되고 이 두 열의 가운데에 옵니다.
다음은 인터페이스 양식을 구성하는 Rich UI 핸들러입니다.
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

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 값보다 큰 경우. 또는
  • 레이아웃 눈금의 너비가 제안된 행 너비보다 큰 경우.