Rich UI 위젯 세트 확장

EGL을 사용하여 새 위젯 유형을 작성하거나, JavaScript를 사용할 수 있습니다.

Rich UI 위젯

Rich UI 위젯은 EGL에 작성되며 RUIWidget 유형입니다(egl.ui.rui.RUIWidget). 다음과 같이 자주 수행됩니다.
  • HTML 태그 이름을 tagName 특성에 지정하십시오. 또는 다음 명령문이 적용되는 경우 targetWidget 특성에 선언된 위젯을 지정하십시오.
    • 참조되는 위젯 유형의 기초가 되는 HTML 태그는 정의하는 위젯 유형의 기초입니다.
    • 참조되는 위젯 이름을 사용하여 해당 위젯 유형에 대해 정의된 함수와 특성을 액세스할 수 있습니다.

    tagNametargetWidget 둘 다 지정하는 경우 후자가 적용됩니다.

  • 이후의 절에서 나열되는 일부 또는 모든 특성을 지정하십시오.
  • on-construction 함수를 지정하고 해당 함수에서 CSS 클래스 이름을 설정하십시오.
  • 다른 위젯의 기능을 빌드하십시오.
다음은 import 문이 필요하지 않는 H3 정의에 대한 아웃라인입니다.
Handler H3 type RUIWidget{tagName = "h3", onConstructionFunction = start,
   @VEWidget{
				category = "New Widgets",
				template = "my.package.H3{ text=\"The Heading Text\" }",
				smallIcon = "icons/h3small.gif",
				largeIcon = "icons/h3large.gif" 	}}

   text String  { @EGLProperty { getMethod=getText, setMethod=setText }, 
                  @VEProperty{}};
   function start()
      class = "EglRuiH3";
   end

   function setText(textIn String in)
      text = textIn;
      this.innerText = textIn;
   end

   function getText() returns (String)
      return (text);
   end
end
이를 정의하면 유형 H3을 기반으로 하는 위젯을 작성할 수 있습니다. 예를 들어 다음 선언은 중첩된 H3 위젯이 있는 상자를 작성합니다.
ui Box { children = [ 
            new H3 { text = "Summary" }
       	]};  	

외부 유형 위젯

사용자 정의 JavaScript를 작성하거나 특수 JavaScript 라이브러리에 액세스하여 외부 유형 위젯을 작성할 수 있습니다.

JavaScript를 기반으로 하여 새 Rich UI를 작성하려면 다음과 같이 수행하십시오.
  1. 위젯에 대한 컨텐츠를 포함시킬 JavaScript 파일을 작성하십시오. egl.defineWidget을 호출하고 다음 인수를 지정하십시오.
    • 사용자 정의 JavaScript가 있는 패키지 이름. 이 패키지 이름은 필수이며, 대소문자를 구분하고, JavaScript가 포함된 WebContent 서브폴더를 식별합니다.

      첫 번째 폴더 아래에 있는 모든 서브폴더에 대해 슬래시 대신 마침표를 포함시키십시오. 예를 들어 JavaScript가 WebContent/myPkg/test 폴더에 있는 경우 packageName 값은 myPkg.test입니다.

    • 위젯 클래스의 이름(예: Button). 이 클래스 이름은 작성할 외부 유형의 이름입니다.
    • 상위 위젯에 대한 EGL 외부 유형의 패키지 이름. 사용자의 외부 유형을 확장할 수 있습니다. 그러나 대부분의 경우 상위 유형은 위젯이며, 이는 사용자에게 제공되고 다른 EGL 외부 유형 위젯의 기초가 됩니다. 상위 유형이 위젯인 경우 패키지 이름은 egl.ui.rui입니다.
    • 상위 위젯에 대한 EGL 외부 유형 이름(예: Widget).
    • 새 위젯에 대한 DOM 요소의 태그 이름(예: button).
    예를 들어 다음과 같습니다.
    egl.defineWidget( 'egl.rui.widgets', 'Button',
                      'egl.rui.widgets', 'Widget',
                      'button', { } );
  2. 현재 대괄포( { } ) 안에서 다음 아웃라인을 반영하는 JavaScript 함수를 정의하십시오. 여러 함수를 쉼표로 구분하십시오.
    "functionName" : function(/*parameters*/)
    { //JavaScript Source }
    예를 들어 다음과 같습니다.
    "getSelected" : function() {
       return this.check.checked;
    },
    "setSelected" : function(value) {
       this.check.checked = value;
    },
    "toString" : function() {
       return "[CheckBox, text=\""+this.egl$$DOMElement.innerHTML+"\"]";
    }
  3. 각 위젯은 호출할 JavaScript 런타임에 대해 다음 함수를 지정할 수 있습니다.
    • 새 위젯 인스턴스가 작성되고 해당 함수를 사용(예: 데이터 초기화에 사용)할 수 있을 때마다 constructor 함수가 호출됩니다.
    • 위젯에 대해 HTML 요소가 작성되고 해당 함수를 사용(예: 요소의 초기 특성 설정에 사용)할 수 있을 때마다 egl$$initializeDOMElement 함수가 호출됩니다.
    • 애플리케이션 개발자가 새 위젯의 children 특성(있는 경우)을 업데이트할 때마다 childrenChanged 함수가 호출됩니다.

    각 위젯에는 this.egl$$DOMElement 필드가 있습니다. 이 필드는 위젯에 대해 작성된 HTML 요소(또는 최상위 레벨 HTML 요소)를 나타냅니다.

  4. EGL 소스 파일에서 egl.ui.rui.Widget 또는 기존 위젯으로부터 확장되는 EGL 외부 유형을 작성하십시오. 외부 유형은 JavaScriptObject 스테레오타입을 필요로 하며 이는 “JavaScript의 외부 유형”에 설명되어 있습니다.

    외부 유형을 작성할 때 다음 절에 나열되는 일부 또는 모든 특성을 지정하십시오.

위젯 세트 확장을 위한 EGL 특성

  • 새 EGL 또는 외부 유형 위젯을 작성할 때 이 위젯이 다른 위젯과 동일한 방법으로 핸들링되도록 다음 일부 또는 모든 EGL 특성을 설정하십시오.
    • @EGLProperty는 특성 값을 가져오거나 설정하는 함수를 식별하기 위한 필드 레벨 특성입니다. 해당 값은 작성 중인 위젯 유형을 기반으로 하여 개발자가 위젯을 선언하거나 업데이트할 때 설정됩니다.

      @EGLProperty 특성은 Rich UI 위젯에만 해당됩니다. 외부 유형 위젯에 해당하는 특성은 @JavaScriptProperty이며 “JavaScript 코드의 외부 유형”에 설명되어 있습니다.

    • @MVCView는 사용자가 위젯을 제어기 보기로 사용할 수 있는 파트 특성입니다. 제어기와 제어기 보기에 대한 배경 정보는 “Rich UI 유효성 검증 및 형식화”를 참조하십시오.
    • @Override는 일반적으로 Rich UI 또는 외부 유형 위젯에 제공되는 함수를 대체함을 표시하는 데 사용되는 함수 특성입니다.
    • @VEEvent
    • @VEProperty
    • @VEWidget은 팔레트를 새로 고칠 때 위젯 특정 항목을 팔레트에 추가하기 위해 EGL 편집기에서 사용하는 파트 특성입니다.