위젯 스타일

개별 위젯의 많은 표시 특성은 스타일을 포함하는지에 따라 다릅니다. 규칙은 다음과 같습니다.
  • 캐스케이딩 스타일시트(CSS)에 저장된 스타일 클래스를 참조할 수 있습니다.
    • 모든 Rich UI 애플리케이션은 Rich UI 시스템 프로젝트에 있는 CSS 파일로부터 스타일을 액세스합니다. 여기서는 프로젝트 이름이 com.ibm.egl.rui입니다. 해당 CSS 파일에 액세스하려면 WebContent 폴더와 css 서브폴더를 펼치십시오. 업데이트하면 시간에 지남에 따라 유지보수 문제가 발생할 수 있으므로 이 파일은 그대로 두는 것이 좋습니다.
    • 사용자 소유의 CSS 파일을 유지보수하여 제공된 스타일을 대체하고 보충할 수 있습니다. 다음 두 방법으로 이 파일을 Rich UI 핸들러 파트에 사용할 수 있습니다.
      • 파트 특성 cssFile을 설정할 수 있습니다. 이는 WebContent 디렉토리에 대한 상대 경로를 허용합니다.
        다음은 설정 예입니다.
        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; } 

        cssFile 특성과 includeFile 특성(다음에 설명됨)을 둘 다 지정하는 경우 cssFile 특성에서 참조하는 CSS 컨텐츠가 우선합니다.

      • 파트 특성 includeFile을 설정할 수 있습니다. 이는 WebContent 디렉토리에 대한 상대 경로를 허용합니다.
        다음은 설정 예입니다.
        Handler ButtonTest Type RUIHandler 
           { children = [ui], includeFile = "buttontest/coolblue.css" }

        이 옵션에 대한 세부사항은 Rich UI 핸들러 파트를 참조하십시오.

  • Rich UI에 제공된 각 위젯 유형은 CSS의 포함에 대한 스타일 클래스 이름을 지정합니다. 클래스 이름에는 다음 패턴이 있습니다. 여기서 WidgetTypeName은 TextArea와 같은 위젯 유형 이름입니다.
    EglRuiWidgetTypeName

    이 규칙의 목적은 애플리케이션 전체에서 일관성을 유지할 수 있도록 웹 디자이너가 각 위젯 유형에 대한 스타일을 구축하는 것입니다.

    일부 위젯은 추가 클래스 이름을 참조합니다.
    • 눈금 위젯에는 스타일 클래스 EglRuiGridTable(눈금의 테두리 스타일을 전체로 설정), EglRuiGridHeader(헤더 셀의 특성 설정) 및 EglRuiGridCell(본문 셀의 특성 설정)을 참조하는 하위가 포함됩니다.
    • textField 위젯이 읽기 전용인 경우 위젯은 스타일 클래스 EglRuiTextFieldReadOnly를 참조합니다.
    • passwordTextField 위젯이 읽기 전용인 경우 위젯은 스타일 클래스 EglRuiPasswordTextFieldReadOnly를 참조합니다.

    주어진 위젯에 대한 소스에서 추가 클래스 이름을 볼 수 있습니다. 또한 Firefox 브라우저를 사용하는 경우 Firebug를 사용하여 표시되는 위젯의 스타일을 조사할 수 있습니다.

  • 다음에 표시된 대로 위젯 특성 class를 설정하여 스타일 클래스를 대체할 수 있습니다.
    loginBox	Box { numColumns=2, class="NormalBoxStyle" };
    다음은 CSS 파일에 있는 관련 컨텐츠의 예입니다.
    .NormalBoxStyle 
       {  color:black; 	
          background-color:aqua; } 

    지정된 클래스의 모든 스타일은 위젯에 영향을 미칩니다. 이러한 스타일은 위젯이 스타일을 대체하는 경우(나중에 설명됨)를 제외하고 묶여있는 모든 위젯에서 상속됩니다.

  • style 특성에서 스타일(또는 스타일 세트)을 지정할 수 있습니다. 다음은 예입니다. 여기에는 CSS 파일에 사용된 구문이 특성 값으로 포함되어 있습니다.
    loginBox	Box 
       { numColumns=2,
         style="background-color:lightgreen;border-style:solid;" };      
    style 특성을 사용하면 모든 CSS 스타일은 사용할 수 있습니다. 그러나 대부분의 경우 개별 스타일 관련 특성에 값을 지정할 수 있습니다. 다음 선언은 이전 선언과 동일하며 CSS 구문을 포함하지 않습니다.
    loginBox	Box 
       { columns=2,
         backgroundColor="lightgreen",
         borderStyle="solid" };      

    다음은 EGL 스타일 관련 특성입니다.

    • background
    • backgroundColor
    • borderStyle 또는 다음 서브세트 중 하나: borderLeftStyle, borderRightStyle, borderTopStyle, borderBottomStyle
    • borderWidth 또는 다음 서브세트 중 하나: borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth
    • color
    • cursor
    • font
    • fontSize
    • fontWeight
    • height
    • margin 또는 다음 서브세트 중 하나: marginLeft, marginRight, marginTop, marginBottom
    • opacity
    • padding 또는 다음 서브세트 중 하나: paddingLeft, paddingRight, paddingTop, paddingBottom
    • pixelHeight
    • pixelWidth
    • position
    • visibility
    • width

    background, backgroundColor, borderStyle, cursor, fontvisibility(각 특성은 STRING 유형의 값을 사용)를 제외하고 각 특성은 INT 유형의 값을 사용하고 측정 단위로 픽셀을 사용합니다.

  • 주어진 위젯에 영향을 미치는 스타일은 클래스와 스타일 스펙에 지정된 스타일을 합한 것입니다. 대부분의 경우 위젯에 적용된 스타일은 묶인 위젯에서 상속된 동일한 스타일을 대체하고 위젯 특성의 목록에 마지막으로 지정된 스타일은 목록에서 이전에 지정된 동일한 스타일(있는 경우)을 대체합니다.
  • 위젯을 정의할 때 style 특성 또는 동일한 특성(주어진 스타일 지정)과 class 특성(동일한 스타일이 포함된 클래스 참조)를 둘 다 사용하는 경우 대부분의 경우 style 특성의 값이 우선합니다.

스타일을 지정하지 않으면 브라우저의 기본 설정에서 선 너비, 위젯 간의 간격, 텍스트 글꼴과 같은 특성을 판별합니다.

스타일의 우수 사례

회사에서 사용자 인터페이스를 배치하고(EGL 개발자가 처리) 인터페이스 룩앤필을 작성하는(웹 디자이너가 처리) 두 개의 태스크에 대한 책임을 나누는 경우 Rich UI 프로젝트가 성공할 가능성이 높습니다. 작업을 이렇게 나누려면 외부 스타일시트를 사용할 것을 권장합니다. EglRuiTextField와 같은 기본 클래스 이름을 사용할 수 있습니다. 또는 주어진 위젯에 대한 class 특성에 값을 지정하여 사용자 클래스 이름을 지정할 수 있습니다.

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

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

추가 정보의 소스

캐스케이딩 스타일시트에 대한 세부사항은 다음 웹 사이트를 고려하십시오.

   http://www.w3schools.com/css

여기서는 웹 사이트의 왼쪽에 몇 가지 링크가 포함되고 CSS 기본 표제 아래에 있는 선택사항은 Rich UI에서 특별한 관심이 있는 항목입니다. 오른쪽에 있는 검색 사이트도 유용합니다.

캐스케이딩 스타일시트에 대한 전체 설명은 Meyer의 CSS: Definitive Guide(O'Reilly Media, Inc., 2006년 11월)를 참조하십시오.