위젯 특성 및 함수

대부분의 경우 Rich UI 위젯은 EGL 핸들러 파트, 스테레오타입 RUIWidget입니다. 도구 팁, DataGridTooltip 및 TreeTooltip을 제외하고 모든 항목은 스테레오타입 RUIHandler 및, 외부 항목을 기반으로 하는 Dojo 위젯입니다.

다음과 같은 방법으로 위젯 유형에 사용 가능한 특성과 함수를 알 수 있습니다.
  • 선언된 위젯을 사용하려는 경우 컨텐츠 지원을 사용하십시오.
    1. 위젯 이름과 기간을 입력하십시오.
    2. Ctrl-Space를 누르십시오.
  • 또는 위젯 코드가 포함된 EGL 파일을 조사하십시오. 특정 위젯 유형에 대한 세부사항은 다음 소스를 참조하십시오.
    • com.ibm.egl.rui 프로젝트, EGLSource 폴더, com.ibm.egl.rui.widgets 패키지
    • com.ibm.egl.rui.dojo.widgets 프로젝트, EGLSource 폴더, dojo.widgets 패키지

주어진 함수 또는 특성에 액세스하려면 항상 dot 구문을 사용하십시(예: myWidget.myFunction() 또는 myWidget.myProperty).

대부분의 위젯에 사용 가능한 특성

대부분의 EGL 특성은 EGL 시스템 코드에만 사용 가능하여 런타임 시에는 사용 불가능합니다. 그러나 위젯 특성은 필드이므로 런타임 시 코드에 사용할 수 있습니다.

스타일 관련 특성(예: classstyle)은 모든 IBM 제공 위젯에 사용 가능합니다. 스타일에 대한 세부사항은 “위젯 스타일”을 참조하십시오.

다음 특성은 비즈니스 애플리케이션 개발에 유용합니다.
  • children은 종속 위젯 배열(있는 경우)에 대한 액세스를 제공합니다. 세부사항은 이후의 절을 참조하십시오.
  • class는 위젯을 표시할 때 사용되는 캐스케이딩 스타일시트(CSS) 클래스를 식별합니다.
  • disabled는 위젯이 사용 안함 상태인지를 나타내는 부울입니다. 사용 안함 상태인 위젯은 이벤트에 응답할 수 없으며, 대부분의 브라우저에서 텍스트가 회색으로 표시됩니다.
  • id는 특정 위젯에 대한 ID를 지정하거나 검색하는 데 사용되는 문자열입니다. 캐스케이딩 스타일시트(CSS)에서 ID를 사용하여 해당 위젯의 스타일 특성을 식별할 수 있습니다. 또한 EGL을 JavaScript 라이브러리와 통합하는 경우 이 특성을 사용하면 JavaScript 로직으로 사용할 ID를 지정할 수 있습니다.

    이 위젯(예: 상자)이 특정 DOM 요소가 아닌 DOM 하위 트리에 해당하는 경우 이 ID는 하위 트리의 맨 위에 있는 DOM 요소의 ID입니다. DOM에 대한 소개는 “브라우저에서 Rich UI 애플리케이션을 핸들링하는 방법에 대한 이해”를 참조하십시오.

  • position은 위젯의 x와 y 좌표의 의미를 지정하고 다음 값 중 하나를 사용합니다.
    static
    위젯의 x와 y 좌표가 무시되며, 이는 기본 동작입니다. position 값이 static일 때 먼저 x와 y 값을 설정한 다음 position 값을 변경하는 경우 표시된 위치가 변경됩니다.
    absolute
    지정하고 가져온 위젯의 x와 y 좌표가 다릅니다.
    • 지정한 값은 가장 가까운 비정적 상위의 왼쪽 맨 위에 있는 오리진에 상대적이어야 합니다. 해당 좌표는 alignment 값에 영향을 받지 않습니다.
    • 위젯에서 가져온 위젯의 x와 y 좌표 값은 화면이동 막대 높이를 포함하여 브라우저에 상대적입니다.
    relative
    위젯의 x와 y 좌표가 상위의 왼쪽 맨 위에 상대적입니다. 위젯의 상위가 문서 요소인 경우 이 좌표는 표시 가능한 브라우저 영역의 왼쪽 맨 위에 상대적입니다.
  • tabIndex는 위젯의 위치를 탭 순서로 식별하는 정수입니다. 예를 들어 tabIndex 값이 1인 위젯에서 사용자 탭을 멀리 떨어뜨리면 tabIndex 값이 2로 지정된 위젯이 포커스를 받습니다. 10과 20(1과 2가 아님) 같은 숫자를 사용하여 이후에 다른 위젯을 추가할 수 있습니다.

    기본 탭 순서는 브라우저마다 다릅니다.

  • xy 값은 위젯의 x-y 좌표를 참조하는 정수입니다. 해당 좌표의 의미는 position 특성 값에 따라 다릅니다. position 특성에 대한 설명에서 제안된 대로 그래픽 오리진은 브라우저 창의 왼쪽 맨 위거나 상위 위젯의 왼쪽 맨 위입니다. 다음 규칙이 적용됩니다.
    • x 값은 오리진의 오른쪽으로는 양수이고, 왼쪽으로는 음수입니다.
    • y 값은 오리진의 아래로는 양수이고, 위로는 음수입니다.

    상위 외부의 표시 가능한 영역 밖에 위젯을 둘 수 있습니다.

  • zIndex는 동일한 x와 y 위치에 있는 다른 위젯과 관련하여 위젯의 위치(프론트 가까이 있는 정도)를 식별하는 정수입니다. zIndex 값이 상대적으로 큰(예: 4) 위젯은 zIndex 값이 상대적으로 작은(예: 2) 위젯보다 프론트에 가깝습니다. position 값이 정적인 경우 zIndex 값은 아무 효과가 없습니다.
