mozilla

Toolbars

툴바(toolbar)는 보통 창의 상단에 위치하면서 일반적인 기능을 수행하는 여러 버튼을 포함합니다. XUL은 툴바를 만드는 방법을 제공합니다.

툴바 추가하기

다른 요소들처럼 XUL 툴바도 상자 유형 중 하나입니다. 보통 툴바에는 버튼들이 놓여지지만, 어떤 요소도 툴바에 놓을 수 있습니다. 예를 들어, Mozilla 브라우저에는 페이지 URL을 표시하는 글상자를 포함한 툴바가 있습니다.

툴바는 창내의 가로 혹은 세로 어떤 방향으로도 위치될 수 있습니다. 물론 글상자를 세로 툴바에 두지는 않을 것입니다. 사실 툴바는 그냥 상자이기 때문에 원하는 곳 어디든 위치할 수 있으며, 창의 중앙에도 배치할 수 있습니다. 그러나 대개 툴바들은 창의 상단에 나타나는게 보통입니다. 여러개의 툴바가 순서대로 위치하면, 보통 '툴박스(toolbox)'라고 불리는 것으로 묶게 됩니다.

툴바의 좌측면에는 작은 무늬(notch)가 있는데, 이것을 클릭하면 툴바가 접혀지고 무늬만 보이게 됩니다. 무늬는 '그리피(grippy)'라고도 부릅니다. 여러개의 툴바가 하나의 툴박스 내에 있을때, 그리피들을 클릭하면 한 줄로 닫힙니다. 이렇게 해서 툴바가 사용하는 공간을 줄이게 됩니다. 세로 방향의 툴바는 상단 모서리에 그리피가 있습니다. 일반적으로, 사용자들은 메인 윈도우의 공간을 넓히기 위해 툴바를 닫습니다.

toolbox 안에 있는 간단한 toolbar

Source View

Image:toolbar1.jpg
<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"/>
    <toolbarbutton label="Forward"/>
  </toolbar>
</toolbox>

이 예제는 뒤로가기(Back)와 앞으로가기(Forward) 버튼을 가진 툴바를 만듭니다. 하나의 툴바가 툴박스내에 위치하고 있습니다. 툴바와 관련하여 4가지 새로운 태그가 있는데 각 내용은 다음과 같습니다.

toolbox
툴바를 포함하는 상자.
toolbar
버튼과 같은 툴바 아이템을 포함하는 하나의 툴바. 툴바는 왼쪽 혹은 위쪽에 있는 그리피를 사용하여 접을 수 있습니다..
toolbarbutton
툴바에 있는 버튼으로 일반 버튼과 동일한 기능을 가지고 있지만 조금 다르게 출력됩니다.
toolbargrippy
이 요소는 툴바를 접거나 여는데 사용되는 무늬를 만듭니다. 자동으로 추가되기 때문에 직접 사용할 필요는 없습니다.

toolbar는 실제 툴바를 만드는 메인 요소입니다. 일반적으로 툴바에는 버튼들이 포함되는데 다른 요소들도 넣을 수 있습니다. 툴바는 id 속성을 가지는게 좋으며, 그렇지 않으면 접거나 펼칠 수 없게 될 수도 있습니다.

위 예제에서는 단지 한개의 툴바만 작성되었습니다. 첫 번째 툴바 다음에 toolbar요소를 더 추가해서 다중 툴바도 쉽게 만들 수 있습니다.

toolbox는 툴바의 컨테이너입니다. 일부 응용프로그램에서는 창의 상단에 여러개의 툴바가 있을 것입니다. 이들 모두를 toolbox 안에 넣을 수 있습니다.

여러분은 toolbar 요소를 toolbox 안에 넣어야 하는 것은 아닙니다.

툴박스에 있는 그리피

주의: Firefox에는 toolbargrippy 요소가 없습니다.

툴박스에 있는 그리피들은 toolbargrippy라는 요소를 이용해서 작성됩니다. 그리피의 목적이 툴바를 접기 위한 것이기 때문에, 툴바 밖에서 이 요소를 사용하는 것은 아무 의미가 없습니다. 그러나 좀 다른 스타일을 원할 수 도 있습니다. 여러분은 toolbar 요소의 grippyhidden 속성을 true로 설정하면 그리피를 숨길 수 있습니다.

동일 툴바들이지만 두 개는 접혀 있습니다.
Image:toolbar3.jpg

3개의 툴바를 가진 툴박스
Image:toolbar2.jpg

우리의 파일 찾기 예제

파일 찾기 대화창에 툴바를 넣어 보겠습니다. 사실 툴바가 꼭 필요한 것은 아니지만 설명을 위해서 추가할 것입니다. 2개의 버튼이 추가될 것인데, 열기(Open)와 저장(Save) 버튼입니다. 아마도 이것들은 사용자가 검색 결과를 저장하고 나중에 다시 열어볼 수 있게 해줄 것 같습니다.

<vbox flex="1">
  <toolbox>
    <toolbar id="findfiles-toolbar">
      <toolbarbutton id="opensearch" label="Open"/>
      <toolbarbutton id="savesearch" label="Save"/>
    </toolbar>
  </toolbox>
  <tabbox>
Image:toolbar5.png

2개의 버튼을 가진 툴바가 추가되었습니다. 그림에서 여러분은 툴바가 상단에 가로방향으로 나타나 있는 것을 볼 수 있습니다. 그리피 또한 툴바의 왼쪽면에 보입니다. 주목할 점은 툴바가 세로 상자 내 탭상자 바로 위의 위치하고 있다는 것입니다. 이것은 툴바가 모든 것보다 앞에 나타나도록 하기 위해 세로방향을 사용했기 때문입니다.

지금까지의 파일 찾기 예제 : Source View

다음에는 창에 메뉴바를 넣는 방법에 대해 알아보겠습니다.

문서 태그 및 공헌자

태그: 
Contributors to this page: fscholz, teoli, Suguni
최종 변경: fscholz,