CriarWeb.com > Manuais > Workshop de Cross-Browser DHTML

Este artigo explica como realizar uma interface de ordenação, ou seja, um sistema para que o usuário possa ordenar uma série de elementos. É uma interface de usuário bastante típica que apresenta uma série de elementos com uma ordem dada. Os elementos têm ao lado umas setinhas, que servem para alterar sua ordem. Se apertarmos a setinha para cima que há ao lado de um elemento, intercambia sua posição com o elemento de cima. Se clicarmos na setinha para baixo, se intercambia esse elemento com o que tiver na posição de baixo.

É muito interessante que possamos ver o resultado final do artigo para termos uma idéia dos objetivos.

Para a realização deste exemplo utilizaremos uma biblioteca que se chama xLibrary, que permite a criação de código DHTML compatível com todos os navegadores (Cross-Browser). Esta biblioteca viemos utilizando-a em todo o manual de Cross-Browser DHTML.

O exemplo pode parecer complicado, mas não é. Por sorte, é bastante simples. Trabalharemos da seguinte maneira:

Vamos criar um array de elementos e vamos iniciá-lo com alguns valores. Estes valores são os que aparecerão na lista a ordenar.

Logo, vamos criar uma camada vazia inicialmente, que chamamos "listagem_elementos". Nessa camada é onde colocaremos a interface de ordenação de elementos. Como os elementos que aparecerão no listado podem variar e ademais podemos mudar sua ordem, a listagem dos elementos deverá se realizar dinamicamente.

Sendo assim, uma vez carregada a página e cada vez que se varie a ordem da listagem, teremos que escrever na camada "listagem_elementos" um novo conteúdo. A única parte que é realmente DHTML deste exercício é justamente esta, a escritura de um texto em uma camada. O resto é um simples manejo de arrays.

Vejamos o código por partes

Primeiro temos o código HTML, que dizíamos, é uma camada inicialmente vazia.

<div id="listagem_elementos">
</div>

Logo, veremos o código Javascript para a listagem dos elementos:

function imprime_listagem_basica(){
    texto="";
    for (i=0;i<elementos.length;i++){
       texto += elementos[i];
       if (i!=0){
          texto += " <a href='#' onclick='acima(" + i + ")'>acima</a>";
       }
       if (i!=elementos.length-1){
          texto += " <a href='#' onclick='abaixo(" + i + ")'>abaixo</a>";
       }
       texto += "<br>";
    }
    xInnerHtml('listagem_elementos',texto);
}

Observemos que a função cria uma variável que se chama texto e vai introduzindo os conteúdos nessa variável, que logo escreverá na camada. O conteúdo vai sendo gerado ao realizar um loop por todos os elementos do array. Em cada iteração escreve o elemento na variável seguidamente coloca um link para mover o elemento para cima e outro para baixo. Esses links contém chamadas a duas funções Javascript acima() e abaixo(), às que se envia o índice do elemento que se quer mover acima ou abaixo.

Um detalhe. Antes de mostrar o link de cima ou abaixo, se realiza uma comprovação. Se for o primeiro elemento não deve mostrar o link para subir sua posição (porque já será a primeira). Igualmente, se for o último elemento, não se deve mostrar o link para baixar sua posição.

Por último, se escreve o texto gerado na camada por meio da função xInnerHtml(), que é uma função da biblioteca para DHTML Cross-Browser. Esta função recebe dois parâmetros, o primeiro é o nome da camada a mudar seu texto e o segundo, o texto que se escreverá na camada.

Nota: Para poder utilizar a função xInnerHtml(), temos que incluir as bibliotecas Cross Browser xLibrary. Do contrário, a chamada a esta função provocará uma mensagem de erro, porque Javascript não a conheceria. Para incluir as bibliotecas, temos que gerar um arquivo .js que incluiremos na página como código externo. Só teremos que seguir os passos que se relatam no artigo X Library Compiler.

Agora vejamos as funções acima() e abaixo()

function acima(i){
    temporario = elementos[i];
    elementos[i]=elementos[i-1];
    elementos[i-1]=temporario;
    imprime_listagem()
}

function abaixo(i){
    temporario = elementos[i];
    elementos[i]=elementos[i+1];
    elementos[i+1]=temporario;
    imprime_listagem()
}

Como havíamos dito, ambas funções recebem o índice que há que mudar de posição. A função acima() realiza um intercâmbio do elemento i pelo elemento que está acima (o i-1). A função abaixo realiza um intercâmbio do elemento i pelo elemento que está abaixo (o i+1).

E com isto já está pronto. Faltaria uma pequena melhoria que vamos contar um pouco mais adiante. Porém, até o momento, o exemplo é funcional.

Podemos ver o exemplo em funcionamento até o momento neste link.

Melhoria visual

É verdade que a lista de elementos não ficou muito vistosa. Agora vamos melhorá-la com um par de detalhes. Primeiro, o texto "Acima"e "Abaixo" vamos substituí-lo por uma setinha para cima e outra para baixo. Logo, vamos colocar todo a listagem dentro de uma tabela, para que os elementos fiquem melhor alinhados.

O único que há que mudar é a função imprime_listagem(). Seu código é o seguinte:

function imprime_listagem(){
    texto="<table>";
    for (i=0;i<elementos.length;i++){
       texto += "<tr bgcolor='#eeeeee'>";
       texto += "<td>" + elementos[i] + "</td>";
       if (i!=0){
          texto += "<td><a href='#' onclick='arriba(" + i + ")'><img src='acima.gif' width=9 height=9 border=0></a></td>";
       }else{
          texto += "<td></td>";
       }
       if (i!=elementos.length-1){
          texto += "<td><a href='#' onclick='abajo(" + i + ")'><img src='abaixo.gif' width=9 height=9 border=0></a></td>";
       }else{
          texto += "<td></td>";
       }
       texto += "</tr>";
    }
    texto += "</table>";
    xInnerHtml('listagem_elementos',texto);
}

Se tivermos entendido a primeira parte do exercício, esta outra não deveria representar nenhum problema.

Podemos ver em funcionamento o exercício com esta melhoria aplicada.