mozilla
검색 결과

    Adding Buttons

    이 절에서, 우리는 창에 간단한 버튼 몇 개를 추가하는 법을 살펴보겠습니다.

    창에 버튼 추가하기

    우리가 지금까지 만든 창은 안에 아무것도 없습니다, 그래서 아직까지는 재미있지 않습니다. 이 절에서, 우리는 찾기(Find)와 취소(Cancel) 버튼 둘을 추가합니다. 또한 창에 버튼을 두는 간단한 방법을 배웁니다.

    HTML처럼, XUL은 UI 요소를 만드는 데 쓸 수 있는 태그가 다수 있습니다. 이 가운데 가장 기본은 button 태그입니다. 이 요소는 간단한 버튼을 만드는 데 씁니다.

    button 요소에는 요소와 관련된 두 주요 프로퍼티 labelimage가 있습니다. 여러분은 하나나 둘 다 필요합니다. 이와 같이, button은 label, image만이나 label과 image 둘 다 있을 수 있습니다. 예를 들어, button은 보통 대화상자에서 확인(OK)과 취소(Cancel) 버튼에 씁니다.

    button 구문

    button 태그의 구문은 다음과 같습니다.

    <button
        id="identifier"
        class="dialog"
        label="OK"
        image="images/image.jpg"
        disabled="true"
        accesskey="t"/>
    

    속성은 다음과 같고, 모두 선택 속성입니다.

    id 
    여러분이 식별할 수 있도록 버튼에 붙이는 유일한 식별자. 여러분은 모든 요소에서 이 속성을 봅니다. 여러분이 스타일시트나 스크립트에서 버튼을 참조하고 싶다면 이를 쓰고 싶을 겁니다. 그러나, 여러분은 거의 모든 요소에 이 속성을 추가해야 합니다. 단순함을 위해 항상 이 입문서의 요소에 두지는 않습니다.
    class 
    버튼의 스타일 클래스. 이는 HTML에서와 같이 작동합니다. 버튼이 안에 보이는 스타일을 나타내는 데 씁니다. 이 경우에는 dialog값이 쓰입니다. 대개의 경우, 여러분은 버튼에 클래스를 쓰지 않습니다.
    label 
    버튼에 보이는 label. 예를 들어, 확인( OK )이나 취소( Cancel ). 이 속성을 빼면, 텍스트가 보이지 않습니다.
    image 
    버튼에 보이는 image의 URL. 이 속성을 빼면, image가 보이지 않습니다. 여러분은 또한 list-style-image 프로퍼티를 써서 스타일시트에 image를 지정할 수 있습니다.
    disabled 
    이 속성을 true로 설정하면, button이 기능하지 않습니다. 이는 보통 회색으로 텍스트를 그립니다. 버튼이 기능하지 않으면, 버튼의 기능이 수행될 수 없습니다. 이 속성을 아주 빼면, 버튼이 작동합니다. 여러분은 JavaScript를 써서 버튼의 기능 상태를 엇바꿀(switch) 수 있습니다.
    accesskey 
    이는 단축키(shortcut key)로 쓸 문자로 설정돼야 합니다. 이 문자는 label 텍스트에 보여야 하고 대체로 밑줄이 그려집니다. 사용자가 ALT(나 각 플랫폼마다 다른 비슷한 키)와 access key를 눌렀을 때, 버튼은 창의 어디에서나 focus를 받습니다.

    button은 위에 나열된 것보다 더 많은 속성을 지원함을 유념하세요. 그 밖의 속성은 나중에 논의합니다.

    버튼 예제

    Example 1 : Source View

    Image:buttons1.png
    <button label="Normal"/>
    <button label="Disabled" disabled="true"/>
    

    위 예제는 그림(image)처럼 버튼을 생성합니다. 첫째 버튼은 보통 버튼입니다. 둘째 버튼은 기능하지 않으므로 회색으로 나옵니다.

    파일 찾기(find files) 유틸리티를 위한 간단한 찾기(Find) 버튼을 만들면서 시작합니다. 아래 예제 코드는 그 방법을 보입니다.

    <button id="find-button" label="Find"/>
    
    Firefox는 웹 페이지에서 chrome 창 열기를 허용하지 않으므로, 입문서의 View 링크는 보통 브라우저 창에 열림을 유념하세요. 이 때문에, button은 창을 가로질러 늘어나 보입니다. 여러분은 늘어남을 막기 위해 window 태그에 align="start"를 추가할 수 있습니다.
    findfile.xul 예제

    우리가 이전 절에서 만든 findfile.xul 파일에 이 코드를 추가합시다. 코드는 window 태그 사이에 삽입이 필요합니다. 추가한 코드는 아래에 빨간 색으로 보입니다.

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    <window
        id="findfile-window"
        title="Find Files"
        orient="horizontal"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
      <button id="find-button" label="Find"/>
      <button id="cancel-button" label="Cancel"/>
    
    </window>
    
    Image:buttons2.png

    여러분은 취소(Cancel) 버튼 또한 추가됐음을 알아챌 겁니다. 창은 두 버튼이 서로 곁에 보이도록 horizontal 방향을 주었습니다. 혹시 여러분이 Mozilla에서 그 파일을 열면, 여기 보이는 그림 같은 것을 얻습니다.

     

    우리가 XUL 파일에 직접 텍스트 label을 넣지 않았음을 유념하세요. 우리는 텍스트가 쉽게 번역될 수 있도록 대신 엔티티를 쓸 겁니다.

    다음 절에서, 우리는 XUL 창에 label과 image를 추가하는 법을 알아보겠습니다.

    같이 보기 more button fetaures

    문서 태그 및 공헌자

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