Category Archives: Script

Client side scripting.

XBL Part 1: Bindings

MarkUp, Script, Standards, Style

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

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.

Bindings

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.

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.

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

Sample Bindings

Bindings can be attached to elements in several ways: a selector in the element attribute of the binding element, the ‘binding‘ property in CSS or using a script.

The element Attribute

The element attribute specifies a selector. The same type of selector you use with CSS, so it’s very easy to understand. This binding will be attached to all elements that match the selector: #nav li.

<xbl xmlns="http://www.w3.org/ns/xbl">
  <binding element="#nav li">
    <implementation>...</implementation>
    <template>...</template>
    <handlers>...</handlers>
    <resources>...</resources>
  </binding>
</xbl>

The ‘binding‘ Property

The ‘binding‘ property 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.

bindings.xml:

<xbl xmlns="http://www.w3.org/ns/xbl">
  <binding id="foo">
    <implementation>...</implementation>
    <template>...</template>
    <handlers>...</handlers>
    <resources>...</resources>
  </binding>
</xbl>

The stylesheet:

#nav li { binding: url(bindings.xml#foo); }

Using a Script

Elements will implement the ElementXBL interface, which defines three methods: addBinding(), removeBinding() and hasBinding(). The addBinding() method can be used to attach a binding to an individual element using a script, like this:

var e = ...; // Get the element somehow
e.addBinding("bindings.xml#foo");

CSS and JavaScript Workshop 2006

Personal, Script, Style

This past Monday and Tuesday, I went to the CSS and JavaScript Workshop 2006, which was just fantastic. Although I was one or the more knowledgeable attendees, I still found it a valuable experience. I even picked up a few techniques I hadn’t seen or used before, which I’ve already started putting into practice.

I got to meet both Russ Weakly and Cameron Adams, two wonderful people that were very easy to talk to, and I’m looking forward to meeting up with them again at the next WSG meeting in a few months. Russ even put a photo of me on Flickr. I also met a few other people, some of whom knew of me online but had never met me face-to-face. I even managed to get a few contacts for potential contract work in the future.

The most beneficial part of the workshop for me was the discussion of XMLHttpRequest(), which I had some understanding of but have never really put into much practice, and the form styling and validation techniques were rather interesting as well.

Any-Colour Fade Technique

Script

I’m sure many of you will have heard of the yellow fade technique, pioneered by 37 signals and popularised by its use in Basecamp. The problem with that script, however, is that the colours, including all the steps in between, are hard coded which makes it fairly complex to work with if you’re not just fading one colour.

For a project I’m working on at the moment, the client wanted various colours to fade appropriately, and I needed a script that was not only generic in the colours it supported, but incredibly easy to reuse. I also figured, why don’t I just make a general colour object to handle all your scripting-colour needs.

So, I give you the Color() script. Although I took inspiration from Eric Meyer’s Color Blender, I did completely rewrite the entire script for my needs. This is an object-oriented script who’s constructor accepts various parameters in order to specify the colour and it even has support for an alpha channel. You can either pass it 3 integer parameters, each representing the RGB colour component and an optional 4th parameter representing the alpha channel. Additionally, it will also accept a string with any valid CSS 2.1 Color Value or keyword, plus CSS3’s RGBA syntax. (HSL and HSLA are not yet supported).

The blend function is where it really shines. You pass it the colour you wish to blend with and the number of steps it should take, and it returns a pallet of colours for all the steps. I made a colour fading demo just to show off how powerful and easy to use the script is. Enter any supported colour value and watch the background colour fade from the current colour to the new colour. You can also customise the number of steps and the interval between them. I hope you find this script useful, feel free to use it wherever or however you like.