...

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.

jkd
07-09-2002, 07:37 PM
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!

jkd
07-10-2002, 06:25 AM
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
07-10-2002, 06:27 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum