Rich UI 위젯 세트 확장
EGL을 사용하여 새 위젯 유형을 작성하거나, JavaScript를 사용할 수 있습니다.
Rich UI 위젯
Rich UI 위젯은
EGL에 작성되며 RUIWidget 유형입니다(egl.ui.rui.RUIWidget).
다음과 같이 자주 수행됩니다.
- HTML 태그 이름을 tagName 특성에 지정하십시오. 또는 다음 명령문이 적용되는 경우
targetWidget 특성에 선언된 위젯을 지정하십시오.
- 참조되는 위젯 유형의 기초가 되는 HTML 태그는 정의하는 위젯 유형의 기초입니다.
- 참조되는 위젯 이름을 사용하여 해당 위젯 유형에 대해 정의된 함수와 특성을 액세스할 수 있습니다.
tagName과 targetWidget 둘 다 지정하는 경우 후자가 적용됩니다.
- 이후의 절에서 나열되는 일부 또는 모든 특성을 지정하십시오.
- 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를 작성하려면 다음과 같이 수행하십시오.
- 위젯에 대한 컨텐츠를 포함시킬 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', { } ); - 사용자 정의 JavaScript가 있는 패키지 이름. 이 패키지 이름은 필수이며, 대소문자를 구분하고,
JavaScript가 포함된 WebContent 서브폴더를 식별합니다.
- 현재 대괄포( { } ) 안에서 다음 아웃라인을 반영하는 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+"\"]"; } - 각 위젯은 호출할 JavaScript 런타임에 대해 다음 함수를 지정할 수 있습니다.
- 새 위젯 인스턴스가 작성되고 해당 함수를 사용(예: 데이터 초기화에 사용)할 수 있을 때마다 constructor 함수가 호출됩니다.
- 위젯에 대해 HTML 요소가 작성되고 해당 함수를 사용(예: 요소의 초기 특성 설정에 사용)할 수 있을 때마다 egl$$initializeDOMElement 함수가 호출됩니다.
- 애플리케이션 개발자가 새 위젯의 children 특성(있는 경우)을 업데이트할 때마다 childrenChanged 함수가 호출됩니다.
각 위젯에는 this.egl$$DOMElement 필드가 있습니다. 이 필드는 위젯에 대해 작성된 HTML 요소(또는 최상위 레벨 HTML 요소)를 나타냅니다.
- 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 편집기에서 사용하는 파트 특성입니다.
- @EGLProperty는 특성 값을 가져오거나 설정하는 함수를 식별하기 위한 필드 레벨 특성입니다. 해당 값은 작성 중인 위젯 유형을 기반으로 하여 개발자가 위젯을 선언하거나 업데이트할 때 설정됩니다.