Rich UI 위젯

Rich UI 핸들러 파트에는 위젯이 포함됩니다. 각 위젯은 사용자 정의된 화면 제어지만 위젯이라는 용어는 제어를 작성하는 변수 선언을 참조합니다. 위젯은 비즈니스 데이터를 포함하고 이벤트에 응답할 수 있습니다.

위젯 유형

제품에서는 위젯을 선언하는 데 사용되는 핵심적인 위젯 유형 세트를 제공합니다. 다음 표는 기본 유형을 나열하지만 다른 주제에서 나열된 사용 가능한 Dojo 위젯은 포함하지 않습니다.

표 1. 위젯 유형
카테고리 유형 용도
컨테이너 상자 대부분의 경우에 다른 위젯이 임베드되는 상자를 정의합니다. 상자는 이전 버전의 Rich UI에서 기본 유형의 컨테이너였습니다. 그러나 GridLayout에서 설명한 대로 GridLayout 유형의 컨테이너가 더 유연합니다.

상자에 사용할 열 수를 지정할 수 있습니다. 예를 들어 열 수가 3인 경우 첫 번째 세 개의 임베디드 위젯은 상자의 첫 번째 행에 있게 되며, 네 번째부터 여섯 번째 위젯이 두 번째 행에 있게 됩니다(이하 계속). 열 수가 1이면 모든 임베디드 위젯이 세로로 배열됩니다. 어떤 경우에도 열 너비는 열에서 가장 큰 위젯의 너비와 같으며 주어진 열에서 임베디드 위젯을 열의 중간, 오른쪽 또는 왼쪽에 맞출지를 지정할 수 있습니다.

비어 있는 셀을 표시할 경우 텍스트가 누락된 텍스트 레이블을 상자의 하위에 포함시키십시오.

가로/세로 화면이동 막대는 필요한 경우에 표시되어 보이지 않는 위젯에 대한 사용자 액세스를 제공합니다.

Div 이전 컨텐츠의 아래에서 웹 페이지의 division(HTML DIV 태그)을 정의합니다. Div 위젯은 FloatLeft 및 FloatRight 위젯의 상위가 될 수 있으며 웹 페이지 디자인에 유연성을 제공합니다.
FloatLeft 대부분의 경우 Div, FloatLeft 또는 FloatRight 위젯의 하위로 웹 페이지의 division(HTML DIV 태그)을 정의합니다. 이 위젯은 CSS 요소 float:left를 사용합니다.
FloatRight 예를 들어 Div, FloatLeft 또는 FloatRight 위젯의 하위로 웹 페이지의 division(HTML DIV 태그)을 정의합니다. 이 위젯은 CSS 요소 float:right를 사용합니다.
GridLayout 하위 위젯이 임베드되는 가변적인 간격의 행과 열을 사용하여 컨테이너를 정의합니다. 각 하위 위젯에는 layoutData 특성이 있으며 해당 특성에 값을 지정하여 위젯의 위치를 지정합니다.
그룹화 테두리가 있는 상자에서 위젯 콜렉션을 표시합니다. 테두리의 맨 위에서 임베드되는 텍스트를 지정합니다.
정보 DataGrid 값 배열을 테이블 형식으로 정의합니다. 위젯을 사용하면 다음 세부사항을 지정할 수 있습니다.
  • 열의 특성(예: 너비, 높이 및 색상)
  • 해당 눈금 열에서 레코드당 한 행에 표시되는 필드 갑을 가진 레코드의 배열입니다.
  • 동작. 각각 함수 배열 참조를 승인하는 필드입니다. 참조 함수를 사용하면 사용자가 셀을 클릭할 때의 응답에서 헤더 행, 본문 행 또는 셀 특성을 업데이트할 수 있습니다.
