Simple Menu Bars

이번 단원에서는 메뉴를 포함하는 메뉴바의 작성 방법에 대해 알아보겠습니다.

메뉴 만들기

XUL에는 메뉴를 만들 수 있는 여러가지 다양한 방법이 있습니다. 가장 기본적인 방식은 많은 응용프로그램이 그러하듯이 메뉴들을 포함하는 메뉴바를 추가하는 방법이며, 또한 팝업 메뉴도 만들 수 있습니다. XUL의 메뉴 기능은 메뉴바나 팝업 메뉴를 만들 수 있는 여러가지 요소들로 구성되어 있습니다. 메뉴에 있는 항목들은 쉽게 커스터마이징 할 수 있습니다. 우리는 이미 menulist를 사용해서 메뉴를 만드는 방법을 살펴보았습니다. 이 단원은 이 내용을 기반으로 진행될 것입니다.

메뉴바는 대개 툴바와 비슷한 방법으로 작성됩니다. 메뉴바는 toolbox 요소 내부에 위치할 수 있으며, 메뉴바의 왼쪽에 이를 닫을 수 있는 그리피가 나타납니다(주의: Firefox에서는 더 이상 그리피를 지원하지 않습니다). 메뉴는 툴바와 작동방식도 비슷합니다. XUL은 메뉴에만 특별한 몇 가지 요소를 가지고 있습니다.

메뉴바와 메뉴의 작성과 관련된 4가지 요소가 있으며, 여기서는 간략하게 다루고 진행하면서 자세히 다루겠습니다.

menubar
메뉴들의 컨테이너.
menu
이름과 달리, 실제로는 메뉴바에 있는 메뉴의 제목을 나타낼 뿐입니다. 이 요소는 메뉴바 내에 위치하거나 독립적으로 위치할 수 있습니다.
menupopup
메뉴 제목을 클릭하였을 때 나타나는 팝업 상자입니다. 이 상자는 메뉴 명령 목록을 포함합니다.
menuitem
메뉴의 개별 명령으로 menupopup에 위치합니다.
menuseparator
메뉴의 구분 막대로 menupopup에 위치합니다.

맥킨토시를 제외한 모든 플랫폼에서 원하는 대로 메뉴바에 있는 메뉴를 변경할 수 있습니다. 이것은 메킨토시에는 시스템에 의해 화면 상단을 따라 자신만의 메뉴를 만들기 때문입니다. 여러분은 커스텀 메뉴를 만들 수는 있지만, 메뉴에 적용한 특별한 서식 규칙이나 비(非)-메뉴 요소는 적용되지 않을 수 있습니다. 메뉴를 만들 때 이 점을 염두에 두어야 합니다.

간단한 메뉴바 예제

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

Image:menubar-ex1.png
<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menuitem label="New"/>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edit">
      <menupopup id="edit-popup">
        <menuitem label="Undo"/>
        <menuitem label="Redo"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

위 예제에서는 menubar 요소를 사용해서 간단한 메뉴바와 메뉴바에 위치한 메뉴들을 만들었습니다. 여기서는 File과 Edit 2개 메뉴가 작성되었습니다. menu 요소는 메뉴상단에 제목을 만들며, 메뉴바에 나타납니다. 팝업은 menupopup 요소를 사용하여 만들어집니다. 팝업은 사용자가 이의 부모 메뉴 제목을 클릭할 때 튀어나오게 됩니다. 팝업의 크기는 팝업에 포함된 명령에 맞게 충분히 크게 나타납니다. 명령 자체는 menuitem를 사용해서 만들어집니다. 각 menuitem은 메뉴 팝업에서 하나의 명령을 나타냅니다.

menuseparator 요소를 사용해서 메뉴에 구분자를 만들 수도 있습니다. 이것은 menuitem 그룹들을 나눌 때 사용됩니다.

menubar 요소

menubar는 메뉴를 담는 상자입니다. 메뉴바가 flex 속성을 갖는 toolbox 내부에 위치하고 있다는 점을 주의깊게 보시기 바랍니다. 메뉴바는 특별한 속성을 가지지는 않지만 상자 유형에 속합니다. 이것은 orient 속성값을 vertical로 하면 세로 방향의 메뉴바를 만들 수 있다는 것을 의미합니다.

menu 요소

menu 요소는 button 요소와 비슷하게 동작합니다. menu 요소는 button과 몇 가지 동일한 속성을 가지며 그 외 추가적인 속성을 포함합니다.

id
메뉴의 유일 식별자.
label
File 또는 Edit와 같은 메뉴에 나타나는 텍스트.
disabled
이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 할 수는 있지만, 전체 메뉴를 사용 중지할 필요는 극히 드뭅니다. 이 속성은 true 또는 false 중 한가지 값을 가집니다. 물론, 기본값은 후자입니다.
accesskey
이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴 제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정된 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다. 물론 여기에 지정한 문자가 라벨 텍스트에 없더라도 동작합니다.
Image:menubar-ex2.png

꼭은 아니지만, menu 요소는 보통 menubar에 위치합니다. 만약 menubar에 포함되어 있지 않으면 다른 형태로 출력됩니다. 여기에 있는 그림은 메뉴바가 없는 경우 앞서의 예제가 어떤 모습이 되는지 보여주고 있습니다.

menupopup 요소

menupopup 요소는 메뉴 명령들을 포함하는 팝업창을 만듭니다. 이 요소는 세로 방향을 기본으로 하는 상자입니다. 원할 경우 가로 방향으로 바꿀 수 있으며, 그렇게 하면 menuitem들은 행으로 위치하게 됩니다. 일반적으로 menuitemmenuseparatormenupopup에 위치합니다. 여려분은 menupopup에 어떤 요소든 넣을 수 있지만, 앞서 말한바와 같이 맥킨토시에서는 무시될 것입니다.

menuitem 요소

menuitem 요소는 menu 요소와 아주 비슷하며 일부 동일한 속성들을 가지고 있습니다.

id
메뉴 제목버튼의 유일 식별자.
label
Open 또는 Save같은 메뉴 항목에 나타날 텍스트.
disabled
이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 이 속성은 true 또는 false 중에서 하나의 값으로 지정될 수 있으며 후자가 기본값입니다.
accesskey
이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정한 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다.
acceltext
이것은 메뉴 명령글 옆에 표시될 단축키 텍스트를 지정합니다. 그렇다고 해당 단축키와 menuitem을 바로 연결하는 것은 아닙니다(이 속성을 지정한다고 단축키를 눌렀을때 해당 메뉴가 실행되는 것은 아닙니다). 이 방법에 대해서는 이후에 다룰 것이다.

menuseparator 요소

menuseparator에는 특별한 속성이 없습니다. 단지 메뉴 항목들 사이에 가로막대를 만들 뿐입니다.

다음 단원에서는 다양한 메뉴 기능들에 대해 알아 보겠습니다.

Document Tags and Contributors

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