Screencast: DataTables

DataTables erleichtert die Erstellung von Tabellen in HTML und unterstützt dabei seitenweise Navigation, Sortierung und Suchen. Ryan zeigt in diesem Screencast wie es in Rails eingesetzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
group :assets do
gem ‚jquery-datatables-rails‘, github: ‚rweng/jquery-datatables-rails‘
gem ‚jquery-ui-rails‘
end

gem ‚will_paginate‘
[/ruby]

app/assets/javascripts/application.js

[javascript]
//= require dataTables/jquery.dataTables
[/javascript]

app/assets/stylesheets/application.css

[css]
/*
*= require jquery.ui.core
*= require jquery.ui.theme
*= require dataTables/src/demo_table_jui
*/
[/css]

app/assets/javascripts/products.js.coffee

[javascript]
jQuery ->
$(‚#products‘).dataTable
sPaginationType: "full_numbers"
bJQueryUI: true
bProcessing: true
bServerSide: true
sAjaxSource: $(‚#products‘).data(’source‘)
[/javascript]

views/products/index.html.erb

[html]
<table id="products" class="display" data-source="<%= products_url(format: "json") %>">
<thead>
<tr>
<th>Product Name</th>
<th>Category</th>
<th>Release Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
[/html]

products_controller.rb

[ruby]
def index
respond_to do |format|
format.html
format.json { render json: ProductsDatatable.new(view_context) }
end
end
[/ruby]

app/datatables/products_datatable.rb

[ruby]
class ProductsDatatable
delegate :params, :h, :link_to, :number_to_currency, to: :@view

def initialize(view)
@view = view
end

def as_json(options = {})
{
sEcho: params[:sEcho].to_i,
iTotalRecords: Product.count,
iTotalDisplayRecords: products.total_entries,
aaData: data
}
end

private

def data
products.map do |product|
[
link_to(product.name, product),
h(product.category),
h(product.released_on.strftime("%B %e, %Y")),
number_to_currency(product.price)
]
end
end

def products
@products ||= fetch_products
end

def fetch_products
products = Product.order("#{sort_column} #{sort_direction}")
products = products.page(page).per_page(per_page)
if params[:sSearch].present?
products = products.where("name like :search or category like :search", search: "%#{params[:sSearch]}%")
end
products
end

def page
params[:iDisplayStart].to_i/per_page + 1
end

def per_page
params[:iDisplayLength].to_i > 0 ? params[:iDisplayLength].to_i : 10
end

def sort_column
columns = %w[name category released_on price]
columns[params[:iSortCol_0].to_i]
end

def sort_direction
params[:sSortDir_0] == "desc" ? "desc" : "asc"
end
end
[/ruby]

Screencast: Globalize3

Rails bringt bereits standardmäßig die Möglichkeit mit eine mehrsprachige Applikation zu bauen. Dazu werden Textbausteine in Yaml-Dateien erstellt und in der Applikation verwendet. Dies reicht in den meisten Fällen aus, aber ist nur bedingt geeignet um große und dynamisch erstellte Textmengen zu verwalten. Hier hat Globalize3 seine Stärken. Globalize3 ist ein Gem mit welchem mehrsprachige Texte in Datenbanken verwaltet werden kann. Es ist relativ einfach einzubinden und zu verwenden . Ryan zeigt in diesem Screencast wie es funktioniert.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚globalize3‘
[/ruby]

terminal

[bash]
rails g migration create_article_translations
rake db:migrate
rails c
[/bash]

rails console

[ruby]
I18n.locale
Article.first.name
I18n.locale = :wk
Article.first.update_attribute(:name, "Ahhyya")
I18n.locale = :en
[/ruby]

db/migrate/create_article_translations.rb

[ruby]
class CreateArticleTranslations < ActiveRecord::Migration
def up
Article.create_translation_table!({
name: :string,
content: :text
}, {
migrate_data: true
})
end

def down
Article.drop_translation_table! migrate_data: true
end
end
[/ruby]

models/article.rb

[ruby]
translates :name, :content
[/ruby]

config/application.rb

[ruby]
config.i18n.fallbacks = true
[/ruby]

Screencast: Copycopter

Copycopter ist eine Plugin um Texte in Rails auf einfache Weise zu bearbeiten. Erst kürzlich wurde es von Thoughtbot als OpenSource freigegeben und steht nun somit allen Interessierten zur Verfügung. Ryan zeigt diese Woche wie es installiert und in eigenen Applikationen benutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

terminal

[bash]
heroku login
git clone git://github.com/copycopter/copycopter-server.git
cd copycopter-server
heroku create –stack cedar
bundle install –without=test # if heroku command fails
git push heroku master
heroku run rake db:migrate
heroku restart
heroku run rake copycopter:project NAME=Store USERNAME=ryanb PASSWORD=secret
heroku open
[/bash]

Gemfile

[ruby]
gem ‚copycopter_client‘, ‚2.0.0‘
[/ruby]

config/initializers/copycopter.rb

[ruby]
CopycopterClient.configure do |config|
config.api_key = ‚8df4bc164dd6bc5574eb1efd0499ddcb‘
config.host = ’strong-dawn-1901.herokuapp.com‘
end
[/ruby]

app/views/products/index.html.erb

[html]
<h1><%= t "products.headline", default: "Browse Products" %></h1>
<em><%= t ".tagline", default: "We have what you need at a great low price." %></em>
[/html]

Screencast: Compass & CSS Sprites

Compass ist eine Ergänzung zu SASS indem es viele Benutzte Elemente noch weiter vereinfacht. Es werden z.B. vorgefertigte Mixin-Ins, Funktionen und mehr zur Verfügung gestellt. In diesem Screencast zeigt Ryan wie es verwendet wird und zusätzlich wie Compass für CSS-Sprites genutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
group :assets do
gem ‚compass-rails‘
end
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "compass";
@import "compass/reset";
@import "layout";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
h1 {
font-size: 28px;
font-weight: bold;
margin: 18px 0;
}

ul.horizontal {
@include horizontal-list;
}

@import "icons/*.png";
@include all-icons-sprites;

#nav_bar {
// …
@include background-image(linear-gradient(#5c5c5c, #111111));
}
[/css]

app/views/layouts/application.html.erb

[html]
<li><a class="icons-itunes" href="/itunes"></a></li>
<li><a class="icons-twitter" href="/twitter"></a></li>
<li><a class="icons-facebook" href="/facebook"></a></li>
<li><a class="icons-rss" href="/rss"></a></li>
[/html]

Screencast: Einführung in das Refinery CMS

Refinery ist ein CMS auf Basis von Rails und ermöglicht innerhalb kürzester Zeit ein lauffähiges System aufzusetzen. Wer schnell ein einfach bedienbares SMS aufsetzen möchte sollte sich dieses hier anschauen. Ryan führ in dieser Woche in Refinery ein und zeigt wie man damit einen Auftritt erstellt.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

terminal

[bash]
brew install imagemagick
gem install refinerycms
refinerycms piano_plus
cd piano_plus
rails s
[/bash]

config/initializers/refinery/core.rb

[ruby]
config.site_name = "Piano Plus"
[/ruby]

config/initializers/refinery/pages.rb

[ruby]
config.new_page_parts = true
[/ruby]

rails console

[ruby]
Refinery::Page.first.parts.create! title: "Banner"
[/ruby]

Screencast: Besseres Sass mit Bourbon

Bourbon ist ein Sass Mixin und stellt zahlreiche Funktionen für die Erstellung von Design-Elementen zur Verfügung. Dabei werden für die verschiedenen Browser auch die teilweise noch nötigen Prefixe verwendet. Ryan zeigt diese Woche wie es mit Rails zusammen verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚bourbon‘
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "bourbon";
@import "layout";
@import "projects";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
body {
margin: 0;
padding: 0;
background-color: #FFF;
font-size: 14px;
font-family: $verdana;
}

#header {
color: #FFF;
padding: 15px 100px;
font-size: 30px;
font-weight: bold;
@include linear-gradient(#777, #444);
@include box-shadow(0 0 6px 3px #000);
}

#container {
margin: 0 100px;
}

a {
color: #2D6DD2;
}
[/css]

app/assets/stylesheets/projects.css.scss

[css]
.project {
border: solid 1px #AAA;
margin: 20px 0;
padding: 7px 12px;
@include border-radius(6px);
@include transition(all, 500ms, ease-in-out);

&:hover { background-color: #F8FCCF; }

h2 {
margin: 0;
a { text-decoration: none; }
}
}

.new_project {
@include button(simple, #3FB344);
text-decoration: none;
font-size: 16px;
}
[/css]

Screencast: Einführung in Twitter Bootstrap

Twitter Bootstrap bietet ein Toolkit für die Erstellung von Webseiten, welches verschiedenste Elemente mitbringt und somit die Basisarbeiten vereinfachen soll. Es kann selbstverständlich auch in Rails-Applikationen eingesetzt werden und mit den entsprechenden Plugins wird auch hier dem Entwickler arbeit abgenommen. Ryan führ in diesem Screencast vor wie die Integration in Rails erfolgen und wie es verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

terminal

[bash]
rails new store
rails g scaffold product name price:decimal –skip-stylesheets
rake db:migrate
rails g bootstrap:install
rails g bootstrap:themed products -f
[/bash]

Gemfile

[ruby]
group :assets do
gem ‚twitter-bootstrap-rails‘
end
[/ruby]

layouts/application.html.erb

[html]
<!DOCTYPE html>
<html>
<head>
<title>Store</title>
<!–[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]–>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Browse Products", products_path %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="span9"><%= yield %></div>
<div class="span3">
<h2>About Us</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
[/html]

app/assets/stylesheets/bootstrap_and_override.css.less

[css]
@import "twitter/bootstrap/bootstrap";

body { padding-top: 60px; }

@import "twitter/bootstrap/responsive";
[/css]

Screencast: ActiveAttr in eigenen Klassen verwenden

Die Entwickler von ActiveAttr sagen, dass ihr Plugin die Dinge zur Verfügung stellt, welche nicht von ActiveModel geliefert werden. Das Plugin bietet wirklich einige interessante Ansätze und erleichtert die Arbeit mit selbst-erstellen Modelen um einiges. Ryan zeigt in diesem Screencast wie es zum Beispiel in Modelen ohne zugehörige Datenbank-Tabelle eingesetzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚active_attr‘
[/ruby]

models/message.rb

[ruby]
class Message
include ActiveAttr::Model

attribute :name
attribute :email
attribute :content
attribute :priority # type: Integer, default: 0

attr_accessible :name, :email, :content
validates_presence_of :name
validates_format_of :email, :with => /^[-a-z0-9_+.]+@([-a-z0-9]+.)+[a-z0-9]{2,4}$/i
validates_length_of :content, :maximum => 500
end
[/ruby]

rails console

[ruby]
m = Message.new(priority: 1)
m.priority
m.priority = 1
m.priority?
[/ruby]

controllers/messages_controller.rb

[ruby]
def new
@message = Message.new
end

def create
@message = Message.new(params[:message])
if @message.valid?
# TODO send message here
redirect_to root_url, notice: "Message sent! Thank you for contacting us."
else
render "new"
end
end
[/ruby]

Screencast: Daten an JavaScript übergeben

Fast jeder hatte bereits die Anforderung Daten zwischen einer Rails-Applikation im Backend mit Java-Script im Frontend auszutauschen. Sei es auch nur um bestimmte Teile der Seite mit Java-Script zu markieren (z.B. Highlighting von Navigation oder Suchbegriffen). Es gibt verschiedenste Ansätze und alle bringen ihre eigenen Vor- und Nachteile mit. In diesem Screencast zeigt Ryan Drei verschiedene Ansätze wie es auch implementiert werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

products/index.html.erb

[html]
<%= javascript_tag do %>
window.productsURL = "<%=j products_url %>";
window.products = <%=raw Product.limit(10).to_json %>;
<% end %>
[/html]

app/assets/javascripts/products.js.coffee

[javascript]
jQuery ->
alert productsURL
[/javascript]

products/index.html.erb

[html]
<%= content_tag "div", id: "products", data: {products: Product.limit(10)} do %>
Loading products…
<% end %>
[/html]

app/assets/javascripts/products.js.coffee

[javascript]
jQuery ->
alert $(‚#products‘).data(‚products‘)
[/javascript]

Gemfile

[ruby]
gem ‚gon‘
[/ruby]

layouts/application.html.erb

[html]
<%= include_gon %>
[/html]

products_controller.rb

[ruby]
def index
gon.products = Product.limit(10)
# or
gon.rabl "app/views/products/index.json.rabl", as: "products"
end
[/ruby]

products/index.json.rabl

[javascript]
collection Product.limit(10)

attributes :id, :name, :price
[/javascript]

app/assets/javascripts/products.js.coffee

[javascript]
alert gon.products if gon
[/javascript]

Screencast: RABL – Ruby API Builder Language

RABL ist ein Templating-System für die Frameworks Ruby on Rails und Padrino. Es soll den Entwickler bei der Erstellung von JSON und Generierung von Documenten mittels ActiceRecords „to_json“ unterstützen. Besonders bei komplexen JSON Dokumenten bietet einige Helfer welche die Arbeit erleichtern sollen. In diesem Screencast erfahrt ihr wie die RABL DSL eingesetzt werden kann, um JSON und XML Responses in Rub-Applikationen zu estellen.

 

Downloads in verschiedenen Formaten:

mp4
mp4
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚rabl‘
[/ruby]

config/initializers/rabl_config.rb

[ruby]
Rabl.configure do |config| config.include_json_root = false end
[/ruby]

app/views/articles/show.json.rabl

[javascript]
object @article
attributes :id, :name, :published_at

if current_user.admin?
node(:edit_url) { |article| edit_article_url(article) }
end

child :author do
attributes :id, :name
node(:url) { |author| author_url(author) }
end

child :comments do
attributes :id, :name, :content
end
[/javascript]

app/views/articles/index.json.rabl

[javascript]
collection @articles

extends "articles/show"
[/javascript]

app/views/articles/index.html.erb

[html]
<div id="articles" data-articles="<%= render(template: "articles/index.json.rabl") %>">
[/html]