-moz-binding

[premshree]

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

[Gordo]

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.

[Bosko]

It's used for XBL bindings.

[jkd]

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')

[Bosko]

haha

[premshree]

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!

[jkd]

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.

[jkd]

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)

[danieldpont]

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?