다음 특성은 스테레오타입 RUIWidget을 기반으로 하는 새 위젯 유형을 개발하는 경우에 특히 유용합니다.
  • innerHTML은 컨테이너(예: div, floatLeft 또는 floatRight 위젯)에서 HTML을 지정하거나 검색하는 데 사용되는 문자열입니다.
  • innerText는 컨테이너에서 텍스트를 지정하거나 검색하는 데 사용되는 문자열입니다. innerText를 사용하여 유형에 특정한 텍스트 특성을 제공할 수 있습니다.
  • logicalParent은 컨테이너인 위젯 유형을 개발하는 데 사용됩니다. 컨테이너에 하위를 추가하는 코드를 작성할 때 적절한 상위 DOM 요소를 참조하도록 logicalParent 특성을 설정합니다. DOM에 대한 소개는 “브라우저에서 Rich UI 애플리케이션을 핸들링하는 방법에 대한 이해”를 참조하십시오.

    예를 들어 상자의 하위 요소와 관련하여 parent 특성은 상자가 아니라 DOM 테이블 요소에 있는 DOM TD 요소를 참조합니다. 그러나 logicalParent 특성은 상자를 표시하고 DOM 테이블 요소의 상위인 DOM Div 요소를 참조합니다.

    parent는 위젯 유형 개발에 사용되며 상위 DOM 요소에 대한 액세스를 제공합니다. DOM에 대한 소개는 “브라우저에서 Rich UI 애플리케이션을 핸들링하는 방법에 대한 이해”를 참조하십시오.
다음은 아랍어 또는 히브리어 사용자와 상호작용하기 위한 특성입니다.
  • numericSwap은 아랍어의 힌디 숫자를 사용할 수 있도록 하는 문자열("Yes" 또는 "No")입니다. 힌디 숫자를 사용하려면 numericSwapreverseTextDirection을 "Yes"로 설정하십시오.
  • reverseTextDirection는 위젯에서 텍스트 방향을 반대로 돌릴지를 표시하는 문자열("Yes" 또는 "No")입니다.
  • symmetricSwap은 표시되는 텍스트의 논리적인 의미를 유지하기 위해 특수한 문자 쌍을 바꿀지를 표시하는 문자열("Yes" 또는 "No")입니다. 이 값이 "Yes"면 <, >, [, {과 같은 쌍 문자를 >, <, ], }로 바꿉니다.
  • textLayout은 "Visual" 또는 "Logical" 문자열 중 하나를 사용합니다.
    • 이 설정이 "Visual"이고 사용자가 "A"를 입력한 후 "B"를 입력한 경우(또한 "A"와 "B"가 양방향 언어의 문자인 경우) 표시되는 문자는 "AB"입니다. 표시되는 순서는 입력한 순서대로 왼쪽에서 오른쪽이며, 이는 데이터가 로컬 메모리에 저장되는 순서입니다.
    • 설정이 "Logical"인 경우 표시되는 문자는 "BA"입니다.

    대부분의 경우 z/OS® 또는 IBM® i를 실행하는 머신에서 파생된 아랍어 또는 히브리어 컨텐츠에는 "Visual" 설정이 적절합니다.

  • widgetOrientation은 아랍어와 히브리어 텍스트를 위한 특성입니다. 이 특성은 "LTR"(왼쪽에서 오른쪽) 또는 "RTL"(오른쪽에서 왼쪽) 문자열 중 하나를 사용합니다. "LTR"을 지정하면 위젯이 표준 비양방향 위젯으로 작동합니다. RTL을 지정하면 위젯이 미러링됩니다. 즉 드롭 다운 목록의 화면이동 막대가 왼쪽에 표시되고, 입력 필드의 텍스트 입력 방향이 오른쪽에서 왼쪽이 되며, 텍스트가 오른쪽에 맞추기로 설정됩니다.
