Após ter descoberto o Formtastic, passei a utilizar o mesmo em todos os projetos aqui na Zigotto. Gosto muito da maneira que ele me permite trabalhar e escrever o código mais limpo e organizado.

E com tudo isso, comecei a me perguntar:

• O Inputs pode ser utlizado junto com o Formtastic?
• Como unir os dois de uma maneira bem simples e continuar usando o Formtastic para trabalhar com os formulários?

Imaginei algo como:

<% semantic_form_for @product do |form| %>
  <%= form.input :price, :mask => :decimal %>
  <%= form.commit_button %>
<% end %>

Gostei! É exatamente isso que eu quero!

Inputs foi atualizado e agora é possível através da opção :mask informar qual o tipo de máscara que você quer inserir no campo do formulário!

Como usar?

1. Instale e configure o Formtastic em seu projeto. Veja como fazer isso aqui.
2. Instale e configure o plugin Inputs. Veja como fazer isso aqui.

Após tudo configurado, é possível se fazer isso:

<% semantic_form_for @customer do |form| %>
  <%= form.input :name %>
  <%= form.input :phone, :mask => :phone %>
  <%= form.input :cpf, :mask => :cpf %>
  <%= form.commit_button %>
<% end %>

Você pode utlizar outras máscaras já definidas:

• phone
• phone-us
• cpf
• cnpj
• date
• date-us
• cep
• time
• cc
• integer
• decimal
• decimal-us
• signed-decimal-us

ou criar a sua própria máscara:

<% semantic_form_for @product do |form| %>
  <%= form.input :year, :mask => '9999' %>
  <%= form.input :phone, :mask => '99-9999-9999' %>
  <%= form.commit_button %>
<% end %>

Inputs utiliza o plugin meioMask para criar as máscaras, demais opções e configurações podem ser vista na própria página do meioMask.

Sugestões, criticas são bem vindas. O código esta no Github, fiquem a vontade para utilizar, modificar e compartilhar

O projeto é mantido por Justin French e José Valim, além de outras pessoas que ajudaram no projeto. Todo o código fonte esta no Github.

Sem mais, vamos trabalhar =)

Preparando o ambiente

Para gerar os scaffolds e um layout básico vou usar a gem Nifty Generators do Ryan Bates.

Instalando a gem nifty-generators:

sudo gem install nifty-generators

Criado a aplicação:

Pensando em acelerar um pouco o processo, criei um template básico e vamos criar a aplicação usando ele!

rails formtastic -m http://gist.github.com/181560.txt
cd formtastic

Instalando a gem formtastic:

sudo gem install justinfrench-formtastic

Adicione no environment.rb:

# config/environment.rb
config.gem "justinfrench-formtastic", :version => "0.2.2", :lib => 'formtastic', :source  => 'http://gems.github.com'

Gerando um layout basicão:

script/generate nifty_layout

Pronto

Usando

Como minha criatividade não permite algo diferente, vamos trabalhar com Produtos e Categorias.

Gerando o scaffold para Categorias:

script/generate nifty_scaffold Category name:string status:boolean ! show

Rode as migrações:

rake db:migrate

Se olharmos o código do formulário criado, teremos algo como:

# app/views/categories/_form.html.erb
 
<% form_for @category do |f| %>
  <%= f.error_messages %>
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.label :status %><br />
    <%= f.check_box :status %>
  </p>
  <p><%= f.submit "Submit" %></p>
<% end %>

Visualizando o formulário:

Ok Jésus! Você falou, falou, mas cade o Formtastic?

Até agora não fizemos nada com ele. Experimente trocar o código gerado pelo scaffold pelo código abaixo:

# app/views/categories/_form.html.erb
 
<% semantic_form_for @category do |form| %>
  <%= form.inputs %>
  <%= form.buttons %>
<% end %>

Somente isso? Vamos ver o formulário:

Mas tudo esta muito estranho. Quero modificar e adicionar algumas informações como:

• Separar em fieldsets diferentes os campos e botões
• Colocar uma mensagem informativa abaixo do campo Name
• Alterar o campo Status de checkbox para radio button.

