Rails 3 Beginner to Builder 2011 Week 4

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

Beginner to Builder
Week 4
Richard Schneeman
@schneems

June, 2011

Rails Hotline
• Call them and ask rails questions
• (877)- 817- 4190
• Free

@Schneems

Rails - Week4
• Html, Javascript and CSS
• Error Handling
• begin - rescue - end
• Ajax - “Web 2.0”
• What is it?
• Partials
• Considerations
@Schneems

HTML
• Hyper Text Markup Language
• Used to create Webpages

@Schneems

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">

<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">
<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">
<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

HTML

@Schneems

HTML elements
• Most elements have start and end
tags
• can have optional attributes
<p>This is an element</p>

<br />

<h1 class=”foo”>
This is an element with an attribute
</h1>

@Schneems

.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

.html.erb
<%= "This is an ERB Display Tag " %>

<% foo = "Embedded expression does not render" %>

<% 3.times do |i| %>
<%= "Hello #{i}" %>
<% end %>

@Schneems

.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

CSS
• Cascading Style Sheets
• Rules Based Style
• Casscade
• What happens if more than one rule
is applied?

@Schneems

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

CSS
• Inline styles
• Embedded style
• External style

@Schneems

CSS

<p style="color:black">tag</p>

<style type="text/css">
p {color:black}
</style>

<link rel="stylesheet"
type="text/css" href="mystyle.css" />

@Schneems

CSS
• Inheritance
• speciﬁcity
• location

@Schneems

CSS
• Inheritence
p {
color: blue;
}

<p>
<span>Hello There</span>
</p>

@Schneems

CSS
• Speciﬁcity
* {} /* 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 */

@Schneems

CSS
• Location
• Later rules are more important
p {
color: blue;
}

p {
color: red;
}

paragraph will be red
@Schneems

Browser Wars
• Diﬀerent browsers
• same content
• Diﬀerent Results
• IE
• Safari
• Chrome
• FireFox
• etc.

@Schneems

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

Javascript
• Can manipulate the DOM
• DOM
• Document Object Model

@Schneems

DOM

@Schneems
Document Object Model

JavaScript Libraries
• Written in JavaScript
• Makes writing JavaScript easier
• jQuery (rails >= 3.1)
• Prototype (rails < 3.1)

@Schneems

jQuery
• The pre-packaged JavaScript library
with rails 3.1

// Javascript
window.document.body.style.display = 'none';
// jQuery
$('body').hide()

@Schneems

jQuery in Rails 3
• Use jQuery gem

gem install "jquery-rails"
rails generate jquery:install

@Schneems

JavaScript Debugging
• Firefox #=> FireBug
• Safari #=> Inspect Element
• Chrome #=> Inspect Element
• IE #=> Don’t ever use IE

@Schneems

CSS Debugging
• Firefox #=> FireBug
• Safari #=> Inspect Element
• Chrome #=> Inspect Element
• IE #=> Don’t ever use IE

@Schneems

Error Handling
• What is an Exception?
• How can we handle Exceptions
• Rails’ errors attributes

@Schneems

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

Raise
• Code conﬁdent
• 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

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

Error Handling
• 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

Error Handling
rescue defaults to StandardError

rescue

rescue can handle different types of exceptions

rescue SyntaxError

rescue Exception will rescue any exception

rescue Exception

@Schneems

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 ﬁle into a text editor)

@Schneems

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

Error Handling
• Logger
• Different log levels filtered by logger
Example: Levels

config/environments/production.rb

config.log_level = :debug

@Schneems

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

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

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

Ajax
• What is Ajax
• Asynchronous Javascript
• Doesn't require page reload

Maps.google.com Gowalla.com
@Schneems

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

Ajax
• Considerations
• User Expectations
• Loading...
• Don’t break the back button
• No Javascript?
• Principle of least surprise

@Schneems

Ajax
• Loading
• Usually Gif Files
• Doesn't require page reload
• Lets user know “something” is
happening
Loading...

@Schneems

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 ﬁnd a ﬁx)

@Schneems

Ajax
• What if I’m using IE 5?
• Unobtrusive Javascript
• No reduced Functionality
• Rails 3 Does it

@Schneems

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

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

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

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

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

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

Questions?
Assignment for Next Week: Chapters 10, 11

http://guides.rubyonrails.org
http://stackoverﬂow.com

@Schneems

Rails 3 Beginner to Builder 2011 Week 4

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Rails 3 Beginner to Builder 2011 Week 4

Semelhante a Rails 3 Beginner to Builder 2011 Week 4 (20)

Mais de Richard Schneeman

Mais de Richard Schneeman (9)

Último

Último (14)

Rails 3 Beginner to Builder 2011 Week 4