Tabboxes

환경설정 대화창은 탭을 사용하여 나타내는 것이 일반적입니다. 본 섹션에서는 탭 패널의 작성 방법에 대해 알아보겠습니다.

탭상자

탭상자는 환경설정 창에서 자주 사용됩니다. 일련의 탭들이 창의 상단부에 표시되며, 사용자는 서로 다른 선택사항들을 보기 위해 각각의 탭을 클릭할 수 있습니다. 이 기능은 선택 사항들을 한 화면에 다 담을 수 없을 때 유용하게 사용될 수 있습니다.

XUL에서도 이러한 대화창을 구현할 수 있는 방법을 제공합니다. 이를 위해서는 다섯 개의 요소에 대해 먼저 알아야 하는데 여기서는 각 요소들에 대해 대략적으로 설명하고 상세한 내용은 아래에서 설명하도록 하겠습니다.

tabbox
탭과 탭 페이지를 포함하는 외부 상자입니다.
tabs
각 탭을 포함하는 내부 상자로 다시 말하면 탭을 포함하는 행을 나타냅니다.
tab
개별 탭을 나타내며 탭을 클릭하면 탭 페이지가 전면에 표시됩니다.
tabpanels
여러 개의 탭 페이지를 포함하는 요소입니다.
tabpanel
단일 탭 페이지를 나타내며 실제 내용들이 위치하게 됩니다. 첫 번째 tabpanel은 첫 번째 탭에 해당하고, 두 번째 tabpanel은 두 번째 탭에 해당하는 식입니다.

tabbox는 최외곽 요소로 탭을 포함하는 tabs요소와 각 탭 페이지을 포함하는 tabpanels 요소로 구성됩니다.

다음은 탭상자의 일반적인 구문입니다.

<tabbox id="tablist">
  <tabs>
    <!-- tab elements go here -->
  </tabs>
  <tabpanels>
    <!-- tabpanel elements go here -->
  </tabpanels>
</tabbox>

tab 요소들은 일반 상자와 비슷한 tabs 요소 안에 놓입니다. 그리고 tabs 요소 자신은 tabbox 안에 놓이게 됩니다. 또한 tabboxtabpanels 요소를 포함하는데 이는 탭 상자의 수직 정렬 속성에 따라 탭의 아래에 표시됩니다.

실제로 탭 상자는 일반 상자와 별반 다른 게 없습니다. 상자와 마찬가지로 탭 또한 어떤한 요소든 포함할 수 있습니다. 다른 점이 있다면 모양이 조금 다르고 deck처럼 한번에 하나의 탭 패널 밖에 표시되지 않는다는 것입니다.

각 탭 페이지의 내용은 tabpanel에 포함됩니다. tab에 포함된다고 생각하기 쉽지만, tab은 상단에 표시되는 탭의 내용을 포함하는 요소입니다.

tabpanel 요소는 하나의 탭 페이지를 나타냅니다. 첫 번째 패널은 첫 번째 탭에, 두 번째 패널은 두 번째 탭에 대응됩니다. 따라서 tabtabpanel 사이에는 일대일 대응 관계가 성립합니다.

tabbox의 크기는 가장 큰 탭 페이지의 크기에 의해 결정됩니다. 예를 들어 한 탭 페이지에 열 개의 글상자가 있고 다른 탭 페이지에는 하나의 글상자 밖에 없다고 하면, 탭 페이지의 크기는 가장 많은 공간을 차지하는 열 개의 글상자를 가진 탭 페이지의 크기에 맞춰진다는 것을 의미합니다. 사용자가 다른 탭을 선택해도 탭 영역의 크기는 변하지 않습니다.

탭상자 예제

var el = env.locale; 예제 1 : Source View

Image:tabpanel1.png
<tabbox>
  <tabs>
    <tab label="Mail"/>
    <tab label="News"/>
  </tabs>
  <tabpanels>
    <tabpanel id="mailtab">
      <checkbox label="Automatically check for mail"/>
    </tabpanel>
    <tabpanel id="newstab">
      <button label="Clear News Buffer"/>
    </tabpanel>
  </tabpanels>
</tabbox>

예제에는 두 개의 탭이 포함되어 있으며, 첫 번째 탭은 라벨이 'Mail'이고, 두 번째는 'News' 입니다. 사용자가 Mail 탭을 클릭하면 첫 번째 탭 페이지의 내용이 탭 아래에 표시됩니다. 이 경우, 'Automatically check for mail'이라는 라벨이 붙은 체크박스가 나타날 것입니다. 두 번째 탭을 클릭하면 'Clear News Buffer'라는 라벨을 가진 버튼을 포함하는 상자가 표시될 것입니다.

