Webpoint

Tudo começou com o sistema de Uploads do Flickr. Fiquei fascinado como era eficiente, fazia tudo que era necessário no client side e depois enviava de forma incrível. Já vi algo parecido em um dos plugins do Jquery chamado JqUplodad , mas o upload na verdade era com Flash e ainda por cima não suporta múltiplos uploads. Fiquei fascinado com a solução do Flickr . Resolvi então pesquisar, tentei achar dicas no código que eu pudesse saber o que estava acontecendo por trás daquilo tudo. Não, não é Ajax. Como o tamanho do arquivo do cliente aparecia antes mesmo de ser mandado temporariamente para o servidor? O Javascript não permite isto por motivos de segurança. Pesquisei Blogs em inglês e um sujeito chamado Beau Collins teve a mesmo fascínio. Quando cheguei em casa fui olhar mais profundamente esse sistema e quando entrei(é necessário criar uma conta no Flickr e então é só ir em upload fotos e você verá do que estou falando) pediu o plugin do flash instalado. Flash? Como assim Flash? Eu não estou vendo nenhum Flash! Descobri então um arquivo chamado yuploadcomponent.swf. Ele não faz nada é verdade, mas ele trabalha por trás de nossos olhos.

No Flash há uma classe que não conhecia, chamada File Reference. Ela controla o upload de arquivos no flash e permite que você adicione uma barra de progresso e ainda tenha informações do arquivo do cliente como tamanho, que não é possível com Javascript. A janela que abre quando você clica para fazer o upload na classe do Action Script é a mesma do Flickr, mas o link está em uma página HTML. Não é um HTML dentro do Flash, como muitos poderiam pensar. Mas ainda tinha muitas dúvidas, é uma solução complexa e que devo dar os parabéns pelo trabalho da equipe do Flickr.

O que acontece na verdade

Existe uma outra classe no Flash chamada ExternalInterface que permite interagir o flash com o Javascript e HTML. Assim, quando você clica em um link você pode chamar um Action Script, neste caso do Upload, você executa método File Reference. Além disso, flash funciona simplesmente para esta interação, para buscar dados e então as respostas são controladas pela framework YUI Library. Mas ela foi usada por que é própria da Yahoo, poderia ser manipulada por qualquer Framework, inclusive Jquery e Mootools.

A solução da Mootools

Então descobri o Fancy Upload desenvolvido para Mootools. Nunca achei que iria precisar de outra Framework e nem que iria criar uma categoria para ele. Nada contra, pois a princípio foi uma das primeiras que tentei aprender e usar, não me dei muito bem com ela, ficava restrito a pegar coisas prontas. Com o Jquery o aprendizado “fluiu” mais naturalmente, como para muitos, o Mootools é mais tranquilo.

Implementei então o fancy upload para poder aplicar em um projeto na empresa onde trabalho. Eis o exemplo do seu funcionamento.

Sendo assim, encontrei uma solução em outra Framework, tive uma dificuldade pois não tinha familiaridade com ela, mas consegui. O problema veio depois.

Conflito entre Mootools e Jquery

Na implementação deste sistema de Upload fui obrigado a colocar as duas, pois todo o Javascript do site é controlado pelo Jquery. Desta maneira houve um conflito inevitável entre as duas Frameworks. Apesar do Jquery possuir o recurso de noConflict( um belo esforço da equipe em dar a opção aos desenvolvedores usar o que acharem melhor) ainda há um problema com a variável $event, que é usada nas duas bibliotecas.

Então entrei em fóruns no Mootools e descobri uma discussão exatamente sobre isto e que era um assunto bastante discutido nas duas comunidades. O que se pode tirar desta discussão é que os desenvolvedores do Mootools aconselham o uso de somente uma framework, enquanto que o Jquery cria alternativas para as duas ou até várias serem usadas. Geralmente não há necessidade de usar várias frameworks Javascript em um site, mas para toda regra há uma exceção. Nesta discussão não houve uma solução e eu acabei ficando com um problema e um dilema: tirar o Jquery e fazer tudo em Mootools, ou simplesmente chegar para minha chefe e falar “não vai ser possível implementar, desculpe”. Tentei várias coisas, mas nada funcionava.

Resolvendo o conflito entre Jquery e Mootools

A solução é mais simples do que parece e será postada detalhadamente na parte 02 deste post. Não é para atrair sua atenção desenvolvedor, que quer logo soluções sem saber a história do problema ;-). O que aconteceu foi que consegui uma solução e postei no fórum do Mootools. Ela não foi bem aceita na comunidade deles, mas o Rey Bango, um dos desenvolvedores da equipe do Jquery, que estava na discussão fez um artigo no grupo oficial do Jquery sobre a solução que coloquei no forum do mootools. No próximo post colocarei a tradução do artigo que contém a solução.