다음 특성은 내게 필요한 옵션 기능을 추가합니다.
  • ariaLive는 지원 기술에 제공되는 지원 레벨을 표시합니다. 즉 화면 영역에 대한 업데이트를 사용자에게 알릴 수 있는 스크린 리더의 경우입니다. 해당 기술에 대한 스펙은 다음과 같습니다.

    http://www.w3.org/TR/wai-aria

    ariaLive 값은 따옴표로 묶인 문자열("off", "polite". "assertive" 또는r "rude")이며, 각각에 대해서는 p특성: live의 스펙 절에 설명되어 있습니다.

  • ariaRole은 지원 기술에 사용되는 위젯에 지정된 역할을 표시합니다. 세부사항은 이전에 설명한 스펙을 참조하십시오.

    ariaRole 값은 따옴표로 묶인 문자열("button" 또는 "listbox")이며, 각각에 대해서는 p역할의 스펙 절에 설명되어 있습니다.

대부분의 위젯에 사용 가능한 함수

다음 함수는 RUIWidget 유형의 모든 IBM 제공 위젯에 사용 가능합니다.
  • fadeIn 함수를 사용하면 위젯이 페이드 인(천천히 표시됨)되고 fadeOut 함수를 사용하면 위젯이 페이드 아웃(천천히 사라짐)됩니다.
    fadeIn (duration int in, callback EffectCallback)
    fadeOut (duration int in, callback EffectCallback)
    각 함수는 두 매개변수를 사용합니다.
    duration
    위젯이 페이드 인 또는 페이드 아웃될 때 프로세스의 시작과 끝 사이의 시간(밀리초)입니다.
    callback
    위젯이 페이드 인 또는 아웃되는 즉시 호출되는 함수에 대한 참조입니다. 이 함수에는 매개변수가 없으며 리턴값이 없습니다. 함수를 지정하지 않으려면 이 인수를 null로 설정하십시오.
    예제는 다음과 같습니다.
    myButton.fadeOut(1000, null);
  • focus 함수를 사용하면 위젯이 포커스를 받습니다.
    focus()

    예를 들어 포커스를 받은 단추가 강조표시되고 사용자가 ENTER 키를 누르면 단추를 클릭한 것과 동일합니다. 이와 유사하게 사용자가 먼저 필드를 탭하지 않고 인쇄 가능한 문자를 입력하여 데이터를 입력할 수 있도록 포커스를 받은 텍스트 필드(읽기 전용이 아님)에 커서가 포함됩니다.

    사용자는 TAB을 반복적으로 눌러 사용 가능한 필드를 순환할 수 있습니다. 키를 누를 때마다 포커스가 다음 애플리케이션 필드 또는 브라우저에 있는 필드(예: 웹 주소 필드)로 이동합니다.

    다음은 focus의 호출 예입니다.
    myButton.focus();
  • morph 함수를 사용하면 시간 경과에 따라 위젯 표시를 변경할 수 있습니다. 이 함수는 사용자 함수 중 하나를 반복적으로 호출합니다. 이 방식으로 사용자 코드는 런타임 호출로 인한 동작을 지정합니다.
    morph (duration int in, callback EffectCallback, morphFunction MorphFunction )
    이 함수는 세 매개변수를 사용합니다.
    duration
    프로세스의 시작과 끝 사이의 시간(밀리초)입니다.
    callback
    프로세스가 완료되는 즉시 호출되는 함수에 대한 참조입니다. 이 함수에는 매개변수가 없으며 리턴값이 없습니다. 함수를 지정하지 않으려면 이 두 번째 인수를 null로 설정하십시오.
    customMorphFunction
    사용자 정의 morph 함수에 대한 참조이며, 이는 이전에 설명한 기간 동안 반복적으로 호출되는 함수입니다. 사용자 정의 morph 함수는 두 매개변수를 사용합니다. 변경될 위젯과 EGL 런타임에서 지정한 float입니다. float는 0 - 1 사이의 소수이며, 기간의 끝으로 가는 진행상태를 반영합니다. (사용자 정의 morph 함수를 호출할 때마다 해당 float의 값이 커집니다.) 이 소수는 사용 가능한 기간 및 사용자 정의 로직을 실행하는 데 필요한 시간 하에서 사용자 정의 morph 함수가 호출되는 횟수에 대한 계산을 기반으로 합니다. 사용자 정의 morph 함수에는 리턴값이 없습니다.
    예제는 다음과 같습니다.
    myButton.morph(1000, null, myCustomMorphFunction);
  • resize 함수를 사용하여 시간 경과에 따라 위젯 크기를 변경할 수 있습니다.
    resize (width int in, height int in,
           duration int, callback EffectCallback)
    이 함수는 네 매개변수를 사용합니다.
    width
    원하는 마지막 너비(픽셀)입니다.
    height
    원하는 마지막 높이(픽셀)입니다.
    duration
    프로세스의 시작과 끝 사이의 시간(밀리초)입니다.
    callback
    프로세스가 완료되는 즉시 호출되는 함수에 대한 참조입니다. 이 함수에는 매개변수가 없으며 리턴값이 없습니다. 함수를 지정하지 않으려면 이 인수를 null로 설정하십시오.
    예제는 다음과 같습니다.
    myButton.resize(100, 100, 1000, myFunction);

하위 특성 및 관련 함수

“Rich UI 위젯”에서 위젯의 서브세트는 “컨테이너 위젯”으로 분류됩니다. 해당 위젯에는 children 특성이 있으며, 이는 종속 위젯 배열을 지정합니다. 배열에 있는 모든 요소는 이름 지정된 위젯 또는 익명의 위젯(여기에 설명됨)을 참조합니다.
  • 이름 지정된 위젯은 하위 배열 외부에서 선언되며, 다음 코드에서의 모든 위젯에 해당됩니다.
    myInTextField TextField{};
    myButton Button{ text = "Input to Output", onClick ::= click };
    myOutTextField TextField{};
    
    myBox Box{ columns = 3, 
                 children = [ myInTextField,  myButton, myOutTextField ]};

    배열에서 이름 지정된 위젯을 여러 번 참조하는 경우 마지막 참조만 사용되고 다른 참조는 무시됩니다.

  • 익명 선언은 키워드 new로 시작하며, 사용자 코드에서 참조될 수 없습니다. 이를 사용하면 위젯 위치와 관련된 모든 시점에서 위젯을 작성할 수 있습니다.
    myInTextField TextField{};
    myTextOutField TextField{};
    
    myBox box{columns=3, 
              children=[myInTextField,
                        new Button{ text = "Input to Output", onClick ::= click},
                        myOutTextField]};
많은 경우에 상위 위젯은 상자 또는 Div 유형이고 하위 위젯의 위치는 상위 유형에 영향을 받습니다.
  • 상자 위젯에는 columns 특성이 포함되고, 해당 특성의 값은 children 배열에 나열된 각 위젯의 기본 위치를 지정합니다. 예를 들어 columns=1인 경우 배열에 나열되는 위젯은 단일 세로 열에 표시됩니다. 이와 유사하게 columns=2인 경우 모든 두 번째 위젯은 두 번째 열에 표시되고, 이후의 위젯(예: 배열의 세 번째)은 새 행의 첫 번째 열에 표시됩니다.

    일반적으로 columns의 값은 n이고 배열의 n+1 위치에 있는 위젯은 새 행의 첫 번째 열에 표시됩니다. columns 값을 지정하지 않으면 상자 위젯의 하위가 오른쪽으로 확장됩니다.

  • Div 위젯의 하위가 오른쪽으로 확장되며, 여기에는 표시 가능한 영역의 오른쪽으로 확장된 위젯에 대해 액세스를 제공하는 가로 화면이동 막대(필요한 경우)가 있습니다.

다른 위젯의 하위인 Div 위젯은 세로로 표시되며, 이전 위젯의 바로 아래에 표시됩니다.

