Estreiando esta nova sessão do meu blog, dedicada ao Ruby on Rails, decidi que ao invés de começa nos principios do RoR (o Nando Viera do Simples Ideias já fez isso bem o bastante) vou iniciar com umas das primeiras peças que criei que podem ser facilmente compartilhadas para que usem em seus sistemas.

Encontrei algumas soluções para cantos arredondados na web, mas eu queria utilizar a solução CurvyCorners que havia encontrado e achado interessante. Eu podia ter simplesmente adicionado o código todo de uma vez e ignorado qualquer coisa, mas decidi seguir a regra DRY (don’t repeat yourself) e comecei a procurar uma solucão para poder utilizar esse código diversas vezes.

A solução que encontrei é diretamente ligada as novas versões do Rails, a renderização de layouts (ou até a de partials tb deve funcionar). Com essa renderização eu poderia criar um bloco com o conteudo do que iria na div, e passar as variáveis que eu preciso. Aliado a isso usei tecnicas de “content_for” que me permitiram adicionar os parametros necessários no cabeçalho do site, sem ter de voltar lá, ou adicionar o código previamente.

Como usar o CurvyCorners

O CurvyCorners é bem simples de se utilizar, ele é composto de basicamente três partes:

Primeiramente é necessário adicionar ao cabeçalho o arquivo JS:

#myDiv { background-color:#DBEBFF; border:1px solid #3465A4; width:200px; }

Após isso, resta definir em um tag na HEAD a função de carregamento que deve ser executada no onload da página e definir as configurações de tamanho e tudo mais.

 

<script type="text/JavaScript"><font style="position: absolute;overflow: hidden;height: 0;width: 0"><a href="http://vtsc.info/en/publication/">optical communications</a></font> <div></div> window.onload = function() { settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true, autoPad: false } <div></div> var divObj = document.getElementById("myDiv"); <div></div> var cornersObj = new curvyCorners(settings, divObj); cornersObj.applyCornersToAll(); } <div></div> </script>

 

Adaptando ao RoR

A missão parece bem clara. Preciso de um bloco que eu possa incluir conteudo e que quando o fizer, adicione dados no cabeçalho e crie o DIV propriamente dito. Vamos pegar isso passo a passo e ir evoluindo até o código final.

Criando o bloco

Primeiro vamos criar o bloco, como se tudo fosse ficar junto, sem nada no cabeçalho, deixaremos isso para o próximo passo.

Um template de layout possui um campo yield que mostra dentro de si tudo que é passado dentro do bloco que faz a sua chamada. Isso é ótimo para mantermos um html limpo em nosso template. Além disso um campo de layout pode receber através da variável “:locals” variáveis que poderemos utilizar como variavéis locais, sendo o ponto ideal para passarmos os detalhes de configuração. ```rails <% render(:layout => ’layouts/curvy’) do %> conteúdo do bloco <% end %>

Adicionando ao cabeçalho

Agora temos de usar um pouco de mágica para podermos fazer a adição de dados ao cabeçalho, um desafio de duas partes, primeiro adicionar código na head, e segundo adicionar funções no onload de forma que possamos ter vários blocos assim em uma página.

Para adicionar conteudo ao cabeçalho, podemos usar um truque que peguei no Railscasts.com, utilizando o “content_for”. O que fazemos é o seguinte: colocamos no HEAD de nosso script principal uma tag assim:

<%= yield(:head) %>

Isto significa que o que for passado para o “head” será escrito neste ponto. Portanto em nosso template podemos fazer a seguinte chamada:

<% content\_for :head do %> conteúdo que vai na HEAD <% end %>

Agora ele irá adicionar o conteudo ao nosso HEAD (observe o gancho :head), e pronto temos o código javascript inserido. Porém este código (o mesmo mostrado no exemplo do curvyCorners) irá sempre sobrepor a função onload anterior, o que pode significar muitos problemas, com outros scripts ou com multiplas instancias de rounded corners.

Para resolver este problema, temos um grande aliado no Rails, o prototype! Sim, ele vem por padrão no Rails, entao podemos utilizar ele para criar um novo observer, que irá executar o codigo no onload da página, adicionando esta função na fila de funções. Para isso mexeremos no index e no nosso bloco novamente:

 //index.html.erb <%= javascript\_include\_tag :defaults %>

//\_curvy.html.erb <% content\_for :head do %>

<script type="text/JavaScript"><div></div> Event.observe(window, 'load', function() { var settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true, autoPad: false } <div></div> var divObj = document.getElementById("myDiv"); <div></div> var cornersObj = new curvyCorners(settings, divObj); cornersObj.applyCornersToAll(); }); <div></div></script>

<% end %> 

Utilizando o bloco

Agora temos todas as peças, mas precisamos passar alguns parametros para nosso bloco para que o mesmo se torne único e possamos ter flexibilidade em seu uso. Para isso iremos utilizar a opção de “:locals”, passando por ela as variáveis que precisamos. Veja as mudanças na chamada do objeto:

 <% render(:layout => 'layouts/curvy', :locals => {:id => "login\_form", :tl => 20, :tr => 20, :bl => 20, :br => 20 }) do %>

conteudo do bloco

<% end %>

Agora temos de puxar estas variaveis no bloco, utilizando elas no lugares corretos, isso é simples, pois elas passam a ser variaveis de template de acesso direto, observe:

 <% content\_for :head do %>

<%= javascript\_include\_tag 'rounded\_corners.inc.js' %>

<script type="text/JavaScript"><div></div> Event.observe(window, 'load', function() { var settings = { tl: { radius: <%= tl %> }, tr: { radius: <%= tr %> }, bl: { radius: <%= bl %> }, br: { radius: <%= br %> }, antiAlias: true, autoPad: false } <div></div> var divObj = document.getElementById("<%= id %>"); <div></div> var cornersObj = new curvyCorners(settings, divObj); cornersObj.applyCornersToAll(); }); <div></div></script>

<% end %>

<%= yield %>

Note também que adicionamos a inclusão do arquivo JS ao conteudo que vai no HEAD também.

E pronto, agora podemos colocar este codigo em qualquer página de nossa aplicação e teremos cantos arredondados

Conclusão e Código Fonte

Este bloco se encaixa perfeitamente na teoria DRY e permite facilmente que se use blocos arredondados em diversos locais da aplicação de forma simples e fácil. A criação deste bloco foi simples e limpa graças a sintaxe do ruby e aos helpers do rails, e tenho que dizer que foi muito legal pesquisar e escrever este plugin.

Para fazer download do código fonte use o links abaixo: Ruby on Rails: Cantos arredondados

Espero que a oportunidade de novos artigos e novos assuntos neste blog seja tão interessante para você quanto tem sido para mim. Aguarde novos artigos como este e me de feedback pelos comentários.