mozilla
검색 결과

    Overlays

     

    이번 단원에서는 공통된 내용을 분리하는데 사용될 수 있는 오버레이(overlay)에 대해 설명하겠습니다.

    오버레이 사용하기

    하나의 창만 사용하는 단순한 응용프로그램은 보통 한 개의 XUL 파일과 이에 따른 스크립트 파일, 스타일시트, DTD 파일 그리고 몇 개 이미지들만 포함합니다. 어떤 응용프로그램은 여러개의 대화창과 이에 관련된 파일을 포함하게 되며 이런 것들은 별도의 XUL 파일로 저장됩니다. 좀 더 복잡한 응용프로그램은 많은 창과 대화창을 포함합니다.

    여러개의 창을 가진 응용프로그램에는 각 창들에서 공통되는 여러가지 요소나 사용자 인터페이스들이 있습니다. 예를 들어, Mozilla의 구성요소들은 몇 가지 공통 요소들을 공유합니다. 도구나 도움말과 같은 메뉴와 사이드바, 그리고 공통된 키보드 단축키와 같은 것들이 각 창에서 공유됩니다.

    여러분은 각 창별로 이러한 것들을 비슷한 요소들과 기능들로 다시 구현할 수도 있습니다. 그러나 이렇게 하면 유지관리가 어려워지는 문제점이 생깁니다. 어떤 것을 변경할 경우에 여러곳에서 변경해야 할 것입니다. 대신 공통된 요소들을 분리하여 각 창에서 이것들을 공유해서 사용할 수 있는 메카니즘이 있다면 좋을 것입니다. 여러분은 오버레이를 이용해 이렇게 할 수 있습니다.

    오버레이 내에 이 오버레이를 사용하는 창들이 공유하고자 하는 요소들을 배치할 수 있습니다. 이러한 요소들이 창에 추가될때는 id에 의해 위치가 결정됩니다.

    예를 들어, 몇개의 창에서 같이 사용할 수 있는 도움말 메뉴를 만들고자 한다고 가정합시다. 도움말 메뉴는 지금까지 여러분이 사용했던 것과 동일한 XUL 요소를 사용해서 오버레이 내에 작성할 수 있습니다. 메뉴에는 이를 식별하기 위해 id 속성이 부여됩니다. 창은 잠시 후에 설명할 명령어를 이용하여 오버레이를 가져오게 됩니다. 오버레이내에 정의된 도움말 메뉴를 사용하려면, 오버레이에서 사용한 id와 동일한 id를 가진 메뉴 요소를 창에 추가하면 됩니다. 창에 있는 메뉴 요소는 오버레이에 포함된 것들과 동일한 자식 요소를 포함할 필요가 없습니다.

    오버레이를 가진 창이 열리면, id가 동일한 창에 있는 요소와 오버레이에 있는 요소들이 결합됩니다. 오버레이에 있는 요소들은 창에 있는 해당 id의 자식 요소들로 마지막 위치에 추가됩니다. 오버레이의 요소에서 정의된 속성들은 창의 요소에도 적용됩니다. 상세한 내용은 이후에 자세히 설명하겠습니다.

    파일 찾기 예제

    오버레이를 창으로 가져오기 위해서는 아래의 구문을 사용하세요. 파일 찾기 대화창 XUL 파일의 상단에 다음 코드를 삽입하겠습니다.

    <?xul-overlay href="chrome://findfile/content/helpoverlay.xul"?>
    

    위 코드는 파일의 위쪽에 추가되는데 보통은 DTD가 선언된 바로 앞에 넣습니다. 위의 예제에서 창은 helpoverlay.xul 파일에 저장된 오버레이를 가져오게 됩니다.

    오버레이는 그 자체가 XUL 파일이며 window 요소 대신 overlay 요소를 사용합니다. 이것 말고는 모두 동일합니다. 여러분은 오버레이에 다른 오버레이를 가져올 수도 있습니다. 오버레이는 자체의 스타일시트나 DTD, 스크립트를 가질수도 있습니다.

    오버레이에 저장된 간단한 도움말 메뉴

    Source

    <?xml version="1.0"?>
    
    <!DOCTYPE overlay SYSTEM "chrome://findfile/locale/findfile.dtd">
    
    <overlay id="toverlay"
       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
    <menu id="help-menu">
      <menupopup id="help-popup">
        <menuitem id="help-contents" label="&contentsCmd.label;"
                  accesskey="&contentsCmd.accesskey;"/>
        <menuitem id="help-index" label="&indexCmd.label;"
                  accesskey="&indexCmd.accesskey;"/>
        <menuitem id="help-about" label="&aboutCmd.label;"
                  accesskey="&aboutCmd.accesskey;"/>
      </menupopup>
    </menu>
    
    </overlay>
    

    overlay 요소는 오버레이 내용을 둘러쌉니다. 오버레이는 XUL 창 파일과 동일한 이름공간(namespace)를 사용합니다. 위의 오버레이에는 하나의 메뉴와 3개의 메뉴 항목이 정의되어 있습니다. 이 메뉴의 idhelp-menu입니다. 이것은 이 내용이 창내에 동일한 id 값을 가진 요소에 추가된다는 것을 의미합니다. 만일 동일 id를 가진 요소가 존재하지 않는다면 오버레이는 무시됩니다. 오러베이는 필요한만큼 많은 수의 요소를 포함할 수 있습니다. 오버레이는 DTD 파일을 포함해야 합니다. 여기에서는 메인 창과 동일한 것을 사용했지만, 여러분은 보통 각 오버레이별로 별도의 DTD 파일을 작성하게 될것입니다.

    다음으로는 파일 찾기 대화창에 도움말 메뉴를 추가해야 합니다. 오버레이에서 정의한 id와 동일한 id를 가진 메뉴를 원하는 위치에 추가하면 됩니다. 가장 적당한 위치는 edit 메뉴 다음입니다.

     

      <menu id="edit-menu" label="Edit" accesskey="e">
        <menupopup id="edit-popup">
          <menuitem label="&cutCmd.label;" accesskey="&cutCmd.accesskey;"
                    key="cut_cmd"/>
          <menuitem label="&copyCmd.label;" accesskey="&copyCmd.accesskey;"
                    key="copy_cmd"/>
          <menuitem label="&pasteCmd.label;" accesskey="&pasteCmd.accesskey;"
                    key="paste_cmd" disabled="true"/>
        </menupopup>
      </menu>
      <menu id="help-menu" label="&helpCmd.label;"
            accesskey="&helpCmd.accesskey;"/>
    </menubar>
    

    여기서, 도움말 메뉴 요소에는 아무 내용도 포함되어 있지 않습니다. 메뉴 내의 항목들은 오버레이에 있는 동일한 id를 가진 요소의 자식들로 채워지게 될 것입니다. 우리는 이제 다른 창에서도 오버레이를 가져올 수 있으며 한 파일에서만 도움말 메뉴의 내용을 정의했습니다. DTD 파일에는 다음과 같은 내용을 추가해야 합니다.

     <!ENTITY helpCmd.label "Help">
     <!ENTITY helpCmd.accesskey "h">
     <!ENTITY contentsCmd.label "Contents">
     <!ENTITY indexCmd.label "Index">
     <!ENTITY aboutCmd.label "About...">
     <!ENTITY contentsCmd.accesskey "c">
     <!ENTITY indexCmd.accesskey "i">
     <!ENTITY aboutCmd.accesskey "a">
     <!ENTITY findfilehelpCmd.label "Find files help">
     <!ENTITY findfilehelpCmd.accesskey "f">
    
    Image:overlay1.jpg

    지금은 제일 마지막 두 엔티티들만 사용합니다.

    창에 있는 코드의 양을 줄이기 위해 help 메뉴에 있는 속성(예제에서는 labelaccesskey)을 오버레이에 넣을 수 있습니다. 이 속성들은 요소로 상속됩니다. 만일 오버레이와 창에서 동일한 속성을 같이 지정했다면, 오버레이의 값이 창에 있는 내용을 덮어 쓸 것입니다.

    이런 식으로 help 메뉴를 변경합시다.

    findfile.xul:
    
    <menu id="help-menu"/>
    
    helpoverlay.xul:
    
    <menu id="help-menu" label="&helpCmd.label;"
          accesskey="&helpCmd.accesskey;">
    

    중복된 내용

    만일 XUL 창과 오버레이에 모두 내용이 있다면, 창의 내용이 먼저 출력되고 오버레이의 내용은 다음에 붙습니다. 다음 예제는 이러한 내용을 설명합니다.

    stopandgo.xul:
    
    <?xml version="1.0"?>
    
    <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
    
    <window title="Stop and Go" id="test-window"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
    <?xul-overlay  href="chrome://findfile/content/toverlay.xul"?>
    
    <box id="singlebox">
      <button id="gobutton" label="Go"/>
      <button id="stopbutton" label="Stop"/>
    </box>
    
    </window>
    
    toverlay.xul:
    
    <?xml version="1.0"?>
    
    <overlay id="toverlay"
              xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
    <box id="singlebox">
      <button id="backbutton" label="Back"/>
      <button id="forwardbutton" label="Forward"/>
    </box>
    
    </overlay>
    
    Image:overlay2.jpg

    예제에서 id가 singlebox인 상자는 자신만의 내용을 가지고 있었습니다. 오버레이와 결합하면 오버레이에 있는 두 개의 버튼은 상자의 끝으로 추가됩니다.

    파일 찾기 예제

    이 기법을 파일 찾기 대화창에도 적용할 수 있습니다.

    Image:overlay3.jpg
    findfile.xul:
    
      <menu id="help-menu">
        <menupopup id="help-popup">
          <menuitem id="help-findfiles" 
                    label="&findfilehelpCmd.label;" 
                    accesskey="&findfilehelpCmd.accesskey;"/>
        </menupopup>
       </menu>
    </menubar>
    

    menupopup 요소의 id 속성이 오버레이에 있는 것과 일치하므로 동일한 팝업과 합쳐지게 될것입니다. 다른 요소들이 내부에 있더라도 오버레이는 동일한 id를 가진 항목들과 합쳐질 것입니다.

    오버레이된 요소 위치시키기

    앞서 본 예제에서 오버레이에 있는 메뉴 항목들을 끝이 아니라 앞에 위치시키고 싶을 때도 있을 것입니다. XUL에서는 마지막 외의 어떤 곳에도 위치시킬 수 있는 방법을 제공합니다. 이것은 여러분이 원하는 정확한 위치에 메뉴, 툴바나 다른 위젯들을 위치시킬 수 있게 해 줍니다.

    이를 위해서는 메뉴 항목에 insertbefore 속성을 사용합니다. 이 속성은 창에 있는 특정 요소의 id를 나타내며 이 id에 해당하는 요소의 앞에 오버레이 요소가 배치됩니다. 대신 insertafter 속성을 사용하면 이 속성값에 해당하는 창 요소의 뒤에 오버레이 요소가 위치하게 됩니다. 이 속성들은 이 속성들이 있는 요소에만 영향을 줍니다. 만약 한 요소만 insertbefore 속성이 있고 나머지는 없다면, 속성이 존재하지 않는 나머지 요소들은 마지막에 추가될 것입니다. 만일 모든 요소가 어떤 요소 앞에 위치하게 하고자 한다면 모든 요소에 insertbefore 속성을 추가해야 합니다.

    또한 특정 위치를 명시하려면 position 속성을 사용하면 됩니다. 첫번째 위치는 1입니다.

    앞의 예제에서 Content와 Index 항목은 앞에 나오고 About 항목은 뒤에 나오게 하고자 한다고 합시다. 이를 위해서는 Content와 Index 메뉴 항목에 insertbefore 속성을 넣어야 합니다. 완벽함을 위해 insertafter 속성을 About 메뉴 항목에다가도 넣을 수 있습니다. 그러나 이 항목은 기본적으로 마지막에 나타나므로 필요한 것은 아닙니다.

    예제의 도움말 메뉴에서 메뉴 항목의 id는 help-findfiles입니다. 따라서 insertbefore 속성에 해당 id를 설정해야 합니다. 다음 예제는 변경된 내용을 보여줍니다.

    <menupopup id="help-popup">
      <menuitem id="help-contents" label="Contents" insertbefore="help-findfiles"/>
      <menuitem id="help-index" label="Index" insertbefore="help-findfiles"/>
      <menuitem id="help-about" label="About..."/>
    </menupopup>
    

    이제 help 오버레이를 사용하는 창(파일 찾기 대화창과 같은 것)이 열리면 다음 내용이 발생합니다.

    • overlay 요소의 자식 요소들과 동일한 id를 가진 기본 창에 있는 요소들이 검색됩니다. 발견되지 않으며 오버레이에 있는 요소는 무시됩니다. 위 예제에서는 help-menuhelp-popup id가 발견되었습니다.
    • 만일 발견되었으며, 오버레이 요소의 속성들이 발견된 요소들로 복사됩니다.
    • 오버레이 요소의 자식들이(이번 경우는 메뉴 항목) 창의 요소의 자식으로 삽입됩니다.
      • 만일 오버레이 요소에 insertafter 속성이 있으면, 동일한 id를 가진 창 요소의 다음에 추가됩니다.
      • 만일 오버레이 요소에 insertbefore 속성이 있으면, 동일한 id를 가진 창 요소의 앞에 추가됩니다.
      • 만일 오버레이 요소에 position 속성이 있으면, 해당 속성에서 지정한 위치에 추가됩니다.
      • 이 외의 경우에는 마지막 요소로 추가됩니다.

    insertbeforeinsertafter 속성의 값은 쉼표(,)로 분리된 목록일 수 있는데, 이 경우 창에서 목록 중 첫 번째로 발견되는 id가 해당 위치를 결정하게 됩니다.

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

    다음에는 다른 꾸러미에 있는 창에 오버레이를 적용하는 방법에 대해 알아보겠습니다.

    문서 태그 및 공헌자

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