Rich UI 핸들러 파트
Rich UI 애플리케이션의 기본 컴포넌트는 Rich UI 핸들러 파트이며, 이는 RUIHandler 스테레오타입의 핸들러입니다. 핸들러 파트는 웹 페이지에 위젯을 두고 사용자의 단추 클릭과 같은 이벤트를 핸들링합니다. 한 핸들러 파트의 위젯과 함수를 다른 위젯과 함수에 사용 가능하도록 할 수 있습니다. 이는 “여러 핸들러를 사용하여 Rich UI 애플리케이션 작성”에 설명되어 있습니다.
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 ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
onConstructionFunction = initialization}
myHelloField TextField
{ readOnly = true, text = "Hello" };
myInTextField TextField{};
myButton Button{ text = "Input to Output", onClick ::= click };
myOutTextField TextField{};
myBox03 Box{ padding=8, columns = 3,
children = [ myInTextField, myButton, myOutTextField ],
backgroundColor = "CadetBlue" };
myBox02 Box{ padding=8, columns = 2, children = [myHelloField],
backgroundColor = "DarkGray"};
myTopBox Box{ padding=8, children = [ myBox02, myBox03 ],
columns = 1, backgroundColor = "Aqua" };
function initialization()
end
function click(e EVENT in)
myOutTextField.text = myHelloField.text + " " + myInTextField.text;
end
end
사용자가 텍스트 상자의 왼쪽 하단에 World라는 단어를 입력하고 단추를 클릭하면 사용자 인터페이스가 다음과 같이 표시됩니다.

DOM 트리를 설명하는 데 동일한 예가 사용됩니다. 세부사항은 “브라우저에서 Rich UI 애플리케이션을 다루는 방법에 대한 이해”를 참조하십시오.
- cssFile
- 캐스케이딩 스타일시트(CSS 파일)를 지정합니다. 이는
개별 위젯의 표시 특성 또는 위젯의 카테고리를 설정합니다.
이 특성은 WebContent 디렉토리에 대한 상대 경로를 허용합니다.
배치 시 CSS 파일은 HTML 파일에 추가된 <link> 항목에서 참조됩니다.
다음은 설정 예입니다.
다음은 CSS 파일의 예입니다.Handler ButtonTest Type RUIHandler { children = [ui], cssFile = "buttontest/coolblue.css" }.EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; }cssFile 및 includeFile 특성을 둘 다 지정하는 경우 cssFile 특성에서 참조하는 CSS 컨텐츠가 우선합니다. includeFile 특성에서 컨텐츠를 참조하면 배치된 HTML 파일에 <link> 항목이 임베드되기 때문에 해당 컨텐츠가 우선합니다.
Rich UI의 스타일 지원에 대한 추가 세부사항은 “위젯 스타일”을 참조하십시오.
- includeFile
- 배치된 HTML. 파일의 포함 파일을 지정합니다. cssFile 특성과 같이 includeFile 특성은
WebContent 디렉토리에 대한 상대 경로를 허용합니다. 다음은 설정 예입니다.
Handler ButtonTest Type RUIHandler { children = [ui], includeFile = "buttontest/coolblue.css" }다음은 파일 유형에 대한 세부사항입니다.- css 또는 html 이외의 확장자를 가진 파일은
<script> 요소에 포함됩니다.
<script> <!-- file contents here --> </script> - html 또는 css 확장자를 가진 파일이 그대로 포함됩니다.
파일 확장자가 css인 경우 스타일 지시문이 <style> 요소에 포함되어야 합니다.
<style type="text/css"> .EglRuiGridTable { border: 3px solid black; } .EglRuiGridHeader { color:yellow; background-color:red; } .EglRuiGridCell { color:black; background-color:aqua; } </style>파일 확장자가 html인 경우 다음 명령문이 적용됩니다.- Rich UI 프로젝트에서 작업하는 경우 xref 속성이 포함된 파일을 볼 때 제품에서 경고 메시지를 표시할 수 있습니다.
예를 들어 다음은 개발 시 WebContent/MyFolder 폴더에 있는 MyIncludeFile.html 파일의 컨텐츠입니다.
<link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">이 예에서 경고 메시지는 href 값이 기존 파일을 참조하지 않음을 나타냅니다. 개발 시 편집기에서 실제 파일(WebContent/css/dashboard.css)이 아닌 WebContent/MyFolder/css/dashboard.css 파일을 찾기 때문에 경고가 발생합니다. <href> 태그 값에 WebContent 디렉토리의 상대 경로가 포함되었는지 확인하고 다른 경로가 필요하다는 경고 메시지는 무시하십시오.
- 일부 브라우저에서는 HTML 파일의 포함 파일(<html> 요소가 배치된 HTML 파일에 놓임)이 유효합니다. includeFile 특성을 사용하는 경우 여러 브라우저에서 애플리케이션을 테스트하십시오.
- Rich UI 프로젝트에서 작업하는 경우 xref 속성이 포함된 파일을 볼 때 제품에서 경고 메시지를 표시할 수 있습니다.
예를 들어 다음은 개발 시 WebContent/MyFolder 폴더에 있는 MyIncludeFile.html 파일의 컨텐츠입니다.
- css 또는 html 이외의 확장자를 가진 파일은
<script> 요소에 포함됩니다.
- initialUI
- 초기 DOM 트리 문서 요소의 하위 위젯을 지정합니다. 배열에서 이름 지정된 위젯을 여러 번 참조하는 경우 마지막 참조만 사용되고 다른 참조는 무시됩니다.
- onConstructionFunction
- on-construction 함수를 지정합니다. 이는 핸들러 실행이 시작될 때 호출되는 핸들러 함수입니다. on-construction 함수에서 또는 이 함수로부터 호출된(직접 또는 간접) 함수에서 initialUI 값을 재설정할 수 있습니다. 그러나 on-construction 함수가 종료되면 initialUI 값이 일정하게 됩니다.
- theme
- 위젯의 모양이 애플리케이션 전체에서 일치되도록 합니다.
Claro 또는 Tundra 테마를 지정할 수 있습니다. 기본값은 Claro입니다. Dojo 위젯이 포함된 애플리케이션을 코딩하는 경우
Nihilo 및 Soria 테마를 사용할 수도 있지만 해당 스펙은 Dojo 위젯에만 영향을 미칩니다.
위젯에 테마가 없는 경우 스타일이 위젯에 특정하게 사용됩니다.
런타임 시 ruiLib.setTheme()를 호출하여 새 테마를 설정할 수 있으며, ruiLib.getTheme()를 호출하여 사용 중인 테마 이름을 검색할 수 있습니다.
테마를 사용하려면 필요한 CSS 파일을 사용자 CSS 파일로 가져오는 명령문을 코딩해야 합니다. 세부사항은 “애플리케이션에 사용할 테마”를 참조하십시오.
- title
- HTML <title> 요소의 값을 지정합니다.
기본값은 핸들러 이름입니다.
런타임 시 ruiLib.setTitle()을 호출하여 새 제목을 설정할 수 있으며, ruiLib.getTitle() 함수를 호출하여 사용 중인 제목 이름을 검색할 수 있습니다.
표시된 대로 상자 위젯에는 여러 특성이 포함됩니다. 특히 children 특성이 있습니다. 이 특성은 핸들러가 initialUI 배열에 지정된 위젯에 하위 및 기타 자손 항목을 추가하는 데 사용됩니다.