# app/views/categories/_form.html.erb
 
<% semantic_form_for @category do |form| %>
 
  <% form.inputs do %>
    <%= form.input :name, :hint => "Example: food, books, electronics." %>
    <%= form.input :status, :as => :radio %>
  <% end %>
 
  <% form.inputs do %>
    <%= form.commit_button %>
  <% end %>
 
<% end %>

Podemos ter o controle de tudo! Veja como ficou:

Vamos para o cadastro de Produtos, gerando o scaffold para o mesmo:

script/generate nifty_scaffold Product category_id:integer name:string description:text price:decimal status:boolean

rake db:migrate

Criando o relacionamento entre Produtos e Categorias:

# app/models/category.rb
class Category < ActiveRecord::Base
 
  has_many :products
 
  validates_presence_of :name
  validates_inclusion_of :status, :in => [true, false]
 
end
 
# app/models/product.rb
class Product < ActiveRecord::Base
 
  belongs_to :category
 
  validates_presence_of :category, :name, :price
  validates_inclusion_of :status, :in => [true, false]
 
end

Nosso formulário está assim:

Não esta legal, vamos melhorar para:

• Adicionar um select para escolher uma categoria.
• Deixar o (*) somente nos campos obrigatórios.
• Diminuir o tamanho do campo Price.
• Alterar o campo Status de checkbox para select.

# app/views/products/_form.html.erb
 
<% semantic_form_for @product do |form| %>
 
  <% form.inputs do %>
    <%= form.input :category %>
    <%= form.input :name %>
    <%= form.input :description, :required => false, :input_html => {:rows => 3} %>
    <%= form.input :price, :input_html => {:size => 10} %>
    <%= form.input :status, :as => :select %>
  <% end -%>
 
  <% form.inputs do %>
    <%= form.commit_button %>
  <% end -%>
 
<% end -%>

Olha ai como ele ficou:

Input Types

Formtastic mapeia diretamente a maioria dos inputs, mas se por algum motivo você precisar alterar o seu tipo (por exemplo, como fizemos com o Status) você pode usar:

• :select (select para associações)
• :check_boxes (conjunto de check_box) – uma alternativa ao :select para associações has_many e has_and_belongs_to_many
• :radio (conjunto de radio) – alternativa ao :select para associações belongs_to
• :time_zone (select com fusos horários)
• :password (campo tipo password) – padrão para colunas do tipo :string com ‘password’ no nome do método
• :text (textarea) – padrão para colunas do tipo :text
• :date (select para datas) – padrão para colunas do tipo :date
• :datetime (select para data e hora) – padrão para colunas do tipo :datetime e :timestamp
• :time (select para hora) – padrão para colunas do tipo :time
• :boolean (checkbox) – padrão para colunas do tipo :boolean (você também pode usar :select e :radio)
• :string (campo de texto) – padrão para colunas do tipo :string
• :numeric (campo de texto, como string) – padrão para colunas do tipo :integer, :float e :decimal
• :country (menu select com nomes de países) – requer plugin country_select instalado
• :hidden (campo oculto) – cria um campo oculto

Stylesheets

Mas Jésus, e esse visual feio ai? Tem como melhorar não??

Claro que tem! Tente isso:

script/generate formtastic_stylesheets

Ele vai copiar dois arquivos (formtastic.css e formtastic_changes.css) dentro da pasta public/stylesheets para que você possa personalizar todo o visual do formulário

Basta adicionar ambos na view e trabalhar em suas propriedades:

<%= stylesheet_link_tag "formtastic" %>
<%= stylesheet_link_tag "formtastic_changes" %>

Claro que muito mais pode ser feito, como suporte a I18n, upload de imagens, mas isso ficará para um outro post =/

Vale a pena dar uma olhada em sua ótima documentação e nos seus arquivos no Github.

A idéia aqui, foi dar uma introdução e mostrar como ele pode facilitar e ajudar na hora de trabalhar com formulário no Rails.

É isso ai, vou finalizando por aqui

