Screencast: Rails für mobile Geräte

Der mobile Markt wächst stetig weiter und hat andere Anforderungen an Webapplikationen auf dem mobilen Gerät als für Desktop-Geräte. Ryan zeigt in seinem Screencast wie Rails angepasst werden kann um mobile Geräte zu unterstützen. Dabei kommt mitunter jQTouch zum Einsatz.

 

Download:

Download (55.4 MB, 13:26)
alternative download for iPod & Apple TV (22.4 MB, 13:26)

 

Resourcen:

Quellcode:

[ruby]
# config/initializers/mime_types.rb
Mime::Type.register_alias "text/html", :mobile

# application_controller.rb
before_filter :prepare_for_mobile

private

def mobile_device?
if session[:mobile_param]
session[:mobile_param] == "1"
else
request.user_agent =~ /Mobile|webOS/
end
end
helper_method :mobile_device?

def prepare_for_mobile
session[:mobile_param] = params[:mobile] if params[:mobile]
request.format = :mobile if mobile_device?
end
[/ruby]

[html]
<!– views/layouts/application.html.erb –>
<%= stylesheet_link_tag ‚mobile‘ if mobile_device? %>

<p>
<% if mobile_device? %>
<%= link_to "Full Site", :mobile => 0 %>
<% else %>
<%= link_to "Mobile Site", :mobile => 1 %>
<% end %>
</p>

<!– views/layouts/application.mobile.erb –>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><%= h(yield(:title) || "Untitled") %></title>
<%= stylesheet_link_tag "/jqtouch/jqtouch.min.css", "/jqtouch/themes/apple/theme.min.css" %>
<%= javascript_include_tag "/jqtouch/jquery.1.3.2.min.js", "/jqtouch/jqtouch.min.js", "mobile" %>
<%= yield(:head) %>
</head>
<body>
<div class="current">
<%- if show_title? -%>
<div class="toolbar">
<%= link_to "Back", nil, :class => "back" unless current_page? root_path %>
<h1><%=h yield(:title) %></h1>
<%= link_to "Full Site", root_url(:mobile => 0), :class => "button", :rel => "external" %>
<%= yield(:toolbar) %>
</div>
<%- end -%>

<% unless flash.empty? %>
<div class="info">
<%- flash.each do |name, msg| -%>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<%- end -%>
</div>
<% end %>

<%= yield %>
</div>
</body>
</html>

<!– views/projects/index.mobile.erb –>
<% title "Projects" %>

<ul>
<% for project in @projects %>
<li class="arrow">
<%= link_to h(project.name), project %>
<small class="counter"><%= project.tasks.size %></small>
</li>
<% end %>
</ul>

<ul><li class="arrow"><%= link_to "New Project", new_project_path %></li></ul>
[/html]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.