{"id":121,"date":"2006-10-23T16:10:23","date_gmt":"2006-10-23T16:10:23","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2006\/10\/xbl-part1"},"modified":"2006-12-14T00:01:52","modified_gmt":"2006-12-14T00:01:52","slug":"xbl-part1","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2006\/10\/xbl-part1","title":{"rendered":"XBL Part 1: Bindings"},"content":{"rendered":"

XML Binding Language (XBL) is a mechanism for extending the presentation and behaviour of a document. The XBL 2.0 specification<\/a> recently reached Last Call<\/a> and it has some very cool features to look forward to using in a few years. It\u2019s somewhat based upon the original XBL 1.0 specification<\/a> created and implemented by Mozilla, though it has been significantly redesigned and is not backwards compatible with it.<\/p>\n

While reading this, keep in mind that XBL is still a working draft and any feature I discuss may change significanly between now and when it becomes a recommendation. Presently, there are no implementations of XBL 2.0, so you can’t use it yet.<\/p>\n

Bindings<\/h3>\n

A binding is a way to attach presentation and behaviour to an element. The concept is similar to the way we already style elements using CSS and attach event listeners to them with JavaScript, but the idea is to add an extra layer of abstraction in between to simplify the process. Bindings are a not a way to replace existing authoring tools like CSS and JavaScript, but rather an enhancement to them.<\/p>\n

There are four main aspects of a binding: implementations, templates, handlers and resources. In this whopping 5 part series, I intend to give you a brief overview of each of these components to explain their purpose and functionality.<\/p>\n

\n
Implementations<\/a><\/dt>\n
Describe a set of methods, properties and fields on an element.<\/dd>\n
Handlers<\/a><\/dt>\n
These offer an improved way to declare event listeners.<\/dd>\n
Templates<\/a><\/dt>\n
A way to enhance the presentation (particularly layout) beyond what is possible with existing CSS techniques.<\/dd>\n
Resources<\/a><\/dt>\n
Additional stylesheets, images, video, audio or any other content associated with the binding.<\/dd>\n<\/dl>\n

Sample Bindings<\/h3>\n

Bindings can be attached to elements in several ways: a selector in the element attribute of the binding element, the ‘binding<\/code>‘ property in CSS or using a script.<\/p>\n

The element<\/code> Attribute<\/h4>\n

The element<\/code> attribute<\/a> specifies a selector. The same type of selector you use with CSS, so it\u2019s very easy to understand. This binding will be attached to all elements that match the selector: #nav li<\/code>.<\/p>\n

<xbl xmlns=\"http:\/\/www.w3.org\/ns\/xbl\">\r\n  <binding element=\"#nav li\">\r\n    <implementation>...<\/implementation>\r\n    <template>...<\/template>\r\n    <handlers>...<\/handlers>\r\n    <resources>...<\/resources>\r\n  <\/binding>\r\n<\/xbl><\/code><\/pre>\n
The ‘binding<\/code>‘ Property<\/h4>\n
The ‘binding<\/code>‘ property<\/a> can be used in in your CSS to attach a binding, in exactly the same way you apply any other other style to an element.<\/p>\n
bindings.xml<\/code>:<\/p>\n
<xbl xmlns=\"http:\/\/www.w3.org\/ns\/xbl\">\r\n  <binding id=\"foo\">\r\n    <implementation>...<\/implementation>\r\n    <template>...<\/template>\r\n    <handlers>...<\/handlers>\r\n    <resources>...<\/resources>\r\n  <\/binding>\r\n<\/xbl><\/code><\/pre>\n
The stylesheet:<\/p>\n
#nav li { binding: url(bindings.xml#foo); }<\/code><\/pre>\n
Using a Script<\/h4>\n
Elements will implement the ElementXBL interface<\/a>, which  defines three methods: addBinding()<\/code>,  removeBinding()<\/code> and hasBinding()<\/code>.  The addBinding()<\/code> method can be used to attach  a binding to an individual element using a script, like this:<\/p>\n
var e = ...; \/\/ Get the element somehow\r\ne.addBinding(\"bindings.xml#foo\");<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
An overview of the XML Binding Language. XBL 2.0.  Part 1 discusses the concept of a binding and how they can be attached to elements in the document.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,4,7,3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/121"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}