O número dessas bibliotecas é incontável, algumas mais simples, outras mais complexas, outras mais famosas, algumas nem tanto. Fiz uma breve pesquisa, e trouxe as mais conhecidas (e algumas nem tanto) para quem ainda não teve a oportunidade de conhecer. Só para lembrar, hoje não vou tratar sobre o uso dessas bibliotecas, isso fica pra uma próxima oportunidade, já que a idéia é um pouco extensa.

ExtJS

A ExtJS é de longe a biblioteca mais conhecida. Provavelmente você já deve ter pelo menos ouvido falar sobre, a menos que você viva na Sibéria. Também acredito que deva ser uma das mais antigas, e por isso uma das mais completas também.

Seu visual é espetacular, mas tem seu preço: ela é muito lenta. Todos os efeitos de transparência, os drag ‘n’ drops, tudo isso exige muito do pobre navegador. Pense bem antes de escolher onde usá-la, faça somente se for necessário, nunca para simples “enfeites”. Lenta, mas uma obra de arte.

E os desenvolvedores AIR não precisam ficar tristes: há até um demo do bichinho em funcionamento. Ainda não tive muito tempo com o AIR, mas acredito que a questão da velocidade não seja tão crítica quanto em um navegador, quem puder falar sobre, agradeço.

Yahoo User Interface

A Yahoo User Interface, ou YUI, deve ser a primeira user interface a se popularizar. Foi a base do nascimento da ExtJS. Tem lá seus defeitos, como o prefixo YUI para todos os métodos, mas tem um poder imenso. Me parece ser bem mais leve que a Ext, e usa gráficos bem mais simples também.

A documentação é um dos pontos fortes. Mantida pela comunidade de desenvolvedores do Yahoo, você nunca estará sozinho. Apesar disso, achei o site um pouco confuso para encontrar alguma coisa, principalmente os demos. Mas o material está lá, e há muito…

MochaUI

Ainda beta, a MochaUI seria a minha preferida. Adivinhem por quê? Sim, baseada na Mootools… A demonstração realmente me deixou impressionado, talvez tenha sido o relógio.

Aparenta ser bem leve, tanto que na demonstração você pode modificar propriedades das janelas sem travar o navegador. Usa gráficos simples, mas não menos atraentes. De longe, seria a primeira que eu escolheria para trabalhar (sim, opinião extremamente parcial). Mal posso esperar pela versão 1.0!

Dijit

Falando em Dojo, nem é preciso dizer muito. O framework mais abrangente que conheço também conta com sua interface de usuário, o Dijit. Não consegui encontrar demonstrações no site, mas as imagens mostram algo realmente promissor.

Lendo a descrição do projeto, você verá que o Dijit não é apenas uma simples interface de usuário. É extremamente customizável, extensível, acessível e localizável. O que isso significa? Bem, dê asas à imaginação, o céu é o limite…

jQuery UI

O jQuery UI, bem jovem ainda, também é espetacular. Baseado na brilhante jQuery, tem tudo para deixar qualquer um de boca aberta. A demonstração de efeitos, por exemplo, me impressionou muito. A própria tela de demonstrações é uma obra de arte.

Apesar de baseada no jQuery, achei a biblioteca ligeiramente lenta. Talvez tenha sido impressão, mas não esperava isso de jQuery. Entretanto, pela sua idade, é muito madura, muito poderosa. Se jQuery não havia me chamado atenção ainda…

Prototype UI

Até então desconhecido pra mim, o release candidate Prototype UI não conseguiu me chamar a atenção. Não por ser baseado em Prototype e Scriptaculous (o que já considero um ponto contra), nem por usar um tema do Mac, mas por parecer muito prematura. Os demos apresentados são bonitinhos, mas um tanto “crus”. Prefiro não dar minha opinião, vai que o negócio vire um Ext-killer?

SproutCore

O SproutCore, iniciativa da Apple, tem uma proposta um tanto “utópica”, pelo que entendi é trazer o Cocoa para a web. As demonstrações são interessantes, mas o pobre navegador sofreu as conseqüências. Esse negócio consegue ser mais pesado que a própria Ext! Além disso, vi mais opiniões negativas do que positivas…

UIZE

O UIZE (pronuncia-se “you eyes”) é outro que nunca havia sido apresentado a mim. Concordo com o pessoal do Ajaxian: são os efeitos mais legais que já vi. Apesar disso, a biblioteca ainda necessita muito mais trabalho, já que tem poucos recursos (poucos, mas legais).

Não tive a oportunidade de trabalhar por algum tempo com nenhuma dessas bibliotecas, e nem falar muito sobre as quais tenho mais experiência. Somente uma breve opinião sobre cada uma. Caso tenha esquecido de alguma, por favor, cite-a nos comentários, terei prazer em falar um pouquinho. Só uma precaução: cuidado onde você irá usar tudo isso… Existem aplicações e aplicações. Até mais!

Posts Relacionados

• Mootools vs. jQuery
• Estendendo o JavaScript
• Histórico para Navegação via JavaScript
• Estatísticas para Navegação via JavaScript
• jQuery – Segundas Impressões

Antes de tudo, nem pensem os usuários de Mootools que sou um traidor, um subversor, nem os usuários de jQuery achem que sou um “fiel convertido” e abandonarei a Mootools para todo o sempre. Ambos dois lados de acordo e em paz, vamos à comparação.

Propósito

A primeira coisa que me fez dar uma segunda chance ao jQuery foi minha maturidade adquirida de uns tempos pra cá. Pude perceber que jQuery e Mootools têm propósitos diferentes. Pode-se usá-las para a mesma coisa, mas mais código terá que ser escrito.

A Mootools é uma biblioteca bem mais complexa e mais completa. Seu escopo é bem maior, e permite muito mais coisas. Algumas dessas coisas são a criação de classes, vários métodos para os tipos nativos da linguagem (funções para Strings, Números, Arrays), JSON, cookies, e tudo o mais que você puder imaginar através de plugins. É bem mais voltada a “programação de verdade”, ou seja, trabalhar mais com a linguagem e processamento do que seu resultado no documento.

A jQuery tem um escopo muito mais fechado: DOM. Criação e edição de objetos, seletores muito poderosos e simples, baseados em CSS e XPath e manipulação de eventos. Tudo isso integrado dentro de uma mesma função. Indo um pouco mais além, a biblioteca também inclui a criação de efeitos básicos e requisições Ajax. Ainda dentro do cifrão bombado.

DOM

Tanto Mootools quanto jQuery lutam nesse campo: DOM. Ambas também possuem a mesma função $, que vem me confundindo muito quando trabalho com uma ou outra biblioteca. Na Mootools, somente IDs. no jQuery, qualquer seletor CSS3 ou XPath. Não que a Mootools não tenha todos os seletores que jQuery, mas em uma função diferente: $$. Particularmente gostei separação, mas a versatilidade da jQuery absolutamente não me incomoda. Nessa parte, pra mim é um empate.

Ainda não tive a oportunidade de inspecionar o código da jQuery, mas posso dizer que o John Resig é um gênio: além de recuperar elementos do documento, o $ ainda os cria. E não através da criação manual de elementos e nós de texto. Você digita o HTML, e a função os cria sozinha. Adeus innerHTML… Na Mootools? Bem, acho melhor pular essa parte, vocês já devem ter percebido… jQuery na cabeça.

Quanto às outras funções, como definição e recuperação de atributos, ambas bibliotecas não deixam a desejar. A jQuery, entretanto, tem o diferencial de usar a mesma função para definição de uma ou várias propriedades, além de recuperá-las. Na Mootools, temos o get e set. Pra mim não faz diferença alguma em termos de desenvolvimento, ambas são intuitivas. Empate novamente.

No final das contas, jQuery é excepcional em tarefas de DOM, e supera, e muito, a Mootools, até por ser seu “habitat natural”.

Ajax

Ajax é outra frente de batalha em que as duas bibliotecas se enfrentam. jQuery conta com métodos extremamente simples para a tarefa, muito bons para requisições simples em aplicações pouco exigentes em relação a requisições assíncronas. Já a Mootools conta com uma classe bem mais trabalhada, mais extensa e mais flexível, principalmente para eventos.

Mesmo trabalhando com, as duas bibliotecas não o fazem para o mesmo propósito na minha opinião. A jQuery me parece melhor para requisições simples: enviar a requisição e fazer alguma coisa com a resposta. Já a Mootools trabalha com os aspectos mais “sórdidos”, como as mudanças de estado, headers, enfim. Até prefiro não falar muito sobre jQuery aqui pois não tive muito tempo com Ajax, posso ainda não ter visto algumas funcionalidades.

Efeitos

Existe algo que deixe uma aplicação mais interessante do que coisas se mexendo? Eu acho que não, mas esse não é o caso. Na jQuery, temos poucos efeitos built-in, mas me parece ser bem extensível. Já a Mootools tem uma gama enorme de transições, e podemos escolher qualquer propriedade do CSS para animar, e o melhor: ainda contamos com uma maneira muito fácil de criar novas transições. Mas a Mootools, principalmente nessa nova versão, peca em manter esses efeitos fáceis de aplicar. No jQuery, só um fadeIn ou fadeOut e presto, temos um efeito. No entanto, por mais chato que seja, ainda fico com a Mootools…

Plugins

Quando só a biblioteca sozinha não dá conta, hora de chamar os plugins. Ambas bibliotecas são extremamente extensíveis, cada uma a sua maneira. Na Mootools através da extensão das classes, no jQuery através de um “mecanismo” muito interessante, que “gruda” suas funções na função jQuery.

Mesmo sendo um fã da programação orientada a objetos e da maneira como a Mootools o usa, gostei muito mais da maneira como o jQuery faz a inclusão de plugins. Eles realmente passam a fazer parte da biblioteca. Vitória do jQuery, embora no final das contas não faça diferença alguma…

Facilidade de Uso

Nenhuma das bibliotecas tem um uso complicado. Além disso, ambas tem um foco diferente.

Talvez você já tenha notado, mas a maioria dos designers e programadores JavaScript menos experientes preferem jQuery. Não é à toa, ela é extremamente simples de ser usada. Nunca ouviu dizer que jQuery é para designers? Isso também não significa que usuários mais experientes ou experts na linguagem não irão gostar ou conseguir trabalhar.

Já a Mootools, como diz o próprio site, é direcionada a usuários intermediários ou avançados. À primeira vista ela é realmente mais complicada, sem dúvida. Talvez por isso não chame tanto a atenção quanto jQuery.

E o vencedor é…

Como disse logo no início do texto, jQuery e Mootools são bibliotecas diferentes, servindo para propósitos diferentes. Não é possível compará-las em sua totalidade, por isso não falei sobre muitos recursos que a Mootools oferece e jQuery não tem (built-in, é claro). jQuery é para DOM, Mootools é para facilitar sua programação. Já imaginou ambas bibliotecas juntas? Enfim, tenha bom senso e saiba utilizar as bibliotecas onde elas se dão bem, e não seja cabeça-dura como eu era tentando usar a Mootools em qualquer situação…

Posts Relacionados

• jQuery – Segundas Impressões
• Lançada a Mootools 1.2
• Ajax com a Mootools
• Mootools – Eventos
• Mootools – Chain

Como acabei precisando de um scroller assim, aproveitei e criei uma classe que poderei reutilizar em algum outro projeto em que ela se faça necessária. Já que gostei do resultado, vou aproveitar e deixar o script pra vocês. O resultado será algo parecido com esse exemplo. Prontos? Então vamos lá!

O Código

O script não poderia ser mais simples, em torno de umas 50 linhas de código (você precisaria de centenas se não fosse a Mootools, ou alguma outra biblioteca que faça o serviço sujo). Você pode fazer o download dele aqui. Para “instalá-lo”, basta incluí-lo em seu documento, assim como a Mootools. Além disso, você também vai precisar do plugin Fx.Scroll, que pode ser conseguido no More Builder da Mootools, e incluí-lo no seu documento também.

Update: logo que precisei usar a classe novamente, vi que cometi um erro grotesco. Código atualizado, com erro corrigido e uma nova funcionalidade, explicada logo abaixo. Valendo uma mariola pra quem descobrir minha estupidez, os dois códigos estão disponíveis para download.

O HTML

O HTML necessário é a parte que eu considero a mais complicada, chata e sem graça. Sem o HTML criado direitinho, o scroller não vai funcionar. A lógica é a seguinte: precisamos de um container (geralmente uma div) de uma largura (ou altura) fixa. Esse container é quem vai esconder os itens que não serão mostrados no scroller. Dentro desse container, vamos precisar de mais um container (geralmente mais uma div, ou então uma lista), também de altura/largura fixa, mas que seja igual a toda a extensão dos itens. Ou seja, o container de dentro será maior do que o container de fora.

<div id="container">
    <div></div>
</div>

Acredite, é mais complicado do que parece. Agora sim, podemos colocar nossos itens dentro do container que está dentro de outro container (hein?). Fora isso, precisamos apenas de mais dois elementos (podem ser links) para serem os handlers de anterior e próximo e pronto, aí está o HTML. Só precisamos do CSS que vai ajudar na mágica do script.

O CSS

Como o nosso container externo precisa esconder o que há no container interno (que é maior), ele precisará de um overflow: hidden. Sem isso, tudo o que há no container interno ficará exposto, e aí o scroller perde a graça. Também não podemos nos esquecer de definir as alturas/larguras dos containers e itens. Vamos fazer primeiro um scroller vertical, ligeiramente mais fácil:

* {
  margin: 0;
  padding: 0;
}
#container {
  height: 20px;
  overflow: hidden;
  width: 100px;
}
#container div {
  /* Não é necessário definir a altura, o elemento irá "crescer" sozinho */
  width: 100px;
}
#container p {
  /* A mesma altura de #container, mas isso pode variar com o gosto do freguês */
  height: 20px;
}

O Script

Agora sim, vamos colocar a mão na massa. Minha classe, quando instanciada, leva apenas dois parâmetros: o container exterior (o container interior é deduzível…) e as opções. Dentre elas, temos à disposição todas as opções da classe Fx, e também previousButton e nextButton, que são os handlers para o elemento anterior e posterior do scroller.

var myScroller = new Fx.Scroller("container", { previousButton: "previous", nextButton: "next" })

Aproveitando a atualização da classe, também criei vergonha na cara e adicionei os eventos onNext e onPrevious, executados quando o scroller vai para frente ou para trás, respectivamente.

Pronto! Você escreveu apenas uma linha de script e seu scroller já está funcional, passando de um elemento para outro com apenas um clique!

Scrollers Horizontais

A termos de script, um scroller horizontal é idêntico. A mágica se esconde toda no CSS para este caso. Primeiro precisamos colocar os elementos um ao lado do outro dentro do container interior, certo? Certo. Para isso, usamos a propriedade float, sinta-se à vontade para escolher a qual lado flutuar.

Passando ao segundo passo, devemos definir a largura. A fórmula é a seguinte: número de elementos vezes a largura de qualquer um deles. Se você usar margins ou paddings, não esqueça de levá-los em consideração também.

Usando a técnica de scrollers horizontais, também podemos criar scrollers “mistos”. Nesse caso, há várias linhas e várias colunas de itens ao mesmo tempo. O efeito, se bem usado, pode ficar muito interessante. Quem teve a oportunidade de observar os demos da versão 1.1 da Mootools deve saber do que estou falando.

Dicas para Ir Além

Bem, só fazer itens se mexerem pode não ter tanta graça assim pra você. Como eu disse, minha classe usa todas as opções da classe Fx, ou seja, eventos, transições, offsets, enfim. Agora é sua vez de brincar! Use o offset para mudar a posição dos itens, eventos para mudar sua opacidade, criatividade! Também sinta-se livre para usar os métodos da classe também: next, previous, scrollTo, enable e disable (para ativar ou desativar os botões).

Espero que isso sirva pra alguma coisa! E também espero postar em um intervalo um pouco menor… O pessoal deve ter pensado que eu fugi do país depois de uma certa polêmica. Mas não, só estive ocupado mesmo… Até mais!

Posts Relacionados

• Mootools – Chain
• Mootools – Eventos
• Mootools – Options
• Sliders com Mootools
• Mootools – Menu Sanfona

Dentre as novidades, podemos citar o Swiff (plugin para integração com Flash), Element Storage, entre várias outras, como foi anunciado na versão beta (que eu não testei, diga-se de passagem).

Pelo visto, mais coisas interessantes para descobrir nessa biblioteca que eu acho simplesmente incrível, e agora facilitando nossas vidas como nunca! Vai lá, faça o download, teste, e garanto que você vai gostar!

Posts Relacionados

• Scroller Made in Mootools
• Ajax com a Mootools
• Mootools vs. jQuery
• Mootools – Classes
• Mootools – Options

O Slider

Antes de começarmos a brincar com os controles de rolagem postos em nossas páginas, devemos antes criar a estrutura do HTML. Precisamos de dois elementos: um slider (o container) e um knob (o controle). Vamos usar duas divs aninhadas:

<div id="slider">
  <div id="knob"></div>
</div>

Logicamente, também devemos estilizar esses elementos, para que eles se pareçam, mesmo que remotamente, com um slider. Eu optei pela configuração mais simples possível:

#slider{
  background: #000;
  width: 200px;
}
#knob {
  background: #f00;
  width: 20px;
}

Pronto! Ele já está lá, não se movendo de jeito algum, mas está lá.

Movendo o Controle

Para que possamos mover o dito cujo, vamos instanciar a classe Slider, que faz todo o trabalho sujo para nós. Essa classe recebe três parâmetros: o container, o controle e as opções para o slider. Como queremos um simples slider comum e sem graça (por enquanto), vamos omitir o terceiro parâmetro.

var slider = new Slider("slider", "knob")

Difícil, não? Já temos um slider funcional! Aliás, quase funcional, ele não faz mais nada além de se mover. De que adianta um slider que só se move, e não retorna sua posição? Calma, chegaremos lá.

Adicionando Funcionalidade

Através da opção onChange, podemos fazer algo com a posição do slider. Pode-se atualizar um campo com a posição atual, mudar o tamanho/posição de alguma coisa na tela, enfim, não sou muito criativo, você pode ir bem mais longe que isso.

Para essa opção, devemos passar uma função que receberá como parâmetro a posição atual do slider. A partir disso, podemos fazer qualquer coisa com ele. Veja:

var slider = new Slider("slider", "knob", {
  "onChange": function(pos) {
    $("div-qualquer").setHTML("Posição do Slider: " + pos)
  }
})

É lógico que esse é o uso mais simplório possível. Fiz algo nem tão sem graça assim, veja nos exemplos. Aumenta fonte, diminui fonte… Dá pra fazer mais que isso sim, e muito.

Outras Opções

A Mootools também nos deixa mais algumas opções para incrementarmos nosso slider. São elas:

• steps: Indica o número de “steps” que o slider terá. Por padrão é setado como 100.
• mode: “vertical” ou “horizontal”. Define o modo do slider.
• offset: Recuo do controle em relação ao container.
• onComplete: função a ser executada quando o controle for soltado. Não recebe parâmetros, então é necessário usar o método getPos caso seja necessário utilizar a posição.

Ficou feio?

Aqui apliquei somente o estilo básico para o slider funcionar. Você pode se divertir com CSS, e torná-lo muito mais atraente. Nos exemplos mostrei meus estupendos talentos em design e criei algo mais interessante aos olhos do usuário.

Vou ficando por aqui, até mais!

Posts Relacionados

• Mootools – Options
• Ajax com a Mootools
• Scroller Made in Mootools
• Mootools – Menu Sanfona
• Mootools – Chain

Já havia tempo que eu queria escrever esse script, mas a coragem faltava, até que ele me foi necessário. Como uso Mootools, não faria sentido usar funções autônomas, desperdiçando código. Então tomei coragem e fiz. Pronto, nem doeu…

O Código

Meu objetivo, nesse post, não é explicar a lógica por trás do script (farei isso em breve), mas sim deixar o código pronto, e explicar seu uso.

Antes de tudo, você precisará da Mootools com os módulos necessários, o que suponho que você já possua. Depois, faça o download do Async Upload. Agora, basta incluir os dois scripts em sua página.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="asyncUpload.js"></script>

Utilização

Como não podia deixar de ser, o script funciona na submissão de um formulário. Ele a intercepta e a envia para um iframe escondido. Pra que tudo isso funcione, temos que definir isso no onSubmit de nosso formulário:

$(window).addEvent("load", function() { // quando terminar de carregar...
  $("seu-formulario").addEvent("submit", function() { // e o nosso formulário for enviado...
    this.upload() // fazemos nosso upload, parecido (mas não é) com Ajax
  })
}

E cadê a URL?

Como a Mootools nos dá muitas opções para trabalhar com DOM, não precisamos definir a URL no script. Essa URL vai ser retirada do próprio formulário, no action:

<form action="http://sua-url-para-envio/upload.php" id="seu-formulario">
  <input type="file" name="fileToUpload" id="fileToUpload" />
</form>

Elemento de Retorno

Muito melhor do que elementos de retorno, podemos definir uma função para tratar o retorno do upload. Para isso, passamos um parâmetro para a função:

$(window).addEvent("load", function() {
  $("seu-formulario").addEvent("submit", function() {
    this.upload({
      "onComplete": function(response) {
        $("elemento_de_retorno").setHTML(response)
      }
    })
  })
}

Com o código acima, o resultado da requisição iria para uma div (ou algum outro elemento) de id “elemento_de_retorno”. É claro, pode-se fazer muito mais, mas fica a seu cargo decidir…

Recebendo o Arquivo

Apesar de assíncrono (ou Ajax disfarçado), esse upload funciona como um upload comum. No PHP, por exemplo, podemos receber o arquivo assim:

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "nome_do_arquivo.txt");

Exemplo e Download

Caso queira dar uma olhada, deixei um exemplo na página de downloads. Faça upload de um arquivo qualquer e veja o funcionamento! Caso deseje saber a lógica por trás de tudo isso, aguarde os próximos posts. Até mais!

Posts Relacionados

• Ajax com a Mootools
• Mootools – Eventos
• Mootools – Chain
• Mootools – Classes
• Mootools – Menu Sanfona

O HTML

Antes de começar com o comportamento, primeiro vamos criar o conteúdo do menu. Uma lista simples, com outras listas aninhadas, as quais
ficarão escondidas até que seus títulos sejam clicados.

<ul>
        <li><h3>Título 1</h3>
                <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
        <li><h3>Título 2</h3>
                <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
</ul>

Nada em especial até agora, mas temos que incluir mais alguns atributos aí. Para que a Mootools possa identificar quais itens serão clicáveis e quais deverão ficar “escondidos”, precisamos identificá-los com classes. Não há restrição para alguma classe específica, mas costumo usar toggler para os clicáveis e element para os itens escondidos.

<ul>
        <li><h3 class="toggler">Título 1</h3>
                <ul class="element">
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
        <li><h3 class="toggler">Título 2</h3>
                <ul class="element">
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                </ul>
        </li>
</ul>

O Script

Agora sim, a parte difícil, ou nem tanto assim. Como tudo na Mootools é baseado em classes, o menu sanfona não foge à regra. A classe Accordion é a responsável por todo o menu, desde identificar seus elementos até mostrar/esconder o conteúdo.

window.addEvent('domready', function() {
	var accordion = new Accordion('h3.toggler', 'ul.element')
})

Como parâmetros, passamos os títulos clicáveis e o conteúdo de cada item, somente isso. A biblioteca cuida do resto. Difícil, não?

Algumas Opções

Podemos ir um pouco além do básico, e adicionar alguma personalização em nosso menu. Para isso, a classe nos dá algumas opções. Basta passar um objeto como terceiro parâmetro. As opções possíveis são:

• show: índice do elemento a ser mostrado inicialmente
• display: índice do elemento a ser mostrado inicialmente. Diferentemente de show, esse elemento será mostrado com uma transição
• fixedHeight: altura fixa dos itens, padrão false
• fixedWidth: largura fixa dos itens, padrão false
• height: inclui transição de altura, padrão true
• opacity: inclui transição de opacidade, padrão true
• width: inclui transição de largura, padrão false
• alwaysHide: permite esconder todos elementos, em vez de manter ao menos um sendo mostrado, padrão false

Além das opções, temos também dois eventos:

• onActive: executado quando algum item se tornar ativo
• onBackground: executado quando algum item for escondido

Finalizando

Agora vamos modificar um pouco nosso menu, utilizando as opções e eventos vistos acima.

window.addEvent('domready', function() {
	var accordion = new Accordion('h3.toggler', 'ul.element', {
		"opacity": false,
		"onActive": function(toggler) {
			toggler.setStyle("color", "#f00");
			toggler.setStyle("font-weight", "bold");
		},
		"onBackground": function(toggler) {
			toggler.setStyle("color", "#000");
			toggler.setStyle("font-weight", "normal");
		}
	})
})

Pronto! Veja o exemplo finalizado. E mais: retirando todas as transições, você tem um menu sanfona totalmente customizável. O poder e a facilidade da Mootools. Incrível, muito bem pensado, por isso adoro essa biblioteca. Até mais!

Posts Relacionados

• Mootools – Options
• Lançada a Mootools 1.2
• Ajax com a Mootools
• Sliders com Mootools
• Scroller Made in Mootools

Executar funções em determinada ordem, como filas de requisições, através de uma classe. Resumindo, é isso o que faz a classe Chain, da Mootools, e nesse post veremos como funciona e também como implementar essa funcionalidade em suas próprias classes.

Seqüenciando Funções

Para criar uma seqüência de funções, basta instanciar a classe Chain. Após isso, já podemos adicionar funções à seqüência para podermos chamá-la quando necessário.

Adicionamos funções à uma seqüência através do método Chain.chain, passando como parâmetro a função a ser adicionada à seqüência.

var myChain = new Chain();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});

O método Chain.callChain é quem chama a próxima função da seqüência. Quando o método é executado, a função é executada e então removida da seqüência.

myChain.callChain(); // "Primeira Função"
myChain.callChain(); // "Segunda Função"

Caso necessário, podemos limpar todas as funções de nossa seqüência através do método Chain.clearChain.

Implementando em Classes

Obviamente, Chain é muito mais útil quando usado dentro de uma função. Classes não deixam de ser uma função, e possuem muito mais poder. É nelas onde a utilização de Chain acontece na própria Mootools.

Após a implementação de Chain em alguma classe, podemos utilizar seus métodos.

var myClass = new Class({
	"initialize": function() {},
	"execute": function() {
		this.callChain();
		if(this.chains.length > 0) this.execute();
	}
});
myClass.implement(new Chain);
var myChain = new myClass();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});
myChain.execute();

Como no exemplo acima, também podemos utilizar a variável Chain.chains, que é o array que contém todas as funções na seqüência. Não é necessário se preocupar muito com ele, já que a classe faz todo o necessário. O utilizei acima somente para não criar um loop infinito.

Essa classe também já é implementada na utilização de efeitos, para encadear vários efeitos subseqüentes. Também muito útil para se criar uma fila de requisições Ajax, ou algo do gênero. Vou ficando por aqui, até!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Options
• Ajax com a Mootools
• Funções em Diferentes Escopos

O que faz?

A classe Options define as opções passadas pelo usuário para alguma classe. Essa definição é feita sobrescrevendo os valores padrão (caso esses sejam definidos pelo usuário) e os mantendo quando nenhuma opção correspondente é passada.

Lógico, nada muito espetacular. Isso poderia ser feito através da função $merge, da própria Mootools. Mas há mais que isso. Além de definir opções, a classe Options também vasculha-as em busca de opções que comecem com “on”, e automaticamente adicionam-as como um evento, caso a classe Events esteja implementada. É mais que apenas um $merge disfarçado…

Implementando

