Screencast: Rails für mobile Geräte

1.02.2010

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:

# 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

<!-- 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>
Tags: , , , ,

Eingestellt am 01.02.2010 um 15:34

Kategorie: Tutorials

Speichern / Merken / Weitersagen:
  • Print
  • PDF
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • email
  • LinkedIn
  • Live
  • MisterWong.DE
  • MisterWong
  • MySpace
  • Netvibes
  • Reddit
  • Technorati
  • Tumblr
  • Webnews.de
  • Yahoo! Bookmarks
  • Yigg
  • Slashdot
  • Twitter
  • Twitthis

Kommentare für diesen Artikel wurden geschlossen.