Class Options de Mootools

A classe Options de Mootools proporciona um mecanismo simples para que nossas classes tenham opções de configuração às que se pode dar valores por padrão.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 18/7/12
Valorize este artigo:
Options é uma das classes que o framework Javascript Mootools proporciona e que devemos conhecer para desenvolver componentes facilmente personalizáveis e reutilizáveis. Pertence ao pacote Class Extras, que oferece várias utilidades interessantes para as classes de programação orientada a objetos.

A classe Options nos facilitará muito a vida à hora de fazer sistemas personalizáveis e configuráveis pelo programador. Nos poupará, ademais, muitas linhas de código quando queiramos criar objetos que se possam personalizar por uma serie de parâmetros e nos permitirá definir algumas opções por padrão, que tenham validade quando o programador não especifique todos os valores de configuração dos objetos que se instanciem.

A importância de conhecer a classe Options e utilizá-la quando criemos componentes Mootools, se percebe, sobretudo, quando a incorporamos ao conjunto de recursos utilizados no nosso dia- a- dia como desenvolvedores Javascript. Observaremos em pouco tempo que resulta muito cômoda de usar e que nos dá possibilidades enormes de reutilização dos componentes, personalização de suas funções, assim como a possibilidade de estender facilmente as classes com novas funcionalidades, sem que isso implique reformar o código fonte de nossas páginas em vários sites para utilizar as novas versões das classes. De qualquer modo, neste artigo do Manual de Mootools de DesarrolloWeb.com esperamos que você possa apreciar todas as vantagens de uso desta classe.

Podia ser bom um exemplo para que as pessoas possam entender como a classe Options nos permite organizar a inicialização dos objetos. Pensemos que desenvolvemos um componente para criar um popup DHTML. Este popup mostraria um texto em uma camada emergente e poderia ser configurado indicando sua altura e largura . Por exemplo, o código para construir um popup como este poderia ser:

var miPopup (link, texto, largura, altura);

Todos esses dados poderiam ser necessários para o construtor. O link (do primeiro parâmetro "link") seria o identificador do link ou elemento que, quando se clica sobre ele, faz com que se abra a janela emergente. O resto de dados texto, largura e altura devem ser indicados para configurar o popup.

Bom, pensemos que dentro de uns dias queremos configurar outras coisas como a cor de fundo do popup, se tem ou não um botão para fechar, se queremos que dentro do popup se mostre uma página diferente por meio de um iframe, quando se quer colocar um titular na janela do popup, etc. Agora o construtor para criar a janela poderia ter esta forma:

var miPopup (link, texto, largura, altura, fundo, fechar, URLIframe, titular);

Isto nos poderia obrigar a mudar todos os construtores que abrem popups com a versão anterior da classe, para incorporar todos os novos parâmetros, ou criar distintas versões do popup, uma simples e outra complexa. Ou então, fazer uma única classe que teria um bom pedaço de código só para fazer a comprovação de se existe ou não esse parâmetro no construtor e dar um valor por padrão a cada um dos dados que não se tenham indicado. Tudo isto é um trabalho que pode chegar a ser enfadonho, além de desnecessário.

Seria muito melhor fazer algo como isto:

var meuPopup (link, opções)

O construtor do popup seria sempre o mesmo, com dois parâmetros, o link que provoca a abertura da camada emergente e umas quantas opções, que poderiam, inclusive, ser omitidas e simplesmente tomar os valores por padrão. O melhor é que implementar essas opções por meio da classe Options é um passo quase imediato que nos poupará ademais grande quantidade de código Javascript.

Uso da classe Options

Ao longo deste manual de Mootools vimos milhares de exemplos que utilizam o mecanismo fornecido pela classe Options, como a classe Fx e suas derivadas. Se recordamos, ao criar um efeito com Mootools, devíamos indicar no construtor do efeito uma série de dados opcionais, como a duração do efeito, os frames por segundo, etc.

meuEfeito = new Fx.Tween("minhacamada", {
property: 'color',
duration: 'slow',
fps: 20
});

Podemos ver que o construtor de Fx.Tween recebe como parâmetros o elemento sobre o que se está criando o efeito e diversas outras opções indicadas entre chaves. Essas opções são indicadas com notação de objetos, indicando o nome de opção e seu valor. Realmente a classe Fx.Tween tem várias opções adicionais que se podem configurar, mas nós só estamos indicando umas quantas. Internamente o que Fx.Tween faz é implementar a classe Options e os dados que recebe são processados por meio de um método definido na classe Options. Nós podemos fazer o mesmo em nossas próprias classes com muito pouco esforço.

Desenvolvimento com a classe Options de Mootools

Agora que já devemos ter compreendido para que nos serve a classe Options e as vantagens que nos oferece à hora de fazer componentes para nossas webs, vamos colocar mãos à obra e começar a explicar seu funcionamento.

Quando programamos qualquer classe, onde pretendamos aproveitar as possibilidades de configuração e personalização dos objetos, temos que implementar a classe Options. Para indicar isto temos que utilizar a palavra Implements e o nome da classe que desejamos implementar, neste caso "Options" (com maiúscula inicial).

Nota: para os que não saibam o que é implementar classes e especificamente o funcionamento de Implements em Mootools, recomendamos a leitura do artigo implementando classes em Mootools.

O código de uma classe que implementa Options poderia ser como este:

var MinhaClasseOpciones = new Class({
   Implements: Options,
   
   //código de nossa clase...
});

