Nosso exemplo será a construção de um campo textarea que tenha ao lado um texto onde se mostra o número de caracteres que tem. Vamos construí-lo por meio da programação orientada a objetos, tal como se deve fazer em Mootools, com o qual poderemos reutilizar o código facilmente para outros projetos onde queiramos utilizar este "textarea inteligente". Outra das vantagens será que poderemos ter convivendo vários campos textarea que contem seus caracteres na mesma página, cuja implementação não requeira duplicar código Javascript, e sem que interfiram entre si as contas de caracteres dos diferentes textareas do documento.
Podemos ver uma página com o funcionamento deste exemplo em funcionamento.
Insisto, a idéia deste primeiro exemplo global de Mootools não é estudar ou depurar a funcionalidade deste "textarea contador de caracteres", e sim mostrar aos leitores deste manual um uso adequado do framework, de modo que o leitor possa criar suas próprias classes para implementar funcionalidades no cliente para suas próprias páginas.
As bases para fazer tudo isto foram aprendidas neste manual, portanto não deveria dar muito problema entender o código e senão, simplesmente seria reler os artigos os quais se fala dasclasses de Mootools .
A classe tem um construtor, ao qual teremos que passar os parâmetros para personalizar o comportamento desse objeto e associá-lo com os elementos da página com os que queiramos que trabalhe. A estas alturas deveríamos conhecer também como criar um construtor da classe.
No construtor iniciaremos todos os componentes dos objetos uma vez sejam criados. Neste caso teremos que receber o identificador (id) do textarea a contar caracteres e então criaremos toda a estrutura para mostrar caracteres e criar os eventos para contá-los quando o usuário os escreva.
No resto da classe teremos que criar os métodos que estimemos necessários para implementar as funcionalidades de conta de caracteres.
Sendo assim, vamos mostrar já o código da classe e logo iremos comentando as diferentes partes.
//crio uma classe para conseguir que um textarea tenha um contador de caracteres
var TextareaContador = new Class({
//defino um construtor, que recebe o id do textarea
initialize: function(idTextarea){
//recupero o elemento textarea com a função dólar
this.textarea = $(idTextarea);
//crio um elemento SPAN para mostrar o contador
this.campoContador = new Element ("span", {"class": "estilocontador"});
//injeto o contador depois do textarea
this.campoContador.inject(this.textarea, "after");
//crio um evento para o textarea, keyup, para quando o usuário solta a tecla
this.textarea.addEvent("keyup", function(){
//simplesmente chamo a um método desta classe que conta caracteres
this.contaCaracteres();
}.bind(this)
);
//chamo ao método que conta caracteres, para iniciar o contador
this.contaCaracteres();
},
//crio um método para contar os caracteres
cuentaCaracteres: function(){
//simplesmente escrevo no campo contador o número de caracteres atual do textarea
this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length);
}
});
O código da classe está comentado para que se possa saber o que se faz cada passo. Porém, vou dar uma série de referências onde podemos entender e aprender tudo o que fizemos no script.
//crio uma classe para conseguir que um textarea tenha um contador de caracteres
var TextareaContador = new Class({
Ver o artigo que fala sobre as classes.
//defino um construtor, que recebe o id do textarea
initialize: function(idTextarea){
Ver o artigo que fala sobre construtores.
//recupero o elemento textarea com a função dólar
this.textarea = $(idTextarea);
Ver o artigo sobre a função dólar.
//crio um elemento SPAN para mostrar o contador
this.campoContador = new Element ("span", {"class": "estilocontador"});
//injeto o contador depois do textarea
this.campoContador.inject(this.textarea, "after");
Nestas linhas criamos um elemento de texto onde mostraremos a conta de caracteres. Logo, colocamos no código da página depois do textarea, com o que aparecerá perto, posicionado tal como o indiquemos no estilo CSS da classe "estilocontador". Ver o artigo de construção de elementos na página. Ver o artigo de inserção de elementos na página.
//crio um evento para o textarea, keyup, para quando o usuário solta a tecla
this.textarea.addEvent("keyup", function(){
//simplesmente chamo a um método desta classe que conta caracteres
this.contaCaracteres();
}.bind(this)
Aqui se está definindo um evento, que associamos com o objeto textarea do objeto, para que quando se escreva algo no campo se atualize a conta de caracteres mostrada ao lado do textarea. (O evento "keyup" se ativa quando o usuário clica uma tecla e logo a solta, porém, só no momento de soltar a tecla). Para processar o evento se cria uma função que simplesmente chama ao outro método da classe onde se realiza a conta de caracteres. Ver o artigo onde se fala de eventos. Ver o artigo onde se fala de a função bind()
//chamo ao método que conta caracteres, para iniciar o contador
this.contaCaracteres();
O construtor termina chamando ao método contaCaracteres(), com o qual se iniciará o contador de caracteres, caso no textarea já houvesse algum texto escrito previamente.
//crio um método para contar os caracteres
contaCaracteres: function(){
//simplesmente escrevo no campo contador o número de caracteres atual do textarea
this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length);
}
Neste método se atualiza o campo de contagem, mudando sua propriedade HTML para mostrar a conta atual de caracteres. Ver artigo onde se explica o método set de um elemento da página.
Isso foi todo o código da classe TextareaContador.
Agora seria bom ver o código HTML que teremos na página para criar dois "textareas inteligentes":
<textarea id="textocontador"></textarea>
<br>
<br>
<textarea id="outro" cols=50 rows=8>Este textarea tem texto escrito...</textarea>
Só necessitamos observar os Ids dos textarea, que utilizaremos para nos referir a eles na hora de criar os objetos para que funcione a conta de caracteres.
Por último, vejamos o código para instanciar os objetos TextareaContador, uma vez que o DOM da página esteja pronto para receber modificações dinâmicas por Javascript.
//crio um evento para quando está pronto o DOM da página
window.addEvent("domready", function(){
//crio o objeto TextareaContador, passando o identificador do textarea que se pretende contar caracteres.
texto = new TextareaContador("textocontador");
otro = new TextareaContador("outro");
});
Ver o artigo sobre o evento "domready" do objeto window que utilizamos para fazer coisas quando o DOM está pronto. Ver também o artigo que fala sobre instanciação e trabalho com objetos em Mootools
Podemos ver o exemplo em uma página à parte.
Espero que com este exercício, assimilando os conhecimentos que já havíamos adquirido no manual de Mootools, possamos entender o processo completo de implementação e andamento de classes úteis para fazer efeitos na página.