눈금 값 배열을 테이블 형식으로 정의합니다. 새로 개발하는 경우 성능과 기능이 더 우수한 DataGrid 위젯 유형을 사용하십시오.
HTML 서비스에서 제공되는 HTML 단편을 표시합니다. HTML은 바인드된 영역에서 화면이동 막대(필요한 경우)와 함께 렌더링됩니다.
이미지 그래픽 또는 대체 텍스트를 표시합니다.
새도우 특정한 DIV 위젯의 하위 위젯에 새도우 효과를 작성합니다.
스팬 사용자가 변경할 수 없는 문자열을 표시합니다. 이 문자열에는 HTML 세그먼트(예: <b>이 굵은체 코드</b>)가 포함될 수 있습니다.
TextLabel 사용자가 변경할 수 없는 문자열을 표시합니다. HTML 세그먼트(예: <b>이 코드</b>)에 포함된 항목은 꺽쇠괄호를 포함하여 있는 그대로 표시되므로 이 위젯은 스팬과 다릅니다.
트리 표시 가능한 노드의 트리를 정의합니다.
대화식 BidiTextArea 하나 이상의 양방향 텍스트 행을 포함하는 직사각형을 정의합니다.
BidiTextField 단일 양방향 텍스트 행을 포함하는 텍스트 상자를 정의합니다.
단추 사용자 클릭을 도출하고 함수를 호출하여 해당 클릭에 대해 응답하는 단추를 정의합니다.
선택란 true-false 옵션을 표시하고 함수를 호출하여 사용자 입력에 응답하는 선택란을 정의합니다.
콤보 여러 선택 가능한 옵션 중 하나를 표시하고 사용자가 임시로 드롭 다운 목록을 열어 다른 옵션을 선택할 수 있는 콤보 상자를 정의합니다.
하이퍼링크 클릭하면 브라우저에 페이지가 표시되는 웹 페이지 링크를 정의합니다. 페이지 표시는 레이아웃에 의해 바인드되지 않습니다.
목록 사용자가 단일 항목을 선택할 수 있는 목록을 정의합니다.
Listmulti 사용자가 다중 항목을 선택할 수 있는 목록을 정의합니다.
메뉴 메뉴 표시줄 항목을 정의합니다.
PasswordTextField 글머리 기호로 표시되는 값이 있는 입력 텍스트 필드(비밀번호를 승인하는 데 적합함)를 정의합니다.
RadioGroup 동일한 그룹에 있는 다른 단일 선택 단추를 선택 취소하고 (일반적인 경우) 함수를 호출하여 클릭에 대해 각각 응답하는 단일 선택 단추 세트를 정의합니다.
TextArea 하나 이상의 텍스트 행을 포함하는 직사각형을 정의합니다.
TextField 단일 텍스트 행을 포함하는 텍스트 상자를 정의합니다.
풍선 GridTooltip 특수한 풍선 도움말을 정의합니다. 사용자가 눈금 위젯 위에 마우스를 올리면 표시되는 하나 이상의 위젯입니다.
Tooltip 풍선 도움말을 정의합니다. 사용자가 위젯 위에 마우스를 올리면 표시되는 하나 이상의 위젯입니다.
TreeTooltip 특수한 풍선 도움말을 정의합니다. 사용자가 트리 위젯 위에 마우스를 올리면 표시되는 하나 이상의 위젯입니다.

풍선 유형(ToolTip, GridToolTip 및 TreeToolTip)이 위젯 목록에 있어도 각 도구 팁 유형은 기술적으로 Rich UI 핸들러(EGL 핸들러 파트, 스테레오타입 RUIHandler)입니다. 이 경우 핸들러 코드는 Rich UI 위젯과 유사한 기능을 제공합니다. 그러나 모든 위젯에 사용 가능한 함수와 위젯을 도구 팁에 사용할 수는 없습니다. 일반적으로 사용 가능한 필드와 함수에 대한 세부사항은 위젯 특성 및 함수 설정을 참조하십시오.

위젯 선언과 패키지 이름

