Posts Tagged ‘freeDOM.js’

jQuery tem me poupado consideráveis linhas de código

Wednesday, July 25th, 2007

A biblioteca de JavaScript jQuery, tem me poupando consideráveis linhas de código. Meu tempo, cada dia que passa, se torna mais escasso. Então, quando posso codificar menos e viver mais, a felicidade é tamanha que você nem imagina.

Vou demonstrar o pedaço de um código que eu havia codificado alguns meses utilizando a freeDOM.js, e hoje, resolvi refazê-lo utilizando a jQuery. Observe:

Pedaço de código utilizando a freeDOM.js

...
var arrTagInput, i, tagInput;
arrTagInput = $tags('input');
for (i = 0; i < arrTagInput.length; i++) {
	tagInput = arrTagInput[i];
	if ( (tagInput.getAttribute('id') !== null && tagInput.getAttribute('id') !== '') && tagInput.getAttribute('id').match(/^sbt-cart-update([0-9]+)$/) ) {
		tagInputId = tagInput.getAttribute('id');
		$remove($(tagInputId));
	}
}
...

Pedaço de código utilizando a jQuery.

...
$('input[@id*=sbt-cart-update]').remove();
...

Sim, somente.

Meu objetivo com ambos os códigos é selecionar todos os elementos input da página, com os elementos selecionados, irei filtrá-lo, pegando apenas aqueles que contenham em seu atributo ID o seguinte: "sbt-cart-update".

Satisfeito.

Gecko DOM Code Hints 0.3 e freeDOM.js in DW 0.2

Wednesday, February 7th, 2007

Disponível a versão 0.3 da Gecko DOM Code Hints e da versão 0.2 da freeDOM.js inside Dreamweaver. Confira os detalhes da nova versão dessas extensões para o Dreamweaver.

Gecko DOM Code Hints 0.3

Na versão anterior, 0.2, o Code Hints funcionava apenas nos documentos do tipo JavaScript. Nesta versão, 0.3, o Code Hints está disponível em todos os tipos de documentos.

freeDOM.js in DW 0.2

Nesta versão, 0.2, foi adicionada todas as funções da freeDOM.js e ela também trabalhará em todos os tipos de documentos no Dreamweaver.

Downloads

w3FormValidation 2.3

Friday, February 2nd, 2007

Disponível a versão 2.3 do w3FormValidation. Essa versão inclui a correção de um bug em que as tags select são exibidas sobre o overlay no body no Microsoft Internet Explorer.

Mais informações sobre o w3FormValidation.

freeDOM.js inside Dreamweaver

Tuesday, January 23rd, 2007

O Dreamweaver passará a reconhecer as funções da freeDOM.js através da extensão freeDOM.js inside Dreamweaver.

Criei essa extensão para facilitar meu trabalho ao utilizar a freeDOM.js no Dreamweaver. A versão atual é a 0.1 e toda sugestão será muito bem vinda :)

Exemplo de uso

Uma vez que a instalação foi instalada, abra um arquivo do tipo JavaScript e digite $ (cifrão). Ao digitar esse caractere será exibido um menu popup com as funções da freeDOM.js, com isso utilize as teclas para cima e para abaixo do seu teclado para navegar entre as funções do menu.

Observe a imagem de exemplo:

Exemplo do Float Panel da freeDOM-inDW 0.1

Ao digitar o nome da função e abrir o parênteses, por exemplo: $after(. O Dreamweaver exibirá uma tooltip com os parâmetros da referida função; à media em que você for adicionando as vírgulas para informar o parâmetro posterior o menu é atualizado; sempre exibindo em negrito o parâmetro em questão.

Observe outra imagem de exemplo; agora com a tooltip:

Exemplo da tooltip nas funções da freeDOM.js

Faça o download da freeDOM.js inside Dreamweaver (freeDOM-inDW), versão atual 0.1

Espero que go

freeDOM Self-Service

Tuesday, December 19th, 2006

Estou disponibilizando o freeDOM Self-Service, um cardápio com as funções da freeDOM.js. Com ele você terá a freeDOM.js somente com as funções necessárias para o seu projeto.

Uma possibilidade de manter o arquivo ainda mais leve e evitar o armazenamento de funções desnecessárias.

O freeDOM Self-Service está em versão Alpha, mas já está funcional. E com algumas sugestões (assim espero) irei incrementá-lo à medida que o tempo for permitindo.

Um abraço.

Ajax com uma linha de código.

Monday, December 18th, 2006

Utilizando a freeDOM.js é possível trabalhar com o Ajax com apenas 1 (uma) linha de código. Tornando a tarefa de desenvolver interfaces mais ricas e com uma melhor interatividade com o usuário super simples.

Uma vez que você já inseriu a freeDOM.js na sua página, basta inserir o módulo de AjaxfreeDOM-ajax.js – ambos podem ser baixados na página da freeDOM.js. Você estará adapto a trabalhar com o Ajax com apenas uma linha de código.

Primeiramente, você precisará instanciar a classe de Ajax do módulo freeDOM-ajax.js da seguinte maneira:

var ajax = new ajax();

Feito isso, seu próximo passo é criar uma simples linha de código assim:

ajax.addRequest('/pg_serve_side.php',fnSeguinte,$('formID'));

Só isso :) . Mas vou explicar em detalhes.