O objetivo é simples! Adicionar mascaras em campos de formulários. Penso em ampliar este plugin, e adicionar outras funcionalidade. Falo mais sobre isso no final do post.

Baseado no plugin JSMask do Oźeas Sant’ana, para prototype, o Inputs foi criado para quem trabalha com jQuery.

Vamos usar:

É necessário que esteja usando jQuery em seu projeto, recomendo o plugin jRails, caso ainda não o tenha instalado:

script/plugin install git://github.com/aaronchi/jrails.git

Agora é só instalar o Inputs:

script/plugin install git://github.com/jtadeulopes/inputs.git

Chamar os arquivos necessários na view:

<%= javascript_include_tag :defaults %>
<%= javascript_include_inputs %>

Agora, no formulário você pode fazer algo como:

<%= masked_text_field(:user, :tel, :size => 13, :mask => '(99)9999-9999') %>

Outros exemplos:

# Data:
<%= masked_text_field(:user, :birth, :mask => '99/99/9999') %>
 
# CPF:
<%= masked_text_field(:user, :cpf, :mask => '999.999.999-99') %>
 
# Campo de preço (dolar)
<%= price_us_text_field(:product, :price, :size => 10) %>

A idéia é ir adicionando outras opções, como calendário para seleção de datas, criar métodos que são mais utilizados para que não seja necessário ficar setando a máscara na criação do campo, etc.

Idéias são bem vindas, todo o código esta no Github, fiquem a vontade para utilizar, modificar e compartilhar!

É isso ai, valeu!

Mas foi decidido que as imagens devem ter outros tamanhos, o que fazer com as imagens que já foram cadastradas?

Se você utiliza o plugin Paperclip, ele dispobilibiza algumas rake tasks para facilitar esse trabalho!

São elas:

# Atualiza as informações do banco de dados e os arquivos no 
# servidor de acordo com os styles definidos no model
rake paperclip:refresh CLASS=SeuModel
 
# Atualiza somente as informações do banco de dados
rake paperclip:refresh:metadata CLASS=SeuModel
 
# Atualiza somente os arquivos no servidor, seguindo os styles 
# definidos no model
rake paperclip:refresh:thumbnails CLASS=SeuModel

Simples e sem dor de cabeça

Procurando uma maneira de automatizar esse processo, encontrei a gem Populator que facilita e muito esse trabalho.

Como Usar:

Primeiro instale a gem

sudo gem install populator

Após instalar, no console já podemos fazer algo como:

>> require 'populator'
=> []
>> Category.count
=> 0
>> Category.populate(10) { |category| category.name = Populator.words(1..3).titleize }
=> {}
>> Category.count
=> 10
>> Category.first
=> #<Category id: 1, name: "Fuga Debitis Temporibus", created_at: "2009-06-13 14:17:24", updated_at: "2009-06-13 14:17:24">
>>

Existem alguns metodos que podemos usar para gerar alguns dados como:

Populator.words(5) # gera 5 palavras aleatoriamente e insere um espaço entre elas
Populator.words(1..3) # gera entre uma e três palavras aleatoriamente
Populator.sentences(3) # gera 3 frases
Populator.paragraphs(2) # gera 2 paragrafos

Mas dependendo to tamanho de nosso model, ficar digitando tudo isso pelo console acaba dando muito trabalho também. Vamos melhorar isso!

Crie um novo arquivo em lib/tasks/populate.rake e crie a seguinte tarefa:

namespace :db do
  desc "Popula base de dados"
  task :populate => :environment do
 
    require 'populator'
 
    Category.populate 30 do |category|
      category.name = Populator.words(1..3).titleize
    end
 
  end
end

Agora dentro do diretório da aplicação, basta rodar a tarefa:

 rake db:populate 

Bem melhor

Podemos melhorar ainda mais este processo e deixar ele mais completo utilizando a gem Faker que gera dados como nome, telefone, endereço, e-mail e pode ser usada junto com a Populator.

Vale a pena assistir a este Railscast onde é demonstrado como utilizar as duas gems.

É isso ai!