XUL Tutorial:More Menu Features
MDC
이번 단원에서는 하위 메뉴와 체크 메뉴를 만드는 방법을 알아 보겠습니다.
목차 |
[편집] 하위 메뉴 만들기
여러분은 기존에 있는 요소들을 사용하여 다른 메뉴 내에 있는 서브메뉴(중첩 메뉴)를 만들 수 있습니다. menupopup안에는 어떤 요소든 넣을 수 있다는 것을 기억해보세요. 지난 단원에서는 menupopup안에 menuitem과 menuseparator를 넣는 방법을 알아 보았습니다. 그러나 여러분은 menupopup 요소내에 menu를 넣기만 하면 하위 메뉴를 만들 수 있습니다. 이것은 menu 요소가 꼭 메뉴바의 바로 아래에 있지 않더라도 유효한 것이기 때문에 동작하게 됩니다. 아래는 File 메뉴내에 간단한 하위 메뉴가 존재하는 예제입니다.
<toolbox flex="1">
<menubar id="sample-menubar">
<menu id="file-menu" label="File">
<menupopup id="file-popup">
<menu id="new-menu" label="New">
<menupopup id="new-popup">
<menuitem label="Window"/>
<menuitem label="Message"/>
</menupopup>
</menu>
<menuitem label="Open"/>
<menuitem label="Save"/>
<menuseparator/>
<menuitem label="Exit"/>
</menupopup>
</menu>
</menubar>
</toolbox>
[편집] 우리의 파일 찾기 예제에 메뉴 추가하기
이제 파일 찾기 대화창에 메뉴를 넣어 봅시다. 우리는 File 메뉴와 Edit 메뉴에 간단한 명령 몇 가지를 넣을 것입니다. 이 방법은 위의 예제와 비슷합니다.
<toolbox>
<menubar id="findfiles-menubar">
<menu id="file-menu" label="File" accesskey="f">
<menupopup id="file-popup">
<menuitem label="Open Search..." accesskey="o"/>
<menuitem label="Save Search..." accesskey="s"/>
<menuseparator/>
<menuitem label="Close" accesskey="c"/>
</menupopup>
</menu>
<menu id="edit-menu" label="Edit" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cut" accesskey="t"/>
<menuitem label="Copy" accesskey="c"/>
<menuitem label="Paste" accesskey="p" disabled="true"/>
</menupopup>
</menu>
</menubar>
<toolbar id="findfiles-toolbar>
여기서 여러개의 명령을 가진 두 개의 메뉴를 만들었습니다. 툴박스 내에 어떻게 메뉴바가 추가되었는지를 유심히 보세요. Open Search와 Save Search 뒤에 불은 세 개의 점은 사용자가 해당 명령을 선택할 때 대화창이 열릴것이라는 것을 알려주는 일반적인 방법입니다. 각 메뉴와 메뉴 항목에는 접근글쇠(Access key)가 지정되어 있습니다. 그림을 보면 지정된 글자가 메뉴 제목에 밑줄로 표시된 것을 알 수 있습니다. 또 붙이기(Paste) 명령은 현재 사용불가 상태입니다. 우리는 아무 것도 붙일 것이 없다고 가정할 것입니다.
[편집] 메뉴에 체크 표시 넣기
많은 프로그램들에서는 체크할 수 있는 메뉴를 사용합니다. 예를 들어 현재 사용하고 있는 기능은 명령 옆에 체크가 있고 그렇지 않은 기능은 체크가 없는 메뉴 같은 것입니다. 사용자가 메뉴를 선택하면 체크 상태가 바뀝니다. 또 메뉴 항목에 라디오 버튼을 넣고 싶을 때도 있을 것입니다.
체크 메뉴를 만드는 방법은 checkbox와 radio를 만드는 방법과 비슷합니다. 이를 위해서는 두 개의 속성이 필요한데, type 속성은 체크의 형식을 지정할 때, name 속성은 관련된 명령을 하나로 묶을 때 사용합니다. 아래는 체크 항목을 가진 메뉴를 만드는 예제입니다.
<toolbox>
<menubar id="options-menubar">
<menu id="options_menu" label="Options">
<menupopup>
<menuitem label="Make Backups" type="checkbox"/>
<menuitem label="Email Administrator" type="checkbox" checked="true"/>
</menupopup>
</menu>
</menubar>
</toolbox>
메뉴 항목이 체크될 수 있도록 type 속성이 추가되었습니다. 해당 속성값을 checkbox로 설정하면 메뉴 항목을 클릭할 때마다 체크가 설정/해제됩니다.
[편집] 라디오버튼이 있는 메뉴
일반 체크 외에도 type 속성의 값을 radio로 지정하면 라디오 형식의 체크를 만들 수 있습니다. 라디오 체크는 한 그룹의 메뉴 항목 중 하나만 선택할 수 있도록 만들 때 사용됩니다. 예를 들면 한번에 하나의 글꼴만 선택할 수 있는 글꼴 메뉴 같은 것입니다. 이 때 다른 항목이 선택되면 이전에 선택되었던 항목은 체크가 해제됩니다.
여러 개의 메뉴 항목을 하나의 그룹으로 묶을 때는 각 메뉴 항목의 name 속성을 같은 값으로 지정하면 됩니다. 아래 예제를 보겠습니다.
<toolbox>
<menubar id="planets-menubar">
<menu id="planet-menu" label="Planet">
<menupopup>
<menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
<menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/>
<menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
<menuseparator/>
<menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/>
<menuitem id="moon" label="Moon" type="radio" name="inhabited"/>
</menupopup>
</menu>
</menubar>
</toolbox>
예제를 실행시키면, 처음 세 개의 메뉴 항목 중 한 가지만 선택할 수 있다는 것을 알게 될 것입니다. 이 메뉴 항목들은 모두 동일한 name 속성값을 가지고 있기 때문에 하나의 그룹으로 엮인 것입니다. 마지막 메뉴 항목인 Earth는 라디오 메뉴이지만 name 속성값이 다르기 때문에 그 무리에 속하지 않습니다.
물론 하나의 그룹 항목들은 모두 동일한 메뉴 안에 있어야 합니다. 꼭 붙어 있어야 할 필요는 없지만, 상식적으로 생각할 때 서로 붙어 있는 것이 좋을 것입니다.
다음 단원에서는 팝업 메뉴를 작성하는 방법에 대해 알아보겠습니다.