freeDOM.js inside Dreamweaver
Ultimamente tenho tido pouco tempo disponível para me dedicar ao desenvolvimento da freeDOM, mas ainda bem que tenho meu amigo Leandro ao meu lado, parar criar e inovar neste projeto. Desta vez ele deu mais um passo para aumentar a nossa produtividade no desenvolvimento: criou a freeDOM.js inside Dreameaver extensão para o Dreamweaver reconhecer as funções da biblioteca.
Abaixo algumas imagens da extensão:
Recomendo este maravilha todos que utilizam a freeDOM.
Abraços!
Ajax usando a freeDOM
Ontem foi publicada a versão 0.2 do modulo de ajax da freeDOM.js. Alguns bugs corrigidos, aumento na flexibilidade e novas implementações foram algumas das mudanças da nova versão.
Além disso foi mantida total compatibilidade com as versões anteriores, portanto se você já usava, não precisa se preocupar em mudar seu código.
Criando uma requisição simples
Para quem não a conhece vou mostrar a simplicidade de se usar este modulo.
Inclua as bibliotecas freeDOM.js e freeDOM-ajax.js no seu documento, depois é só fazer a requisição:
-
ajax.addRequest("/script.php", fnRetorno, $('formulario'));
Pronto!
A função addRequest recebe basicamente 3 parâmetros: O primeiro será a URL que será requisitada, o segundo a função que será executada quando a requisição estiver completa e o terceiro serão os dados que serão passados. No exemplo é passado um formulário como parâmetro, isso fará com que o script peque todos os campos do formulário e seus valores e envie-os como POST automaticamente, poupando bastante trabalho. Você também pode passar uma string no formato da string GET da URL (x=1&y=2&z=3) ou até mesmo um vetor mesclando formulários e strings.
Agora, para finalizar, é só criar a função fnRetorno que o primeiro argumento da função será o responseText da requisição ajax.
-
function fnRetorno(str)
-
{
-
alert(str);
-
}
O Efeito 'carregando...'
Com a versão 0.2 ficou muito mais fácil criar o famoso efeito de carregamento.
Comece criando uma div com id loading contendo o texto que exibirá a mensagem. Depois defina as funções startLoading e finishLoading:
-
ajax.startLoading = function () { removeClass($("loading"), "hidden"); };
-
ajax.finishLoading = function () { addClass($("loading"), "hidden"); };
Pronto! E não esqueça de definir no CSS que a classe hidden seja display:none; e que o id loading tenha position:absolute; além de outras estilizações a seu gosto.
Posteriormente eu explicarei como criar requisições mais completas.