O problema

Um dos problemas enfrentados por desenvolvedores web quando não se tem um designer na equipe, é fazer o layout da aplicação, já que quase sempre é um de seus pontos fracos (pelo menos da maioria que eu conheço). Particularmente falando, embora aprecie muito a área, não é meu forte trabalhar com XHTML, CSS e resolver problemas de incompatibilidade de browsers.

As soluções

Bom, neste ponto, surgem várias soluções, mas não é interesante matar um mosquito com uma granada, então você deve estudar o que melhor lhe atende em cada projeto. Flex pode ser ótimo, mas sem dúvidas ele não é ideal pra todos os projetos. ExtJS é bacana, mas devemos ter atenção com a sua licença. Flash, JavaFX e SilverLight podem ter lá sua utilidade também, mas o que os programadores geralmente buscam é uma interface simples, com boa usabilidade e de fácil manutenção.

A solução que eu trago neste post é uma gem chamada web app theme. Através dela, torna-se extremamente fácil gerar layouts sem nenhuma dor de cabeça.

Como uma simples demonstração, segue alguns screenshots dos layouts gerados automaticamente:

Passo-a-passo

Primeiramente, instale a gem:

sudo gem install web-app-theme -s http://gemcutter.org

Ou instale como um plugin do rails:

script/plugin install git://github.com/pilu/web-app-theme.git

Vamos criar uma aplicação rails simples:

rails cool_albums
cd cool_albums
script/generate scaffold Album name:string artist:string date:date
rake db:migrate

Adicione ao seu config/routes.rb:

map.root :controller => :albums

Rode o seguinte comando pra gerar o tema:

script/generate theme application --app_name="My Cool Albums" --theme="drastic-dark"

O primeiro argumento (“application”) é o nome do layout que o generator vai criar (application.html.erb).
A opção –app_name especifica o nome usado no título das páginas e o parametro –theme define qual dos temas você quer usar. Verifique aqui os temas disponíveis.

Remova o arquivo public/index.html e o layout criado pela scaffold:

rm app/views/layouts/albums.html.erb
rm public/index.html

Agora inicie o server:

script/server

Ok, ficou bom. Mas é possível aplicar um tema à todas as views geradas através do scaffold:

script/generate themed albums album --layout=application --with_will_paginate

Os dois primeiros parametros significam: controller e model, respectivamente. Controller “albums” e model “album”. A opção –layout é usada pelo generator themed para adicionar o menu. E se você quiser usar a gem will paginate, basta usar a opção –with_will_paginate e alterar a action index do controller, de:

@albums = Album.all

Para:

@albums = Album.paginate(:per_page => 10, :page => params[:page])

Para exibir mensagens de erro dentro dos forms gerados automaticamente, adicione as seguintes linhas ao seu config/environment.rb:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  if html_tag =~ /<label/
    %|<div class="fieldWithErrors">#{html_tag} <span class="error">#{[instance.error_message].join(', ')}</span></div>|
  else
    html_tag
  end
end

Divirta-se… programando; já que você não perde mais tempo com layout

(Este tutorial foi baseado neste post de Andrea Franz)