-moz-binding

Just curious to know...
what does '-moz-binding' do or mean?

Honestly, I have NO clue.

But I found the following link with a quick Google search:

http://www.xulplanet.com/tutorials/xultu/elemref/ref_xblbinding.html

There were many other links, but this looked pretty decent.

It's used for XBL bindings.

And if you're curious what XBL bindings are - you have a resident expert on the forum so don't hesitate to ask. :)

self == ProjectOwner('MozDev Project', 'LayerEmu') :D

haha :)

All I know is that XBL stands for eXtensible Binding Language. If somebody could explain how actually to implement a binding, it would be great!

Are you familiar with IE's ViewLink or Element behaviors?

XBL is basically the same idea, but implemented more intelligently imho.

Basically, a binding is applied through the moz-CSS property, -moz-binding, or through a method of the DocumentXBL interface, addBinding (not sure if that method is currently broken though).

A binding declares several things:

1. Anonymous content
These are nodes generated by the binding, and inserted underneath the bound element. They are invisible to the page's DOM. You can define insertion points via <children/> inside <content>. The concept of anonymous content is like IE's ViewLink content, and can be though of:

<div>
some children
</div>

When bound, if the <content> looks like <button><children/></button, you effectively have rendered:

<div>
<button>some children</button>
</div>

But in the page's DOM:
refToDiv.firstChild.nodeValue == 'some children';

The button element doesn't exist. You need to use document.getAnonymousNodes(element)

Which returns a NodeList of the anonymous nodes in element.

Anyway, after <content>, and inside the <implementation> element, you have two related nodes:

<constructor>
</constructor>

and

<destructor>
</destructor>

(I personally haven't used <destructor>, but am pretty sure it functions).

All the Javascript code inside of <constructor> is executed when the element is bound, i.e. kind of like the onload event, but this is specific to the successful binding. It replaced the event onbindingattached.

<destructor> is the opposite, and replaced onbindingdetached.

Also in the <implementation>, you have 0 or more <property> elements. These define properties the bound element may have. You also have <method> elements, which define the methods the element has.

Finally, a sibling to <implementation>, you have <handlers>, which can have <handler> elements, and applies event handlers to the element.

Read that link to the XULPlanet tutorial for more info, and if you want to see a working binding (the one I am using for the LayerEmu project), take a look at:
http://layeremu.mozdev.org/files/LayerEmu.xml

Ignore the scary trilicense at the top, and don't be turned off by the monstrous <constructor> - it actually makes a lot of sense once you get used to XBL. :)

Also take a look at

http://layeremu.mozdev.org/files/LayerEmu.css

To see how bindings are applied through CSS.

basically:

url(pathTo/xmlfile.xml#idOfBinding)

:)

Hi all,

I have been working on a XBL file to implement soft hyphenation (& shy; ) support for Geckos pre firefox 3 using -mos-binding:. Follows a working code for firefox 2:

<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "shy" applyauthorstyles = "false">
<implementation>
<constructor>
<![CDATA[

function fakeHyphen(container){
for(var i=0; i<container.childNodes.length; i++){
var node = container.childNodes[i];
if (node.nodeType == 3){
var list = node.data.split('\xAD');
var newNode = document.createElement('span');
node.parentNode.replaceChild(newNode,node);
newNode.appendChild(document.createTextNode(list[0]));
var result;
for (var i = 1; i < list.length; i++) {
var index = list[i].search(/\s/);
var block = [list[i].slice(0,index), list[i].slice(index,list[i].length)];
var parentSpan = document.createElement('span');
parentSpan.appendChild(document.createTextNode('- '));
var childSpan = document.createElement('span');
var textNode = document.createTextNode(block[0]);
childSpan.appendChild(textNode);
parentSpan.appendChild(childSpan);
newNode.appendChild(parentSpan);
if (parentSpan.offsetTop == childSpan.offsetTop) {
newNode.replaceChild(textNode,parentSpan);
}else{
newNode.removeChild(parentSpan);
newNode.appendChild(document.createTextNode('- '));
newNode.appendChild(textNode);
}
newNode.appendChild(document.createTextNode(block[1]));
}
}else{
fakeHyphen(node);
}
}
}

var element = this;
fakeHyphen(element);

]]>
</constructor>
</implementation>
</binding>
</bindings>

Although it was only used standard dom 2 javascript, and -moz-binding: is supported by all Geckos (I think), it do not work in Netscape 7.* nor Netscape 8.

Do someone have an idea why it do not work, or what can be done in order to work?