위젯을 선언하려고 할 때 EGL은 위젯이 상주하는 패키지를 식별하기 위한 두 가지 방법을 제공합니다. EGL 변수를 선언할 때 이 두 개의 방법을 사용할 수 있지만 위젯과 관련하여 특수한 자동 방법을 사용할 수 있습니다.

첫 번째 방밥으로 패키지 이름을 위젯 유형의 이름 앞에 둘 수 있습니다. 형식은 다음과 같습니다.
widgetName com.ibm.egl.rui.widgets.widgetTypeName;
widgetName
위젯 이름
widgetTypeName
위젯 유형의 이름입니다.

EGL Rich UI 편집기는 팔레트에서 디자인 표면까지 위젯을 끌어온 후에 위젯 선언문에 대한 이전 형식을 사용합니다. 개요에 대해서는 EGL Rich UI 편집기에 대한 소개를 참조하십시오.

패키지를 식별하는 두 번째 방법은 소스 코드 앞 부분에 import 문을 포함시키는 것입니다. 다음은 widgetTypeName 위치에서 여러 유형을 참조하는 와일드카드(*) 또는 특정 유형 이름이 필요한 형식입니다.
import com.ibm.egl.rui.widgets.widgetTypeName;

widgetTypeName 위치에 와일드카드를 사용하면 생성된 JavaScript 출력에 불필요한 코드를 추가하게 되므로 이를 권장하지 않습니다.

소스 코드를 작성할 때 위젯을 선언한 후에 import 문을 자동으로 삽입할 수 있습니다.
  1. CtrlShift를 누른 상태에서 O을 누르십시오.
  2. 대화 상자가 표시되면 동일한 이름의 위젯 유형 중에서 선택하십시오. 예를 들어 단추는 Dojo, Silverlight 또는 EGL Rich UI의 단추일 수 있습니다.

널 포인터 예외 방지

위젯은 EGL 참조 변수입니다. 위젯을 정적으로 선언하는 경우(new 연산자 없이) 다음 예에서와 같이 값 설정 블록({})을 지정하십시오.

myButton Button{};

추가 위젯 작성

두 가지 방법으로 사용자 위젯을 작성할 수 있습니다.
  • Rich UI 위젯(Rich UI 핸들러, 스테레오타입 RUIWidget)을 코드할 수 있습니다.
  • JavaScript을 기반으로 하는 EGL 외부 유형을 작성할 수 있습니다. EGL 외부 유형 사용은 기존 JavaScript 라이브러리에 액세스하는 데 유용합니다.

위젯 작성에 대한 세부사항은 Rich UI 위젯 세트 확장을 참조하십시오.

위젯 유형 사용

EGL 위젯 유형은 개발 시 특정한 유형을 알 수 없는 위젯을 승인하는 함수를 정의할 때 사용됩니다. 다음 예(실제가 아님)에서는 함수에서 EGL 연산자 isaas를 사용하여 특정한 유형의 특성과 함수(예: TextField 유형의 text 특성)를 사용 가능하게 하는 방법을 보여줍니다.
import com.ibm.egl.rui.widgets.TextField;

handler MyHandlerPart type RUIhandler{onConstructionFunction = initialization}

   myHelloField TextField{readOnly = true, text = "Hello"};

   function initialization()
      	myInternalFunction(myHelloField);
   end
   function myInternalFunction(theWidget widget in)
     
      case 
         when (theWidget isa TextField)
            myTextField TextField = theWidget as TextField;
            myString STRING = myTextField.text + " World";
            sysLib.writeStdOut(myString);
         when (theWidget isa Button)
            ;
       	 otherwise
       	    ;
      end   endend

핸들러는 Hello world를 표시합니다.

위젯 유형의 변수는 특성에서 위젯을 참조하기 전(특히 initialUI 또는 children 특성에서 위젯을 참조하기 전)에 선언되어야 합니다. (해당 규칙은 단추 또는 TextField와 같은 특정 유형의 변수에는 적용되지 않습니다.)

위젯 유형의 변수는 Rich UI 위젯 및 외부 유형 위젯과 호환 가능합니다.