기본적으로 선택된 탭페이지를 지정하기 위해서는 tabboxselectedIndex 속성을 설정하면 됩니다. 이 속성은 deck과 마찬가지로 0에서 시작하며 tabs에 포함되어 있는 탭의 순서 번호를 입력할 수 있습니다. 해당 값에 0미만의 값을 입력하면 0을 입력한 것과 같이 첫번째 탭이 선택된 것으로 출력됩니다. 그리고, 탭의 갯수보다 큰 값을 입력하면 탭은 아무것도 선택되지 않은 것으로 출력되지만, 탭패널에는 첫번째 페이지가 출력될 것입니다.

탭의 위치

끝으로, 탭의 위치를 바꿔서 탭 페이지의 원하는 방향에 탭이 표시되도록 하는 방법을 알아 보겠습니다. 이러한 작업을 하기 위해 특별한 문법이 있는 것이 아니라 간단히 orientdir 속성 값을 설정하면 됩니다. 레이아웃에 관한한 탭 요소들은 일반 상자와 아주 유사하다는 점을 기억하세요. tabbox는 기본적으로 수직 정렬 방식인 일반 컨테이너 상자이고, tabs 요소는 기본적으로 수평 정렬 방식인 일반 컨테이너 상자이라는 점을 알고 있으면 됩니다.

예를 들어 탭을 왼쪽에 표시하려고 한다며, 탭들이 수직적으로 쌓이게 출력되도록 tabsorient 속성을 vertical로 변경한 후 tabboxorient 속성을 horizontal로 설정하면 됩니다. 이렇게 하면 탭 페이지의 상단이 아닌 왼쪽에 탭이 수직방향으로 쌓이게 출력됩니다. 탭 페이지는 겹쳐 있기 때문에 tabpanels 요소의 orient 속성을 바꾸는 것은 아무런 의미가 없습니다.

여러분은 코드상에서 tabpanels 요소 다음으로 tabs 요소 위치를 옮겨서 오른쪽이나 아래쪽에 탭이 배치되도록 할 수 있습니다. 또 다른 방법으로는 tabboxdir 속성을 reverse로 지정하셔도 됩니다. 그러나 탭의 위치를 옮기면 특정 테마에서 보기가 좋지 않을 수 있기 때문에 그냥 상단에 두는게 좋을 것입니다.

파일찾기 대화창에 탭 넣기

파일찾기 대화창에 두 번째 패널을 넣어 보겠습니다. 우리는 검색과 관련된 설정을 포함할 Options 탭(기본적으로 선택되어 있도록 하겠습니다)을 만들 것입니다. 이렇게 하는 것이 그다지 좋은 인터페이스는 아니지만, 탭을 설명하기 위해 사용할 목적으로 이렇게 만들 것입니다. 위쪽의 라벨과 검색 상자는 첫 번째 탭에 넣어야 합니다. 두 번째 탭에는 몇가지 설정 사항을 넣겠습니다. 진행막대와 버튼은 탭 외부의 메인 대화창 위에 두도록 하겠습니다.

<vbox flex="1">

<tabbox selectedIndex="1">
  <tabs>
    <tab label="Search"/>
    <tab label="Options"/>
  </tabs>

  <tabpanels>
   <tabpanel id="searchpanel" orient="vertical">

    <description>
     Enter your search criteria below and select the Find button to begin
     the search.
    </description>

    <spacer style="height: 10px"/>

    <groupbox orient="horizontal">
      <caption label="Search Criteria"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Name"/>
          <menuitem label="Size"/>
          <menuitem label="Date Modified"/>
        </menupopup>
      </menulist>
      <spacer style="width: 10px;"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Is"/>
          <menuitem label="Is Not"/>
        </menupopup>
      </menulist>

      <spacer style="height: 10px"/>
      <textbox id="find-text" flex="1" style="min-width: 15em;"/>

    </groupbox>
   </tabpanel>

   <tabpanel id="optionspanel" orient="vertical">
    <checkbox id="casecheck" label="Case Sensitive Search"/>
    <checkbox id="wordscheck" label="Match Entire Filename"/>
   </tabpanel>

 </tabpanels>
</tabbox>
Image:tabpanel2.png

탭 요소들이 창의 중심부에 추가되었습니다. Search와 Options의 두 탭을 볼 수 있는데, 각 탭을 클릭하면 그에 맞는 탭 페이지가 표시됩니다. 그림에서 보듯이, 두 번째 탭에는 두 개의 선택 사항이 있으며, 첫 번째 탭은 상단에 탭이 있는 것을 제외하면 이전의 파일찾기 창과 차이가 없습니다.


var el = env.locale; 지금까지의 파일 찾기 예제 : Source View

다음에는 격자 형식의 컨텐츠를 작성하는 방법에 대해 배워보겠습니다.

Document Tags and Contributors

태그:
Contributors to this page: Suguni
Last updated by: Suguni,