Action View Form Helpers - 1, Season 2

919 views
858 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
919
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Action View Form Helpers - 1, Season 2

  1. 1. Ror lab. season 2 - the 13th round - Action ViewForm Helpers - 1 December 29th, 2012 Hyoseong Choi
  2. 2. form_tag• Two arguments 1. path for action : absolutely 1st argument 2. options hash • HTTP method : post(default), get, put, delete • HTML options : class, style, ...
  3. 3. form_tag Basic Form<%= form_tag do %>  Form contents<% end %> app/views/home/index.html.erb current action<form accept-charset="UTF-8" action="/home/index" method="post">  <div style="margin:0;padding:0">    <input name="utf8" type="hidden" value="✓" />    <input name="authenticity_token" type="hidden"value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />  </div>  Form contents to prevent</form> CSRF
  4. 4. form_tag Multiple Hashesform_tag(:controller => "people", :action =>"search", :method => "get", :class => "nifty_form")# => <form accept-charset="UTF-8" action="/people/search?method=get&class=nifty_form" method="post">form_tag({:controller => "people", :action =>"search"}, :method => "get", :class => "nifty_form")# => <form accept-charset="UTF-8" action="/people/search" method="get" class="nifty_form">
  5. 5. Helpers Generating Form Elements• text_field_tag• text_area_tag http://modernizr.com/docs/• check_box_tag Modernizr• radio_button_tag yepnope• password_field_tag• hidden_field_tag polyfiller• search_field_tag• telephone_field_tag HTML5 controls• url_field_tag• email_field_taghttp://en.wikipedia.org/wiki/Polyfillhttps://github.com/russfrisch/modernizr-rails
  6. 6. http://html5readiness.com
  7. 7. HTML 5 “Form 2.0”Firefox v17.0.1 Safari v6.0.2Chrome v23.0.1271.97 Opera v12.11
  8. 8. HTML 5 “Form 2.0” Form Element Helpers Rails 3 HTML5 Input Types search_field search telephone_field tel url_field url email_field email number_field number range_field range Agile Web Development with Rails 4th edition
  9. 9. HTML 5 “Form 2.0”Firefox v17.0.1 Safari v6.0.2Chrome v23.0.1271.97 Opera v12.11
  10. 10. Search Form for bookmark<%= form_tag("/search", :method => "get") do %>  <%= label_tag(:q, "Search for:") %>  <%= text_field_tag(:q) %>  <%= submit_tag("Search") %><% end %><form accept-charset="UTF-8" action="/search"method="get">  <label for="q">Search for:</label>  <input id="q" name="q" type="text" />  <input name="commit" type="submit" value="Search" /></form>
  11. 11. Form Elements Helpers Checkboxes <%= check_box_tag(:pet_dog) %> <%= label_tag(:pet_dog, "I own a dog") %> <%= check_box_tag(:pet_cat) %> <%= label_tag(:pet_cat, "I own a cat") %> <input id="pet_dog" name="pet_dog" type="checkbox" value="1" /> <label for="pet_dog">I own a dog</label> <input id="pet_cat" name="pet_cat" type="checkbox" value="1" /> <label for="pet_cat">I own a cat</label>
  12. 12. Form Elements Helpers Radio Buttons <%= radio_button_tag(:age, "child") %> <%= label_tag(:age_child, "I am younger than 21") %> <%= radio_button_tag(:age, "adult") %> <%= label_tag(:age_adult, "Im over 21") %> <input id="age_child" name="age" type="radio" value="child" /> <label for="age_child">I am younger than 21</label> <input id="age_adult" name="age" type="radio" value="adult" /> <label for="age_adult">Im over 21</label>
  13. 13. Form Elements Helpers Others <input id="age_child" name="age" type="radio" value="child" /> <label for="age_child">I am younger than 21</label> <input id="age_adult" name="age" type="radio" value="adult" /> <label for="age_adult">Im over 21</label> <input id="age_child" name="age" type="radio" value="child" /> <label for="age_child">I am younger than 21</label> <input id="age_adult" name="age" type="radio" value="adult" /> <label for="age_adult">Im over 21</label>
  14. 14. Model Object Helpers • check_box_tag • radio_button_tag• No _tag • text_area_tag • password_field_tag • hidden_field_tag
  15. 15. for Model Object @person -> name : “Henry”<%= text_field(:person, :name) %> for an instance for a method variable name(attr.)<input id="person_name" name="person[name]"type="text" value="Henry"/>
  16. 16. Binding a Form to an Objectdef new  @article = Article.newend<%= form_for @article, :url => { :action =>"create" }, :html => {:class => "nifty_form"} do |f|%>  <%= f.text_field :title %>  <%= f.text_area :body, :size => "60x12" %>  <%= f.submit "Create" %><% end %>
  17. 17. <%= form_for @article, :url => { :action =>"create" }, :html => {:class => "nifty_form"} do |f|%>  <%= f.text_field :title %>  <%= f.text_area :body, :size => "60x12" %>  <%= f.submit "Create" %><% end %><form accept-charset="UTF-8" action="/articles/create" method="post" class="nifty_form">  <input id="article_title" name="article[title]"size="30" type="text" />  <textarea id="article_body" name="article[body]"cols="60" rows="12"></textarea>  <input name="commit" type="submit" value="Create" /></form>
  18. 18. in the controller,params[:article]params[:article][:title]params[:article][:body]
  19. 19. fields_forPerson •name •age •sex •address •telephone
  20. 20. fields_for has_one orPerson Contact has_many •name •address •age •telephone •sex belong_to using nested attributes
  21. 21. fields_forclass Person < ActiveRecord::Base has_one :contact, :dependent => :destroyendclass Contact < ActiveRecord::Base belongs_to :personend using accepts_nested_attributes_for
  22. 22. Using Resources resources :articles in config/routes.rb## Creating a new article# long-style:form_for(@article, :url => articles_path)# short-style (record identification gets used):form_for(@article)## Editing an existing article# long-style:form_for(@article, :url =>article_path(@article), :html => { :method =>"put" })# short-style:form_for(@article)
  23. 23. Using Namespacesnamespace :admin do  resources :posts, :commentsend in routes.rbform_for [:admin, @post] in _form.html.erbadmin_post_path(@post) on updateapp/controllers/admin/posts_controller.rbapp/controllers/admin/comments_controller.rbapp/views/admin/posts/new.html.erbapp/views/admin/posts/edit.html.erb
  24. 24. HTTP Verbs• GET for all browsers• POST• PUT ?• DELETE
  25. 25. PUT & DELETE • A hidden input : _methodform_tag(search_path, :method => "put")<form accept-charset="UTF-8" action="/search"method="post">  <div style="margin:0;padding:0">    <input name="_method" type="hidden" value="put" />    <input name="utf8" type="hidden" value="✓" />    <input name="authenticity_token" type="hidden"value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />  </div>  ...
  26. 26. select_tag<select name="city_id" id="city_id">  <option value="1">Lisbon</option>  <option value="2">Madrid</option>  ...  <option value="12">Berlin</option></select><%= select_tag(:city_id, <option value="1">Lisbon</option>...) %>
  27. 27. options_for_select <%= options_for_select([[Lisbon, 1], [Madrid, 2], ...]) %>   1st argument => a nested array output:   <option value="1">Lisbon</option> <option value="2">Madrid</option> ... <%= select_tag(:city_id, options_for_select(...)) %>
  28. 28. options_for_select <%= options_for_select([[Lisbon, 1], [Madrid, 2], ...], 2) %>   output: 2nd argument => ‘selected’   <option value="1">Lisbon</option> <option value="2" selected="selected">Madrid</option>
  29. 29. select for ORM # controller: @person = Person.new(:city_id => 2) # view: <%= select(:person, :city_id, [[Lisbon, 1], [Madrid, 2], ...]) %>form builder pre-selected by Rails # select on a form builder <%= f.select(:city_id, ...) %>
  30. 30. select from collection <% cities_array = City.all.map { |city| [city.name, city.id] } %> <%= options_for_select(cities_array) %>in short form, options_from_collection (City.all, :id, :name)
  31. 31. collection_select collection_<%= collection_select (:person, :city_id, City.all, :id, :name) %> or f.<%= f.collection_select (:city_id, City.all, :id, :name) %>
  32. 32. 감사합니다.
  33. 33.   ROR Lab.

×