Cross-Browser. DHTML compatível com todos os navegadores.

Apresentamos um website que oferece interessantes utilidades para o trabalho com HTML Dinâmico de uma maneira simples e compatível com os navegadores mais habituais.

É bastante conhecido, para todos os que tiveram experimentado com camadas e Javascript, o problema da compatibilidade de navegadores e a necessidade de realizar diferentes códigos DHTML dependendo do explorador que tenha o cliente.

Se você ainda não tiver encontrado problemas de compatibilidade de seus scripts, possivelmente nunca deve ter enfrentado a programação do lado do cliente em Javascript, mais concretamente com o trabalho com as camadas e portanto, não lhe interessará muito este artigo.

Agora também, se tiver problemas com as camadas ao programar uma web e não conseguir que se veja bem nos distintos navegadores, este artigo poderá tornar a sua vida mais simples. Isto graças a cross-browser.com, um website que oferece uma interessante biblioteca de funções, que vamos apresentar a seguir, para o trabalho com HTML Dinâmico compatível com todos os navegadores mais habituais.

X Library VS CBE API

Em cross-browser.com nos proporcionam duas bibliotecas diferentes para o trabalho com DHTML. Na verdade, trata-se de um mesmo conjunto de funções, sendo uma biblioteca a evolução de outra. CBE API é a biblioteca original e X Library é a sua evolução.

CBE API é a biblioteca mais antiga e ainda tem maiores funcionalidades, porém em um espaço de tempo X Library irá dispor das mesmas funcionalidades que a outra, embora com diversas melhorias como uma considerável redução do peso dos arquivos Javascript.

À princípio, se entrarmos em cross-browser.com, nos apresentam X Library, embora um pouco mais escondido encontraremos seu antecessor CBE API. O conselho é que se utilize X Library para projetos novos. De qualquer forma, CBE API continua perfeitamente vigente (por enquanto).

Como utilizar X Library

Temos que começar baixando a versão atual de X Library. Para isso, entramos em cross-browser.com e acessamos à sessão de Toys (para o criador deste website, seus brinquedinhos são bibliotecas DHTML). Aqui podemos fazer o download da última versão, onde encontraremos as bibliotecas e exemplos de uso.

Uma vez descompactado o pacote, podemos encontrar uma pasta chamada "x", onde estão as bibliotecas. Observamos que há uma boa quantidade de arquivos .JS, cada um com diversas funções. Dependendo da ação que se deseja realizar temos que chamar a uma função ou outra, e teremos que saber em que arquivo .JS se encontra. As funções mais habituais se encontram no arquivo x_core.js. Em nossas páginas não temos porquê incluir todos os arquivos do diretório, só os que formos utilizar. Podemos ver em que arquivo está cada função na documentação do próprio programa, mais concretamente na referência de funções (o diretório onde se hospeda a documentação está dentro da pasta "docs" que está dentro do diretório "x").

Dentro do diretório "x" também há uma pasta de exemplos, chamada "examples", aos quais podemos dar uma olhada para começar a nos familiarizarmos com as possibilidades da biblioteca. Nós criamos dois exemplos para comprovar as bondades deste software. Para isso, seguimos o exemplo do código da própria página cross-browser.com e o dos diferentes exemplos que se oferecem. Algumas funcionalidades dos exemplos, como a função xInclude() estão ainda em fase de experimentação, portanto nós não a utilizamos e em seu lugar incluímos os arquivos que necessitamos tal como se faz habitualmente em Javascript.

Exemplo mostrar e ocultar camada

X Library dispõe de uma simples função para mostrar e ocultar uma camada. Simplesmente recebe o identificador da camada que se deseja mostrar ou ocultar. À princípio, podemos lhe enviar à função o próprio objeto camada ou então, um string com seu identificador (que se indica com o atributo id na etiqueta <div>).

Referência: No manual de CSS temos explicações de o que são as camadas e a forma de cria-las e definir seu posicionamento e aparência.

<html>
<head>
    <title>Exemplo de utilização de Cross-Browser</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function mostra(){
    xShow('c1');
}
function oculta(){
    xHide('c1');
}
</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:#9999aa; width:100px; height:80px;">
Hola!
</div>

