View Full Version : -moz-binding
premshree
07-09-2002, 08:20 AM
Just curious to know...
what does '-moz-binding' do or mean?
Gordo
07-09-2002, 10:15 AM
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
07-09-2002, 12:49 PM
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
Bosko
07-09-2002, 07:41 PM
haha :)
premshree
07-10-2002, 05:07 AM
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)
:)
danieldpont
03-14-2008, 04:07 PM
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?
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.