Rails/ビューヘルパーの履歴(No.4)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
Rails/ビューヘルパーへ行く。
- 1 (2014-11-21 (金) 16:06:03)
- 2 (2014-11-22 (土) 19:29:58)
- 3 (2015-07-22 (水) 16:01:57)
- 4 (2015-07-24 (金) 16:49:57)
- 5 (2015-07-27 (月) 16:45:14)
- 6 (2016-04-13 (水) 16:47:33)
- 7 (2017-06-02 (金) 15:56:58)
- 8 (2017-06-20 (火) 15:20:11)
- 9 (2017-07-10 (月) 13:53:13)

&tag(Rails/ビューヘルパー);

↑

参考情報†[edit]

ActionView::Helpers::FormTagHelper //tag系のドキュメント。 ^

↑

form†[edit]

↑

form_for†[edit]

form_forでモデル連携型のフォームが生成できる。

<%= form_for(@book) do |f| %>
タイトル: <%= f.text_field(:title, {:size => 40}) %>
<%= f.submit %>
<%= end %>

@bookが保存されているかどうかで、呼ばれるアクションが自動的に変わる。

↑

form_tag†[edit]

form_tagでもモデル連動は可能。

<%= form_tag({ :controller => 'books', :action => 'create'}) do %>
タイトル: <%= text_field(:book , :title, {:size => 40}) %>
<%= f.submit %>
<% end %>

↑

ラベル†[edit]

↑

f.label†[edit]

プロパティ名と実際に表示する文字列を併記する場合(プロパティ名は対応するコントロールにフォーカスを移すために必要)
```
<%= f.label :title, 'タイトル' %>
```

↑

セレクト†[edit]

tag系とそれ以外で最後のオプションの渡し方がことなるので注意。

↑

f.select†[edit]

配列から生成。

<%= f.select(:object_field, ['Item 1', ...], {}, { class: 'my_style_class' }) %>

オブジェクトの配列から生成。

 <%= f.select(:category_id, Category.all.map{|category| [category.title, category.id]}, {include_blank: '選択'}, {class: 'form-control'} ) %>

↑

select_tag†[edit]

options_for_selectを使えばオブジェクトの配列から生成することができる。
```
select_tag 'xxx', options_for_select(@objects.map{|obj| [obj.title, obj.id]})
```

↑

options_for_select注意点†[edit]

ハッシュを渡してもいいけど、順番が保証されない。
配列の配列を渡すのがいいらしい。
もしくはオブジェクトの配列で上のようにmapする。

↑

submit†[edit]

↑

確認メッセージを表示する†[edit]

submit_tagで確認メッセージを表示する。

  <%= submit_tag('削除',  {name: 'delete', class: 'btn btn-danger', data: {confirm: '削除しますか？'} } ) %>

↑

Bootstrap3との連携†[edit]

twbs/bootstrap-sassを使って、rails4とbootstrap3を連携している場合を考える。

↑

メッセージの表示†[edit]

application_helper.rbに以下を追加

  def bootstrap_class_for flash_type
    { success: "alert-success", error: "alert-danger", alert: "alert-warning", notice: "alert-info" }[flash_type.to_sym] || flash_type.to_s
  end

  def flash_messages(opts = {})
    flash.each do |msg_type, message|
      concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} alert-dismissible", role: 'alert') do
               concat(content_tag(:button, class: 'close', data: { dismiss: 'alert' }) do
                        concat content_tag(:span, '&times;'.html_safe, 'aria-hidden' => true)
                        concat content_tag(:span, 'Close', class: 'sr-only')
                      end)
               concat message
             end)
    end
    nil

application.html.erbに以下を追加

<div class="container">
    <!-- flash message -->
    <%= flash_messages %>

    <%= yield %>

    <hr>
    <footer>
        <p>&#169; src256</p>
    </footer>

</div>

controllerで以下のように設定すると、画面の上部にBootstrap風のエラー画面が表示される。
```
    msg = "保存しました"
    flash[:notice] = msg
    redirect_to(software_path(id, take_params))
```

↑

一覧画面†[edit]

Bootstrap3を使ってテーブルを一覧表示(index.html.erb)

<h1>アイテム一覧</h1>

<table class="table">
    <tr>
        <th class="col-xs-3">カテゴリ</th>
        <th class="col-xs-3">タイトル</th>
        <th class="col-xs-3">コンテンツ</th>
        <th class="col-xs-3">操作</th>
    </tr>

    <% @items.each do |item| %>
        <tr>
            <td><%= item.category_id %></td>
            <td><%= item.title %></td>
            <td><%= item.content %></td>
            <td><%= link_to 'Show', item %></td>
            <td><%= link_to 'Edit', edit_item_path(item) %></td>
            <td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
    <% end %>
</table>

<br>

<%= link_to 'アイテム追加', new_item_path %>

↑

追加・編集画面†[edit]

form-horizontalでラベルとコントロールを横に並べる。
labelはインライン要素だが"display: inline-block"が指定されているので幅が指定できる(divで囲む必要がない)

control-labelを指定すれば、右寄せ垂直方向中心となる。

<%= form_for(@item, html: {class: 'form-horizontal'}) do |f| %>
    <% if @item.errors.any? %>
        <div id="error_explanation">
            <h2>エラーが発生しました :</h2>
            <ul>
                <% @item.errors.full_messages.each do |msg| %>
                    <li><%= msg %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="form-group">
        <%= f.label(:category_id, 'カテゴリ', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.select(:category_id, Category.all.map{|category| [category.title, category.id]}, {include_blank: '選択'}, {class: 'form-control'} ) %>
        </div>
    </div>
    <div class="form-group">
        <%= f.label(:folder_id, 'フォルダ', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.select(:folder_id, Folder.all.map{|folder| [folder.title, folder.id]}, {include_blank: '選択'}, {class: 'form-control'} ) %>
        </div>
    </div>
    <div class="form-group">
        <%= f.label(:title, 'タイトル', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.text_field(:title, class: 'form-control') %>
        </div>
    </div>
    <div class="form-group">
        <%= f.label(:content, 'コンテンツ', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.text_area(:content, rows: 14, cols: 20, class: 'form-control') %>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12">
            <%= f.submit('保存', class: 'btn btn-primary') %>
        </div>
    </div>
<% end %>

Rails/ビューヘルパー の履歴(No.4)