2011年8月22日月曜日

rails フォームビルダーのformtasticを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
入力フォームを簡単に作成できるformtasicを試してみた。

参考
http://railscasts.com/episodes/184-formtastic-part-1
http://railscasts.com/episodes/185-formtastic-part-2
https://github.com/justinfrench/formtastic

rails 3.0.10
ruby 1.9.2

・gemfileに記述
gem 'formtastic', '2.0.0.rc1'
bundle install

(gem 'formtastic'だと、scaffoldで自動で変換はしてくれないようだ)

・formtasticインストール
rails g formtastic:install
  create  config/initializers/formtastic.rb
  create  public/stylesheets/formtastic.css
  create  public/stylesheets/formtastic_changes.css


・テスト用データ:category
rails g scaffold category name:string description:text
rake db:migrate

・入力フォーム部分は以下のような感じ

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>


formtasticで変換されてシンプルな形になっている。
気になったのがバリデーションのエラー表示の記述がないのでどうなるのかと思ったが
ちゃんとポップアップみたいな感じで表示してくれる

もし、通常のエラー表示にしたいなら
config/initializersで
Formtastic::SemanticFormBuilder.inline_errors = :none
に変更して以下のようにエラーメッセージ表示を記述してやれば

<% semantic_form_for @animal do |f| %>
  <%= f.error_messages %>
  <% f.inputs do %>
  <!-- rest of form -->

通常のrailsのエラー表示にように戻せるみたいだ
まあこれはformtasticのままでいいかな

・さらにデータの追加
rails g scaffold animal name:string category_id:integer born_on:date female:boolean


・モデルに関連関係のものを記述
class Animal < ActiveRecord::Base
    belongs_to :category
end


class Category < ActiveRecord::Base
  has_many :animals
end


・各種パラメータの設定を変えてみる。form部分を書き換え
<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>

を下のように書き換える

パラメータを変更、追加
・1900年から表示
・空白を含まない選択リスト
・ラベルの変更+radioボタンでmale、femaleの2択

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name, :hint => "Use the owner's name if none is provided" %>
    <%= f.input :born_on, :start_year => 1900 %>
    <%= f.input :category, :include_blank => false %>
    <%= f.input :female, :as => :radio, :label => "Gender", :collection => [["Male", false], ["Female", true]] %>
  <% end %>
  <%= f.buttons %>
<% end %>

ちゃんと変更が反映されていた。
コード量が少ないのと、各種パラメータを設定しやすいのがいいですね。
でも、なぜかレイアウトがちょっと変だった。CSSの問題かな。

simple_formはrails3.0.10だとうまくいかなくて途中で断念。
formtasticより軽量でカスタムもしやすいらしいので使いたかったのになあ

0 件のコメント:

コメントを投稿