Sébastien Grosjean's coding blog

Updated: February 28th 2012 to fix a typo in the translation file. Thanks erwin.

Starting to work with Twitters Bootstrap I have to make few adaptation to my simple_form setup to keep having clean forms and benefit from the slick interface provided by Twitter Bootstrap.

The tweaks required takes 2 parts:

1. The setup for input wrappers and form classes, ...
2. The buttons wrappers to be added easily

Setup for input wrappers and form classes, ...

Most of the work can be done by generating your simple_form config with as describe on simple_form documentation

rails generate simple_form:install --bootstrap

I had to make a few extra tweaks to use the horizontal mode, that I prefer:

config.label_class = 'control-label'
config.form_class = 'simple_form form-horizontal'

That's now good for all except the submit buttons, I'm still not happy to define the whole submit wrapper on each form, so let's make a button wrapper

Buttons wrappers

Adding the following to a new library, for example /lib/extras/simple_form_extensions.rb:

module WrappedButton
  def wrapped_button(*args, &block)
    template.content_tag :div, :class => "form-actions" do
      options = args.extract_options!
      loading = self.object.new_record? ? I18n.t('simple_form.creating') : I18n.t('simple_form.updating')
      options[:"data-loading-text"] = [loading, options[:"data-loading-text"]].compact
      options[:class] = ['btn-primary', options[:class]].compact
      args << options
      if cancel = options.delete(:cancel)
        submit(*args, &block) + ' ' + I18n.t('simple_form.buttons.or') + ' ' + template.link_to(I18n.t('simple_form.buttons.cancel'), cancel)
      else
        submit(*args, &block)
      end
    end
  end
end
SimpleForm::FormBuilder.send :include, WrappedButton

will allow you to use :

<%= f.button :wrapped, :cancel => posts_path %>

Don't forget to load your new library, I like to use the following way from config/application.rb :

config.autoload_paths += %W(#{config.root}/lib/extras)

And require it from config/initializers/simple_form.rb

require 'simple_form_extensions'

Last thing, add the new translations within config/locales/simple_form.en.yml

en:
  simple_form:
    creating: "Creating..."
    updating: 'Updating...'
    buttons:
      or: 'or'
      cancel: 'cancel'

Restart your app server and here we go, we now keep the really clean way to manage forms of simple_form with the beautiful design of Twitter Bootstrap.

More like a quick memo, here's the steps I had to follow to install PEAR, PECL and pecl_http on OSX Lion.

Install PEAR and PECL

sudo php /usr/lib/php/install-pear-nozlib.phar
pear config-set php_ini /private/etc/php.ini
pecl config-set php_ini /private/etc/php.ini
sudo pear upgrade-all

Load the extensions

Then open `/etc/php.ini` and uncomment `extension=php_curl.dll` also add `extension=http.so` as you are at it.

Install pecl_http

sudo pecl install pecl_http

Just press "Enter" at the request questions to accept the default values.

Restart Apache

sudo apachectl restart