action view form helpers - 2, season 2
TRANSCRIPT
![Page 1: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/1.jpg)
Action View Form Helpers -2
Ror lab. season 2- the 14th round -
January 12th, 2013
Hyoseong Choi
![Page 2: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/2.jpg)
Special Select
• time_zone_select: time_zone_options_for_select
• country_select : isolated to country_select plugin
• select_date : barebones helper
• date_select : model object helper
![Page 3: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/3.jpg)
Time Zones
![Page 4: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/4.jpg)
time_zone_select
<%= f.time_zone_select :time_zone, [ ActiveSupport::TimeZone['Seoul'], ActiveSupport::TimeZone['Tokyo'],ActiveSupport::TimeZone['Beijing'] ], :default => "Seoul" %>
priority_zones
attribute
model select
![Page 5: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/5.jpg)
time_zone_options_for_select
<%= form_tag do %> <%= select_tag :time_zone, time_zone_options_for_select(nil, [ ActiveSupport::TimeZone['Seoul'], ActiveSupport::TimeZone['Tokyo'], ActiveSupport::TimeZone['Beijing'] ] ), :default => "Seoul" %><% end %>
priority_zones
attributeselected
bare-bones select
![Page 6: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/6.jpg)
country_select• gem ‘country_select’
<%= form_for(@person) do |f| %> <div class="field"> <%= f.label :country %><br /> <%= f.country_select :country, ["Korea, Republic of"] %> </div>
<div class="actions"> <%= f.submit %> </div><% end %>
https://github.com/rails/country_select/blob/master/lib/country_select.rb
priority_countries
![Page 7: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/7.jpg)
select_date
<%= select_date Date.today, :prefix => :start_date %>
<select id="start_date_year" name="start_date[year]"> ... </select><select id="start_date_month" name="start_date[month]"> ... </select><select id="start_date_day" name="start_date[day]"> ... </select>
Date.civil(params[:start_date][:year].to_i, params[:start_date][:month].to_i, params[:start_date][:day].to_i)
![Page 8: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/8.jpg)
Individual Selects• select_year
• select_month
• select_day
• select_hour
• select_minute
• select_second
:prefix defaults to “date”
cf. select_date
![Page 9: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/9.jpg)
date_select
<%= date_select :person, :birth_date %>
<select id="person_birth_date_1i" name="person[birth_date(1i)]"> ... </select><select id="person_birth_date_2i" name="person[birth_date(2i)]"> ... </select><select id="person_birth_date_3i" name="person[birth_date(3i)]"> ... </select>
{:person => {'birth_date(1i)' => '2008', 'birth_date(2i)' => '11', 'birth_date(3i)' => '22'}}
![Page 10: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/10.jpg)
Uploading Files
<%= form_tag({:action => :upload}, :multipart => true) do %> <%= file_field_tag 'picture' %><% end %> <%= form_for @person <%= f.file_field :picture %><% end %>
Since Rails 3.1, it automatically sets the multipart/form-data with file_field in the form_for
do |f| %>, :multipart => true
params[:picture]
params[:person][:picture]
![Page 11: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/11.jpg)
What gets uploaded
def upload uploaded_io = params[:person][:picture] File.open(Rails.root.join('public', 'uploads', uploaded_io.original_filename), 'w') do |file| file.write(uploaded_io.read) endend
an instance of a subclass of IO
uploaded_io
• original_filename• content_type : MIME type
wb
![Page 12: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/12.jpg)
UploadedFile
"uploaded_file"=>#<ActionDispatch::Http::UploadedFile:0x007fd288c8fed0 @original_filename="korean_flag.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"person[uploaded]\"; filename=\"korean_flag.png\"\r\nContent-Type: image/png\r\n", @tempfile= #<File:/var/folders/rv/q26ztr693k5_58wbggd_jl300000gn/T/RackMultipart20130107-90570-18x3nfy>>
CLASS ActionDispatch::Http::UploadedFile
![Page 13: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/13.jpg)
Upload Gems
• System Requirement : ImageMagick
• CarrierWave,
• more flexiable than Paperclip
• Rmagick gem, required!
• Paperclip
![Page 14: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/14.jpg)
Ajaxing Upload
• “remotipart” gem: AJAX style file uploads with jQuery
https://github.com/leppert/remotipart
![Page 15: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/15.jpg)
Customizing Form Builders
<%= form_for @person do |f| %> <%= text_field_with_label f, :first_name %><% end %>
<%= form_for @person, :builder => LabellingFormBuilder do |f| %> <%= f.text_field :first_name %><% end %>
class LabellingFormBuilder < ActionView::Helpers::FormBuilder def text_field(attribute, options={}) label(attribute) + super endend
or
using helper
method
using subclassing
Pro
app/form_builders/labelling_form_builder.rb
![Page 16: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/16.jpg)
Simple_form
• https://github.com/plataformatec/simple_form
• with Twitter Boostrap
• with Foundation 3
![Page 17: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/17.jpg)
Params Naming
Form for model obj
“@person”
submit
Client Server
params[:person]
![Page 18: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/18.jpg)
Basic StructuresArrays & Hashes
<input id="person_name" name="person[name]"
type="text" value="Henry"/>
params hash{‘person’ => {‘name’ => ‘Henry’}}
params[:person]{‘name’ => ‘Henry’}
params[:person][:name]‘Henry’
![Page 19: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/19.jpg)
Nested Hashes
<input id="person_address_city"
name="person[address][city]"
type="text" value="New York"/>
params hash{'person' => {'address' => {'city' => 'New York'}}}
![Page 20: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/20.jpg)
Duplicated Params
<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>
params[:person][:phone_number][ ’02-333-1234’, ‘031-323-9898’, ‘062-546-2323’]
array
array
![Page 21: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/21.jpg)
Mixed Params
<input name="addresses[][line1]" type="text"/>
<input name="addresses[][line2]" type="text"/>
<input name="addresses[][city]" type="text"/>
params[:addresses][ { ‘line1’ => ’02-333-1234’, ‘line2’ => ‘031-323-9898’, ‘city’ => ‘seoul’ }]
hash nth-nested but array only one-level
hash & array
hash
array
![Page 22: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/22.jpg)
Using Form Helpers
<%= form_for @person do |person_form| %> <%= person_form.text_field :name %> <% @person.addresses.each do |address| %> <%= person_form.fields_for address, :index => address do |address_form|%> <%= address_form.text_field :city %> <% end %> <% end %><% end %>
<form accept-charset="UTF-8" action="/people/1" class="edit_person" id="edit_person_1" method="post"> <input id="person_name" name="person[name]" size="30" type="text" /> <input id="person_address_23_city" name="person[address][23][city]" size="30" type="text" /> <input id="person_address_45_city" name="person[address][45][city]" size="30" type="text" /></form>
address.id
![Page 23: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/23.jpg)
Using Form Helpers
{ 'person' => { 'name' => 'Bob', 'address' => { '23' => {'city' => 'Paris'}, '45' => {'city' => 'London'} } }}
params
![Page 24: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/24.jpg)
Using :index<%= fields_for 'person[address][primary]', address, :index => address do |address_form| %> <%= address_form.text_field :city %><% end %>
<%= fields_for 'person[address][primary][]', address do |address_form| %> <%= address_form.text_field :city %><% end %>
<input id="person_address_primary_1_city" name="person[address][primary][1][city]" type="text" value="bologna" />
or
![Page 25: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/25.jpg)
Form to External Resources - 1
<%= form_tag 'http://farfar.away/form', :authenticity_token => 'external_token') do %> Form contents<% end %>
<%= form_tag 'http://farfar.away/form', :authenticity_token => false) do %> Form contents<% end %>
false
payment gateway
form_tag
![Page 26: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/26.jpg)
Form to External Resources - 2
<%= form_for @invoice, :url => external_url, :authenticity_token => 'external_token' do |f| Form contents<% end %>
<%= form_for @invoice, :url => external_url, :authenticity_token => false do |f| Form contents<% end %>
form_for
form_for
form_for
![Page 27: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/27.jpg)
Complex forms
• Complex Forms Part 1 - Episode #73
• Complex Forms Part II - Episode #74
• Complex Forms Part III - Episode #75
• Nested Model Form (revised) - Episode #196
Railscasts by Ryan Bates
ROR Lab. screencasts
![Page 28: Action View Form Helpers - 2, Season 2](https://reader033.vdocuments.us/reader033/viewer/2022051413/554f8298b4c9052a518b4d89/html5/thumbnails/28.jpg)
ROR Lab.
감사합니다.����������� ������������������