Usando a prototype – passo 8 – seletores CSS

Publicado em Publicado por gserrano

Muito se fala da facilidade que a jQuery tem em usar a sintaxe de CSS para selecionar elementos do DOM, o que facilita a vida de quem tem forte conhecimento em CSS. Mas poucos sabem que a prototype desde a versão 1.5 (agora está na 1.6.0.3) possui algo semelhante.

Enquanto na jQuery se utiliza o $ para fazer qualquer tipo de seleção (retornando ou um objeto ou uma lista), na prototype se utiliza o $ para selecionar um objeto pelo id dele e a função $$ para selecionar pelas regras do CSS, retornando um objeto Array da prototype (que é um objeto que extende o Array do javascript).

Vamos a um exemplo prático. Tendo o seguinte html:

<div>
   <ul id="main-nav">
      <li>abc</li>
      <li>fgh</li>
   </ul>
   <ul id="nav">
      <li>abc</li>
      <li>fgh</li>
      <li>abc</li>
      <li>fgh</li>
   </ul>
</div>

usando a função $$, você pode tentar retornar os elementos da seguinte forma:

$$("div ul"); //retorna as duas listas
$$("div.container ul"); //não retorna
$$("div ul#main-nav"); //retorna as lista com id main-nav
$$("div ul#main-nav li"); //retorna os itens de lista da lista com id main-nav
$$("div ul#main-nav li:first-child"); //retorna o primeiro item de lista da lista com id main-nav

A versão 1.6 (atual) suporta seletores do CSS3. Veja na documentação oficial quais são eles.

Uma coisa importante é notar que essa implementação é totalmente crossbrowser e que não está ligada a capacidade do browser de interpretar o CSS (ou seja, um browser que não entende seletores do CSS3 consegue pela prototype usar a função $$ igualmente a um browser que interprete o CSS3).

Quer ver esse código funcionando? Veja nesse html.

Comparação entre a jQuery e a Prototype

Publicado em Publicado por gserrano

Uma das discussões mais recorrentes nos blogs que tratam de programação para web, quando se trata de interface (ou front-end, ou resumindo (x)html+css+javascript) é qual biblioteca javascript é melhor.
Muitas vezes as discussões acabam descambando; parece que pessoas levam para o lado pessoal, ao invés de ver a parte técnica da coisa. E quando se fala de jQuery e Prototype, as coisas ficam mais afloradas ainda.

Aqui no O Desenvolvedor, vocês leitores podem perceber que eu tenho uma predileção pela Prototype (e comecei usando-a 3 anos atrás, quando a jQuery era muito menos poderosa do que é hoje) enquanto o Guilherme tem usado mais a jQuery.

E isso é ótimo: a troca de informações e experiências entre os usuários faz bem, pois vamos elevando nossos conhecimentos.

Me enviaram ontem essa apresentação comparando as duas. Sem fanatismo, sem puxar a sardinha para uma ou para outra. Apenas um comparativo, mostrando quais os beneficios de cada uma. Enjoy!

http://static.slideshare.net/swf/player.swf?doc=prototype-jquery-going-from-one-to-the-other-1193346036472971-5&totalSlides=25&startSlide=1&preview=no&useHttp=1

E se quiserem, dêem a sua contribuição falando qual biblioteca javascript voce utiliza. 

Portal Class – crie uma home com widgets como o Netvibes

Publicado em Publicado por gserrano

Se você precisa criar uma página com widgets, onde o usuário pode arrastar e soltar retrancas que estão separadas em colunas, veja essa solução:

http://blog.xilinus.com/2007/8/26/prototype-portal-class

Enquanto a Prototype UI não sai (isso é, se sair algum dia de verdade), o autor dessa classe utilizou a prototype junto com o script.aculo.us (framework para efeitos, feito em cima da prototype) para resolver o problema dele. Aqui você pode ver funcionando:

http://blog.xilinus.com/prototype-portal/test/index.html

O código é muito simples:

  • crie a marcação html com quantas colunas quiser:
    <div id="page">
        <div id="widget_col_0"></div>
        <div id="widget_col_1"></div>
        <div id="widget_col_2"></div>
    </div>
  • crie um CSS para exibir de forma adequada as colunas e os widgets:
    #page {
        margin: 10px auto;
    }
    #widget_col_0 {
        float:left;
        width: 30%; 
    }
    #widget_col_1 {
        width: 50%;
        float:left;
    }  
    #widget_col_2 {
    float:left;
        width: 20%; 
    }
  • instancie um objeto da Portal da classe Xilinus, passando a div que contém as colunas como parâmetro:
    var  portal = new Xilinus.Portal("#page div")
  • adicione widgets ao portal escolhendo a coluna em que aparecerá e definindo se quer ou não inserir título, conteúdo, etc…:
    portal.add(new Xilinus.Widget(), 0)
    // Or with title and content
    portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);
  •  

Altamente recomendavelessa classe; eu fiz uma implementação desse tipo 2 anos atrás, faz as mesmas coisas, e sei qual a dificuldade. E fiz ela muito amarrada ao sistema para o qual criei. Essa indicada é totalmente independente, orientada a objetos. Fácil! E com muitas opções de configuração, livre em termos de layout e com chamada a funções de callback caso você precise efetuar rotinas após mover widgets. Muito bom!

Usando a Prototype – passo 6 – tratando Strings

Publicado em Publicado por gserrano

A biblioteca prototype tem uma classe para manipulação de String (veriricar se está em branco, transformar para caixa alta/baixa, checar se começa com um texto específico, se termina, etc…)

Essa classe é instanciada com o nome String e você pode usar com a seguinte sintaxe:

seu_texto.metodo([parâmetros])

Por exemplo, se você quiser verificar se uma variável está em branco:

var texto = "";
texto.blank(); //retorna true
texto = "a";
texto.blank(); //retorna true

Retirar os espaços em branco antes e depois:

var texto = "    olá mundo!      ";
texto.strip(); //retorna "olá mundo!"

Transformar HTML entities em texto normal:

var texto = "x &gt; 10";
texto.unescapeHTML(); //retorna x > 10

Veja a documentação completa da classe String para ter uma idéia do poder dela. Inclusive, quem está acostumado a programar em Java vai notar muitas semelhanças nesses métodos com os da classe String nativa do Java, o que facilita muito na hora de desevolver.

Validação de formulários com prototype

Publicado em Publicado por gserrano

Um dos grandes pontos positivos que eu vejo na jQuery é a quantidade absurda de plugin desenvolvidos em cima dele: menus, efeitos, requisições ajax, validações…
Sou há tempos um tipo de fanboy adepto da Prototype, mesmo sabendo que devo ser minoria. Então, fui procurar algumas coisas na web a esse respeito. Achei para validação de formulários uma biblioteca bem bacana e simples.

http://tetlaw.id.au/view/javascript/really-easy-field-validation

Para utilizar, você precisa:

incluir as bibliotecas (prototype e a de validação):
<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>

escrever elementos dessa forma (required indica que é um campo a ser validado e validate-number que deve ser validado como um número)
<input class="required validate-number" id="field1" name="field1" />

ativar a validação passando o id do form
<script type="text/javascript">
     new Validation(´form-id´);
</script>

Os campos podem ser validados de diversas formas (apenas letras, apenas dígitos, como uma url, formato de endereço de e-mail, data, etc…)

Existem diversas outras opções, como usar o atributo title do input para setar a mensagem a ser exibida caso a validação do campo retorna false, dizer para a rotina parar a validação no primeiro erro ou validar todos os campos, etc…

Aqui tem um exemplo completo do autor 🙂