A seguir, dentro da classe que estamos programando, temos que indicar as opções por padrão da classe por meio da propriedade "options" (com a inicial em minúscula neste caso). Estas opções por padrão serão indicadas em formato de objeto, com pares chave, valor, podendo definir como valores inclusive funções. Podemos indicar as opções por padrão logo debaixo da linha do Implements: Options.

var MinhaClasseOpcoes = new Class({
   Implements: Options,
   
   options: {
      'opcao1': 'valor de cadeia',
      'outraOpcaoNumerica': 45,
      'outraOpcaoFuncao': function(){
         //código da funcao
      }
   },
   
   //resto do código de nossa classe...
});

Como se pode ver, se indicam tantas opções quanto se deseje, do tipo que necessitemos e os valores que devem tomar por padrão.

No construtor desta classe de exemplo que implementa Options, receberemos como parâmetros tantos dados quantos sejam necessários e ademais uma variável com as opções de personalização que se queiram indicar para cada um dos objetos a instanciar. E ademais, muito importante, colocaremos uma chamada ao método setOptions() do próprio objeto que se está criando, ao qual passaremos as opções de configuração desse objeto recebidas como parâmetro.

initialize: function(camada,opcoes){
   this.setOptions(opcoes);
   //resto do código do construtor
}

O método setOptions() recebe as opções que se enviaram ao construtor e se encarrega de comprovar que valores foram indicados e, se não existe nenhum, marca o valor por padrão indicado na classe.

Poderíamos chamar este construtor com um código como este:

var meuObjetoClasseMinhaClasse = new MinhaClasseOpcoes("camada", {
   'opcao1': 'valor xxxxxx',
   'outraOpcaoFuncao': function(){
      //código da funcao
   }
});

Como vemos, as opções que enviamos para processar com a classe Options, que estamos passando ao construtor no segundo parâmetro, têm vários valores em uma notação de objeto. Das três opções de configuração da classe meuObjetoClasseMinhaClasse, só se estão indicando duas delas, a seguir à omitida se atribuirá o valor por padrão configurado na propriedade options classe.

Em qualquer lugar do código da classe poderemos acessar as opções de configuração do objeto, quer se tenham indicado ao fazer o objeto ou se tenham tomado por padrão. Para isso dispomos da propriedade options, que utilizamos desta maneira:

this.options.outraOpcaoNumerica

Exemplo completo de uso de Options

Para acabar vejamos um exemplo do uso de Options para inicializar atributos em um objeto. É um exemplo simples no qual temos um efeito que se pode personalizar. O efeito faz uma mudança em uma camada por meio da classe Fx.Morph. Nós teremos uma classe que tem definidos valores por padrão para o efeito e que podem ser personalizados por meio de Options.

Nota: Fx.Morph é similar a Fx.Tween, com a diferença de que se podem indicar várias propriedades CSS para fazer um efeito de transição com todas ao mesmo tempo, em lugar de uma só propriedade CSS que Fx.Tween permite.

O código da classe seria o seguinte:

var CamadaEfeitos = new Class({
   ///implemento Options
   Implements: Options,
   
   //defino as options por padrao
   options: {
      fundoTransformar: '#000',
      larguraTransformar: 100,
      textoTransformar: '#fff'
   },

   //construtor que recebe as options para cada objeto que se crie.
   initialize: function(camada,opcoes){
      this.camada = $(camada);
      this.setOptions(opcoes);
      var myFx = new Fx.Morph(this.camada, {duration: 'long'});
      myFx.start({
         'width': [this.camada.getStyle('width'), this.options.larguraTransformar],
         'background-color': [this.camada.getStyle('background-color'), this.options.fundoTransformar],
         'color': [this.camada.getStyle('color'), this.options.textoTransformar]
      });
   }
});

Agora, se desejarmos, podemos acrescentar o código para usar essa classe e gerar efeitos de vários tipos, onde definimos uma ou outra opção.

window.addEvent("domready", function(){
   $("semopcoes").addEvent("click", function(){
      var efeitosSemOpcoes = new CamadaEfeitos("minhacamada");
   });
   $("comopcoes").addEvent("click", function(){
      var efeitosSemOpcoes = new CamadaEfeitos("minhacamada", {
         fundoTransformar: '#0000ff',
         larguraTransformar: 500
      });
   });
   $("outrasopcoes").addEvent("click", function(){
      var efeitosSemOpcoes = new CamadaEfeitos("minhacamada", {
         fondoTransformar: '#0f0',
         larguraTransformar: 350,
         textoTransformar: '#009'
      });
   });
});

Como se pode ver, se instanciam vários objetos da classe CamadaEfeitos, indicando em seu construtor opções diferentes.

Podemos ver o link do exemplo em funcionamento.

Conclusão sobre Options em Mootools

Por experiência própria posso afirmar que a classe Options de Mootools é muito útil para produzir código mais personalizável y que se possa reutilizar com maior facilidade. É recomendável conhecer esta classe desde o começo, porque ajuda a criar código mais limpo e com maior potencial. Uma vez que você a conheça ajuda a pensar "maior" e fazer componentes que serão úteis em um maior número de ocasiões e durante mais tempo.

Outro exemplo que queremos recomendar para aprender a trabalhar com as Options de Mootools se pode encontrar no artigo Campo input com explicação dinâmica. Assim como outros artigos na oficina de Mootools.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato