List Controls

XUL은 목록 상자를 생성하는 여러 요소의 형식을 가지고 있습니다.

목록 상자

목록 상자는 목록에서 여러 항목을 표시하는 데 사용됩니다. 사용자는 리스트에서 어떤 항목을 선택할 수 있습니다.

XUL은 목록을 생성하기 위해 두 가지 요소 타입을 제공하는데, listbox 요소는 다중 행 목록 상자를, 그리고 menulist요소는 드롭다운 목록 상자를 생성합니다. 이들은 HTML select 요소와 유사한 방식으로 작업을 하면서, 두 가지 기능 모두 수행하지만, XUL의 요소는 추가적인 기능을 가지고 있습니다.

가장 단순한 목록 상자는 상자 자체에 대해서는 listbox를 사용하고, listitem 요소는 각 항목으로 사용합니다. 예제를 보면, 이 목록 상자는 4개의 행을 가지면서, 각 항목마다 하나씩입니다.

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

Image:lists1.png
<listbox>
  <listitem label="Butter Pecan"/>
  <listitem label="Chocolate Chip"/>
  <listitem label="Raspberry Ripple"/>
  <listitem label="Squash Swirl"/>
</listbox>

HTML의 option 요소가 가진 것과 마찬가지로, 사용자는 value 속성을 사용해서 각 항목에 대해 값을 할당할 수 있습니다. 그리고 나서 스크립트로 해당 값을 사용할 수 있습니다. 목록 상자는 적당한 크기를 기본으로 설정하지만, rows 속성으로 크기를 제어할 수 있습니다. 목록 상자에 출력될 행 수를 지정하기 위해 값을 설정하세요. rows 값 보다 더 많은 행이 있으면 이를 표시할 수 있는 스크롤바가 나타납니다.

다음의 예제는 이러한 추가 기능을 설명합니다.

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

<listbox rows="3">
  <listitem label="Butter Pecan" value="bpecan"/>
  <listitem label="Chocolate Chip" value="chocchip"/>
  <listitem label="Raspberry Ripple" value="raspripple"/>
  <listitem label="Squash Swirl" value="squash"/>
</listbox>

이 예제는 한번에 단 3개 행만을 표시하도록 변경된 것입니다. 또한 목록에 있는 각 항목에 값이 추가되었습니다. 목록 상자는 더 많은 기능을 제공하며, 다음에서 설명하고 있습니다.

다중열 목록 상자

목록 상자는 다중열을 지원합니다. 셀에는 보통 텍스트가 쓰이지만 어떤 컨텐츠도 포함할 수 있습니다. 사용자가 목록에서 항목을 선택하면 행 전체가 선택되며, 하나의 셀만 선택되도록 할 수는 없습니다.

목록 상자에 열을 명시하기 위해서는 2개의 태그가 사용됩니다. listcols 요소는 열의 정보를 담기 위해 사용되며, 각 열에 대한 정보는 listcol요소를 사용해 명시합니다. 목록 상자의 각 열별로 하나의 listcol 요소가 필요합니다.

행에 포함되는 각 셀은 listcell 요소를 사용해 표현합니다. 3개의 열을 표현하려면, 각각의 listitem 내부에 3개의 listcell을 넣어야 합니다. 셀의 텍스트 컨텐츠를 명시하려면 listcell 요소의 label 속성을 사용합니다. 하나의 열만 있는 단순한 경우에는 label 속성을 listitem 요소에 직접 넣을 수 있으며, 이럴 경우에는 앞서 보았던 목록 상자 예제처럼 listcell 요소가 전혀 필요 없습니다.

다음은 두 개의 열과 세개의 행을 가진 목록 박스 예제입니다.

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

<listbox>
  <listcols>
    <listcol/>
    <listcol/>
  </listcols>
  <listitem>
    <listcell label="George"/>
    <listcell label="House Painter"/>
  </listitem>
  <listitem>
    <listcell label="Mary Ellen"/>
    <listcell label="Candle Maker"/>
  </listitem>
  <listitem>
    <listcell label="Roger"/>
    <listcell label="Swashbuckler"/>
  </listitem>
</listbox>

머리 행

목록 상자에서는 특별한 머리 행을 사용할 수 있습니다. 이것은 일반적인 행과 비슷하지만 다른 모양으로 출력됩니다. 이것은 열 머리를 만들기 위해 사용할 수 있으며, 두 개의 새로운 요소가 사용됩니다.

listhead 요소는 listitem가 보통 행에 사용되는 것처럼, 머리 행을 위해 사용합니다. 머리 행은 보통 행이 아니라서, 스크립트를 이용해 목록 상자의 첫번째 행을 얻으려고 할 경우 무시됩니다.

listheader 요소는 머리 행의 각 셀에 사용됩니다. 머리 셀의 라벨을 지정하기 위해서는 label 속성을 사용하세요.

다음은 예제 3에 머리 행을 추가한 예제입니다.

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

Image:morelists1.png
<listbox>

  <listhead>
    <listheader label="Name"/>
    <listheader label="Occupation"/>
  </listhead>

  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>

  <listitem>
    <listcell label="George"/>
    <listcell label="House Painter"/>
  </listitem>
  <listitem>
    <listcell label="Mary Ellen"/>
    <listcell label="Candle Maker"/>
  </listitem>
  <listitem>
    <listcell label="Roger"/>
    <listcell label="Swashbuckler"/>
  </listitem>

</listbox>

위 예제에서는 열을 유연하게 만들기 위해 flex 속성을 사용하였습니다. 이 속성은 다음 절에서 설명하겠지만, 여기서는 열이 남은 공간을 모두 채우도록 하는데 사용하고 있습니다. 여러분이 창의 크기를 변경하면 열이 창만큼 늘어나는 것을 볼 수 있을 것입니다. 창의 크기가 줄어들면, 셀안에 있는 라벨이 자동으로 잘려 지고 생략부호가 출력됩니다. 생략부호가 출력되지 않도록 하기 위해서는 셀이나 아이템에 crop 속성을 none으로 설정하면 됩니다.

드롭다운 목록

드롭다운 목록은 select 요소를 사용하여 HTML에서 생성할 수 있습니다. 사용자는 텍스트상자에서 하나만 선택된 것을 볼 수도 그리고 화살표를 클릭하거나 다른 선택을 하기 위해 텍스트상자 옆에 있는 유사한 버튼을 클릭할 수도 있습니다. 다른 선택사항은 팝업창에 나타날 것입니다. XUL은 이런 목적에 사용할 수 잇는 menulist 요소를 가지고 있습니다. 이것은 텍스트상자와 그 옆에 있는 버튼으로 이루어집니다. 이름이 선택된 것은 내부에서 선택된 메뉴로 띄워졌기 때문입니다.

드롭다운 상자를 기술하기 위해서는 세 가지 요소가 필요합니다. 첫번째는 menulist 요소로 버튼을 가진 텍스트상자를 생성합니다. 두번째는 menupopup으로 버튼을 클릭했을 때 나타나는 팝업창을 생성합니다. 세번재는 menuitem으로 개별 선택 항목을 생성합니다.

다음의 예제는 이런한 점을 잘 설명하고 있는 구문입니다.

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

Image:inputs2.png
<menulist label="Bus">
  <menupopup>
    <menuitem label="Car"/>
    <menuitem label="Taxi"/>
    <menuitem label="Bus" selected="true"/>
    <menuitem label="Train"/>
  </menupopup>
</menulist>

위의 menulist는 4가지 선택 항목을 담고있는 데, 각각은 menuitem 요소에 해당 합니다. 선택 항목을 보이도록 하려면 menulist에서 화살 버튼(▼)을 클릭합니다. 하나를 선택하면, menulist에서 선택된 것이 나타납니다. selected 속성은 기본적으로 선택된 값을 지정하는 데 사용됩니다.

편집 가능한 메뉴목록

기본적으로 사용자는 목록에서 선택항목을 선택할 수만 있습니다. 여러분은 직접 타이핑해서 입력 할 수는 없습니다. 또 다른 종류의 menulist은 필드에서 텍스트 편집을 허용합니다. 예를 들면, 브라우저의 URL 필드 이전에 타이핑한 URL 선택을 위한 드롭다운 메뉴가 있는 데, 거기에 입력할 수도 있습니다.

편집가능한 menulist를 만들려면, 다음과 같은 editable 속성을 추가하면 됩니다.

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

<menulist editable="true">
  <menupopup>
    <menuitem label="www.mozilla.org"/>
    <menuitem label="www.xulplanet.com"/>
    <menuitem label="www.dmoz.org"/>
  </menupopup>
</menulist>

생성된 URL 필드는 사용자가 선택할 수 있는 이미 설정된 선택 항목을 가지고 있으면서 또한 필드에다 사용자 자신이 타이핑할 수도 있습니다. 사용자가 입력한 텍스트는 새로운 선택항목으로 추가되지는 않습니다. label 속성은 이 예제에선 사용되지 않았기 때문에, 기본 값은 공백으로 처리되게 됩니다.

다음 장에서는 진행 지시자 만들기를 익혀 보겠습니다.

Document Tags and Contributors

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