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.
freeDOM
Alguns de você já devem ter lido sobre a freeDOM.js , uma biblioteca Javascript que estou desenvolvendo em colaboração com Leandro Vieira e outros colaboradores (não menos importantes, mas ainda não tão ativos). Estamos ainda engatinhando, mas acredito que esse projeto possa render bons frutos visto que há ótimas pessoas nos apoiando, tanto na divulgação quanto no envio de códigos e correções.
O nome freeDOM surgiu num brainstorm que eu e Leandro fizemos, surgiram varios nomes mas nenhum expressava melhor o que nós queriamos: liberdade + manipulação do DOM (que é a parte base da biblioteca). E acho que foi uma boa escolha, já recebemos alguns elogios ao nome 
Para quem ainda não ouviu falar eu vou fazer uma pequena explicação dos objetivos deste projeto:
- Principalmente, ela deve ser leve e ser flexivel (explicarei melhor essa flexibilidade futuramente)
- Prover produtividade ao desenvolvimento
- Ser modularizada, separando em pacotes códigos de "assuntos" diferentes
- Manter sempre o código aberto, de facil legibilidade para facilitar a manutenção (e adaptação para atender a necessidades especificas)
Basicamente esses são os princípios que vamos seguir para tocar pra frente esse projeto. Se alguém se opõe ou se acha q falta alguma coisa, por favor se pronuncie!
Abraços