<form>
<input type=button onclick="muestra()" value="Mostra Capa">
<input type=button onclick="oculta()" value="Oculta Capa">
</form>

</body>
</html>

Neste exemplo, criamos uma camada (com identificador "c1") e dois botões. Quando se clica um deles se mostra a camada e quando se clica o outro se oculta. Para isso, criamos também duas funções, que se chamam quando se clica nos botões, cuja obrigação é mostrar e ocultar a camada utilizando a biblioteca X Library.

Faremos o uso das fuunções xShow() e xHide(), que recebem o identificador da camada que há que mostrar ou ocultar respectivamente. Estas duas funções se encontram no arquivo "x_core.js", que incluímos na página como bloco de script externo.

Pode-se visualizar este simples exemplo em uma página web a parte.

Exemplo para fazer um movimento de camada

O segundo exemplo que criamos é uma camada que se move pela página da esquerda para direita. Esta página tem também dois botões, para deter o movimento ou coloca-lo em funcionamento.

<html>
<head>
    <title>fazemos um scroll</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function inicia(){
    velocidade=2
}
function detem(){
    velocidade=0
}
function move(){
    posicao+=velocidade
    posicao %= 500
    xMoveTo('c1',posicao,100)
    setTimeout("move()",100)
}

window.onload = function()
{
    velocidade = 0
    posicao = 200
    move()
}

</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:red; width:100px; height:20px;">
Hola!
</div>

<form>
<input type=button onclick="inicia()" value="Move a Camada">
<input type=button onclick="detem()" value="Para a Camada">
</form>

</body>
</html>

Neste caso, em relação à biblioteca, utilizamos a função xMoveTo(), que recebe o identificador da camada a mover e as novas coordenadas onde coloca-la. Esta função também se encontra dentro do arquivo "x_core.js", que incluímos com o primeiro bloco de script.

Para entender o movimento da camada temos que ter visto alguma vez a função setTimeout(), que recebe uma instrução Javascript para executar e uma quantidade de milésimos de segundos que devem de passar antes da execução. No exemplo temos uma função que se chama move(), que se encarrega de variar a posição atual da camada. Esta função se chama a si mesma por meio de setTimeout(), com um atraso de 100 milésimos de segundos, portanto, a função move() nunca para de se executar, teoricamente 10 vezes por segundo.

Nota: setTimeout é um método do objeto window. Temos vários artigos que utilizam esta função, por exemplo: Relógio em Javascript ou Texto em movimento na barra de estado.

Logo, definimos uma variável velocidade, que é o número de pixels que se desloca de camada em cada chamada move(). A única coisa que fazem os dois botões é modificar o valor dessa variável velocidade. O botão que para o movimento simplesmente atribui o valor zero à velocidade.

Outra coisa que temos que ver é que foi definida uma série de instruções a executar quando se carrega a página, no bloco window.onload = function(). Entre essas ações a executar encontra-se a configuração da posição inicial da camada e a velocidade do movimento. Ademais, faz-se uma chamada inicial a move(), que desencadeia o fluxo do movimento, pois a função move se encarrega de chamar-se a si mesma até que o usuário abandona a página.

Se se deseja, pode-se ver o exemplo em funcionamento.

Conclusão

Não era nossa intenção explicar todas as funcionalidades desta ferramenta, e sim torna-la conhecida. Tampouco é nossa intenção explicar como realizar um movimento de uma camada ajudados por setTimeout(), mesmo assim pedimos desculpas para aquele leitor que não pôde entender por que realizamos um script de movimento dessa forma.

Nosso objetivo era apresentar as bibliotecas e mostrar como, com muito pouco código e sem ter que conhecer os segredos de cada navegador, pode-se realizar um exemplo já bastante avançado do manejo de camadas.

Recomendamos que não re-inventem a roda! Já que se dispõe de ferramentas de trabalho com camadas tão versáteis como X Library, é muito mais interessante basear nossos scripts nela do que quebrarmos a cabeça para inventar mecanismos compatíveis com cada navegador.

Criamos um manual onde vamos ir comentando vários exemplos de efeitos interessantes que se podem realizar utilizando estas bibliotecas. O manual chama-se Workshop de Cross-Browser DHTML.