Esta página ilustra como o você pode usar as CSS no Mozilla para melhorar a estrutura de aplicações complexas, fazendo o código e recursos mais facilmente reutilizáveis.
Você aplica esta técnica em uma simples demonstração.
Informação: XBL bindings
A estrutura proporcionada pela linguagem de marcação e as CSS não é ideal para aplicações complexas onde partes precisam ser autônomas e reutilizáveis. Você pode colocar folhas de estilo em arquivos separados, e pode também colocar os scripts em arquivos separados. Mas você precisa ligar estes arquivos no documento como um todo.
Outra limitação estrutural concerne ao conteúdo. Você pode usar as CSS para proporcionar conteúdo para elementos selecionados, mas o conteúdo é limitado a textos e imagens, e seu posicionamento é limitado em antes ou depois do elemento selecionado.
Mozilla proporciona um mecanismo que supera estas limitações: XBL (XML Bindings Language). Você pode usar o XBL para ligar elementos selecionados ao próprio:
- Folha de estilo
- Conteúdo
- Propriedades e métodos
- Manipuladores de eventos
Evitando ligar tudo no nível do documento, você pode fazer as partes autônomas que são fáceis de manter e reutilizar.
| Para mais informação sobre XBL bindings, veja a página XBL neste wiki. |
Ação: Uma demonstração XBL
Crie um novo documento HTML, doc6.html. Copie e cole o conteúdo daqui:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Como Começar Mozilla CSS - Demonstração XBL </TITLE> <LINK rel="stylesheet" type="text/css" href="style6.css"> </HEAD> <BODY> <H1>Demonstração XBL</H1> <DIV id="square">Clique Aqui</DIV> </BODY> </HTML>
Crie um novo arquivo CSS, style6.css. Esta folha de estilo contém o documento de estilo. Copie e cole o conteúdo daqui:
/*** Demonstração XBL ***/
#square {
-moz-binding: url("square.xbl#square");
}
Crie um novo arquivo de texto, square.xbl. Este arquivo contém o XBL binding. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:
<?xml version="1.0"?>
<!DOCTYPE bindings>
<bindings xmlns="https://www.mozilla.org/xbl"
xmlns:html="https://www.w3.org/1999/xhtml">
<binding id="square">
<resources>
<stylesheet src="bind6.css"/>
</resources>
<content>
<html:div anonid="square"/>
<html:button anonid="button" type="button">
<children/>
</html:button>
</content>
<implementation>
<field name="square"><![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "square")
]]></field>
<field name="button"><![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "button")
]]></field>
<method name="doDemo">
<body><![CDATA[
this.square.style.backgroundColor = "#cf4"
this.square.style.marginLeft = "20em"
this.button.setAttribute("disabled", "true")
setTimeout(this.clearDemo, 2000, this)
]]></body>
</method>
<method name="clearDemo">
<parameter name="me"/>
<body><![CDATA[
me.square.style.backgroundColor = "transparent"
me.square.style.marginLeft = "0"
me.button.removeAttribute("disabled")
]]></body>
</method>
</implementation>
<handlers>
<handler event="click" button="0"><![CDATA[
if (event.originalTarget == this.button) this.doDemo()
]]></handler>
</handlers>
</binding>
</bindings>
Crie um novo arquivo CSS, bind6.css. Esta folha de estilo separada contém o estilo para o binding. Copie e cole o conteúdo daqui:
/*** Demonstração XBL ***/
[anonid="square"] {
width: 20em;
height: 20em;
border: 2px inset gray;
}
[anonid="button"] {
margin-top: 1em;
padding: .5em 2em;
}
Abra o documento no seu navegador e pressione o botão.
O wiki não suporta JavaScript nas páginas, então não é possível demonstrar aqui. Deve parecer como isto, antes e depois de você pressionar o botão:
|
|
Notas sobre esta demonstração:
- O documento HTML é ligado à folha de estilo normalmente mas isto não liga nenhum código JavaScript.
- O documento não contém nenhum botão. Ele contém somente o texto do botão. O botão é adicionado por binding.
- O documento folha de estilo liga o binding.
- O binding liga isto à sua folha de estilo, e isto suporta seu conteúdo e o código JavaScript. Então o binding é autônomo.
| Mude o arquivo XBL de modo que o quadrado dobre a largura ao mudar de cor, em vez de saltar para a direita.
Use a ferramenta DOM Inspector para inspecionar o documento, reavaliando o conteúdo adicionado. |
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Nesta demonstração, o quadrado e o botão foram widgets independentes que funcionam com um documento HTML. Mozilla tem uma linguagem de marcação especializada para criação de interfaces de usuários. A próxima página demostra isto: Interfaces de usuário XUL
Categorias
Interwiki Language Links