Screencast: jQuery Tokeninput

Autokompletierung ist eine hilfreiche Funktion für viele Anwender. Mit jQuery Tokeninput ist die relativ einfach umzusetzen. Ryan zeigt zudem noch wie es im Zusammenhang mit Rails eingesetzt werden kann.

 

Download:

Download(21.7 MB, 11:09)
Alternativer Download für iPod & Apple TV(20.4 MB, 11:09)

 

Resourcen:

 

Quellcode:

[bash]
bundle
rails g jquery:install
[/bash]

[ruby]
# Gemfile
gem "jquery-rails"

# models/book.rb
class Book < ActiveRecord::Base
attr_accessible :name, :author_tokens
has_many :authorships
has_many :authors, :through => :authorships
attr_reader :author_tokens

def author_tokens=(ids)
self.author_ids = ids.split(",")
end
end

# authors_controller.rb
def index
@authors = Author.where("name like ?", "%#{params[:q]}%")
respond_to do |format|
format.html
format.json { render :json => @authors.map(&:attributes) }
end
end
[/ruby]

[html]
<!– layouts/application.html.erb –>
<%= stylesheet_link_tag "application", "token-input-facebook" %>
<%= javascript_include_tag :defaults, "jquery.tokeninput" %>

<!– books/_form.html.erb –>
<p>
<%= f.label :author_tokens, "Authors" %><br />
<%= f.text_field :author_tokens, "data-pre" => @book.authors.map(&:attributes).to_json %>
</p>
[/html]

[javascript]
// application.js
$(function() {
$("#book_author_tokens").tokenInput("/authors.json", {
crossDomain: false,
prePopulate: $("#book_author_tokens").data("pre"),
theme: "facebook"
});
});
[/javascript]

Screencast: Offline Applikationen Teil 2

In dieser Woche zeigt Ryan in seinem zweiten Teil zu Offline-Applikationen wie z.B. HTML5 Storage, zum speichern von Offline-Daten genutzt werden kann.

 

Download:

Download(27.2 MB, 14:51)
Alternativer Download für iPod & Apple TV(25.1 MB, 14:51)

 

Resourcen:

 

Quellcode:

[bash]
curl https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js > public/javascripts/jquery.tmpl.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/jquery.offline.js > public/javascripts/jquery.offline.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/json.js > public/javascripts/json.js
[/bash]

[ruby]
# items_controller.rb
respond_to :html, :json

def index
@items = Item.all
respond_with(@items)
end
[/ruby]

[html]
<!– layouts/application.html.erb –>
<%= javascript_include_tag :defaults, "jquery.tmpl", "json", "jquery.offline" %>

<!– items/index.html.erb –>
<script type="text/html" id="item_template">
<li>${item.name}</li>
</script>
<ol id="items">
<li><em>Loading items…</em></li>
</ol>
[/html]

[javascript]
// application.js
$(function() {
if ($.support.localStorage) {
$(window.applicationCache).bind("error", function() {
console.log("There was an error when loading the cache manifest.");
});
if (!localStorage["pendingItems"]) {
localStorage["pendingItems"] = JSON.stringify([]);
}
$.retrieveJSON("/items.json", function(data) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
$("#items").html($("#item_template").tmpl(data.concat(pendingItems)));
});
$("#new_item").submit(function(e) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
var item = {"data":$(this).serialize(), "item":{"name":$("#item_name").val()}};
$("#item_template").tmpl(item).appendTo("#items");
pendingItems.push(item);
localStorage["pendingItems"] = JSON.stringify(pendingItems)
$("#item_name").val("");
sendPending();
e.preventDefault();
});
function sendPending() {
if (window.navigator.onLine) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
if (pendingItems.length > 0) {
var item = pendingItems[0];
$.post("/items", item.data, function(data) {
var pendingItems = $.parseJSON(localStorage["pendingItems"]);
pendingItems.shift();
localStorage["pendingItems"] = JSON.stringify(pendingItems)
setTimeout(sendPending, 100);
});
}
}
}
sendPending();
$(window).bind("online", sendPending);
} else {
alert("Try a different browser.");
}
});
[/javascript]

Screencast: Polling nach Aktualisierungen

Bei häufig aktualisierten Daten auf der Serverseite, ist es hilfreich diese dem Benutzer automatisch anzuzeigen. In diesem Screencast zeigt Ryan wie dies mit JQuery gelöst werden kann.

 

Download:

Download(23.2 MB, 16:07)
Alternativer Download für iPod & Apple TV(22.3 MB, 16:07)

 

Resourcen:

 

Quellcode:

[bash]
bundle install
rails g jquery:install
[/bash]

[ruby]
# Gemfile
gem ‚jquery-rails‘

# comments_controller.rb
def index
@comments = Comment.where("article_id = ? and created_at > ?", params[:article_id], Time.at(params[:after].to_i + 1))
end
[/ruby]

[html]
<!– layouts/application.html.erb –>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>

<!– articles/show.html.erb –>
<div id="article" data-id="<%= @article.id %>">

<div class="comment" data-time="<%= comment.created_at.to_i %>">

<!– comments/index.js.erb –>
<% unless @comments.empty? %>
$("#comments").append("<%=raw escape_javascript(render(@comments)) %>");
$("#article h2").text($(".comment").length + " comments");
<% end %>
[/html]

JQuery 1.4 erschienen

Die beliebte JavaScript Bibliothek JQuery ist in der Version 1.4 erschienen. Die neuen Version bring einige Neuerungen und Erweiterungen mit.
Zudem haben die Entwickler die Geschwindigkeit drastisch verbessert. In manchen Bereichen sogar um das Doppelte oder Dreifache.

Eine Liste der Änderungen kann man auf http://jquery14.com/day-01/jquery-14 nachlesen. Diese Seite ist extra diesem Release gewidmet und enthält viele wertvolle Informationen zu JQuery.

Das aktuelle Paket kann auf den Projektseite (http://jquery.com/) runtergeladen werden. Es werden zwei verschieden Versionen unterscheiden, die sich lediglich in ihrer Größe unterscheiden. Eine „verkleinerete“ Version für den produktiven Einsatz und eine weitere mit gleichen Inhalt, allerdings in einem „lesbaren Zustand“.

Projektseite: http://jquery.com/

Screencast: Formulare mit verschachtelten Modellen Teil 2

In dieser Woche geht es weiter mit dem zweiten Teil von Ryans Screencast zu dem Thema „Formulare mit verschachtelten Modellen“. Er wie weitere Felder dynamisch mit JavaScript, über Prototype oder Query, hinzugefügt werden können.

Download:

Download (15.9 MB, 12:40)
alternative download for iPod & Apple TV (20.2 MB, 12:40)

 

Resourcen:

Quellcode:

[html]
<!– _form.html.erb –>
<p><%= link_to_add_fields "Add Question", f, :questions %></p>

<!– _question_fields.html.erb –>
<%= link_to_remove_fields "remove", f %>

<p><%= link_to_add_fields "Add Answer", f, :answers %></p>

<!– _answer_fields.html.erb –>
<%= link_to_remove_fields "remove", f %>
[/html]

[javascript]
// application.js
function remove_fields(link) {
$(link).previous("input[type=hidden]").value = "1";
$(link).up(".fields").hide();
}

function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).up().insert({
before: content.replace(regexp, new_id)
});
}

// application_jquery.js
function remove_fields(link) {
$(link).prev("input[type=hidden]").val("1");
$(link).closest(".fields").hide();
}

function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).parent().before(content.replace(regexp, new_id));
}
[/javascript]

jQuery Cookbook

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully realize its breadth and depth; this cookbook shortens the learning curve considerably. With these recipes, you’ll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces.

Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles. You also get recipes on advanced topics, such as methods for applying jQuery to large projects.

  • Solve problems involving events, effects, dimensions, forms, themes, and user interface elements
  • Learn how to enhance your forms, and how to position and reposition elements on a page
  • Make the most of jQuery’s event management system, including custom events and custom event data
  • Create UI elements-such as tabs, accordions, and modals-from scratch
  • Optimize your code to eliminate bottlenecks and ensure peak performance
  • Learn how to test your jQuery applications

The book’s contributors include:

  • Cody Lindley
  • James Padolsey
  • Ralph Whitbeck
  • Jonathan Sharp
  • Michael Geary and Scott González
  • Rebecca Murphey
  • Remy Sharp
  • Ariel Flesler
  • Brian Cherne
  • Jörn Zaefferer
  • Mike Hostetler
  • Nathan Smith
  • Richard D. Worth
  • Maggie Wachs, Scott Jehl, Todd Parker, and Patty Toland
  • Rob Burns

Screencast: 7 Sicherheitstips

Auf Screencasts.com ist heute ein weiterer Screencast erschienen. In dieser Folge werden sieben Tips beschrieben um die Sicherheit innerhalb Rails-Applikationen zu erhöhen.

Downloadlinks:

Download (22.2 MB, 14:53)

Alternativer Download for iPod & Apple TV(16.9 MB, 14:53)

Weitere Ressourcen:

  • Rails Security Guide
  • Full episode source code

Links und Quellcodes zu den einzelnen Beispielen:

1 Mass Assignment:

[ruby]

# script/console
p = Project.find(2)
p.update_attributes(:task_ids => [4])
p.tasks

# models/project.rb
attr_accessible :name, :photo
[/ruby]

2 File Uploads
Disabling Script Execution with Apache

[ruby]
# models/project.rb
validates_attachment_content_type :photo, :content_type => [‚image/jpeg‘, ‚image/png‘]
# more security required
[/ruby]

3 Filter Log Params
Episode 9: Filtering Sensitive Logs

[ruby]
# application_controller.rb
filter_parameter_logging :password
[/ruby]

4 CSRF Protection
Cross-site Request Forgery
Rails authenticity token with jQuery

[ruby]
# application_controller.rb
protect_from_forgery
[/ruby]

5 Authorizing Ownership

[ruby]
# projects_controller.rb
def show
@project = current_user.projects.find(params[:id])
end
[/ruby]

6 SQL Injection
SQL Injection
Episode 25: SQL Injection

[ruby]
# projects_controller.rb
def index
@projects = current_user.projects.all(:conditions => ["name like ?", "%#{params[:search]}%"])
end
[/ruby]

7 HTML Injection (XSS)
Cross Site Scripting
Episode 27: Cross Site Scripting

[ruby]
<!– projects/show.html.erb –>
<%=h task.name %>
[/ruby]