Web Analytics Made Easy -
StatCounter -moz-binding - CodingForum

Announcement

Collapse
No announcement yet.

-moz-binding

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • -moz-binding

    Just curious to know...
    what does '-moz-binding' do or mean?
    Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

  • #2
    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)

    Comment


    • #3
      It's used for XBL bindings.

      Comment


      • #4
        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')
        jasonkarldavis.com

        Comment


        • #5
          haha

          Comment


          • #6
            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!
            Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

            Comment


            • #7
              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.
              jasonkarldavis.com

              Comment


              • #8
                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)

                jasonkarldavis.com

                Comment


                • #9
                  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?

                  Comment

                  Working...
                  X