BRN Souza

Hoje conheci o Flexigrid. Um plugin jQuery que cria grids a partir de JSON (requisitado via AJAX) ou “transforma” tabelas em grids.

Os grids criados pelo plugin permitem por exemplo: ocultar colunas, reoordenar colunas, ordernar colunas, selecionar linhas, paginar os resultados, filtrar por coluna (não funcionou no IE6), dentre outras coisas. E o mais importante, tudo de maneira muito simples (tal qual como quase tudo na jQuery, né?)

Fiquei muito impressionado com ele, mas não testei ainda, só vi uns exemplos no proóprio site. Ainda assim espero testá-lo em breve.

Site para download: http://www.flexigrid.info

Objetivo: Entender como extender a jQuery para usar nossas próprias funções por meio do uso dos seletores nativos da biblioteca.

Pré-requisitos:

• Javascript (intermediário)
• jQuery (básico) » “$” e Seletores
• JSON (básico) » O que é JSON? | Parametrizando funções JS com JSON

Quem está acostumado a trabalhar com Javascript já deve ter criado pelo menos uma função personalizada para uso em seus projetos.

Eu por exemplo, antes de conhecer a jQuery, tinha minha própria biblioteca de funções para manipulação do DOM e outras coisinhas também.

Mas depois que comecei a trabalhar com a jQuery, muitas das minhas funções cairam em desuso por serem contempladas dentro da própria jQuery, por exemplo:

    getAltura(element) //Retorna a altura (height) do elemento
    getElement(id)     //O mesmo que "document.getElementById(id)"
    getSrc(element)    //Retorna o valor do atributo "src" de uma imagem
    getValor(id)       //O mesmo que "document.getElementById(id).value". Essa eu usava de mais
    //Dentre várias outras funções

Como podemos ver todas essas funções são facilmente substituidas por funções nativas da jQuery. Especificamente para estas acima, hoje eu uso:

    $('#element').height();
    $('#element');
    $('#element').attr('src');
    $('#element').val();

Mas nem todas as funções existentes na minha biblioteca são contempladas nativamente na jQuery.
Eu tinha a seguinte função que trocava o src de uma imagem pra mim (por exemplo aqueles ícones de Mais e Menos que abrem e fecham alguma coisa).

Imagine que o meu ícone [+] tem como endereço o seguinte url: “../../imgs/icones/icnAbre.gif” e quando ele for clicado, a imagem deve ser alterada para mostrar o ícone [-] cujo endereço é “../../imgs/icones/icnFecha.gif”. A função foi escrita para receber somente as substrings que se alteram nos dois endereços. No nosso caso a única coisa que muda é que em um endereço existe o “Abre” e no outro endereço o “Fecha”. Dessa forma quando chamamos a função passamos o id da imagem que terá seu src alterado e a substring que deve ser alterada no src atual. Ex.: toggleSrc(’icnAbreFecha’, ‘Abre’, ‘Fecha’);

Assim ele troca na string do src o valor “Abre” por “Fecha” ou vice-versa (no caso da ícone da vez for o “Fecha”).

Abaixo a função:

1
2
3
4
5
6
7
8
9
10
11
12
13

function toggleSrc(idImg, strSrc1, strSrc2){
    var alt, src = document.getElementById(idImg).src;
    if(src.indexOf(strSrc1) >= 0){
        alt = 'clique para fechar';
        src = src.replace(strSrc1, strSrc2);
    }else{
        alt = 'clique para abrir';
        src = src.replace(strSrc2, strSrc1);
    }
    document.getElementById(idImg).src = src;
    document.getElementById(idImg).alt = alt;
    document.getElementById(idImg).title = alt;
}

Vou mostrar como extender a jQuery para suportar nossas próprias funções personalizadas usando a função “toggleSrc()” listada acima como exemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function($){
    $.fn.toggleSrc = function(options){
        var opts = $.extend({}, $.fn.toggleSrc.defaults, options);
        return this.each(function() {
            var alt, src = $(this).attr('src');
            if(src.indexOf(opts.strSrc1) >= 0){
                alt = 'clique para fechar';
                src = src.replace(opts.strSrc1,opts.strSrc2);
            }else{
                alt = 'clique para abrir';
                src = src.replace(opts.strSrc2,opts.strSrc1);
            }
            $(this).attr('src', src);
            $(this).attr('alt', alt);
            $(this).attr('title', alt);
        });
    };
    $.fn.toggleSrc.defaults = {
        strSrc1: 'Abre',
        strSrc2: 'Fecha'
    };
})(jQuery);

