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
call girls in candolim beach 9870370636] NORTH GOA ..
Rails 3 Beginner to Builder 2011 Week 4
1. Did your Homework?
• Or promise you will
• (Chapters 8 & 9)
• Grab A Gowalla Tee Shirt!!
• Sizes run a bit small
@Schneems
Thursday, June 30, 2011
2. Beginner to Builder
Week 4
Richard Schneeman
@schneems
June, 2011
Thursday, June 30, 2011
3. Rails Hotline
• Call them and ask rails questions
• (877)- 817- 4190
• Free
@Schneems
Thursday, June 30, 2011
4. Rails - Week4
• Html, Javascript and CSS
• Error Handling
• begin - rescue - end
• Ajax - “Web 2.0”
• What is it?
• Partials
• Considerations
@Schneems
Thursday, June 30, 2011
5. HTML
• Hyper Text Markup Language
• Used to create Webpages
@Schneems
Thursday, 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 you're 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>
@Schneems
Thursday, 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>
@Schneems
Thursday, 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>
@Schneems
Thursday, 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 %>
@Schneems
Thursday, 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>
@Schneems
Thursday, June 30, 2011
12. CSS
• Cascading Style Sheets
• Rules Based Style
• Casscade
• What happens if more than one rule
is applied?
@Schneems
Thursday, 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; }
@Schneems
Thursday, June 30, 2011
19. CSS
• Location
• Later rules are more important
p {
color: blue;
}
p {
color: red;
}
paragraph will be red
@Schneems
Thursday, June 30, 2011
20. Browser Wars
• Different browsers
• same content
• Different Results
• IE
• Safari
• Chrome
• FireFox
• etc.
@Schneems
Thursday, 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
@Schneems
Thursday, June 30, 2011
22. Javascript
• Can manipulate the DOM
• DOM
• Document Object Model
@Schneems
Thursday, June 30, 2011
23. DOM
@Schneems
Document Object Model
Thursday, June 30, 2011
24. JavaScript Libraries
• Written in JavaScript
• Makes writing JavaScript easier
• jQuery (rails >= 3.1)
• Prototype (rails < 3.1)
@Schneems
Thursday, June 30, 2011
25. jQuery
• The pre-packaged JavaScript library
with rails 3.1
// Javascript
window.document.body.style.display = 'none';
// jQuery
$('body').hide()
@Schneems
Thursday, June 30, 2011
26. jQuery in Rails 3
• Use jQuery gem
gem install "jquery-rails"
rails generate jquery:install
@Schneems
Thursday, June 30, 2011
27. JavaScript Debugging
• Firefox #=> FireBug
• Safari #=> Inspect Element
• Chrome #=> Inspect Element
• IE #=> Don’t ever use IE
@Schneems
Thursday, June 30, 2011
28. CSS Debugging
• Firefox #=> FireBug
• Safari #=> Inspect Element
• Chrome #=> Inspect Element
• IE #=> Don’t ever use IE
@Schneems
Thursday, June 30, 2011
29. Error Handling
• What is an Exception?
• How can we handle Exceptions
• Rails’ errors attributes
@Schneems
Thursday, 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
@Schneems
Thursday, 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"
@Schneems
Thursday, 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
@Schneems
Thursday, 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
@Schneems
Thursday, 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
@Schneems
Thursday, 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)
@Schneems
Thursday, 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
@Schneems
Thursday, 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
@Schneems
Thursday, 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 %>
@Schneems
Thursday, 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
@Schneems
Thursday, June 30, 2011
41. Ajax
• What is Ajax
• Asynchronous Javascript
• Doesn't require page reload
Maps.google.com Gowalla.com
@Schneems
Thursday, 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!!
@Schneems
Thursday, June 30, 2011
43. Ajax
• Considerations
• User Expectations
• Loading...
• Don’t break the back button
• No Javascript?
• Principle of least surprise
@Schneems
Thursday, June 30, 2011
44. Ajax
• Loading
• Usually Gif Files
• Doesn't require page reload
• Lets user know “something” is
happening
Loading...
@Schneems
Thursday, June 30, 2011
45. Ajax
• Loading
• Usually Gif Files
• Doesn't require page reload
• Lets user know “something” is
happening
Loading...
@Schneems
Thursday, 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)
@Schneems
Thursday, June 30, 2011
47. Ajax
• What if I’m using IE 5?
• Unobtrusive Javascript
• No reduced Functionality
• Rails 3 Does it
@Schneems
Thursday, 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>
@Schneems
Thursday, 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
@Schneems
Thursday, 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?
@Schneems
Thursday, 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 %>
@Schneems
Thursday, 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
@Schneems
Thursday, 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
@Schneems
Thursday, June 30, 2011
54. Questions?
Assignment for Next Week: Chapters 10, 11
http://guides.rubyonrails.org
http://stackoverflow.com
@Schneems
Thursday, June 30, 2011