2 minutes admin layout with rails and the web-app-theme generator

July 30th, 2009 by Andrea Franz

Many people found out a rails generator inside my web-app-theme project and asked me how to use it.
Here an example, starting from scratch with a new rails app that manages music Albums. 

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

After creating the first controller with a scaffold or with your hands, start creating a theme:

script/plugin install git://github.com/pilu/web-app-theme.git
script/generate theme application --app_name="My Cool Albums" --theme="drastic-dark"

The first argument (“application”) is the name of the layout that the generator will create (application.html.erb).
The –app_name option specifies the name used as page title, and with the –theme specifies which theme to use among all the available themes inside the plugin.

Now remove the default index.html created by rails and the layout created by the scaffold:

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

Add the following line in your routes.rb to set the default page of the application:

map.root :controller => :albums

Start the server

script/server

Ok, the layout has been successfully created, but we need to apply a theme for each one of the views generated by the scaffold.

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

With the first 2 arguments I specified the controller path (albums) and the model used (album).
The –layout options is used by the themed generator to know where to add the Albums menu link.

Since we want to use will paginate (we set the –with_will_paginate option), we need to change one line in our albums controller from: 

@albums = Album.all

to:

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

Here a trick to show form error messages inside the auto generated forms, you can add the following lines in your 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

Ok, restart your server and you are done.

Feel free to fork the project from github to improve the generator or to add a new theme.

Filed under: Development, Rails, Ruby | 23 Comments »

23 Comments on “2 minutes admin layout with rails and the web-app-theme generator”

  1. Ismael Marin
    5:54 pm on July 30th, 2009:

    Great tutorial, thank you very much, interesting plugin.

  2. GravityBlast - by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme generator « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
    8:00 pm on July 30th, 2009:

    [...] GravityBlast – by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme generatorgravityblast.com [...]

  3. Kai’s daily tech #5 … | Kai Richard König
    8:01 pm on July 31st, 2009:

    [...] GravityBlast – by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme gene… [...]

  4. straluna
    4:22 pm on August 1st, 2009:

    Grazie Andrea!:-)

  5. khelll
    5:12 pm on August 1st, 2009:

    Great Work! Thanks a ton!

  6. marfarma
    1:54 am on August 2nd, 2009:

    Anyone have a dynamic ‘theme-picker’ for this? It would be sweet to be able to move from one to another without having to edit files.

    Very nice tutorial – thanks!

  7. Carlos
    11:48 pm on August 15th, 2009:

    Thanks but I keep getting a 500 internal server error when I start the server.
    I´m using easy-rails with Ruby 1.8.7 and Rails 2.3.2 in Windows.

  8. Andrea Franz
    12:57 am on August 16th, 2009:

    Do you have any errors on the console?

  9. Carlos
    10:32 pm on August 16th, 2009:

    Thanks for the fast reply!
    Here’s the console:

    C:\easy-rails\rails_apps\cool_albums>ruby script/server
    => Booting Mongrel
    => Rails 2.3.2 application starting on http://0.0.0.0:3000
    => Call with -d to detach
    => Ctrl-C to shutdown server

    Processing ApplicationController#index (for 127.0.0.1 at 2009-08-16 18:28:09) [G
    ET]

    NoMethodError (undefined method `camelize’ for :albums:Symbol):

    /!\ FAILSAFE /!\ Sun Aug 16 18:28:09 -0400 2009
    Status: 500 Internal Server Error

    ActionView::TemplateError (undefined method `humanize’ for :albums:Symbol) in C:
    /easy-rails/ruby/lib/ruby/gems/1.8/gems/actionpack-2.3.2/lib/action_controller/t
    emplates/rescues/diagnostics.erb:

    In c:/easy-rails/ruby/lib/ruby/gems/1.8/gems/actionpack-2.3.2/lib/action_con
    troller/templates/rescues/diagnostics.erb

  10. Benoit
    2:29 pm on August 21st, 2009:

    Really nice post!

    This is gold!

    The thing is if I want to split admin view such as

    /admin/album

    I’m getting some issue. The doc is a little bit tricky

    Did you try this?

  11. Andrea Franz
    11:34 am on August 25th, 2009:

    @Carlos I didn’t try it with ruby 1.8.7 and windows, I’ll try soon..if you find something feel free to send me a patch.

    @Benoit it should work with “script/generate themed admin/posts post”. Did you try it?

  12. links for 2009-08-25 « hocuspokus
    11:08 pm on August 25th, 2009:

    [...] for 2009-08-25 GravityBlast – by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme generator (tags: rails ruby ui theme) Spread the [...]

  13. Sam Figueroa
    8:01 am on September 3rd, 2009:

    Props. Love the plugin. Just about saved me 5 hours of work this morning. Smashing!

  14. Meta Bates » Blog Archive » A Few Rails Nuggets
    1:23 am on September 8th, 2009:

    [...] http://gravityblast.com/2009/07/30/2-minutes-admin-layout-with-rails-and-the-web-app-theme-generator... [...]

  15. » GravityBlast – by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme generator - Yee Torrents News 4
    6:30 pm on September 27th, 2009:

    [...] Source:GravityBlast – by Andrea Franz » 2 minutes admin layout with rails and the web-app-theme gene… [...]

  16. Alican
    3:42 pm on October 3rd, 2009:

    Looks amazing, I tried today. Keep it up good work.

  17. nap
    3:37 am on October 29th, 2009:

    Finally got around to trying this out… swanky. Just wish it supported Haml/Sass!

  18. Andrea Franz
    8:38 am on October 29th, 2009:

    It doesn’t support haml but I want to add that feature soon!

  19. Paul
    4:56 am on November 5th, 2009:

    Andrea,

    this looks cool. I’m new to Ruby on Rails development. What pagination gem do you recommend. I followed your two minute admin example and I get:

    “NoMethodError (undefined method `paginate’ for #):”

    thanks
    Paul

  20. Andrea Franz
    8:40 am on November 5th, 2009:

    Paul, you need to install will_paginate ;)

  21. Migueñ
    10:18 pm on January 14th, 2010:

    Hey Hi, great work you have done there…

    I have some issues… I have two models: tickets and projects. I can access tickets through a project’s url like this: /project/1/tickets.

    Is there any in which when I generate the theme for a project it automatically creates sort of a link that lists all the tickets a project has? Or a way to not lose visibility of projects when generating the views for tickets?

    Any help would be much appreciated.

    Miguel

  22. Andrea Franz
    11:26 pm on January 14th, 2010:

    Unfortunately there isn’t a way to do it automatically..I usually generate the default theme and then I modify links as I want

  23. Miguel
    3:48 pm on January 15th, 2010:

    Ok,

    Actually I was doing it that way.

    Would be a nice feature for a future release :P

    Thanks for you answer…

    Miguel