Primeira experiência com Prototype

 

Eu conhecia a biblioteca de javascript Prototype apenas por documentação e leitura dos posts que o Chris fez por aqui (um passo a passo bem bacana para iniciar o uso da biblioteca), mas até esta semana nunca utilizado ela de verdade.

Comecei a colocar a mão (ui) em um projeto aqui da MMCafé que utiliza a biblioteca, portanto precisei aprender alguma cois, e resolvi documentar minha experiência inicial.

 

Primeiras impressões sobre Prototype

A biblioteca é bacana, mas aparentemente bem mais complexa que jQuery. Segundo o Chris jQuery tem muitas "funções mágicas", o que pode levar ele a ser menos performático. Não sei, não posso opinar, mas admito que tais funções mágicas facilitam a vida em muitos casos! 😀

Ah, essa complexidade pode ser apenas um medo inicial (sair da zona de conforto, né?), então não quero assustar ninguém. Achei a documentação bem boa, mas senti um pouco de falta de alguns exemplos na documentação – nada que uma googleada e alguns blogs não resolvessem.

 

Seletores

Não vou explicar o funcionamento dos seletores, o post é para expor minha opinião apenas. Para quem conhece jQuery, os seletores funcionam de forma parecida com o jQuery , então achei bastante fácil.

 

Elements, observe, objects

Sofri! Demorei bem mais tempo do que eu esperava para fazer algumas coisas simples, como setar ações onclick em elementos de determinada classe.

Nesta curta experiência o que me fez sofrer mesmo foi a forma como o Prototype trabalha com os eventos. Aos leitores desenvolvedores (ou apenas curiosos e entusiastas) tenho um post saindodo forno que explica e exemplifica meu problema e minha solução para setar a ação em uma classe inteira de links.

 

Resumo da obra

Ainda sou mais jQuery pois já estou familiarizado com seus seletores, manipulação de elementos, etc. Também gosto pelo fato da documentação e os diversos blogs com plugins e exemplos de códigos (mas isso não posso comparar pois não procurei blogs específicos sobre Prototype, eles devem existir).

jQuery logo

 

A Prototype não é o bixo de sete cabeças que eu temia, achei a documentação boa, e acredito que a produtividade poder ser equivalente a do jQuery – para quem já conhece o funcionamento da biblioteca e não precisa ficar consultando a documentação a cada 5 minutos, claro.

Continuo achando jQuery mais interessante, mas depois dessa curta experiência estou vendo a Prototype com melhores olhos. 🙂

 

Recomendo a leitura

Aí vai uma seleção de posts sobre Prototype já publicados por aqui, quase todos do Chris:

 

Comparação entre a jQuery e a Prototype

Usando a Prototype – passo 4 – upload de arquivo sem post na tela

Usando a prototype – passo 8 – seletores CSS

Usando a Prototype – passo 3 – arrays e a classe Enumerable

Criar classes em javascript – usando a Prototype

 

 

E você, o que prefere?
Prototype, jQuery ou outra biblioteca? Quais os motivos?

Compartilhe sua opinião nos comentários 😉

Usando o trigger da jQuery

Esse método já me salvou a vida algumas vezes – com ele é possível disparar um evento de um (ou mais) elementos sem que haja a interacão do usuário.

Por exemplo, imagine o seguinte html:

<select id="meu_select">
   <option value="SP">São Paulo</option>
   <option value="RJ">Rio de Janeiro</option>
   <option value="RS">Rio Grande do Sul</option>
</select>

Com a seguinte implementação javascript (usando jQuery):

$("select#meu_select").change(function() {
   //faz alguma coisa aqui, como uma requisição assíncrona por exemplo
});

Simples, não? Sempre que houver uma mudança no select, será chamadop o bloco de código dentro do change()
Agora, e se você quiser a qualquer ponto do fluxo chamar esse change(), ou simular que o usuário fez uma seleção? Por exemplo, quando a página carrega, você já quer chamar esse bloco para que algo aconteça.
Existe um método no jQuery, trigger, com o qual você pode resolver isso. Simples assim:

$("select#meu_select").trigger("change");

Nesse caso, o método change do elemento select#meu_select é disparado, sem precisar de outras interferências.

Para mais detalhessobre o método e outras formas de usá-lo, visite a documentação oficial.

Plugin de jQuery para criar QR Code

Navegando e aprendendo coisas novas, enquanto estudava seletores customizáveis com jQuery encontrei posts interessantes também para a criação de QR Code com jajavasript, e a criação de um "plugin" (se assim se pode chamar, devida a simplicidade) do jQuery para criação do QR Code.

 