Linha 1 - Na linha 1, usamos um artifício do Javascript para garantir que o
          caracter "$" referencie obrigatoriamente a jQuery.
          Isso garante que mesmo que você use a jQuery (e o seu arquivo de
          extensão da jQuery) junto com outra biblioteca que também use o
          caracter "$" (por exemplo Prototype), ainda assim o seu código irá
          fazer referência a jQuery.
          A linha 1 trabalha em conjunto com a linha 21, ou seja, podemos ler
          o conjunto como algo do tipo: (function($){ ... })(jQuery);
Linha 2 - Esta linha utiliza a expressão jQuery nativa "$.fn" para adicionar
          a funcionalidade "toggleSrc" a jQuery de forma que eu possa chamá-la
		  nativamente com os seletores jQuery. Ex: $('#img').toggleSrc();
          Repare que a funcionalidade "toggleSrc" é atribuida uma função que
          recebe como parâmetro uma variável chamada "options". Essa variável
          é um JSON contendo os parâmetros necessários para executar a função
          da maneira desejada.
Linha 3 - Aqui utilizamos um recurso muito legal da jQuery que é o "$.extend".
          No caso da nossa função se nenhum parâmetro for passado, assumimos
          como padrão que os parâmetros serão os já definidos em
          "$.fn.toggleSrc.defaults".
          Internamente esse recurso lê os parâmetros que você passou e para
          aqueles que você não definiu na chamada da função ele substitui
          pelos valores padrão que foram defindos (linhas 28 e 29).
Linha 4 - Esta linha executa toda a ação existente no contexto da função
          aberta uma vez para cada elemento informado no seletor. Por exemplo,
          se houver duas imagens na página inteira e você chamar
          "$('img').toggleSrc();", o código existente dentro do contexto da
          função iniciada nesta linha (e terminado na linha 66) será
		  executado para cada uma das duas imagens retornadas pelo seletor
          "$('img').toggleSrc();". Se houvessem 50 imagens, esse código seria
          executado 50 vezes. Se prestarmos atenção ficará claro que essa é a
          filosofia da jQuery, não tem nada de novo aqui.
Linhas 5 a 15 - Aqui mora a lógica da nossa função e de importante destaco 3
          coisas:
          1. Neste escopo (dentro da função descrita na linha anterior) a
          palavra reservada "this" faz referência ao elemento DOM selecionado.
          Sempre um por vez, ou seja se "$('img').toggleSrc();" retornar 3
          elementos, "this" referenciará uma imagem de cada vez. Para cada
          execução do trecho (que será executado tantas vezes quantos forem os
          elementos encontrados no seletor jQuery) "this" fará referência a um
          dos elementos DOM  por vez.
          A variável "opts" (linhas 6, 8 e 11) nada mais é do que a variável
          resultante do que você passou como parâmetro para a função, mesclado
          como o que você já tinha definido como DEFAULT caso nada fosse
          passado. (conforme explicado na linha 3).
Linha 18 -"$.fn.toggleSrc.defaults" recebe os valores DEFAULT da sua função
          para os parâmetros que não forem definidos na chamada. No nosso caso
          definimos que as duas strings são "Abre" e "Fecha". Se você chamar a
          função assim: "$('img').toggleSrc({strSrc1:'Mais', strSrc2:'Menos'});"
          então os valores passados irão substituir os definidos como DEFAULT.
          Caso você chame a função assim: "$('img').toggleSrc({strSrc1:'Mais'});"
          os valores utilizados dentro da função serão "Mais" para "strSrc1"
          e "Fecha" para "strSrc2".

E assim eu extendo a jQuery adicionando a ela minhas próprias funções.
Um exemplo de um arquivo meu com algumas funções é:

    (function($) {
        $.fn.radioSel = function(valueToSel){
            ...
        };
 
 
        $.fn.shuffle = function(){
            ...
        };
 
 
        $.fn.fck = function(options){
            ...
        };$.fn.fck.defaults = {
            BasePath: '/../../_libs/fckeditor/',
            ToolbarSet: 'Basic'
        };
 
 
        $.fn.toggleSrc = function(options){
            ...
        };$.fn.toggleSrc.defaults = {
            strSrc1: 'Abre',
            strSrc2: 'Fecha'
        };
    })(jQuery);

Como vemos aqui podemos adicionar mais de uma função personalizada no mesmo arquivo.
Acho legal categorizar os arquivos de funções personalizadas organizando as funções por tipo. Por exemplo:
jquery.forms.js – Funções referentes a formulários
jquery.interface.js – Funções referentes a interface (animações, etc)
jquery.ajax.js – Funções referentes a requisições ajax

É isso aí… qualquer dúvida é só falar.

Pra quem usa jQuery e não conhece a documentação Visual jQuery, tem que dar uma olhada. Vale muito a pena!

Eu uso demais. E salvando a página no seu computador você pode acessá-la localmente inclusive vendo os exemplos funcionando. Eu tenho uma cópia dela na minha pen drive para quando estou em um lugar off-line.

http://www.visualjquery.com

Fica aí a dica.

Objetivo: Entender como parametrizar funções JS usando JSON.

Pré-requisitos:

• Javascript (básico) » Funções
• JSON (básico) » O que é JSON?

Antes de conhecer o JSON, quando eu precisava ler o código javascript (para uma manutenção por exemplo) e me deparava com uma função JS que recebia muitos parâmetros, a identificação do que cada parâmetro representava era difícil, eu tinha que deduzir pelo valor de cada parâmetro passado, o que exatamente ele referenciava dentro da minha função ou então abrir o arquivo onde a função estava e ler o nome dos parâmetros recebidos na declaração dela.
Ex.:

addCarro('porsche', '911 Turbo', 480, 310, '3,5', 'prata', 2009, 2009, true);

O que é “480″? E o “310″? Será que “2009″ é o ano de fabricação do carro?

Usando JSON para parametrizar nossas funções, nós conseguimos fazê-la mais legível quando de sua chamada. Para o exemplo acima, teríamos algo parecido com isso:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,
        possuiFoto    : true
    }
)

Muito melhor de ler e usar, né? Os benefícios de se utilizar essa forma ficam ainda mais evidentes quando precisamos passar para nossas funções estruturas mais complexas de dados por exemplo arrays ou ainda outros JSON’s. Vejamos o exemplo:

addCarro(
    {
        montadora     : 'porsche',
        modelo        : '911 Turbo',
        cavalos       : 480,
        velocidadeMax : 310,
        DeZeroaCem    : '3,5',
        cor           : 'prata',
        anoFabricacao : 2009,
        anoModelo     : 2009,,
        fotos         : [
            {arquivo:'imgs/9876/01.jpg', legenda:'Pintura impecável'},
            {arquivo:'imgs/9876/02.jpg', legenda:'Interior todo em couro'},
            {arquivo:'imgs/9876/03.jpg', legenda:'Rodas de liga leve 20"'},
            {arquivo:'imgs/9876/04.jpg', legenda:'Visão lateral'}
        ]
    }
)

Aqui nós não dizemos simplesmente se tem ou não foto, mas sim quais são as fotos e para cada foto temos a informação do nome do arquivo e também da legenda (para exibirmos na página por exemplo).

Agora, como fica a declaração da função e como ler JSON passado como parâmetro:

function addCarro(jsonOptions){
    //Lendo o JSON passado como parâmetro
    jsonOptions.montadora;       // 'porsche'
    jsonOptions.modelo;          // '911 Turbo'
    jsonOptions.cavalos;         // 480
    jsonOptions.velocidadeMax;   // 310
    jsonOptions.DeZeroaCem;      // '3,5'
    jsonOptions.cor;             // 'prata'
    jsonOptions.anoFabricacao;   // 2009
    jsonOptions.anoModelo;       // 2009
    jsonOptions.fotos;           // [Objeto Array]
    jsonOptions.fotos[0];        // [Objeto JSON]
    jsonOptions.fotos[0].arquivo;// 'imgs/9876/01.jpg'
    jsonOptions.fotos[3].legenda;// 'Visão lateral'
 
    //Iterando sobre as fotos
    for(var i=0, j=jsonOptions.fotos.length; i<j; i++){
      jsonOptions.fotos[i].arquivo; //lê o arquivo
      jsonOptions.fotos[i].legenda; //lê a legenda
   }
}

Se você tiver alguma dúvida referente a manipulação do JSON leia este post onde eu detalho como trabalhar com ele.

Qualquer dúvida, é só falar.

Objetivo: Entender o funcionamento do JSON aprendendo como usá-lo para estruturar informações e iterar sobre elas

Pré-requisitos:

• Javascript básico (Array, For, For … in)

JSON (sigla para JavaScript Object Notation) é um padrão para escrever estruturas de dados em JavaScript.

O JSON é nativo do Javascript e apesar de recentemente ter ganhado muita evidência já esta disponível na linguagem há bastante tempo.

Acredito que o JSON ganhou muito destaque nos últimos tempos por conta do crescimento do Javascript como linguagem de programação, por oferecer uma maneira bastante “confortável” de se trabalhar com coleções de dados diversas.

Resumidamente o JSON se baseia na notação ATRIBUTO : VALOR, onde ATRIBUTO pode ser o nome que você quiser para identificar alguma coisa e VALOR o próprio valor desta coisa
Exemplos:

//ATRIBUTO » "nome" | VALOR » "Bruno Souza"
{"nome":"Bruno Souza"}
 
//ATRIBUTO » "font-size" | VALOR » "20px;"
{"font-size":"20px;"}

Ele tem uma estrutura parecida com o XML, logo se você conhece XML não terá dificuldades para entender seu funcionamento (mesmo não conhecendo XML, o entendimento do JSON é bem tranquilo, então se esse é o seu caso, não se assuste).

Observe o esquema:

• Filme
  • Título: X-Men Origens: Wolverine
  • Gênero: Aventura
  • Duração (min): 107
  • Ano: 2009

Para representarmos essa estrutura usando JSON, teríamos o seguinte código:

var filme = {
    "titulo"  : "X-Men Origens: Wolverine",
    "genero"  : "Aventura",
    "duracao" : "107",
    "ano"     : "2009"
}

Em XML teríamos

<?xml version='1.0' encoding='utf-8'?>
<filme>
	<titulo>X-Men Origens: Wolverine</titulo>
	<genero>Aventura</genero>
	<duracao>107</duracao>
	<ano>2009</ano>
</filme>

Podemos incrementar nossa estrutura de forma que haja mais de um filme e que para cada filme exista um item chamado “Elenco” e neste coloquemos a lista dos principais atores do filme.

• Filme
  • Título: X-Men Origens: Wolverine
  • Gênero: Aventura
  • Duração (min): 107
  • Ano: 2009
  • Elenco:
    • Hugh Jackman (Logan / Wolverine)
    • Ryan Reynolds (Wade Wilson / Deadpool)
    • Liev Schreiber (Victor Creed / Dentes-de-sabre)
    • Dominic Monaghan (Bradley)
• Filme
  • Título: Velozes & Furiosos 4
  • Gênero: Ação
  • Duração (min): 107
  • Ano: 2009
  • Elenco:
    • Vin Diesel (Dominic “Dom” Toretto)
    • Paul Walker (Brian O’Conner)
    • Jordana Brewster (Mia Toretto)
    • Michelle Rodriguez (Letty)

