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 - 1, Season 2

1,075 views

Published on

  • Be the first to comment

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.

×