Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Action View Form Helpers - 2, Season 2

1,875 views

Published on

Published in: Education
  • Be the first to comment

Action View Form Helpers - 2, Season 2

  1. 1. Ror lab. season 2 - the 14th round - Action ViewForm Helpers -2 January 12th, 2013 Hyoseong Choi
  2. 2. 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
  3. 3. Time Zones
  4. 4. time_zone_select model select attribute <%= f.time_zone_select :time_zone,priority_zones [ ActiveSupport::TimeZone[Seoul], ActiveSupport::TimeZone[Tokyo],ActiveSupport::TimeZ one[Beijing] ], :default => "Seoul" %>
  5. 5. time_zone_options_for_select bare-bones select attribute <%= form_tag do %> selected <%= select_tag :time_zone, time_zone_options_for_select(nil, [ priority_zones ActiveSupport::TimeZone[Seoul], ActiveSupport::TimeZone[Tokyo], ActiveSupport::TimeZone[Beijing] ] ), :default => "Seoul" %> <% end %>
  6. 6. 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> priority_countries <div class="actions"> <%= f.submit %> </div> <% end %>https://github.com/rails/country_select/blob/master/lib/country_select.rb
  7. 7. 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)
  8. 8. Individual Selects• select_year• select_month• select_day :prefix defaults to “date”• select_hour• select_minute• select_secondcf. select_date
  9. 9. 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}}
  10. 10. Uploading Filesparams[:picture] <%= form_tag({:action => :upload}, :multipart => true) do %>   <%= file_field_tag picture %> <% end %>   <%= form_for @person, :multipart => true do |f| %>   <%= f.file_field :picture %> <% end %>params[:person][:picture]Since Rails 3.1, it automatically sets the multipart/form-data with file_field in the form_for
  11. 11. What gets uploadeddef upload  uploaded_io = params[:person][:picture] uploaded_io  File.open(Rails.root.join(public, uploads,uploaded_io.original_filename), w) do |file|    file.write(uploaded_io.read)  end wbendan instance of a subclass of IO • original_filename • content_type : MIME type
  12. 12. UploadedFile CLASS ActionDispatch::Http::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"rnContent-Type: image/pngrn", @tempfile= #<File:/var/folders/rv/q26ztr693k5_58wbggd_jl300000gn/T/RackMultipart20130107-90570-18x3nfy>>
  13. 13. Upload Gems• System Requirement : ImageMagick• CarrierWave, • more flexiable than Paperclip • Rmagick gem, required!• Paperclip
  14. 14. Ajaxing Upload• “remotipart” gem : AJAX style file uploads with jQuery https://github.com/leppert/remotipart
  15. 15. Customizing Form Builders Pro using helper <%= form_for @person do |f| %> method   <%= text_field_with_label f, :first_name %> <% end %> or <%= form_for @person, :builder => LabellingFormBuilder do | f| %> using   <%= f.text_field :first_name %>subclassing <% end %> class LabellingFormBuilder < ActionView::Helpers::FormBuilder   def text_field(attribute, options={})     label(attribute) + super   end end app/form_builders/labelling_form_builder.rb
  16. 16. Simple_form• https://github.com/plataformatec/simple_form• with Twitter Boostrap• with Foundation 3
  17. 17. Params Naming Client Server Formfor model obj params[:person] “@person” submit
  18. 18. Basic Structures Arrays & 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’
  19. 19. Nested Hashes<input id="person_address_city" name="person[address][city]" type="text" value="New York"/>params hash {person => {address => {city => New York}}}
  20. 20. Duplicated Params array <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]array [ ’02-333-1234’, ‘031-323-9898’, ‘062-546-2323’ ]
  21. 21. hash & array Mixed Params hash nth-nested but array only one-level<input name="addresses[][line1]" type="text"/><input name="addresses[][line2]" type="text"/><input name="addresses[][city]" type="text"/>params[:addresses] array hash [ { ‘line1’ => ’02-333-1234’, ‘line2’ => ‘031-323-9898’, ‘city’ => ‘seoul’ } ]
  22. 22. Using Form Helpers<%= form_for @person do |person_form| %>  <%= person_form.text_field :name %> address.id  <% @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>
  23. 23. Using Form Helpersparams{ person => { name => Bob, address => { 23 => {city => Paris}, 45 => {city => London} } }}
  24. 24. Using :index <%= fields_for person[address][primary], address, :index => address do |address_form| %>   <%= address_form.text_field :city %> <% end %>or <%= 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" />
  25. 25. Form to External Resources - 1form_tag <%= form_tag http://farfar.away/ form, :authenticity_token => external_token) do %>   Form contents <% end %> <%= form_tag http://farfar.away/ false form, :authenticity_token => false) do %>   Form contents <% end %> payment gateway
  26. 26. Form to External Resources - 2form_for <%= 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 %>
  27. 27. Complex formsROR Lab. screencastsRailscasts by Ryan Bates• Complex Forms Part 1 - Episode #73• Complex Forms Part II - Episode #74• Complex Forms Part III - Episode #75• Nested Model Form (revised) - Episode #196
  28. 28. 감사합니다.
  29. 29.   ROR Lab.

×