Mais uma vez, antes de podermos utilizar essa classe extra, devemos implementá-la em nossa classe. Novamente, utilizamos o método Class.implement.

Caso você queira utilizar o suporte a eventos, também implemente a classe Events, na mesma declaração.

myClass.implement(new Options, new Events);

Definindo Opções

Antes de tudo, é necessário definir as opções que serão utilizadas por padrão. Essas opções padrão devem estar em this.options, sendo this a nossa classe.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function() {}
});

Para fazer a “escolha” das opções, basta utilizar o método Options.setOptions, levando como parâmetro as opções que devem sobrescrever as opções padrão. Após a chamada ao método, todas as opções estarão disponíveis em this.options. Se o usuário definir opções que não estão definidas como padrão, elas também serão adicionadas.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function(options) {
		this.setOptions(options);
	}
});
var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true
});
mySlideShow.options["startSlide"]; // 0
mySlideShow.options["wrap"]; // true, também foi adicionada

Definindo Eventos

Não há diferença quanto a adicionar opções comuns ou eventos, os dois são adicionados da mesma maneira.

var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true,
	"onStart": function() {}
});

No caso de eventos, não é necessário definir uma opção padrão, já que os eventos são chamados apenas se estiverem definidos, não causando erros. Caso você considere necessário, pode-se usar Class.empty como padrão. Class.empty é apenas uma função vazia, apenas para não precisarmos nos preocupar em definir algo a ser executado.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0,
		"onStart": Class.empty
	},
	"initialize": function(options) {
		this.setOptions(options);
		this.fireEvent("onStart", this.options.startSlide, 10);
	}
});

Assim como as outras classes, a própria biblioteca faz grande uso de Options. É o espírito da reutilização, tanto na própria biblioteca quanto para os desenvolvedores. Até a próxima!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Chain
• Ajax com a Mootools
• Mootools – Menu Sanfona

A classe Events permite que você defina eventos para suas próprias classes. Esses eventos podem ser chamados a qualquer momento, e também podem ser criados quantos eventos forem necessários.

Um evento pode receber qualquer nome, mas considera-se uma boa prática criar eventos que comecem com “on”, como “onClick”, “onStart”, “onEnd”… O “on” é requerido apenas se você desejar utilizar eventos juntamente com a classe Options (pretendo escrever sobre ela também).

Implementando

Para podermos utilizar a classe Events, primeiro é necessário implementá-la na classe em que se deseja utilizá-la. Isso é feito através do método Class.implement. Veja:

var SlideShow = new Class({
	"initialize": function() {}
});
SlideShow.implement(new Events);

Chamando Eventos

Após a implementação, ainda temos que fazer as chamadas aos eventos. Para isso, utilizamos o método Events.fireEvent, que agora pode ser chamado do escopo da classe, ou seja, this.fireEvent. Esse método recebe os seguintes parâmetros:

• type: O tipo do evento (“onClick”, “onDrag” ou qualquer outro)
• args: Argumentos a serem passados à função. Pode ser apenas um argumento ou um array contendo vários.
• delay: Tempo, em milissegundos, que o evento deve esperar para ser disparado.

var SlideShow = new Class({
	"initialize": function() {
		this.fireEvent("onStart", null, 10);
	},
	"nextSlide": function() {
		this.currentSlide += 1;
		this.fireEvent("onChangeSlide", this.currentSlide, 10);
	}
});

Definindo Eventos

Para definir funções a serem executadas em determinado evento, utilizamos o método Events.addEvent. O método recebe como parâmetros o tipo do evento e a função que deve ser executada.

var mySlideShow = new SlideShow();
mySlideShow.addEvent("onStart", showSplashScreen);

Note que os eventos podem ser adicionados tanto na definição da classe quanto em uma de suas instâncias, como fizemos acima.

Eventos podem ter muita utilidade, e a própria biblioteca também faz bastante uso deles, como acontece nas classes Ajax e Fx. Basta ter criatividade. Até a próxima!

Posts Relacionados

• Mootools – Options
• Mootools – Chain
• Mootools – Classes
• Ajax com a Mootools
• Scroller Made in Mootools