Rich UI 핸들러 파트

Rich UI 애플리케이션의 기본 컴포넌트는 Rich UI 핸들러 파트이며, 이는 RUIHandler 스테레오타입의 핸들러입니다. 핸들러 파트는 웹 페이지에 위젯을 두고 사용자의 단추 클릭과 같은 이벤트를 핸들링합니다. 한 핸들러 파트의 위젯과 함수를 다른 위젯과 함수에 사용 가능하도록 할 수 있습니다. 이는 “여러 핸들러를 사용하여 Rich UI 애플리케이션 작성”에 설명되어 있습니다.

다음은 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라는 단어를 입력하고 단추를 클릭하면 사용자 인터페이스가 다음과 같이 표시됩니다.

RUI 핸들러 출력 예

DOM 트리를 설명하는 데 동일한 예가 사용됩니다. 세부사항은 “브라우저에서 Rich UI 애플리케이션을 다루는 방법에 대한 이해”를 참조하십시오.

Rich UI 핸들러 파트의 특성은 Rich UI 애플리케이션에서 맨 위의 핸들러로 사용되는 경우에만 사용됩니다. 이 특성은 선택적이며 다음과 같습니다.
cssFile
캐스케이딩 스타일시트(CSS 파일)를 지정합니다. 이는 개별 위젯의 표시 특성 또는 위젯의 카테고리를 설정합니다. 이 특성은 WebContent 디렉토리에 대한 상대 경로를 허용합니다. 배치 시 CSS 파일은 HTML 파일에 추가된 <link> 항목에서 참조됩니다.
다음은 설정 예입니다.
Handler ButtonTest Type RUIHandler 
   { children = [ui], cssFile = "buttontest/coolblue.css" }
다음은 CSS 파일의 예입니다.
.EglRuiGridTable 
  { border: 3px solid black; }  

  .EglRuiGridHeader 
  { color:yellow; 	
    background-color:red;	 }  

  .EglRuiGridCell 
  { color:black; 	
    background-color:aqua; } 

cssFileincludeFile 특성을 둘 다 지정하는 경우 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 특성을 사용하는 경우 여러 브라우저에서 애플리케이션을 테스트하십시오.
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 배열에 지정된 위젯에 하위 및 기타 자손 항목을 추가하는 데 사용됩니다.