¿Por qué este ejemplo XBL no está funcionando?

StackOverflow https://stackoverflow.com/questions/3687686

  •  02-10-2019
  •  | 
  •  

Pregunta

Este ejemplo es de de esta página de Mozilla .

main.xul 

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="main.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

    <button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
    <button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>
</window>

main.css 

box.okcancelbuttons {
    -moz-binding: url('main.xml#labeledbutton');
}

main.xml 

<?xml version="1.0"?>
<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

¿Por qué no se muestra la caja cuando hago clic en el botón?

¿Fue útil?

Solución

Hay algunos problemas:

En primer lugar, en main.css se define una clase okcancelbuttons sin embargo, en main.xul que se refiere a una clase labeledbutton. La clase puede ser llamado el mismo que la unión.

En segundo lugar main.xml simplemente no es XML válido (forma más sencilla de validar es para cargarlo en Firefox y va a escupir errores). Se necesita atributos para cada xmlns espacios de nombres que utiliza. En este caso, el "principal" espacio de nombres, XBL y XUL. Ellos deben ser definidos en el elemento faltante <bindings> alrededor del elemento <binding>.

Se va a terminar de esta manera:

main.xml 

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
 </binding>
</bindings>

Otros consejos

Sólo probarlo

XUL (main.xul) 

<box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>

CSS (main.css) 

box.okcancelbuttons {
    -moz-binding: url('main.xbl#labeledbutton');
}

XBL (main.xbl) 

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
 </binding>
</bindings>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top