Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: -moz-binding

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation -moz-binding

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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Honestly, I have NO clue.

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

    http://www.xulplanet.com/tutorials/x...blbinding.html

    There were many other links, but this looked pretty decent.
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's used for XBL bindings.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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')

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    haha

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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)


  • #9
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <?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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •