Introduction to XBL

XUL은 자매(sister) 언어 XBL (eXtensible Bindings Language)이 있습니다. 이 언어는 XUL 위젯의 behavior를 선언하는데 쓰입니다.

바인딩

어플리케이션 사용자 인터페이스의 레이아웃을 정의하기 위해 XUL을 쓸 수 있습니다. 요소에 스타일을 적용하여 입맛대로 모양(look)을 바꿀 수 있습니다. 또한 스타일을 바꿔 새 스킨을 만들 수 있습니다.

스크롤 바와 체크 박스 같은 요소 모두의 기본 겉모양은 스타일 조정(adjust)이나 요소에 속성을 주어 수정해도 좋습니다. 그러나, XUL은 요소가 작동하는 법을 바꿀 수 있는 수단은 제공하지 않습니다. 예를 들면, 스크롤 바 막대가 기능하는 법을 바꾸고 싶을지도 모릅니다. 이를 이해서는, XBL이 필요합니다.

XBL 파일은 바인딩 집합을 포함합니다. 각 바인딩은 XUL 위젯의 behavior를 기술합니다. 예를 들면, 바인딩은 스크롤 바에 부착될지도 모릅니다. behavior는 스크롤 바를 만드는 XUL 요소 기술뿐만 아니라 속성(property)과 메소드도 기술합니다.

XUL처럼 XBL도 XML 언어입니다. 그래서 비슷한 구문 규칙이 있습니다. 다음 예는 XBL 파일의 기본 뼈대(skeleton)를 보입니다.

<?xml version="1.0"?>
<bindings xmlns="https://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

bindings 요소는 XBL 파일의 루트 요소고 하나 이상의 binding 요소를 포함합니다. 각 binding 요소는 단일 바인딩으로 선언합니다. id 속성은 위 보기처럼 바인딩을 식별하기 위해 쓰일 수 있습니다. 템플릿에는 두 바인딩이 있습니다. 하나는 binding1으로 부르고 다른 하나는 binding2입니다. 하나는 스크롤 바에 다른 하나는 메뉴에 부착될지도 모릅니다. 바인딩은 어떤 XUL 요소에도 부착할 수 있습니다. CSS 클래스를 쓰면, 필요에 따라 많은 다양한 바인딩을 쓸 수 있습니다. 이것은 XBL 구문을 써서 선언합니다.

바인딩 파일의 URL에 CSS 속성(property) -moz-binding을 주어 요소에 바인딩을 할당합니다. 예를 들면,

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

URL은 파일 'chrome://findfile/content/findfile.xml' 안 id가 'binding1'인 바인딩을 가리킵니다.

'#binding1' 구문은 HTML 파일에서 앵커(anchor)를 가리키는 것처럼 특정 바인딩을 가리키는데 쓰입니다. 보통 파일 하나에 바인딩을 전부 둘 겁니다. 이 예에서 결과는 모든 스크롤바 요소가 바인딩 'binding1'에 기술한 behavior를 지닐 겁니다.

바인딩은 선언하는 다섯 가지 종류가 있습니다.

컨텐트: 바인딩이 바운드되는 요소에 더하는 자식 요소.
속성: 요소에 더하는 속성. 스크립트로 접근할 수 있습니다.
메소드: 요소에 더하는 메소드. 스크립트에서 호출할 수 있습니다.
이벤트: 요소가 반응할 마우스 클릭과 키누름 같은 이벤트. 바인딩은 기본 처리(handling)를 제공하는 스크립트를 더할 수 있습니다. 게다가 새 이벤트를 정의할 수도 있습니다.
스타일: XBL이 정의한 요소의 사용자 정의 스타일 속성.

바인딩 예제

box는 사용자 정의 위젯을 만드는데 쓸 수 있을 만큼 충분히 일반적(generic)입니다(비록 어떤 요소라도 쓸 수 있지만). box 태그에 class를 할당하여 바인딩을 오직 그 클래스에 속하는 상자에 관련지을 수 있습니다. 다음 예가 이를 보입니다.

XUL (example.xul):

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?>

<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <box class="okcancelbuttons"/>
</window>

CSS (example.css):

box.okcancelbuttons {
    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
}

XBL (example.xml):

<?xml version="1.0"?>
<bindings xmlns="https://www.mozilla.org/xbl"
         xmlns:xul="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="okcancel">
    <content>
      <xul:button label="OK"/>
      <xul:button label="Cancel"/>
    </content>
  </binding>
</bindings>

이 예는 상자 하나가 있는 창을 만듭니다. 상자는 okcancelbuttons의 class가 있게 선언되었습니다. 파일과 관련 있는 스타일 시트는 okcancelbuttons 클래스가 있는 상자가 XBL 파일에 정의한 특수 바인딩을 갖는다고 말합니다. box 말고도 다른 요소, 심지어 사용자 정의 테그를 쓸지도 모릅니다.

다음 절에서 XBL의 세부 부분을 더 살펴보겠습니다. 그러나, 간략히 말하면 상자 안에 자동으로 버튼 2개(확인 버튼과 취소 버튼)를 더하게 합니다.

다음 절에서는, XBL로 컨텐트 만들기를 보겠습니다.

« 이전 다음 »

Introduction to XBL

바인딩

바인딩 예제

문서 태그 및 공헌자