Rails 3 Beginner to Builder 2011 Week 4

  • 6,306 views
Uploaded on

This is the 4th of 8 presentations given at University of Texas during my Beginner to Builder Rails 3 Class. For more info and the whole series including video presentations at my …

This is the 4th of 8 presentations given at University of Texas during my Beginner to Builder Rails 3 Class. For more info and the whole series including video presentations at my blog:


http://schneems.com/tagged/Rails-3-beginner-to-builder-2011

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,306
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
106
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Did your Homework? • Or promise you will • (Chapters 8 & 9) • Grab A Gowalla Tee Shirt!! • Sizes run a bit small@SchneemsThursday, June 30, 2011
  • 2. Beginner to Builder Week 4 Richard Schneeman @schneemsJune, 2011Thursday, June 30, 2011
  • 3. Rails Hotline • Call them and ask rails questions • (877)- 817- 4190 • Free@SchneemsThursday, June 30, 2011
  • 4. Rails - Week4 • Html, Javascript and CSS • Error Handling • begin - rescue - end • Ajax - “Web 2.0” • What is it? • Partials • Considerations@SchneemsThursday, June 30, 2011
  • 5. HTML • Hyper Text Markup Language • Used to create Webpages@SchneemsThursday, June 30, 2011
  • 6. HTML <div id="content" class="clearfix"> <h1>Keep up with your friends, share the places you go,<br /> and discover the extraordinary in the world around you.</h1> <div id="content"> <div id="leather" class="clearfix"> <!-- tour --> <div id="tour"> <div id="tour_inner" style="left: 0px; -webkit-transform: translate3d(0px, 0px, 0);"> <div id="homepage" style="background: transparent url(/images/tour/home-2.png) top left no-repeat;"> <div class="feature friends"> <div class="feature-icon"></div> <p><strong>Keep up with friends on your phone.</strong> Connect with friends from Facebook and Twitter to share where youre going.</p> </div> <div class="feature discover"> <div class="feature-icon"></div> <p><strong>Discover new places and hotspots</strong> when you go out, then share your photos, recommendations and trips with friends!</p> </div> <div class="feature rewards"> <div class="feature-icon"></div> <p><strong>Find inspiration to explore</strong> the world around you while picking up rewards from local eateries, venues and retail stores.</p> </div> </div>@SchneemsThursday, June 30, 2011
  • 7. HTML@SchneemsThursday, June 30, 2011
  • 8. HTML elements • Most elements have start and end tags • can have optional attributes <p>This is an element</p> <br /><!-- so is this --> <h1 class=”foo”> This is an element with an attribute </h1>@SchneemsThursday, June 30, 2011
  • 9. .html.erb • ERB • Embedded Ruby • Ruby code that generates HTML <h1>People</h1> <h1>People</h1> <ul> <ul> => <% @people.each do |person| %> <li>Bob</li> <li><%= person.first_name %></li> <li>Joe</li> <% end -%> <li>Mary</li> </ul> </ul>@SchneemsThursday, June 30, 2011
  • 10. .html.erb <%= "This is an ERB Display Tag " %> <% foo = "Embedded expression does not render" %> <% 3.times do |i| %> <%= "Hello #{i}" %> <% end %>@SchneemsThursday, June 30, 2011
  • 11. .html.haml • ERB alternative • Meaningful whitespace • no “end” keyword %h1 <h1>People</h1> People <ul> %ul - @people.each do |person| => <li>Bob</li> <li>Joe</li> %li=person.first_name <li>Mary</li> </ul>@SchneemsThursday, June 30, 2011
  • 12. CSS • Cascading Style Sheets • Rules Based Style • Casscade • What happens if more than one rule is applied?@SchneemsThursday, June 30, 2011
  • 13. CSS • ( # ) id • ( . ) class • element // id selector #main { background-color: orange;} // class selector .sidebar { color: black; } // element selector span { font-size: 24px;} // mixed span.sidebar { color: #C5C5C5; }@SchneemsThursday, June 30, 2011
  • 14. CSS • Inline styles • Embedded style • External style@SchneemsThursday, June 30, 2011
  • 15. CSS <!-- inline --> <p style="color:black">tag</p> <!-- Embedded --> <style type="text/css"> p {color:black} </style> <!-- External --> <link rel="stylesheet" type="text/css" href="mystyle.css" />@SchneemsThursday, June 30, 2011
  • 16. CSS • Inheritance • specificity • location@SchneemsThursday, June 30, 2011
  • 17. CSS • Inheritence p { color: blue; } <p> <span>Hello There</span> </p>@SchneemsThursday, June 30, 2011
  • 18. CSS • Specificity * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */@SchneemsThursday, June 30, 2011
  • 19. CSS • Location • Later rules are more important p { color: blue; } p { color: red; } paragraph will be red@SchneemsThursday, June 30, 2011
  • 20. Browser Wars • Different browsers • same content • Different Results • IE • Safari • Chrome • FireFox • etc.@SchneemsThursday, June 30, 2011
  • 21. JavaScript • Client Side Scripting Language • (The web browser is the client) • Make your websited more dynamic var name = prompt("What is your name?"); alert("Welcome " + name); Java is to JavaScript as Car is to Carpet@SchneemsThursday, June 30, 2011
  • 22. Javascript • Can manipulate the DOM • DOM • Document Object Model@SchneemsThursday, June 30, 2011
  • 23. DOM@Schneems Document Object ModelThursday, June 30, 2011
  • 24. JavaScript Libraries • Written in JavaScript • Makes writing JavaScript easier • jQuery (rails >= 3.1) • Prototype (rails < 3.1)@SchneemsThursday, June 30, 2011
  • 25. jQuery • The pre-packaged JavaScript library with rails 3.1 // Javascript window.document.body.style.display = none; // jQuery $(body).hide()@SchneemsThursday, June 30, 2011
  • 26. jQuery in Rails 3 • Use jQuery gem gem install "jquery-rails" rails generate jquery:install@SchneemsThursday, June 30, 2011
  • 27. JavaScript Debugging • Firefox #=> FireBug • Safari #=> Inspect Element • Chrome #=> Inspect Element • IE #=> Don’t ever use IE@SchneemsThursday, June 30, 2011
  • 28. CSS Debugging • Firefox #=> FireBug • Safari #=> Inspect Element • Chrome #=> Inspect Element • IE #=> Don’t ever use IE@SchneemsThursday, June 30, 2011
  • 29. Error Handling • What is an Exception? • How can we handle Exceptions • Rails’ errors attributes@SchneemsThursday, June 30, 2011
  • 30. Error Handling • What is an Exception? • A standard ruby object Create with raise raise “you entered an invalid attribute” Optionally provide type of exception raise ArgumentError, "Argument is not numeric" rubylearning.org@SchneemsThursday, June 30, 2011
  • 31. Raise • Code confident • raise errors in truly exceptional situations • error will be logged • user will endis handled a 500 error unless error up seeing raise "bad stuff happened"@SchneemsThursday, June 30, 2011
  • 32. Error Handling • Begin-Rescue-End (Ruby) • Like Try - Catch • Begin attempts to run code • If exception, then rescue catches the error begin dept = Department.find(thisdept) rescue "No Department" end@SchneemsThursday, June 30, 2011
  • 33. Error Handling • Begin-Rescue-End (Ruby) • Ensure - Runs regardless of errors begin file = open("/tmp/some_file", "w") # ... write to the file ... rescue # ... handle the exceptions ... ensure file.close # ... and this always happens. end@SchneemsThursday, June 30, 2011
  • 34. Error Handling • Begin-Rescue-End (Ruby) rescue defaults to StandardError rescue rescue can handle different types of exceptions rescue SyntaxError rescue Exception will rescue any exception rescue Exception@SchneemsThursday, June 30, 2011
  • 35. Error Handling • Logger • Rails logs activity • {production, development, test}.log • Useful to see where errors occured • Use tail to view current activity $: tail -f logs/production.log (much better than trying to load a +200mb log file into a text editor)@SchneemsThursday, June 30, 2011
  • 36. Error Handling • Logger • Specify different levels of logging details config/environments/production.rb config.log_level = :debug • Filter out sensitive info from log config/environment.rb config.filter_parameters += [:password] Now, no passwords will show up in any log file Keeps hackers in the dark, and SysAdmins honest@SchneemsThursday, June 30, 2011
  • 37. Error Handling • Logger • Different log levels filtered by logger Example: Levels config/environments/production.rb config.log_level = :debug@SchneemsThursday, June 30, 2011
  • 38. Error Handling • Logger • How do I write something to the log? • Errors and exceptions added • call logger directly logger.error "Something Bad Happened" Puts info in log without raising error@SchneemsThursday, June 30, 2011
  • 39. Errors in Rails • Errors in rails • Attached to objects • Access through errors method • @dog.errors <% @dog.errors.full_messages.each do |msg| %> <li><%=raw msg %></li> <% end %>@SchneemsThursday, June 30, 2011
  • 40. Errors in Rails • How do we add Errors to objects? • Pre-Built Validations validates :name, :presence => true, :uniqueness => true • Custom Validations validate :speed_must_be_divisible_by_three private def speed_must_be_divisible_by_three errors.add(:speed, "Speed is not divisible by three") unless speed%3 == 0 end@SchneemsThursday, June 30, 2011
  • 41. Ajax • What is Ajax • Asynchronous Javascript • Doesnt require page reload Maps.google.com Gowalla.com@SchneemsThursday, June 30, 2011
  • 42. Ajax • Example: 1. Send form data to Controller via JS 2. Controller parses form data 3. Controller returns info to browser 4. browser renders info 5. user sees no page reload 6. magic!!@SchneemsThursday, June 30, 2011
  • 43. Ajax • Considerations • User Expectations • Loading... • Don’t break the back button • No Javascript? • Principle of least surprise@SchneemsThursday, June 30, 2011
  • 44. Ajax • Loading • Usually Gif Files • Doesnt require page reload • Lets user know “something” is happening Loading...@SchneemsThursday, June 30, 2011
  • 45. Ajax • Loading • Usually Gif Files • Doesnt require page reload • Lets user know “something” is happening Loading...@SchneemsThursday, June 30, 2011
  • 46. Ajax • Don’t break the back button • Don’t do it • Don’t break user copied urls • Don’t do it • If you’re doing it • Don’t (and find a fix)@SchneemsThursday, June 30, 2011
  • 47. Ajax • What if I’m using IE 5? • Unobtrusive Javascript • No reduced Functionality • Rails 3 Does it@SchneemsThursday, June 30, 2011
  • 48. Ajax - In Rails • Unobtrusive Javascript <% form_tag search_path, :id => "search-form", :remote => true do %> <span>Username: </span> <%= text_field_tag username %> <%= submit_tag Submit%> <% end %> If no Javascript We Still use Normal Http Request <form action="/spot/show" data-remote="true" id="search-form" method="post"> <div> <input name="authenticity_token" type="hidden" value="7+2/AAuZF1X55xdRW0dHtx/ 7NL6aq8stuhqeQFeaSfI=" /> Code Here </div> <span>Username: </span> <input id="username" name="username" type="text" /> <input name="commit" type="submit" value="Submit" /> </form> </div>@SchneemsThursday, June 30, 2011
  • 49. Ajax - In Rails • Okay, so I asynchronously submit stuff, what do I do when I get a response? • Handle No response case (404,500, etc.) • Render a format • Controller responds to different formats respond_to do |format| format.html { redirect_to(person_list_url) } format.json format.xml { render :xml => @person.to_xml(:include => @company) } end@SchneemsThursday, June 30, 2011
  • 50. Ajax - In Rails • Different formats • Render Different results render :xml render :json render :text => “hey there” render :js => “alert(‘hello’);” render :template => “dogs/show” render :partial => “form” Partials?@SchneemsThursday, June 30, 2011
  • 51. Ajax - In Rails • Partials • Reusable html.erb templates app/views/dogs/_form.html.erb <%= form_for(@dog) do |f| %> <% if @dog.errors.any? %> ... <% end %> <% end %> <div class="field"> <%= f.label :name %><br /> <%= f.text_field :name %> </div> ... <div class="actions"> Code Here <%= f.submit %> </div> <% end %>@SchneemsThursday, June 30, 2011
  • 52. Ajax - In Rails • Partials - Stay DRY • Put partials into your code app/views/dogs/new.html.erb <h1>New dog</h1> <%= render form %> <%= link_to Back, dogs_path %> • Render partial from controller app/controllers/dogs.rb def new @dog = Dog.new respond_to do |format| format.html # new.html.erb format.js {render :partial => "form"} format.xml { render :xml => @dog } end end@SchneemsThursday, June 30, 2011
  • 53. Ajax • Don’t go overboard • Does it truly add to the functionality of the website? • Does it take away anything from the website? • What can we assume about the user? • When in doubt, don’t use it@SchneemsThursday, June 30, 2011
  • 54. Questions? Assignment for Next Week: Chapters 10, 11 http://guides.rubyonrails.org http://stackoverflow.com@SchneemsThursday, June 30, 2011