[Tutorial] Gerando layouts com a gem “web app theme”

[Tutorial] Gerando layouts com a gem “web app theme”

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

web-app-theme-example

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)

  • Pois é, realmente, os programadores não gostam de ficar fazendo layout mesmo sendo só tableless mesmo. Parabéns pelo post! Continue assim!

  • Velhinho valeu pela dica. Estava precisando de um layout assim. Post RT!

  • Norberto

    Orra valew Lucas, excelente.

  • Pingback: Layout sem dificuldades em suas aplicações Rails « bpTecnologia()

  • Cara Parabens pelo post.
    Otima dica.

  • Igor

    criei uma validacao personalizada, como faço para exibir o erro na pagina?, pois so esta tratando quando um campo e valido.

  • Claudio

    Muito bom o tutorial, consegui resolver meu problema com layout.

    Como que faço uma página administrativa e login? Não estou conseguindo
    parabéns

  • mitmaya

    Nao consiguo utilizar com rails 3, da a seguinte mensagem: “could not find generetor theme”
    O que pode ser? Obrigado e parabéns pelo artigo.

  • Pra usar no Rails 3, você precisa estar com a o Web App Theme na versão 0.6.2 ou superior.

    Dá uma olhada na documentação :)
    http://github.com/pilu/web-app-theme

  • Glaz

    Não precisa declarar a gem no environment?

  • Não, pq uma vez gerado o layout, você não usa mais a gem :)

  • Glaz

    e eu tenho que começar o projeto do zero ou é possível utilizar o web-app-theme em um projeto que já foi iniciado?

  • Glaz

    estou seguindo o tutorial em um projeto novinho e está dando o erro “could not find generetor theme” no rails 2.3.5
    Sabe oq pode ser? Gostaria muito de usar o web-app-theme para melhor o layout das minhas páginas… mas não estou conseguindo :(

  • Pode usar quando você quiser, basta adaptar o layout.

    Com Rails 2.x, use a versão 0.5.3, como descrito na página do projeto:

    You can use web-app-theme >= 0.6.2 with Rails 3. If you want to use it with rails 2, use web-app-theme 0.5.3 Specify the web-app-theme gem in your Gemfile, only for :development and :test

    group :development, :test do
    gem ‘web-app-theme’, ‘>= 0.6.2’
    end

  • Glaz

    Valeu Catón!!!
    Funcionou direitinho, eu troquei a versão da gem e deu tudo certo!
    Vc é cara!!!

  • Que bom :)

    Qualquer coisa é só falar!

  • I have been browsing online greater than 3 hours today, but I never found any interesting article like yours. It is pretty price sufficient for me. Personally, if all website owners and bloggers made just right content as you probably did, the internet can be a lot more useful than ever before.

  • Estevão Sousa

    Estou usando o Rails 3.2.1 e a gem “web app theme” 0.0.8
    “could not find generetor theme”

Comments are closed.