Eu tenho utilizado exaustivamente a biblioteca de componentes YUI (Yahoo User Interface) para re-redesenhar a interface dos sistemas web que desenvolvo no meu atual local de trabalho.

Acredito que há muitas opniões sobre esta nova abordagem de web2.0, desenvolvedores nacionais renomados ja se expressaram sobre esta questão, a web2.0 é boa para diversas situações, mas não tudo. Um exemplo é o Yahoo Mail Beta, é legal e bonito mas é lento demais, sem falar que no firefox qualquer ação o processamento vai para 100% e isso é caos!. É tudo uma questão de bom senso, usar web2.0 para dá um turbinada na aplicação com validações e chamadas assíncronas, melhorar a usabilidade ou ainda aplicar um comportamento para um determinado componente na tela é uma boa opção. Mas usar web2.0 para emular sistemas que rodam no desktop é complicado, por que são muitos eventos, muitos widgets, muitas regras de css(posicionamento, imagens e etc) e acaba que a aplicação fica extremamente lenta e de difícil manutenção, com certeza não é o que queremos.

Para quem não conhece, a YUI é uma biblioteca de componentes reutilizaveis feitos em javascript, dhtml e css para facilitar a construção de RIA (Rich Internet Applications) , a YUI é produzida primariamente pelos yahoo hackers e também pela comunidade. É utilizada extensivamente no portal do Yahoo.com[.br] para os softwares web do Yahoo!, com isso podemos entender que é um projeto amplamente suportado. A YUI! é software livre, cuja a licença é uma variação da licença BSD e pode ser encontrada aqui.

Como eu ainda não postei nada sobre a YUI, neste artigo estarei descrevendo sua utilização básica com um exemplo utilizando o widget DataTable, para o exemplo ficar ainda mais interessante irei também descrever como customizar a ordenação crescente e decrescente. As informações de exemplo que vamos utilizar são informações referentes a veículos, vamos customizar a ordenação por Placa, a YUI já possui funções de ordenação padrões e que trabalham com alguns tipos definidos.

No inicío de cada bloco de código estarei usando a sigla [COD_[1-9]{2}] para identificar o bloco de código quando o estiver referenciando em outros trechos do artigo, para facilitar a localização.

Pré-requisitos:

  1. Conhecimentos básicos em JavaScript.
  2. Você precisa baixar a YUI e carregar os componentes na sua página html ou carregá-las apartir do próprio site do yahoo, para saber mais sobre este serviço entre no site.. No desenrolar deste artigo usarei o serviço de hosting da YUI provido pelo Yahoo.

Primeiramente é preciso incluir os scripts e os estilos no header do html:

  • Estilos: [COD_01]
  • Mais estilo(Sobrecarrega algumas regras css, para fins de personalização): [COD_02]

  • YUI Scripts: [COD_03]
  • JavaScript para criação do DataTable:[COD_04]

    function init()
    {
    /**
    * Configura namespace para não haver conflitos referentes a nomes
    * e para facilitar a organização de objetos e etc.
    */

    YAHOO.namespace(“exemplo”);

    /**
    * Dados que serão usados no DataTable
    */
    YAHOO.exemplo.dados = {
    veiculos: [
    {placa:"JTX-0506", vistoria:new Date(2004, 2, 21), km:110000},
    {placa:"JYZ-0469", vistoria:new Date(2001, 8, 10), km:65000},
    {placa:"JTA-4591", vistoria:new Date(2000, 9, 5), km:45036},
    {placa:"XYZ-4587", vistoria:new Date(2000, 5, 8), km:456978}
    ]
    };

    /**
    * Informações do cabeçalho para o widget.ColumnSet possa retornar
    * um objeto adapter(adaptador) para a renderização do DataTable.
    */
    var Cabecalhos = [
    {key:"placa", title:"Placa", sortable:true},
    {key:"vistoria", type:"date", sortable:true, resizeable:true},
    {key:"km", type:"number", sortable:true, resizeable:true}
    ];

    /**
    * Objeto “configurador” do cabecalho
    */
    var ConfiguraColunas = new YAHOO.widget.ColumnSet(Cabecalhos);

    /**
    * Objeto DataSource é responsável por pegar, tratar e adaptar
    * as informações para que o objeto DataTable possa renderizá-las
    */
    var CapturaInformacoes = new YAHOO.util.DataSource(YAHOO.exemplo.dados.veiculos);
    CapturaInformacoes.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    CapturaInformacoes.responseSchema = {
    fields: ["placa","vistoria","km"]
    };

    /**
    * Enfim cria o table
    * O primeiro parametros é onde(div) será renderizado o seu DataTable
    */
    var DataTable = new YAHOO.widget.DataTable(“exemplo”,
    ConfiguraColunas, CapturaInformacoes, {caption:”Exemplo básico de DataTable”});
    }

    /**
    * Quando a arvore DOM estiver carregada executa a função!
    * o YAHOO.util.Event é um utilitário do YUI para trabalhar com eventos
    */
    YAHOO.util.Event.onDOMReady(init);

  • Você pode fechar o header do html e então no corpo(body) colocar aonde o DataTable será renderizado, no caso: (Sem isso o DataTable não irá ser renderizado)

Resultado:

Como podemos constatar no resultado acima as duas ordenações que realmente funcionam são as colunas por data e por quilometragem, pois o YUI reconhece os tipos informados nas linhas 28 e 29 do JavaScript , os tipos reconhecidos pela YUI são “string”, “number”, “date”, “currency”, “email” e “link”. Você pode clickar no cabeçalho da coluna “Placa” e você verá que a lógica de ordenação aplicada é a do tipo string, ou seja, pelas letras iniciais, mas precisamos que essa coluna seja ordenada pelo numero final da placa, pois sabemos que o pagamento do ipva de um veículo vence no mês do último número da placa, por exemplo final de placa 1 vence em Janeiro, 2 em Fevereiro e assim sucessivamente e as placas com final 0 vence em outubro.

Precisamos customizar a ordenação, vamos criar primeiramente as funções para ordenação crescente e decrescente, a YUI possui duas funções utilitárias para ajudar-nos nesta tarefa, são a YAHOO.util.Sort.compareAsc e a YAHOO.util.Sort.compareDesc
, a primeira para comparação crescente e a segunda para comparação decrescente, vejamos sua utilização já aplicando ao problema que nós temos de ordenar os dados pelo final da placa, a seguir: [COD_05]


/**
* Ordenação Crescente
*
*/
var ordByPlacaAsc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareAsc
// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

/**
* Ordenação Decrescente
*
*/
var ordByPlacaDesc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareDesc

// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

Como podemos ver, basicamente temos o mesmo procedimento só que com funções utilitárias diferentes, você pode fazer a comparação nas linhas 11 e 28, as funções utilitárias fazem a comparação e para a YAHOO.util.sort.compareAsc retornam -1 se o primeiro argumento for < (menor que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é >(maior que) o segundo argumento e o inverso para a YAHOO.util.sort.compareDesc, ou seja, -1 se o primeiro argumento for > (maior que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é < (menor que) o segundo argumento e assim a YUI vai ordenando os dados no DataTable, mas você está sentindo falta de algo ?! sim!, aonde parametrizamos para que o YUI utilize estas funções customizadas de ordenação ?!

R: No bloco de código [COD_04] na linha 27 é possível passar um argumento chamado sortOptions contendo as informações referentes a customização da ordenação, veja um exemplo de como fica a linha 27 inserindo as funções de ordenação:


{key:”placa”, title:”Placa”, sortable:true, sortOptions:{ascFunction:ordByPlacaAsc,descFunction:ordByPlacaDesc}},

Como resultado podemos ver a ordenação sendo feita pelo último número da Placa do veículo:

Resultado:

Já me estendi demais, espero que eu tenha conseguido exemplificar o uso básico do widget DataTable da YUI e de como customizar a ordenação, qualquer sugestão, correção ou crítica construtiva é bem vinda. Ajude-me a melhorar a qualidade dos artigos que escrevo.

Links essenciais que me serviram de consulta e para quem deseja exemplos mais ricos:
http://developer.yahoo.com/yui
http://developer.yahoo.com/yui/examples/datatable/
http://developer.yahoo.com/yui/datatable/
http://developer.yahoo.com/yui/docs/module_datatable.html
http://www.quirksmode.org/js/strings.html