Popup Menus

공헌자 숫자: 3명

 

이전 단원에서는 메뉴바에 들어가는 메뉴를 만드는 방법에 대해 알아보았습니다. XUL은 팝업 메뉴를 만들 수 있는 능력도 가지고 있습니다. 팝업 메뉴는 대개 오른쪽 마우스 버튼을 누를 때 표시됩니다.

팝업 메뉴 만들기

XUL은 아래에서 설명하는 3가지 다른 형태의 팝업이 있습니다. 주된 차이는 표시되는 방식에 있습니다.

일반 팝업(Plain Popups)
일반 팝업은 대상 요소에 마우스 왼쪽 버튼을 클릭하였을 때 나타나는 팝업창입니다. 일반 팝업은 어디에나 위치할 수 있으며, 어떤 내용이든 담을 수 있다는 점을 제외하고 메뉴바에 있는 메뉴와 아주 비슷합니다. 브라우저 창에서 뒤로와 앞으로 가기 버튼 옆에 있는 조그만 아래방향 화살표를 눌렀을 때 나타나는 드롭 다운 메뉴가 이의 좋은 예입니다.
문맥 팝업(Context Popups)
문맥 팝업은 사용자가 문맥 메뉴 버튼(대개 마우스 오른쪽 버튼)을 누를 때 나타나는 팝업창입니다. 일부 플랫폼에서는 다른 버튼일 수도 있지만, 이것은 항상 문맥전용 메뉴를 호출하는 버튼 또는 키와 마우스의 조합입니다. 예를 들어 맥킨토시에서는 사용자가 제어키(Ctrl)를 누르고 마우스 버튼을 클릭하거나, 잠깐 동안 마우스 버튼을 누르고 있어야 합니다.
툴팁(Tooltips)
툴팁 팝업창은 사용자가 어떤 요소위에 마우스를 올렸을 때 나타납니다. 이런 유형의 팝업은 보통 버튼 자체에서 제공되는 것보다 좀더 구체적인 버튼에 대한 설명을 제공하는 데 사용됩니다.

이들 세 가지 유형의 팝업은 사용자가 이것들을 호출하는 방식이 서로 다릅니다. 그래서 팝업 유형은 팝업을 호출하는 요소에 의해 결정됩니다.

팝업 내용 선언하기

팝업은 menupopup 요소를 사용하여 선언됩니다. 이는 특별한 속성이 없는 상자의 한 유형입니다. 팝업이 호출되면, 여러분이 menupopup에 넣은 모든 요소를 포함하는 창이 화면에 출력될 것입니다. 여러분은 menupopupid 속성을 항상 넣어주어야 합니다. 이것은 이 속성이 팝업과 특정 요소를 연결하는데 사용되기 때문인데, 이 의미에 대해서는 곧 알게될 것입니다. 먼저, 예제를 보겠습니다.

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Cut"/>
    <menuitem label="Copy"/>
    <menuitem label="Paste"/>
  </menupopup>
</popupset>

여기서 볼 수 있듯이, 3개의 메뉴가 있는 단순 팝업메뉴가 만들어졌습니다. menupopup 요소는 3개 메뉴 항목을 둘러싸고 있습니다. 여러분은 id 속성이 menupopup 요소 자체에 설정된 것을 볼 수 있습니다.

popupset 요소는 전체 팝업메뉴 선언부를 둘러싸고 있습니다. 이 요소는 팝업의 일반적인 컨테이너로 선택사항입니다. 이 요소는 화면에 나타나지는 않지만 사용할 모든 팝업들을 선언할 위치 역할로 사용됩니다. popupset이라는 이름이 의미하듯, 내부에 여러개의 팝업을 선언할 수 있습니다. 첫 번째 popup 요소 다음에 그냥 추가하기만 하면 됩니다. 하나의 파일에 여러개의 popupset을 둘 수도 있지만, 대개는 하나만 존재할 것입니다.

요소와 팝업을 연결하기

이제 팝업을 만들었으니 팝업이 나타나도록 해야할 시간입니다. 이를 위해 팝업과 팝업이 나타날 요소를 연결시켜야 합니다. 이렇게 하는 것은 사용자가 창의 어떤 영역을 클릭했을 때만 팝업이 나타나야 하기 때문입니다. 대개, 이 요소는 특정 버튼이거나 상자가 됩니다.

팝업을 요소와 연결시키려면 3가지 속성 중 하나를 해당 요소에 추가하면 됩니다. 추가할 요소는 만들고자 하는 팝업의 종류에 따라 달라집니다. 일반 팝업의 경우에는 해당 요소에 popup 속성을 사용하고, 문맥 팝업은 context 속성을 사용합니다. 마지막으로 툴팁 팝업은 tooltip 속성을 사용합니다.

위의 속성에는 출력하고자 하는 menupopupid 속성값을 지정해야 합니다. 보통 하나의 파일이 여러개의 팝업을 포함하는 이유가 이 때문입니다.

위의 예제를 이용해 문맥 팝업을 만들고자 합니다. 이것은 context 속성을 사용해야 하며, 연결하고자 하는 팝업의 id 속성값을 이 속성값으로 지정해야 한다는 것을 의미합니다. 아래 예제는 이러한 사항을 어떻게 처리할 수 있는 지를 보여주고 있습니다.

예제 1 : Source View

Image:popups-ex1.png
<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Cut"/>
    <menuitem label="Copy"/>
    <menuitem label="Paste"/>
  </menupopup>
</popupset>

<box context="clipmenu">
  <label value="Context click for menu"/>
</box>

여기서 팝업은 상자와 연결되었습니다. 상자 어디서든 문맥 클릭(context-click, 오른쪽 클릭)을 하면 팝업메뉴가 나타날 것입니다. 또한 상자의 자식 요소를 클릭할 때도 팝업이 나타나기 때문에 label 요소를 클릭해도 동일하게 동작할 것입니다. context 속성은 상자와 해당 id를 가진 팝업을 연결하기 위해 사용되었습니다. 이 경우, idclipmenu인 팝업이 나타날 것입니다. 이런 식으로 수많은 팝업을 가질 수 있으며, 이들을 다른 요소와 연결할 수 있습니다.

여러분은 하나의 요소에 다른 종류의 팝업 속성을 설정하여 여러개의 팝업과 연결할 수 있습니다. 또 하나의 팝업을 여러개의 요소에도 연결할 수 있는데 이는 XUL의 팝업 구문이 가진 장점 중 하나입니다. 팝업은 XUL 요소에만 연결할 수 있으며, HTML 요소와는 연결할 수 없습니다.

툴팁

여기서는 툴팁을 만드는 단순한 방법을 살펴보겠습니다. 툴팁을 만드는데는 두 가지 방법이 있습니다. 일반적으로 사용되는 가장 단순한 방법은 툴팁을 적용하고자 하는 요소에 tooltiptext 속성을 추가하는 것입니다.

두 번째 방법은 툴팁의 내용을 담고 있는 tooltip 요소를 사용하는 것입니다. 이 방법은 각각의 툴팁 내용을 포함하는 별도의 블록 또는 내용을 설정하는 스크립트의 작성을 필요로 합니다. 그러나 이러한 방법을 이용하면 툴팁에 텍스트 외에도 어떠한 내용도 사용할 수 있는 장점이 있습니다.

예제 2 : Source View

<button label="Save" tooltiptext="Click here to save your stuff"/>

<popupset>
  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
    <description value="Click here to see more information"/>
    <description value="Really!" style="color: red;"/>
  </tooltip>
</popupset>

<button label="More" tooltip="moretip"/>

이 2개의 버튼은 각각 툴팁을 가지고 있습니다. 첫 번째는 기본 툴팁 방식을, 두 번째는 다른 배경색과 서식이 적용된 텍스트로 구성된 커스텀 툴팁을 사용하고 있습니다. 툴팁은 More 버튼과 연결되어 있으며, 이를 위해 버튼의 tooltip 속성에 해당 tooltip 요소의 id 속성값이 설정되어 있습니다. 여기서 tooltip 요소는 다른 팝업 유형처럼 popupset 내부에 위치하고 있다는 점에 유의하세요.

팝업 정렬

기본적으로, 팝업과 문맥 창은 마우스 포인터가 위치한 곳에 나타납니다. 툴팁은 해당 요소의 약간 아래 위치하는데, 이는 마우스 포인터가 이를 가리지 않게 하기 위해서 입니다. 그렇다 하더라, 팝업이 나타날 위치를 좀 더 상세히 지정하고 싶은 경우가 있을 것입니다. 예를 들어, 브라우저의 뒤로 가기 버튼을 클릭했을 때 나타나는 팝업 메뉴는 마우스 포인터가 있는 곳이 아닌, 뒤로 가기 버튼 바로 아래 나타나도록 하는 것이 좋을 것입니다.

팝업 위치를 변경하기 위해서는 popup 요소에 position이라는 또 다른 속성을 사용할 수 있습니다. 또한 menupopup 요소에도 이를 추가할 수 있습니다. 이 속성은 팝업을 발생시키는 요소에 상대적인 팝업 위치를 지시하는 데 사용됩니다. 여러가지 값을 설정할 수 있으며, 각각을 간단히 설명하면 아래와 같습니다.

after_start
팝업은 요소의 아래에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 아래). 해당 팝업창이 요소보다 큰 경우, 오른쪽으로 확장됩니다. 이것은 브라우저의 뒤로와 앞으로 가기 버튼과 연결된 드롭다운 메뉴에 사용되는 값입니다.
after_end
팝업창은 요소의 아래에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 아래).
before_start
팝업창은 요소의 위쪽에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 위).
before_end
팝업창은 요소의 위쪽에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 위).
end_after
팝업은 요소의 오른쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 아래).
end_before
팝업은 요소의 오른쪽에 위쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 위).
start_after
팝업은 요소의 왼쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 아래).
start_before
팝업은 요소의 왼쪽에 위쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 위).
overlap
팝업은 요소의 위에 나타납니다(요소의 왼쪽 위 = 팝업의 왼쪽 위).
at_pointer
팝업은 마우스 포인터 위치에 나타납니다.
after_pointer
팝업은 마우스 포인터와 가로 위치는 같으면서 세로 위치는 마우스 포인터 아래 부분에 나타납니다. 이것은 툴팁이 나타나는 방식입니다.

팝업 요소에 position 속성을 추가함으로써 팝업이 나타날 위치를 정확하게 지정할 수 있습니다. 그러나 정확한 픽셀 위치를 지정할 수는 없습니다. 아마도 툴팁 요소에 대한 이 속성값은 변경하려고 하지 않겠지만, position 속성은 세 가지 팝업 유형 모두에 사용될 수 있습니다. 아래 예제는 팝업 메뉴를 가진 뒤로가기 버튼을 만드는 것을 보여주는 것입니다.

예제 3 : Source View

<popupset>
  <menupopup id="backpopup" position="after_start">
    <menuitem label="Page 1"/>
    <menuitem label="Page 2"/>
  </menupopup>
</popupset>

<button label="Pop Me Up" popup="backpopup"/>

Our find files example

파일 찾기 대화창에 간단한 팝업 메뉴를 추가해 보겠습니다. 단순하게 하기 위해, Edit 메뉴의 내용을 그냥 복사했습니다. 첫 번째 탭 패널위에서 클릭했을 때 팝업이 나타나도록 해 봅시다.

<popupset>
  <menupopup id="editpopup">
    <menuitem label="Cut" accesskey="t"/>
    <menuitem label="Copy" accesskey="c"/>
    <menuitem label="Paste" accesskey="p" disabled="true"/>
  </menupopup>
</popupset>

<vbox flex="1">
.
.
.

<tabpanel id="searchpanel" orient="vertical" context="editpopup">

여기에 있는 eidt 메뉴와 유사한 단순 팝업이 첫 번째 탭패널에 추가되었습니다. 첫 번째 패널 어디서든 마우스 오른쪽 버튼을 클릭하면(맥킨토시에서는 Ctrl-클릭), 팝업이 나타날 것입니다. 그러나 해당 팝업은 그 이외 장소에서 클릭하면 나타나지 않을 것입니다. 주의할 사항은 글상자의 경우 자체 내장 팝업메뉴가 있어서 우리가 지정한 팝업 메뉴가 나타나지 않을 것입니다.

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

다음 단원에서는 스크롤 메뉴를 작성하는 방법에 대해 알아보겠습니다.

문서 태그 및 공헌자

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