diff options
Diffstat (limited to 'files/ko/archive/mozilla/xbl')
3 files changed, 537 insertions, 0 deletions
diff --git a/files/ko/archive/mozilla/xbl/index.html b/files/ko/archive/mozilla/xbl/index.html new file mode 100644 index 0000000000..1dcff4d284 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/index.html @@ -0,0 +1,32 @@ +--- +title: XBL +slug: Archive/Mozilla/XBL +tags: + - XBL +translation_of: Archive/Mozilla/XBL +--- +<p><b>XML Binding Language</b>(<b>XBL</b>, 종종 Extensible Bindings Language로도 불림)는 다른 문서의 요소에 덧붙일 수 있는 바인딩을 기술하는 언어입니다. 바인딩이 덧붙는 요소는 "바운드 요소"라 부르고 바인딩이 지정한 새 behavior를 얻습니다.</p> +<p>바인딩은 바운드 요소에 등록되는 이벤트 핸들러, 바운드 요소로부터 접근하게 되는 새 메소드와 특성(property)의 구현, 바운드 요소 아래에 끼워 넣는 익명(anonymous) 컨텐트를 포함할 수 있습니다.</p> +<p>대다수의 <a href="ko/XUL">XUL</a> 위젯이 적어도 일부분은 XBL를 써서 구현됩니다. XBL을 써서 기존 <a href="ko/XUL">XUL</a>, <a href="ko/HTML">HTML</a>, <a href="ko/SVG">SVG</a>, 그 밖의 다른 원시 요소(primitive)에서 재사용 가능한 위젯을 빌드할 수 있습니다.</p> +<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> +<p>XBL 1.0은 <a href="ko/XBL/XBL_1.0_Reference">XBL 1.0 레퍼런스</a>에 명기되어 있습니다. 불행하게도, Mozilla의 실제 구현은 명세와 다르며 그 차이를 기술한 문서는 아직 알려지지 않았습니다. 레퍼런스가 이 차이를 기술하도록 갱신되기를 희망합니다.</p> +<p>XBL 1.0은 Mozilla만의 기술이고 <a class="external" href="http://w3.org/">W3C</a> 표준이 아닙니다. 그러나, 적어도 두 개의 표준(sXBL과 XBL 2.0)이 작업 중에 있습니다.</p> +<ul> + <li>W3C <a class="external" href="http://w3.org/TR/sXBL/">sXBL</a>(현재 working draft)은 + <i> + SVG's XML Binding Language</i> + 를 뜻합니다. <a href="ko/SVG">SVG</a>에 필요한 XBL 2.0 기능의 부분 집합(subset)을 포함할 예정입니다. Mozilla의 XBL과 비슷한 목적을 가지고 있으나 미묘한(또 그리 미묘하지 않은) 차이가 몇 가지 있습니다. 예를 들면, 요소의 이름이 다릅니다. 또한 sXBL은 바인딩 상속과 바운드 요소에 메소드/속성을 정의하는 것 같이 XBL에 있는 몇몇 기능이 빠져 있습니다.</li> +</ul> +<ul> + <li><a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0</a>(<a class="external" href="http://w3.org/TR/XBL/">W3C working draft</a>)은 XBL 1.0에서 발견한 문제점을 처리하고 더 많은 웹 브라우저를 지원하도록 개발하고 있습니다.</li> +</ul> +<p>sXBL과 XBL2 사이의 차이는 <a class="external" href="http://annevankesteren.nl/2005/11/xbl">Anne van Kesteren의 글</a>에 나열되어 있습니다.</p> +<h3 id=".EB.8D.94_.EB.B3.B4.EA.B8.B0" name=".EB.8D.94_.EB.B3.B4.EA.B8.B0">더 보기</h3> +<ul> + <li><a href="ko/XUL_Tutorial/Introduction_to_XBL">Introduction to XBL</a> from the <a href="ko/XUL_Tutorial">XUL Tutorial</a>.</li> + <li><a class="external" href="http://mb.eschew.org/15.php">XBL chapter</a> of <a class="external" href="http://mb.eschew.org/">"Rapid Application Development with Mozilla"</a></li> +</ul> +<ul> + <li><a>More XBL resources...</a></li> +</ul> +<p></p> diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html new file mode 100644 index 0000000000..9f0eab90c9 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html @@ -0,0 +1,387 @@ +--- +title: Elements +slug: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements +translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements +--- +<p> </p> +<h2 id="bindings" name="bindings">bindings</h2> +<p><span class="comment">This section is tested and adjusted for the current Firefox implementation. Please edit only if an actual behavior differs from the described one. Please do not edit only on the basis of another XBL specification.</span></p> +<pre><!ELEMENT bindings ( binding* ) > + +Hierarchy: root element +May contain: <binding> +</pre> +<p>The <code>bindings</code> element is the root element of any XBL document. It should usually declare XBL as the default namespace (unless an XBL namespace prefix is used) and it may additionally declare other namespace prefixes used in your binding.</p> +<p><code>bindings</code> contains zero or more <code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code> elements as children. Each <code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code> child element defines a unique binding that can be attached to elements in other documents.</p> +<p>An element can have only one binding attached (explicitly or inherited) at one moment. From several bindings only the last in the sequence will be used (like with any CSS rule).</p> +<pre>HelloWorld example: + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<html> +<head> +<title>Hello world!</title> +<style type="text/css"> +p { + -moz-binding: url(hello.xml#default); +} +#p03 { + -moz-binding: url(hello.xml#hello2); +} +</style> +</head> +<body + + <p>Default content</p> + <p>Default content</p> + <p id="p03">Default content</p> + +</body> +</html> + +// hello.xml + +<?xml version="1.0"?> +<bindings xmlns="http://www.mozilla.org/xbl" + xmlns:html="http://www.w3.org/1999/xhtml"> + <binding id="default"> + <content><html:b>Hello world! </html:b><children/></content> + </binding> + <binding id="hello2"> + <content><html:b>Hello from my binding! </html:b><children/></content> + </binding> +</bindings> +</pre> +<p><a class="external" href="http://www.nskom.com/external/xbl/mdc/HelloWorld.html">View this example</a></p> +<p>Next: <code><big>bindings > <a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></big></code> element.</p> +<h3 id="Notes" name="Notes">Notes</h3> +<ul> + <li>In the current stable releases of Mozilla products (e.g. Firefox 2) it is impossible to attach bindings to table sub-elements (rows, cells etc.) You can attach binding only to the table element itself. This has been fixed for future versions of Mozilla products. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=83830" title="FIXED: Binding TD cells (with XBL) doesn't work, at all">bug 83830</a> for more information and for workarounds.</li> + <li>Default encoding in XML documents (including XBL files) is UTF-8. An explicit encoding declarations may be present to override the default, for example <code><?xml version="1.0" encoding="ISO-8859-1"?></code></li> + <li>URI in namespace declarations is an opaque string used to uniquely identify the namespace. It doesn't have to (and often it doesn't) point to some actual schema or a namespace-related resource. <a class="external" href="http://www.w3.org/TR/REC-xml-names/#ns-decl">Namespaces in XML</a></li> + <li>Besides the default namespace, you can declare any amount of additional namespaces to handle your content. The most useful namespaces could be HTML/XHTML, <a href="ko/XUL">XUL</a> (XML User Interface Language), <a href="ko/SVG">SVG</a> (Scalable Vector Graphics) and <a class="external" href="http://www.w3.org/TR/xlink/">XLink</a>. This way a more-or-less universal namespace declaration in your <code>bindings</code> could be like:</li> +</ul> +<pre><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:html = "http://www.w3.org/1999/xhtml" + xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:svg = "http://www.w3.org/2000/svg" + xmlns:xlink= "http://www.w3.org/1999/xlink"> +</pre> +<h2 id=".EB.B0.94.EC.9D.B8.EB.94.A9" name=".EB.B0.94.EC.9D.B8.EB.94.A9">바인딩</h2> +<pre><!ENTITY % binding-content "(resources?,content?,implementation?,handlers?)"> +<!ELEMENT binding %binding-content;> +<!ATTLIST binding + id ID #REQUIRED + extends CDATA #IMPLIED + display CDATA #IMPLIED + inheritstyle true #IMPLIED +> +</pre> +<p><code>binding</code> 요소는 단일 XBL 바인딩을 기술합니다. XBL 바인딩은 HTML/XML 요소에 + <i> + <a href="ko/XBL/XBL_1.0_Reference/Elements#_content">anonymous content</a></i> + , + <i> + <a href="ko/XBL/XBL_1.0_Reference/Elements#field">fields</a></i> + , + <i> + <a href="ko/XBL/XBL_1.0_Reference/Elements#property">properties</a></i> + , + <i> + <a href="ko/XBL/XBL_1.0_Reference/Elements#method">methods</a></i> + , + <i> + <a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">event handlers</a></i> + 를 추가할 수 있습니다.</p> +<p>단일 XBL 바인딩은 스타일 시트나 스크립팅을 사용하여 요소에 붙일 수 있습니다 (<table>에 특정한 사항은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=83830" title="FIXED: Binding TD cells (with XBL) doesn't work, at all">bug 83830</a>를 참고하십시오).</p> +<p>CSS:</p> +<pre>div { + -moz-binding: url(myBinding.xml#default); +} +</pre> +<p>DOM:</p> +<pre>elementReference.style.MozBinding = "url(myBinding.xml#default}"; +</pre> +<p>위의 두 가지 경우 모두는 <code>myBinding.xml</code>에 포함된 <code>id="default"</code>를 가진 바인딩을 사용하고 있습니다.</p> +<p> Firefox 3부터는 바인딩을 인라인으로 삽입하기 위해 <code>data:</code> URL을 사용할 수 있습니다.</p> +<pre>div { + -moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Cbindings%20id%3D%22xbltestBindings%22%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%0A%20%20%3Cbinding%20id%3D%22xbltest%22%3E%3Ccontent%3EPASS%3C/content%3E%3C/binding%3E%0A%3C/bindings%3E%0A); +} +</pre> +<p><code>data:</code> URL은 부분 식별자(fragment identifier)를 지원하지 않기 때문에 대신 삽입된 XML에서 발견한 첫 번째 바인딩을 사용합니다. 바인딩은 참조하지 않더라도 아이디가 있어야 한다는 점을 염두해 두십시오.</p> +<p>앞선 예제의 삽입된 XML은 다음과 같습니다.</p> +<pre><?xml version="1.0"?> +<bindings id="xbltestBindings" xmlns="http://www.mozilla.org/xbl"> + <binding id="xbltest"><content>PASS</content></binding> +</bindings> +</pre> +<p>CSS 선언만이 바인딩을 임의의 요소 집합에 붙이는 쉬운 방법을 제공합니다. 이는 또한 스크립팅이 비할성화되어 있을 때 바인딩이 부분적으로 동작하게 만듭니다. 이 경우 모든 메소드와 핸들러는 차단되지만 익명의 내용과 스타일은 계속 사용됩니다. 그러므로 실행 중에 개별 요소에 바인딩을 추가할 필요가 없다면 항상 CSS 선언을 사용해야 합니다.</p> +<p><code>binding</code> 요소는 <a href="ko/XBL/XBL_1.0_Reference/Elements#resources">resources</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#_content">content</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">handlers</a> 태그를 포함할 수 있습니다.</p> +<ul> + <li><code><b>id</b></code> - <code>id</code> 속성은 문서에서 유일한(document-unique) 식별자입니다. <code>binding</code> 요소에서 이 속성은 바인딩을 붙이는데 사용되므로 꼭 필요합니다.</li> + <li><code><b>extends</b></code> - <code>extends</code> 속성은 이 바인딩이 물려 받은 바인딩의 URL을 지정하는데 사용합니다 (<a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Inheritance_of_Implementations">Inheritance of Implementations</a> 참고). URL은 특정한 바인딩 문서를 지정합니다. 바인딩 문서 내에서 특정 바인딩 <code>id</code>를 가리키려면 # 표시를 꼭 사용해야 합니다. 내용은 상속할 수 없으며 동작만 상속된다는 점에 주의하십시오.</li> + <li><code><b>display</b></code> - 이 속성은 태그가 표시되는 방법을 지정합니다. 이 속성을 지정함으로써 기존 요소의 레이아웃과 표시 특성을 가진 요소를 가질 수 있습니다. 예를 들어, 'xul:button' 값을 사용하면 버튼처럼 표시되는 요소를 생성할 수 있습니다. 콜론 이전의 부분은 이름 공간 접두어이므로 XUL 이름 공간도 정의해야 합니다. 다음 XML 표시 형식을 사용할 수 있습니다: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren, treecol. 또한 다수의 HTML, MathML, SVG 태그를 사용할 수 있습니다. 'display' 속성은 <code>extends</code> 속성이 지정되지 않으면 동작하지 않는데, 이는 버그 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119389" title="display= doesn't work if extends= is not present">bug 119389</a>를 참고하십시오. 이러한 경우에는 <code>display</code> 속성의 값을 <code>extends</code>에 넣으십시오.</li> + <li><code><b>inheritstyle</b></code> - <code>inheritstyle</code> 속성은 문서의 스타일 규칙이 XBL 바인딩이 생성한 익명의 내용에 영향을 미칠 것인지 가리킵니다. 속성이 true이면 문서의 스타일은 XBL이 생성한 익명의 내용에도 영향을 미칩니다.</li> +</ul> +<p> </p> +<h2 id="content" name="content">content</h2> +<pre><!ELEMENT content ANY> +<!ATTLIST content + id ID #IMPLIED +> +</pre> +<p>A binding can specify new content that is placed inside the bound element. Although you can see this content on screen as if it was directly in the file, this content is anonymous and is hidden from the normal <a href="ko/DOM">DOM</a>. To access anonymous nodes on an XBL bound element, you can use the <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> and <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes</a> functions. The only XBL element that can appear inside the content tag is the <a href="ko/XBL/XBL_1.0_Reference/Elements#children">children</a> tag. Attributes on the <content> element in the binding are set on the bound element.</p> +<ul> + <li><code><b>id</b></code> - The id attribute is a document-unique identifier.</li> +</ul> +<h2 id="children" name="children">children</h2> +<pre><!ELEMENT children EMPTY> +<!ATTLIST children + id ID #IMPLIED + includes CDATA #IMPLIED +> +</pre> +<p>Specifies the location where any child elements of the bound element are placed in the generated content.</p> +<p>Normally, if the element bound to has its own content, the anonymous content is not generated. However, with a <code>children</code> element, you can merge the content from the HTML/XML element and the XBL content.</p> +<p>If the children tag contains content itself, that content will become the default content. If the element the binding is attached to contains content, the default content will be ignored. If the element does not contain content, the default content will be added.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>includes</b></code> - The <code>includes</code> attribute can be used to indicate that only certain content should be placed at the insertion point specified by the <code>children</code> element. Its value can be a tag name or multiple tag names separated by commas. A child can only be placed within the insertion point if it is matched by the value in the <code>includes</code> attribute. Only immediate children are matched against the selector. For example, an XML fragment <code><customElement><foobar><hoge/></foobar></customElement></code> with an binding definition <code><binding id="customElement"><content><xul:box><children includes="hoge"/></xul:box></content></binding></code> for the <code>customElement</code> element, <code><xul:box/></code> becomes empty because the selector <code>includes="hoge"</code> doesn't match for the immediate child <code>foobar</code> element.</li> +</ul> +<h2 id="implementation" name="implementation">implementation</h2> +<pre><!ENTITY % implementation-content "(method|property)*"> +<!ELEMENT implementation %implementation-content;> +<!ATTLIST implementation + id ID #IMPLIED + name CDATA #IMPLIED + implements CDATA #IMPLIED +> +</pre> +<p>The <code>implementation</code> element describes the set of methods and properties that are attached to the bound element. Once the binding is attached, these methods and properties can be invoked directly from the bound element.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>name</b></code> - The <code>name</code> attribute can be used to provide a specific name for an implementation. This name can then be used to reference the implementation. For example, in JavaScript the value of this attribute represents the name of the corresponding class that is constructed for the implementation. If no name attribute is specified then the binding's document URI and id are used to uniquely reference the binding's implementation.</li> + <li><code><b>implements</b></code> - The <code>implements</code> attribute can be used to describe the set of interfaces that are implemented by the binding. Its value is a comma-separated list of named interfaces. If supported, in strongly typed languages the bound element can be referenced not only as any of the interfaces that the element might already support (e.g., HTMLElement) but also as any of the interfaces described by this attribute. Support of this capability is optional.</li> +</ul> +<h2 id="constructor" name="constructor">constructor</h2> +<p>The code inside the <code>constructor</code> is called when a <code>binding</code> has just been attached to an element. So full access to anonymous nodes generated by the binding is already possible. The <code>constructor</code> tag must be placed inside the <code>implementation</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<div class="note"> + <b>Note:</b> Prior to Firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to get layout information from within the constructor could return out of date information. In Firefox 3 and later, the constructor is called when reflow can take place, which results in up-to-date information being returned. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=398404" title="FIXED: [FIX]Disallow reflow while processing constructors">bug 398404</a> for details.</div> +<h2 id="destructor" name="destructor">destructor</h2> +<p>The code inside the <code>destructor</code> is called when a <code>binding</code> is being removed from an element. You can use this to unload resources to free memory. However the <code>destructor</code> is often not called when it should, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=230086" title="Destructor of XBL element isn't called when I remove this element from DOM">bug 230086</a>. The <code>destructor</code> tag must be placed inside the <code>implementation</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="method" name="method">method</h2> +<pre><!ENTITY % method-content "(parameter*,body?)"> +<!ELEMENT method %method-content;> +<!ATTLIST method + id ID #IMPLIED + name CDATA #REQUIRED + type CDATA #IMPLIED +> +</pre> +<p>The <code>method</code> element is used to describe a single method of a binding implementation.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>name</b></code> - The <code>name</code> attribute's value is the name given to the method when it is attached to the bound element. The method can be invoked directly from the bound element using this value.</li> +</ul> +<p> + <i> + Example</i> +</p> +<pre><method name="scrollTo"> + <parameter name="index"/> + <body> + this.setAttribute("scrollpos", index); + </body> +</method> +</pre> +<h2 id="parameter" name="parameter">parameter</h2> +<pre><!ELEMENT parameter EMPTY> +<!ATTLIST parameter + id ID #IMPLIED + name CDATA #REQUIRED +> +</pre> +<p>The <code>parameter</code> element is used inside a <code>method</code> element. It represents a single parameter of a method.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>name</b></code> - The value of the <code>name</code> attribute is used by script within a method's <code>body</code> element to reference this parameter.</li> +</ul> +<h2 id="body" name="body">body</h2> +<pre><!ELEMENT body CDATA> +<!ATTLIST body + id ID #IMPLIED +> +</pre> +<p>The <code>body</code> element represents the implementation of its corresponding <code>method</code>. Its contents are the script that is executed when the method is invoked.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="field" name="field">field</h2> +<pre><!ELEMENT field EMPTY> +<!ATTLIST field + id ID #IMPLIED + name CDATA #REQUIRED + readonly (true|false) #IMPLIED +> +</pre> +<p>A field is similar to a <code><a href="ko/XBL/XBL_1.0_Reference/Elements#property">property</a></code>, except that it should not have a getter or setter. It is useful as a simple holder for a value. The field element must have content which is code that determines the initial value of the field. The <code>field</code> tag must be inside the <code>implementation</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>name</b></code> - The name of the field. This is the name used to refer to the field on the bound element.</li> + <li><code><b>readonly</b></code> - If true, this field is read-only. If this attribute is omitted, the field will be readable and writable.</li> +</ul> +<div class="note"> + <b>Note:</b> In Firefox 3, fields are now evaluated the first time they're accessed instead of at binding attachment time. This shouldn't cause any problems in typical use cases, but there are cases in which this will impact the behavior of your code. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=372769" title="FIXED: [FIX]<field> evaluation happens at an unsafe time">bug 372769</a> for details.</div> +<p>Here are some examples of cases in which the behavior of your code may change due to this change in Firefox 3:</p> +<ol> + <li>If you have two fields, one named <code>A</code> and one named <code>B</code>, and field <code>A</code> sets <code>.B</code>, the value of <code>.B</code> will depend on whether or not <code>.A</code> has already been accessed.</li> + <li>If a proto is inserted into the proto chain after binding instantiation, doing so may affect field values (this wasn't the case in prior versions of Firefox).</li> + <li>At binding attachment time, <code><span class="nowiki"><field name="parentNode">this.parentNode</field></span></code> is undefined instead of the value of <code>parentNode</code>.</li> + <li>A field no longer changes the value of a property set on the object itself (rather than a proto) before binding attachment.</li> +</ol> +<h2 id="property" name="property">property</h2> +<pre><!ENTITY % property-content "(getter?,setter?)"> +<!ELEMENT property %property-content;> +<!ATTLIST property + id ID #IMPLIED + name CDATA #REQUIRED + readonly (true|false) #IMPLIED + onget CDATA #IMPLIED + onset CDATA #IMPLIED +> +</pre> +<p>The <code>property</code> element represents a single property of an implementation. A property consists of a pair of getter/setter functions that can be defined using <code>onget</code>/<code>onset</code> attributes or <a href="ko/XBL/XBL_1.0_Reference/Elements#getter">getter</a>/<a href="ko/XBL/XBL_1.0_Reference/Elements#setter">setter</a> elements underneath the <code>property</code> element. Like methods, once the binding is attached, the property can be obtained directly from the bound element. The <code>property</code> tag must be inside the <code>implementation</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>name</b></code> - The name of the property. This is the name used to refer to the property on the bound element.</li> + <li><code><b>readonly</b></code> - The <code>readonly</code> attribute is used to designate a property as read-only. If set to <code>true</code>, the value of the property cannot be altered. If this attribute is omitted, the property will be readable and writable.</li> + <li><code><b>onget</b></code> - The <code>onget</code> attribute's value is a script that executes when the value of the property is requested. If this attribute is set, any initial value contained underneath the element will be ignored. The return value of the script represents the value of the property that will be returned to the requestor. A property getter can also be specified as a child of the <code>property</code> element using the <code>getter</code> tag.</li> + <li><code><b>onset</b></code> - The <code>onset</code> attribute's value is a script that executes when the value of the property is being altered. If this attribute is set, any initial value contained underneath the element will be ignored. Within the script, the parameter <code>val</code> represents the new value being assigned. The script should always return the actual value assigned in order to allow for chained assignment operations. A property setter can also be specified as a child of the <code>property</code> element using a <code>setter</code> tag.</li> +</ul> +<h2 id="getter" name="getter">getter</h2> +<pre><!ELEMENT getter PCDATA> +<!ATTLIST getter + id ID #IMPLIED +> +</pre> +<p>The <code>getter</code> element contains script that gets executed when a specific property gets called. The <code>getter</code> tag must be inside the <code>property</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="setter" name="setter">setter</h2> +<pre><!ELEMENT setter PCDATA> +<!ATTLIST setter + id ID #IMPLIED +> +</pre> +<p>The <code>setter</code> element contains script that gets executed when a specific property is being set. The <code>setter</code> tag must be inside the <code>property</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="handlers" name="handlers">handlers</h2> +<pre><!ENTITY % handlers-content "handler*"> +<!ELEMENT handlers %handlers-content;> +<!ATTLIST handlers + id ID #IMPLIED +> +</pre> +<p>The <code>handlers</code> element contains event handlers that can be attached to elements within the bound document. These handlers are installed when the binding is attached and removed when the binding is detached. The <code>handlers</code> tag must be inside the <code>binding</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="handler" name="handler">handler</h2> +<pre><!ENTITY % handler-content "PCDATA"> +<!ELEMENT handler %handler-content;> +<!ATTLIST handler + id ID #IMPLIED + event NMREF #REQUIRED + action CDATA #IMPLIED + phase (capturing|bubbling|target) #IMPLIED + button (1|2|3) #IMPLIED + modifiers CDATA #IMPLIED + keycode CDATA #IMPLIED + key CDATA #IMPLIED + charcode CDATA #IMPLIED + clickcount (1|2|3) #IMPLIED + command ID #IMPLIED + preventdefault false|true #IMPLIED +> +</pre> +<p>The <code>handler</code> element describes a single event handler. This handler is attached to its target at the time the binding is attached and unhooked when the binding is detached from the bound element. The script inside the <code>handler</code> is executed when the event handler is matched. The <code>handler</code> tag must be inside the <code>handlers</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>event</b></code> - The <code>event</code> attribute describes the specific event that this handler is listening for. Its value can be any legal DOM event name (including custom events created using the DocumentEvent interface of the DOM).</li> + <li><code><b>action</b></code> - The <code>action</code> attribute contains script that is invoked when the handler fires. The <code>type</code> attribute on the enclosing <code>handlers</code> element determines the language of the script. The handler script can also be specified as a child of the <code>handler</code> element.</li> + <li><code><b>phase</b></code> - This attribute specifies the phase of the event flow that this handler should monitor. The possible values are <code>capturing</code>, <code>bubbling</code>, and <code>target</code>. If a phase is specified, the handler will only be invoked during that phase of the event handling process. If no phase is specified, a default of <code>bubbling</code> is assumed.</li> + <li><code><b>button</b></code> - The <code>button</code> attribute imposes a + <i> + filter</i> + on the handler. It is used with mouse handlers to specify a particular button. The event handler will only be matched if the value of the <code>button</code> field in the DOM mouse event object matches the value of the attribute.</li> + <li><code><b>modifiers</b></code> - The <code>modifiers</code> attribute imposes a filter on key and mouse handlers. Its value is a whitespace- or comma-separated list of modifier keys. If present in the list, then the modifier key must be set in the DOM event object in order for the handler to be matched. If the <code>modifiers</code> is not empty and the modifier is not present in the list, then the modifier key must not be set in the DOM event object in order for the handler to be matched.<br> + Supported modifiers are: + <ul> + <li><code>shift</code></li> + <li><code>alt</code></li> + <li><code>control</code></li> + <li><code>meta</code></li> + <li><code>accel</code> - the platform's primary accelerator key. It is left up to the user agent to decide which modifier key represents the primary key. (It's the Control key on Windows and Meta on Mac.)</li> + <li><code>accesskey</code> - the platform's primary shortcut mnemonic key should be used (the Alt key on Windows and Linux, has no effect on Mac).</li> + </ul> + </li> + <li><code><b>keycode</b></code> - The <code>keycode</code> attribute imposes a filter on key handlers. Its value is a key identifier for a specific keycode, e.g., <code>vk_enter</code>.<br> + <i> + [Editor's Note: A forthcoming DOM events specification will presumably outline the list of valid keycode strings.]</i> + <br> + If this attribute is present, then its value must match the <a href="ko/DOM/event.keyCode">keyCode</a> field of the DOM key event object in order for the handler to fire.</li> + <li><code><b>charcode</b></code> - The <code>charcode</code> attribute imposes a filter on key handlers. Its value is a single character, e.g., "<code>z</code>". If this attribute is present, then its value must match the <a href="ko/DOM/event.charCode">charCode</a> field of the DOM key event object in order for the handler to fire.<br> + <i> + [Editor's note: As DOM Events mature more attributes may be added. For example, mutation events define several new fields such as relatedTarget that could be supported in the filtering syntax.]</i> + </li> + <li><code><b>key</b></code> - The <code>key</code> attribute has the same meaning as <code>charcode</code>.</li> + <li><code><b>clickcount</b></code> - The <code>clickcount</code> attribute imposes a + <i> + filter</i> + on the handler. It is used with mouse handlers to specify how many times a button has been clicked. The event handler will only be matched if the value of the <code>clickcount</code> field in the DOM mouse event object matches the value of the attribute.</li> + <li><code><b>command</b></code> - The id of a command to invoke when the event occurs. If used in a non-chrome document, the entire handler will be ignored.</li> + <li><code><b>preventdefault</b></code> - If set to true, the default action of the event is not performed. See also <a href="ko/DOM/event.preventDefault">preventDefault</a> method of the Event object.</li> +</ul> +<h2 id="resources" name="resources">resources</h2> +<pre><!ENTITY % resources-content "(image?,stylesheet?)"> +<!ELEMENT resources %resources-content;> +<!ATTLIST property + id ID #IMPLIED +> +</pre> +<p>Used for inclusion of <a href="ko/XBL/XBL_1.0_Reference#image">image</a> elements, to cache them for later use, and for inclusion of <a href="ko/XBL/XBL_1.0_Reference#stylesheet">stylesheet</a> elements. The <code>resources</code> tag must be used directly inside the <code>binding</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> +</ul> +<h2 id="stylesheet" name="stylesheet">stylesheet</h2> +<pre><!ELEMENT stylesheet EMPTY> +<!ATTLIST stylesheet + id ID #IMPLIED + src URI #REQUIRED +> +</pre> +<p>The <code>stylesheet</code> element declares a style sheet used by the binding. The style rules in the style sheet will only be applied to the binding, not to other elements in the document. The <code>stylesheet</code> tag must be inside the <code>resources</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>src</b></code> - The URL of the style sheet to apply to the binding content.</li> +</ul> +<h2 id="image" name="image">image</h2> +<pre><!ELEMENT image EMPTY> +<!ATTLIST image + id ID #IMPLIED + src URI #REQUIRED +> +</pre> +<p>Declares an image resource used by the binding. The image is loaded as soon as the binding is used. You can use this to preload a number of images for later use. The <code>image</code> tag must be inside the <code>resources</code> tag.</p> +<ul> + <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li> + <li><code><b>src</b></code> - The URL of the image to load.</li> +</ul> diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html new file mode 100644 index 0000000000..044d638e52 --- /dev/null +++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html @@ -0,0 +1,118 @@ +--- +title: XBL 1.0 Reference +slug: Archive/Mozilla/XBL/XBL_1.0_Reference +tags: + - XBL +translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference +--- +<h3 id=".EC.B4.88.EB.A1.9D" name=".EC.B4.88.EB.A1.9D">초록</h3> +<p>This document describes Extensible Binding Language (<a href="ko/XBL">XBL</a>) 1.0 as implemented in <a href="ko/Gecko">Gecko</a> browsers.</p> +<p>Extensible Binding Language is a <a href="ko/XML">XML</a>-based markup language to implement reusable components ( + <i> + bindings</i> + ) that can be bound to elements in other documents. The element with a binding specified, called the + <i> + bound element</i> + , acquires the new behavior specified by the binding. Bindings can be bound to elements using Cascading Style Sheets (<a href="ko/CSS">CSS</a>) or <a href="ko/DOM">DOM</a>. One element can be be bound to several bindings at once.</p> +<p>Functionally bindings should be correlated with <a class="external" href="http://msdn.microsoft.com/workshop/components/htc/reference/htcref.asp">Behaviors</a> and <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/overview/viewlink_ovw.asp">Viewlink</a> but being implemented as one integrated XML solution.</p> +<p>Bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted around the bound element.</p> +<div class="note"> + <p>There are numerous adjustments in the current implementation in comparison of <a class="external" href="http://www.w3.org/TR/xbl/">earlier XBL proposals</a>, and not all of them are reflected yet in this document. The documentation process is still in progress: please keep it in your mind while using the provided information.</p> +</div> +<h3 id="XBL_.EC.9A.94.EC.86.8C" name="XBL_.EC.9A.94.EC.86.8C"><a href="ko/XBL/XBL_1.0_Reference/Elements">XBL 요소</a></h3> +<ul> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#_content">content</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#children">children</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#constructor">constructor</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#destructor">destructor</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#field">field</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#property">property</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#getter">getter</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#setter">setter</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#method">method</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#body">body</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">handlers</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#handler">handler</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#resources">resources</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#stylesheet">stylesheet</a></code></li> + <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#image">image</a></code></li> +</ul> +<h3 id="Binding_Attachment_and_Detachment" name="Binding_Attachment_and_Detachment"><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">Binding Attachment and Detachment</a></h3> +<ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Attachment_using_CSS">Attachment using CSS</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Attachment_using_element.style_property">Attachment using element.style property</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#.3Cconstructor.3E_call"><constructor> call</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#.3Cdestructor.3E_call"><destructor> call</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Binding_Documents">Binding Documents</a></li> +</ul> +<h3 id="DOM_Interfaces" name="DOM_Interfaces"><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces">DOM Interfaces</a></h3> +<ul> + <li><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#The_DocumentXBL_Interface">The DocumentXBL Interface</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#The_ElementXBL_Interface">The ElementXBL Interface</a></li> +</ul> +<h3 id="Anonymous_Content" name="Anonymous_Content"><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content">Anonymous Content</a></h3> +<ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Introduction">Introduction</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Scoping_and_Access_Using_the_DOM">Scoping and Access Using the DOM</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Content_Generation">Content Generation</a> + <ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Rules_for_Generation">Rules for Generation</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#The_contentgenerated_Event">The contentgenerated Event</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#The_contentdestroyed_Event">The contentdestroyed Event</a></li> + </ul> + </li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Attribute_Forwarding">Attribute Forwarding</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Insertion_Points">Insertion Points</a> + <ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#.3Cchildren.3E_and_.3Celement.3E"><children> and <element></a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Handling_DOM_Changes">Handling DOM Changes</a></li> + </ul> + </li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Event Flow and Targeting</a> + <ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Flow_and_Targeting_Across_Scopes">Flow and Targeting Across Scopes</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Focus_and_Blur_Events">Focus and Blur Events</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Mouseover_and_Mouseout_Events">Mouseover and Mouseout Events</a></li> + </ul> + </li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Anonymous_Content_and_CSS">Anonymous Content and CSS</a> + <ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Selectors_and_Scopes">Selectors and Scopes</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Binding_Stylesheets">Binding Stylesheets</a></li> + </ul> + </li> +</ul> +<h3 id="Binding_Implementations" name="Binding_Implementations"><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations">Binding Implementations</a></h3> +<ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Introduction">Introduction</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Methods">Methods</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Properties">Properties</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Inheritance_of_Implementations">Inheritance of Implementations</a></li> +</ul> +<h3 id="Event_Handlers" name="Event_Handlers"><a href="ko/XBL/XBL_1.0_Reference/Event_Handlers">Event Handlers</a></h3> +<h3 id="Example_-_Sticky_Notes" name="Example_-_Sticky_Notes"><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes">Example - Sticky Notes</a></h3> +<p>Updated and adjusted for the current Firefox implementation.</p> +<div class="note"> + <p>This example is targeted to demonstrate the XBL usage rather than to be a practically useful application. For this reason it contains many comments and some blocks could be avoided in a more compact solution yet used here for demonstration purposes.</p> +</div> +<ul> + <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.html">notes.html</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.xml">notes.xml</a></li> + <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.css">notes.css</a></li> +</ul> +<p><a class="external" href="http://www.nskom.com/external/xbl/notes.html">View this example</a></p> +<p><br> + <span class="comment"><a class="external" href="http://www.nskom.com/external/xbl/notes.zip" title="http://www.nskom.com/external/xbl/notes.zip">Download all files (.zip archive)</a> need to ask to adjust the server - it gives "Access denied" for zip files (?)</span></p> +<h3 id="References" name="References">References</h3> +<p><a class="external" href="http://www.w3.org/TR/xbl/">Initial XBL 1.0 proposal submitted as a Note to W3C</a></p> +<p><a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0 Project</a></p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Last Updated Date: April 24, 2006</li> + </ul> +</div> |