ajax.AddRequest = chama o método – addRequest – responsável em adicionar uma nova requisição Ajax à fila.

pg_serve_side.php = Nesse primeiro parâmetro do método addRequest, você informa a URL da página responsável pela comunicação com o servidor.

fnSequinte
= O segundo parâmetro do método refere-se a uma função de retorno, que você poderá utilizar para tratar os dados retornados pelo AjaxresponseText.

Para finalizar temos o terceiro parâmetro, onde informamos o formulário que contém os dados quem devem ser “coletados” e enviados juntos a requisição. Isto é uma mão na roda em tanto.

Imagine que você tenha um formulário com “trocentos” campos e para enviar os seus dados, você teria que manualmente fazer algo assim:

...
dataPost += '&nome=' + $('nome').value;
dataPost += '&email=' + $('desc').value;
...

Informando o formulário no terceiro parâmetro da freeDOM-ajax.js, ele tratará de “coletar” os dados de todos os campos do formulário informado e facilitando a sua vida.

Esse módulo – freeDOM-ajax.js – ainda está em desenvolvimento, mas já apresenta significativa vantagem para o desenvolvedor. Gostaria de saber o seu comentário a respeito desses recursos e o que ela possa vir a ter :)

Como validar radio buttons com o w3FormValidation

Monday, December 18th, 2006

A partir da versão 2.2 o w3FormValidation suporta a validação de radio buttons, de uma forma muita simples e eficiente.

Um grupo de campos do tipo radio – radio group – é um pouco diferente de outros tipos como: text, password, textarea, entre outros. Uma vez que o tipo radio button possue o mesmo atributo name para todos os campos de um determinado grupo e pode vir a ter id diferentes para cada um deles (óbvio).

Sendo assim, não podemos informar ao w3FormValidation o id de um radio button em específico. Mas sim, o atributo name do radio group, o qual se deseja que um dos campos seja selecionado. Juntamente com atributo name, informamos também o atributo id do formulário onde o radio group se encontra.

Ciente dessas informações, procedemos da seguinte maneira:

var c = [];
c.push('req,id_do_form:name_do_radio_group,mensagem desejada');

Ou seja, informamos ao w3FormValidation, que o tipo de validação será o req. Isto é, o campo é requerido. Em seguida informamos o ID do formulário seguindo de : – dois pontos – e o name do radio group. Logo depois a mensagem que desejamos exibir, caso nenhum dos radio button do radio group seja selecionado.

Visite a página do w3FormValidation para conhecer outros tipos de validação.

freeDOM e o método removeChild

Saturday, December 16th, 2006

O método removeChild é utilizado para excluirmos um elemento de uma página. Utilizando a freeDOM você utilizará a função $remove() e irá configurá-la assim:

$remove($('id_do_elemento_pra_remover'));

Dessa forma a função $remove() da freeDOM utilizará o método removeChild para excluir o elemento que você informou a ela. Somente.

Mais detalhe sobre o método removeChild no Mozilla Developer Center

freeDOM e o método createTextNode

Saturday, December 16th, 2006

O método createTextNode é utilizado para criarmos textos e assim podermos inserí-lo dentro de algum elemento.

A função da freeDOM referente a ele é a $newTN(). Essa função possui um único e simples parâmentro – strConteudo – que refere-se a string de texto que será utilizado pelo método createTextNode afim de criar o texto desejado.

A função $newTN() também é utilizada internamente pela função $new() da freeDOM.

Veja um exemplo de utilização $newTN()

$append($newTN('Nossa trabalhar com DOM assim é legal. Não sou mais um Zé Ruela.'));

Acima, estamos utilizando a função $append() referente ao método appendChild afim de inserirmos o texto que criamos através da função $newTN().

Veja mais detalhes sobre o método createTextNode no Mozilla Developer Center

freeDOM e o método appendChild

Saturday, December 16th, 2006

O método appendChild ou “acrescentar filho” é utilizado para inserimos um elemento em uma página. O elemento a ser inserido será acrescentado como o último filho de um referido elemento.

A freeDOM oferece-lhe esse recurso através da função $append e utilizá-la é muito simples, observe:

$append($new('hr'));

O exemplo acima irá inserir uma tag hr como o último filho da tag body. Mas se você deseja inserir o elemento dentro de um outro elemento em específico, é só informar a $append que elemento é esse. Assim:

$append($new('hr'),$('conteudo'));

Ou seja, a tag hr será inserida como o último filho do elemento cujo ID é igual a conteudo.