{"id":2469,"date":"2012-02-23T14:54:25","date_gmt":"2012-02-23T16:54:25","guid":{"rendered":"http:\/\/blog.plataformatec.com.br\/?p=2469"},"modified":"2012-03-08T10:04:02","modified_gmt":"2012-03-08T13:04:02","slug":"simpleform-2-0-bootstrap-for-you-with-love","status":"publish","type":"post","link":"https:\/\/blog.plataformatec.com.br\/2012\/02\/simpleform-2-0-bootstrap-for-you-with-love\/","title":{"rendered":"SimpleForm 2.0 + Bootstrap: for you with love"},"content":{"rendered":"

The Carnival is over in Brazil but we are still partying at Plataformatec by bringing you a complete new release of SimpleForm. This time is not a small bump though, it’s a shiny new version: SimpleForm 2.0<\/a>, that comes with a bunch of new features and customizations, a new wrapper API to create custom input stacks and a great integration with Twitter Bootstrap<\/a>.<\/p>\n

Wrappers API<\/h3>\n

The new wrappers API is here in place of the old components<\/code> option (besides some other *_tag and *_class configs), to add more flexibility to the way you build SimpleForm inputs. Here is an example of the default wrapper config that ships with SimpleForm when you run its install generator:<\/p>\n

\r\nconfig.wrappers :default, :class => :input,\r\n  :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|\r\n  ## Extensions enabled by default\r\n  # Any of these extensions can be disabled for a\r\n  # given input by passing: `f.input EXTENSION_NAME => false`.\r\n  # You can make any of these extensions optional by\r\n  # renaming `b.use` to `b.optional`.\r\n\r\n  # Determines whether to use HTML5 (:email, :url, ...)\r\n  # and required attributes\r\n  b.use :html5\r\n\r\n  # Calculates placeholders automatically from I18n\r\n  # You can also pass a string as f.input :placeholder => \"Placeholder\"\r\n  b.use :placeholder\r\n\r\n  ## Optional extensions\r\n  # They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`\r\n  # to the input. If so, they will retrieve the values from the model\r\n  # if any exists. If you want to enable the lookup for any of those\r\n  # extensions by default, you can change `b.optional` to `b.use`.\r\n\r\n  # Calculates maxlength from length validations for string inputs\r\n  b.optional :maxlength\r\n\r\n  # Calculates pattern from format validations for string inputs\r\n  b.optional :pattern\r\n\r\n  # Calculates min and max from length validations for numeric inputs\r\n  b.optional :min_max\r\n\r\n  # Calculates readonly automatically from readonly attributes\r\n  b.optional :readonly\r\n\r\n  ## Inputs\r\n  b.use :label_input\r\n  b.use :hint,  :wrap_with => { :tag => :span, :class => :hint }\r\n  b.use :error, :wrap_with => { :tag => :span, :class => :error }\r\nend\r\n<\/pre>\n
Wrappers are used by the form builder to generate a complete input. You can remove any component from the wrapper, change the order or even add your own to the stack.<\/p>\n
The :default<\/code> wrapper is going to be used in all forms by default. You can also select which wrapper to use per form, by naming them:<\/p>\n
\r\n# Given you added this wrapper in your SimpleForm initializer:\r\nconfig.wrappers :small do |b|\r\n  b.use :placeholder\r\n  b.use :label_input\r\nend\r\n\r\n# Uses the :small wrapper for all inputs in this form.\r\nsimple_form_for @user, :wrapper => :small do |f|\r\n  f.input :name\r\nend\r\n<\/pre>\n
Or you can just pick a different wrapper in a specific input if you want:<\/p>\n
\r\n# Uses the default wrapper for other inputs, and :small for :name.\r\nsimple_form_for @user do |f|\r\n  f.input :name, :wrapper => :small\r\nend\r\n<\/pre>\n
You can see a more detailed description of the new wrappers API in the documentation<\/a>.<\/p>\n
Twitter Bootstrap<\/h3>\n
The second big change in SimpleForm 2.0 is out of the box Bootstrap integration. SimpleForm now ships with a generator option to initialize your application with a set of specific wrappers customized for Bootstrap. To get them, just run in your terminal, inside a Rails application (with SimpleForm already installed):<\/p>\n
\r\nrails generate simple_form:install --bootstrap\r\n<\/pre>\n
This gives you the default SimpleForm initializer in config\/initializers\/simple_form.rb<\/code> with some extra integration code added for Bootstrap. For example, here is the default wrapper:<\/p>\n
\r\nconfig.wrappers :bootstrap, :tag => 'div', :class => 'control-group', \r\n  :error_class => 'error' do |b|\r\n  b.use :placeholder\r\n  b.use :label\r\n  b.wrapper :tag => 'div', :class => 'controls' do |ba|\r\n    ba.use :input\r\n    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }\r\n    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }\r\n  end\r\nend\r\n<\/pre>\n
This wrapper is setup with the same structure that Bootstrap expects and is set to be the default wrapper in your application. This is the killer feature in SimpleForm 2.0<\/strong>: the Bootstrap integration is not inside SimpleForm but all in your application. This means that, if you want to move away or customize Bootstrap in the future, you don’t need to monkey patch SimpleForm, everything is in your app!<\/p>\n
We’ve set up a live example application showing most of the SimpleForm inputs integrated with Twitter Bootstrap<\/a>, make sure you check it out! The application code is on github<\/a>.<\/p>\n
Keep reading this blog post to find out the other changes and deprecations that gave SimpleForm all this extra flexibility, allowing it to be easily integrated with Twitter Bootstrap 2.0. <\/p>\n
New configs<\/h3>\n
SimpleForm 2.0 comes with some new configs to ease its integration with Bootstrap and to make your daily work even more flexible:<\/p>\n