BT

Brick: Uma biblioteca para Componentes Web da Mozilla

por Dio Synodinos , traduzido por Rafael Sakurai em 12 Set 2013 |

O Web Components é uma especificação do W3C para permitir que os desenvolvedores web criem widgets com muita riqueza visual e interatividade, juntamente com a facilidade da composição. Até que a especificação tenha suporte apropriado pelos navegadores, os desenvolvedores podem usar a biblioteca Brick que fornece novas tags customizadas do HTML para abstrair os padrões comuns da interface de usuário.

O Brick é baseado na biblioteca X-Tag da Mozilla. A X-Tag tem sido chamada de biblioteca "pollyfill", que se refere a um pedação de código ou plugin de uma tecnologia que o desenvolvedor espera que o navegador forneça nativamente. Para executar código com base em qualquer tag do Brick é necessário aguardar até que o evento "DOMComponentsLoaded" da biblioteca X-Tag tenha sido carregado no window.onload:

document.addEventListener('DOMComponentsLoaded', function(){  
  // código que executa aqui...
});

Até o momento, o Brick consiste de treze tags ("bricks") diferentes, a maioria é completamente independente uma das outras e podem ser baixadas separadamente em vez de um único pacote:

  • Appbar (barra de navegação)
  • Calendar (calendário aberto)
  • Datepicker (calendário popup)
  • Deck (similar a uma galeria de imagens ou apresentação de slides)
  • Flipbox (trocar dois lados de um conteúdo, como uma carta de baralho)
  • Iconbutton (botão com ícone)
  • Layout (utilizado para preencher toda a área do conteúdo do componente pai, permitindo fixar cabeçalho e rodapé)
  • Slidebox (apresentação de slides)
  • Slider (barra de deslizar que permite selecionar um valor dentro de um range de dois números)
  • Tabbar (barra de abas)
  • Toggle (mescla de radiobutton com checkbox)
  • Togglegroup (agrupar vários toogle)
  • Tooltip (apresenta uma mensagem informativa quando um componente for clicado)

A figura a seguir mostra como o componente calendário do brick se parece:

<x-calendar></x-calendar>

O Google está confiando bastante no Web Components e também está trabalhando em uma biblioteca "polyfill" chamada Polymer, que utiliza a infraestrutura do navegador para executar futuras tecnologias como Sub-Árvore de elementos DOM (Shadow DOM), Elementos Customizados (Custom Elements) e Telas Guiadas por Modelo (Model Driven Views).

Vale mencionar que, apesar de o Web Components ter tido bastante destaque durante o ano passado a especificação está caminhando rapidamente, mas ainda há algumas áreas de incerteza.

Há algumas semanas atrás, Dimitri Glazkov (do Google) propôs na lista de discussão do W3C a remoção do elemento <element> da especificação. O consenso nessa discussão foi que o propósito da sintaxe do <element> não está bom o suficiente e as bibliotecas não deveriam utilizar esse elemento até que seja padronizado, como Brian Kardell, engenheiro de front-end do grupo educacional Apollo Group mencionou:

Projetos como X-Tags e Polymer, e até mesmo os projetos Ember e Angular, têm ajudado a responder essas questões oferecendo respostas potencialmente competentes -- não há necessidade de pressa para padronizar em alto nível esses pontos.

Mais informações sobre o Brick podem ser encontradas no blog do Mozilla Hacks e o código fonte está disponível no GitHub.

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

Dê sua opinião

Conteúdo educacional

Feedback geral
Bugs
Publicidade
Editorial
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2013 C4Media Inc.
Política de privacidade
BT