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

Publicado em Publicado por gserrano

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

Publicado em Publicado por gserrano

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>

Como criar seletores customizados com jQuery

Publicado em Publicado por gserrano

Dia desses estava estudando os seletores do jQuery e nas pesquisas internérdicas encontrei um post bastante interessante sobre seletores customizados do jQuery. Isso significa que eu posso criar uma regra em javascript para praticamente verificar qualquer coisa dos elementos, e utilizar isso como um selector do jQuery.

Exemplo de uso

Tenho um site com diversos links para a wikipedia e gostaria de aplicar uma classe nos links específicos para a wikipedia. Eu posso colocar a classe para cada link criado, mas vamos supor que eu quero automatizar isso (para aplicar a aregra também em links antigos, por exemplo).

A idéia é eu criar um seletor tipo:

$("a:wikipedia").addClass("wikipedia")

Este seletor não existe no jQuery, então vamos ao objetivo do post: criar um seletor customizado. Para extender (não sei se esta seria a palavra correta) e jQuery e criar um seletor customizado o comando á:

$.expr[":"].nomedoseletor = function(obj){
   //Aqui vão as regras
   //return true inclui o elemento no seletor
   //return false
};

 

No meu caso, a regra é simples: quero que o seletor procure links que contenham em alguma parte de sua href o link "wikipedia.org". Para a regra resolvi utilizar expressões regulares (ER), e o nome do meu seletor é wikipedia.

 

Seletor customizado com jquery

Eis o código:

$.expr[":"].wikipedia = function(obj){
   return obj.href.match(/wikipedia.org/);
};

 

E para chamar o seletor:

$("a:wikipedia").addClass("wikipedia")

 

O Chris já alertou que isso não deve ser muito performático, mas tenho que dizer: pode ser bastante útil. Neste exemplo fiz um seletor simples, mas as regras podem ser mais complexas: selecionar links internos, links para áreas específicas do seu site para aplicar ícones nos links, selecionar imagens pelo tamanho, elementos com ou sem atributos específicos…

Ainda sobre a performance, recomendo utilizar seletores específicos preferencialmente dentro de ID´s, poe exemplo: $("#content a:wikipedia") e não "globalizar" os apenas quando necessário não deve causar TANTOS problemas, né?

Não realizei nenhum teste de performance com os seletores customizados, testei apenas o códido de exemplo, funcionou certinho. Hoje a noite quando eu estiver em casa publico o exemplo* no diretório de exemplos do O Desenvolvedor! 🙂

 

Referência: jQuery howto (recomendo a leitura, vários posts interessantes)

 

* resolvi postar mesmo sem o exemplo devido a simplicidade do código 😉

Melhorando o objeto Array do javascript

Publicado em Publicado por gserrano

O Guilherme falou num post passado sobre "javascript mais hard" com o qual ele tem tido que trabalhar mais desde que veio fazer parte da equipe lá na MMCafé… e se tem uma coisa que quem está já mais acostumado com javascript acha ruim é a classe Array. Poucos métodos para muita coisa que se pode fazer, ainda mais quando se compara com essa classe em outras linguagens.

Mas, para isso, há a propriedade (sempre digo isso: não confundam com a biblioteca Prototype) prototype do javascript, que possibilita a manipulação de objetos do javascript em runtime, adicionando métodos, por exemplo.

Não vou me dedicar ao funcionamento dessa propriedade, pois já expliquei aqui, então vamos a alguns métodos adicionados a classe Array que podem ser muito úteis:

Bubble Sorte

Array.prototype.sort=function()
  {
      var tmp;
      for(var i=0;i<this.length;i++)
      {
          for(var j=0;j<this.length;j++)
          {
              if(this[i]<this[j])
              {
                  tmp = this[i];
                  this[i] = this[j];
                  this[j] = tmp;
              }
          }
      }
  };

Clear

Array.prototype.clear=function()
  {
      this.length = 0;
  };

Contains

 

Array.prototype.contains = function (element)
  {
          for (var i = 0; i < this.length; i++)
       {
              if (this[i] == element)
          {
                      return true;
              }
          }
          return false;
  };

Você pode adicionar os métodos que você precisar; tenha certeza que sua produtividade aumentará!

Como descobrir se um número é par ou ímpar no Javascript

Publicado em Publicado por gserrano

Desde que comecei a trabalhar com o Chris aqui na MM Café estou em um contato mais hard com Javascript, linguagem que comecei a me interessar bastante graças ao jQuery e a evolução dos navegadores (com a excessão do IE, obviamente).

Hoje precisei de uma solução para colocar background intercalados em uma lista criada por javascript (com jQuery), a famosa "lista coloridinha" que auxilia na visualização dos dados. Existem seletores avançados de CSS (even e odd) mas nos meus testes aqui eles não funcionaram no Internet Explorer (6, 7 e 8) e também os seletores (2n) ou :first que funcionam no Firefox porém nada acontece em nenhuma das versões do Internet Explorer.

Resolvi então aplicar uma classe de forma intercaladas nas linhas quando o javascript criava a lista. Para fazer eu tinha alguma ções:
 

  1. Ficar setando uma variável para 1 e 0 e fazendo um IF dentro do loop que gera as linhas para conferir se é um ou zero
  2. Conferir se o número é 1, 3, 5, 7 (POG, eu sei…)
  3. Verificar se o contador (o i do loop) é par ou ímpar

 

Optei pela última, pois a variável já existia e eu só precisava de um if else para conferir se o número daquela linha era par ou ímpar.

Alex Kid, o rei do par ou ímpar!

 

Lembra?

 

 

Como verificar se um número é par ou ímpar no Javascript?

A lógica simples é: se o resto da divisão por dois for 0, é par. A lógica complicada é: se a unidade final do número for 0,2,4,6 ou 8 é par.

 

if (i % 2 == 0) {

alert("O número i é par, pois o resto da divisão por dois é igual a zero")

}else{

 alert("Existe resto na divisão por dois, portando o número i é ímpar")

}

 

Simples, a função "n % 2" retorna o valor do resto da divisão por dois! 😀