O que é QR Code?

Se você já sabe o que é QR Code pule essa parte, é apenas uma explicação simples para entender o conceito:

O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão.

Wikipedia pt

 

O QR Code permite que você fotografe com um celular um código e acesse automaticamente uma URL, por exemplo. O funcionamento é idêntico ao do código de barras, mas até onde sei código de barras é traduzido apenbas em números, enquanto o QR Code permite passar urls completas 😀

 

 

Como gerar QR Code com javascript?

Na verdade não vamos codificar uma URL em imagem QR Code, vamos utilizar geradores prontos e utilizar o javascript como ferramenta para solicitar a geração do QR Code e exibir essa imagem em nosso site ou aplicativo web.

 

 

$(document).ready(function(){

        // Vamos criar um plugin do jquery chamado qrcode

        (function ($) { 

          $.fn.qrcode = function(url,size) { 

                return "http://chart.apis.google.com/chart?cht=qr&chl=" + urk +"&chs=" + size +"x" + size

          }

        })(jQuery);

        $("body").append("<img src=""+$().qrcode("https://andafter.org", "100")+"">");

});

 

 

No exemplo acima utilizamos o google para criar o QR Code e é possível escolher o tamanho da imagem (variável size da função).

Mais serviços que criam QR Codes e podem ser utilizados no plugin:

http://go.bath.ac.uk/qr/download?DATA=https://andafter.org

http://qrcode.kaywa.com/img.php?s=100&d=https://andafter.org

 

 

É isso, espero ter ajudado! 🙂

 

Leia mais

 

Fazer um loop (foreach) no Velocity, com array ou limite numérico

O Chris certa vez publicou aqui um guia inicial de Velocity que ensina os conceitos básicos dessa linguagem para desenvolvimento de templates com objetos Java.

Quando li o post não entendi patavinas, hoje trabalhando com o Chris aqui na MMCafé estou um pouco mais familiarizado com o Velocity, por isso resolvi publicar aqui algumas soluções que estão facilitando minha vida! 😀

Como fazer um loop no velocity com array

Primeiro o básico, listar os itens de um array:

#set ($arr= ["flush", "straight", "full house"])
#foreach($item in $arr)
  Mão no poker: $item
#end

Como fazer um loop no velocity com limite numérico

Agora o que achei que seria mais simples, mas demorei um pouco mais para encontrar em posts e documentações pela interwebs, como fazer um loop de N até 3N por exemplo:

#foreach($i in [3..9])
   <li>$i</li>
#end

 

Pronto, simples assim! Espero ter ajudado quem está começando com o Velocity!

Em tempo, vejam essa programação mágica (POG de primeira) que o Chris publicou lá no blog dele.

Marcar e desmarcar checkboxes de um form por javascript

O Danilo fez ontem um post no blog dele sobre como implementar uma solução com jQuery para fazer aquele famoso "marcar todos" onde um checkbox, ao ser clicado, marca ou desmarca todos os checkboxes d eum certo grupo. Bem bacana!

Ai, resolvi aproveitar o gancho e mostrar como pode ser feito isso sem o uso de qualquer biblioteca javascript – ou seja, na mão. O código, claro, é mais extenso do que se tivesse sido feito com alguma biblioteca, mas acho que vale no mínimo como referência!

Segue, abaixo, a implementação com os devidos comentários!

<html>
<head>
<title>Manipulação de checkboxes</title>
<script type="text/javascript">
    window.onload = function() {
        //listener para click do checkbox que marca/desmarca todos
        document.getElementById("checkAll").onclick = function() {
            var form = document.getElementById("myForm"); //formulário
            //percorre todos os checkboxes e seta se está ou não checado, conforme o valor do check mandatório
            var checks = form.getElementsByTagName("input");
            for(var i=0; i<checks.length; i++) {
                var chk = checks[i];
                if(chk.name == "dados[]")
                    chk.checked = this.checked;
            }
        }   
    }
</script>
</head>
<body>
<h1>Meu form</h1>
<form action="#" id="myForm">
    <fieldset>
    <input type="checkbox" name="dados[]" />check 1<br />
    <input type="checkbox" name="dados[]" />check 2<br />
    <input type="checkbox" name="dados[]" />check 3<br />
    <input type="checkbox" name="dados[]" />check 4<br />
    <input type="checkbox" name="dados[]" />check 5<br />
    </fieldset>
    marcar todos: <input type="checkbox" id="checkAll" />
</form>
</body>
</html>