Para esta nova estrutura fazemos um array de objetos JSON para os filmes (um para cada) e nos itens “elenco” um outro array simples de strings (nomes dos atores)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var filmes = [
    {
        "titulo"  : "X-Men Origens: Wolverine",
        "genero"  : "Aventura",
        "duracao" : "107",
        "ano"     : "2009",
        "elenco"  : [
            "Hugh Jackman (Logan / Wolverine)",
            "Ryan Reynolds (Wade Wilson / Deadpool)",
            "Liev Schreiber (Victor Creed / Dentes-de-sabre)",
            "Dominic Monaghan (Bradley)"
        ]
    },
    {
        "titulo"  : "Velozes & Furiosos 4",
        "genero"  : "Ação",
        "duracao" : "107",
        "ano"     : "2009",
        "elenco"  : [
            "Vin Diesel (Dominic \"Dom\" Toretto)",
            "Paul Walker (Brian O'Conner)",
            "Jordana Brewster (Mia Toretto)",
            "Michelle Rodriguez (Letty)"
        ]
    }
]

Vamos analisar a estrutura acima:

Linha 1 - "Abro" o array que conterá os JSON's de cada filme utilizando "["
Linha 2 - "Abro" o JSON do primeiro filme
Linha 3 - Crio o primeiro atributo do meu objeto JSON - "titulo"
          Observe que para atribuir um valor a um item usa-se ":"
          Este atributo poderá ser acessado literalmente pelo seu nome
          Ex.: filmes[0].titulo
          Apesar do atributo "titulo" ter sido declarado com o uso de
          aspas nós consiguimos acessa-lo diretamente sem elas.
          Isso ocorre porque internamente é como se o item se tornasse
          uma variável (ou uma propriedade no conceito OO) do objeto
          JSON que representa o filme alocado no índice ZERO do array
          filmes
Linhas 4 a 6 - Repito o mesmo procedimento da linha 3.
          Observe que utilizamos a "," para separar os atributos do
          objeto JSON
Linha 7 - Crio o atributo "elenco" e a ele eu atribuo um array contendo
          os atores do filme
Linha 13 - "Fecho" o JSON
Linhas 14 a 25 - Repito a mesma coisa para o próximo objeto JSON.
Linha 26 - "Fecho" o array de objetos JSON

Vamos ver agora como ler alguns dos dados da nossa estrutura:

filmes;              //retorna um array contendo dois objetos JSON
filmes[0];           //retorna um objeto JSON
filmes[0].título;    //retorna "X-Men Origens: Wolverine"
filmes[1].elenco[2]; //retorna "Jordana Brewster (Mia Toretto)"

Para iterar em cada um dos filmes do array utilizamos um loop simples

1
2
3
4
5
6
7
8
9
10

for (i=0; i<filmes.length; i++) {
    filme = filmes[i];
    infosFilme = '';
    for(j in filme){
        atributo = j;
        valor = filme[j];
        infosFilme += atributo+':\t'+valor+'\n';
    }
    alert(infosFilme);
}

Analisando a estrutura acima:

Linha 1 - Fazendo o for para tratar cada um dos filmes
          Como "filmes" é um array, a propriedade "length" me diz
          quantos são os filmes contidos no array
Linha 2 - Atribuo a variável "filme" o filme do índice apontado pelo for
Linha 3 - Limpo a variável "infosFilmes" atribuindo a ela uma string vazia
Linha 4 - Itero em cada um dos atributos do filme, lembrando que os
          atributos são: titulo, gênero, duração, ano e elenco
Linha 5 - Pego o nome do atributo j
Linha 6 - Pego o valor do atributo j
Linha 7 - Monto a string "ATRIBUTO: VALOR"

A jQuery usa muito JSON para parametrizar suas funções. Neste link eu mostro como parametrizarmos nossas próprias funções JS usando JSON.

Para mais detalhes a cerca do JSON visite http://www.json.org

Qualquer dúvida, é só falar.

Problema: Como criar uma função Javascript que possa receber indefinidos valores como parâmetro e ainda assim tratá-los corretamente?

Pré-requisitos:

• Javascript (básico)

Para ilustrar a utilização do recurso, vamos imaginar que precisamos criar uma função para a qual passemos uma lista de ID’s de elementos e essa função oculte todos eles.

Essa função nunca sabe quantos serão os elementos passados para ela, e ainda assim deve ocultar tantos elementos quantos forem passados.

Queremos então poder chamar a função com algo mais ou menos assim:

hide('inputA', 'comboB', 'imgC', 'divD');

E quando chamada a função irá então ocultar os elementos cujos ID’s sejam os passados como parâmetro.

Nossa função fica assim:

function hide(){
    qtdArgumentos = arguments.length;
    for (var i = 0; i < qtdArgumentos; i++) {
        var element = arguments[i];
        element = document.getElementById(element);
        element.style.display = 'none';
    }
}

Toda função JS tem como um de seus atributos o “arguments” que é um array. Este atributo sempre é preenchido no momento em que a função é chamada e automaticamente preenchido com os argumentos passados como parâmetro na chamada da função.

No nosso caso, para o exemplo acima, teremos como valor do atributo “arguments” quando da chamada da função o seguinte array: ['inputA', 'comboB', 'imgC', 'divD'].

Em JS todo array possui um atributo chamado “length” que guarda o tamanho do array referenciado. Quando usamos “arguments.length” descobrimos quantos foram os argumentos passados para a função. Desta maneira podemos iterar sobre cada um dos elementos (linhas 3 a 7), e fazermos o que tem que ser feito, no nosso caso, ocultar cada um dos elementos passados por parâmetro.

Antes de usar a jQuery (que resolve isso pra gente de outra maneira) eu usava muito, funções com argumentos dinâmicos, para coisas simples que deveria ser repetidas individualmente para cada elemento, como setar uma classe de erro em todos os divs mal preenchidos [setClass('classErro', 'divA', 'divB', 'divC', ..., 'divZ')], habilitar ou desabilitar elementos em um form [disable('inputA', 'inputB', 'inputC', ..., 'inputZ')], dentre outras coisas.

Qualquer dúvida é só falar

Problema: Como descobrir qual RadioBox está selecionado? Como limpar a seleção de todos Radios? Como selecionar uma Radio dinamicamente com o JS?

Pré-requisitos:

• Javascript (intermediário) » Funções JS com argumentos dinâmicos
• jQuery (intermediário) » Extendendo a jQuery
• JSON (básico) » O que é JSON? | Parametrizando funções JS com JSON
• HTML (básico)

Pra resolver essas questões eu criei uma pequena extensão para a jQuery que me ajuda com isso:

Campos no formulário:

(function($) {
    $.fn.radioSel = function(valueToSel){
        /* 
        Como usar
        » Marca o radio cujo valor é 'F';
          $('input[id=sexo]').radioSel('F')
        » Retorna o valor do radio selecionado ou 'false' caso nenhum esteja marcado;
          $('input[id=sexo]').radioSel()
        » Limpa todos o radio marcado;
          $('input[id=sexo]').radioSel('')
        */
 
        if(arguments.length>0){
            if(valueToSel!=''){
                return this.each(function(){ // itera sobre cada elemento encontrado
                    if($(this).val()==valueToSel)this.checked = true;
                })
            }else{ //Se veio vazio é para limpar todas as marcações
                return this.each(function(){ this.checked = false; })
            }
        }else{
            valorSelecionado = false;
            this.each(function(){ // itera sobre cada elemento encontrado
                if(this.checked){
                    valorSelecionado = $(this).val();
                    return valorSelecionado;
                }
            });
            return valorSelecionado;
        }
    };
})(jQuery);

Para usar a extensão basta fazer o select jQuery e chamar o método “radioSel”

Marcar o radio cujo valor é ‘F’

$('input[id=sexo]').radioSel('F');

Retornar o valor do radio selecionado (’false’ caso nenhum esteja marcado);

$('input[id=sexo]').radioSel();

Limpar todos o radio marcado;

$('input[id=sexo]').radioSel('');

Como os dois radios possuem o mesmo “id”, se eu usasse “$(’#sexo]’)” o jQuery somente me retornaria o primeiro elemento input que ele encontrasse com o id “sexo”, por isso utilizei “$(’input[id=sexo]‘)” para conseguir selecionar não pela identificação do elemento, mas sim pelo atributo “id”, assim consigo todos os elementos onde “id=sexo”. Esquisito, né? Mas para o jQuery faz diferença.

Qualquer dúvida, é só falar.