함수에서 children 값을 재지정하고, 이러한 방식으로 웹 페이지를 변경할 수 있습니다. (이와 유사하게 on-construction 함수에서 initialUI 값을 재지정할 수 있습니다.) 예를 들어 지정된 위젯을 선언했다고 가정하면 다음 구문이 유효합니다.
   myBox.children = [myInTextField, myButton02, myOutTextField];
children(또는 initialUI) 배열을 재지정할 수 있어도 동적 배열 함수(예: appendElement) 또는 연산자 ::=을 사용하여 변경하지 마십시오. 대신 웹 특정 함수 appendChild, appendChildren, removeChildremoveChildren을 사용하십시오. 다음은 지정된 위젯을 선언했다고 가정한 예입니다.
Function myFirstFunction(){} 
   myBox.appendChild(myOtherButton);
   myBox.appendChildren([myOtherTextField, myOtherButton02]);
   myBox.removeChild(myOtherButton);
   myBox.removeChildren();
end
이와 유사하게 다음에 표시된 대로 맨 위 DOM 요소에서 하위 요소를 추가하거나 제거할 수 있습니다.
document.body.appendChild(myOtherButton);
document.body.appendChildren([myOtherTextField, myOtherButton02]);
document.body.removeChild(myOtherButton);
document.body.removeChildren(); 

appendChildremoveChild 함수 각각은 단일 위젯을 허용합니다. appendChildren은 위젯 배열을 허용하고 removeChildren은 인수를 사용하지 않습니다. appendChild 또는 appendChildren의 경우 위젯 선언은 익명 또는 이름 지정입니다. removeChild의 경우 위젯 선언은 이름 지정이어야 합니다.

참고: 애플리케이션에서 removeChild 또는 removeChildren 함수를 사용해도 메모리 할당에 아무 영향을 미치지 않습니다. 잠재적으로 중요한 이 문제에 대한 세부사항은 “Rich UI 메모리 관리”를 참조하십시오.

다른 상위에 위젯을 지정하는 효과

특정 위젯은 다른 한 위젯(또는 이후의 예에서 표시되는 문서 본문)에 대해서만 하위가 될 수 있습니다. 위젯에 상위가 있는 경우 위젯이 다른 상위의 하위가 되도록 할 수 있습니다. 이러한 재지정을 하위 위젯의 재상위 지정이라고 합니다.

다음 myTopBox 선언을 고려하십시오. 이는 두 개의 다른 상자의 상위입니다.
   myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua",
      children =[myBox02, myBox03 ]};
initialUI 배열의 유일한 요소인 myBox03을 작성하는 Rich UI 핸들러에 앞의 선언이 있다고 가정하십시오.
handler MyTest type RUIhandler{initialUI =[myBox03]}

런타임 시 initialUI에 대한 지정은 myTopBox 선언 이후에 처리됩니다. myBox03은 문서 본문의 상위가 되고 myTopBox는 유일한 myBox02 하위가 있는 상태 그대로 남습니다.

사용자 코드는 사용자 단추 클릭과 같은 런타임 이벤트에 대한 응답으로 myTopBox를 웹 페이지에 추가할 수 있습니다. 다음 코드를 실행하고 단추를 클릭하여 효과를 확인할 수 있습니다.
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;

handler MyTest type RUIhandler{initialUI =[myBox03]}
 
   myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua", 
      children =[myBox02, myBox03 ]};
 
   myBox02 Box{padding = 8, columns = 2, backgroundColor = "DarkGray", 
      children =[myHelloField ]};
 
   myBox03 Box{padding = 8, columns = 3, backgroundColor = "CadetBlue", 
      children =[myInTextField, myButton, myOutTextField] };
 
   myHelloField TextField{readOnly = true, text = "Hello"};
   myInTextField TextField{};
   myButton Button{text = "Input to Output", onClick ::= click};
   myOutTextField TextField{};
 
   function click(e EVENT in)
      document.body.appendChildren([myTopBox]);		
   endend

문서 본문에서 모든 하위를 제거하는 효과

다음 명령문을 고려해 보십시오.
   document.body.removeChildren();
효과는 두 가지입니다.
  • 웹 페이지에서 모든 하위 위젯을 제거합니다.
  • 외부 스타일시트(있는 경우)에 대한 액세스를 제거합니다. (스타일시트는 “스타일시트”에서 설명됨)
외부 스타일시트에 대한 액세스를 제거하지 않고 문서 본문에서 하위를 제거할 경우 다음 명령문에서와 같이 특정 하위를 제거하십시오.
   document.body.removeChild(myBox);