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

Wikipédia já é uma referência para estudos e para disseminação de conhecimento!. Quem nunca passou pelo sítio de informações da Wikipédia ?. Wikipédia já é fonte de referência aos estudantes de ensino fundamental até ensino superior.

Eu queria muito poder doar diretamente mas não estou em um bom momento financeiro e graças ao br-linux.org encontrei um meio de poder ajudar a Wikipédia, valeu Augusto Campos(br-linux.org)!.

Ajude a manter a Wikipédia no ar – mesmo sem colocar a mão no bolso!
O BR-Linux.org lançou uma campanha para ajudar a Wikimedia Foundation a manter a Wikipédia no ar. Se você puder doar diretamente, é sempre a melhor opção. Mas se não puder, veja as regras da promoção do BR-Linux e ajude a divulgar – quanto mais divulgação, maior será a doação do BR-Linux, e você ainda concorre a um pen drive!