Everyday Rails

Mobile Rails applications, part 2: jQTouch with Rails 3

By Aaron Sumner, August 29, 2010.

In my last post I shared my first steps toward creating a mobile version of a Rails application. I looked at the Mobile Fu plugin, but wasn’t happy with how it played with other parts what you might want to do with a Rails application. So referring to a couple of screencasts I moved forward with hand-rolling my mobile detection code—as it turns out, it’s not hard at all to do.

Prerequisites

I’ll assume you’ve watched the Railscasts episode on mobile websites and followed the steps in it to prepare your application for mobile devices. Although it was written with Rails 2.3 in mind, I’m not having problems with it in Rails 3 RC 2.

The Railscast is an excellent start, but after watching Peepcode’s episode on jQTouch I learned a few small touches I’d been missing to make my app work like an app. If you’re still getting a feel for jQTouch, the Peepcode episode is worth the money. It doesn’t cover some things I want to get into later (like theming), but it is more than enough to get you started with a mobile Rails application.

Layout file

My mobile layout file is mostly the same as Railscasts’ version; I just converted it to Haml. I had a problem with indentation when I used html2haml, but that was easily fixed (note: like the Railscasts code, I’m also using the Nifty Generators gem). I removed the line that generates a Back button in the layout because based on what I know about jQTouch I think it needs to be in the view that needs a Back button to exist. This could be refactored but I’ll worry about that later.

Here’s what my layout currently looks like, using jQTouch’s Apple theme:

  # app/views/layouts/application.mobile.haml
  
  !!! Strict
  %html{html_attrs}
    %head
      %meta{:charset => "UTF-8"}/
      %title= yield(:title) || "Untitled"
      = 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)
    %body
      .current
        - if show_title?
          .toolbar
            %h1= h yield(:title)
            = link_to "Full Site", root_url(:mobile => 0), :class => "button", :rel => "external"
            = yield(:toolbar)
        - unless flash.empty?
          .info
            - flash.each do |name, msg|
              = content_tag :div, msg, :id => "flash_#{name}"
        = yield
        

Controller

This is another thing I picked up from Peepcode: Code for mobile views must be rendered without a layout; jQTouch then correctly replaces the current div with the code from the server and properly does the right-to-left slide transition.

  # app/controllers/recipes_controller.rb

  def show
    @recipe = Recipe.find(params[:id])
    respond_to do |format|
      format.html
      format.mobile { render :layout => false }
    end
  end

Views

First, here’s what the index method’s view looks like. It returns a basic unordered list of my recipes, each with the arrow style that jQTouch uses.

  # app/views/recipes/index.mobile.haml

  - title Recipes

  %ul.rounded
    - @recipes.each do |recipe|
      %li.arrow
        = link_to recipe.name, recipe
        = link_to recipe.total_time, recipe

Second, the view for my show method. Note that the .toolbar code is duplicated here; I haven’t done any refactoring of this yet but will eventually create a helper to handle this. Note I have the .toolbar here, with a Back button.

  # app/views/recipes/show.mobile.haml
  
  - title @recipe.name

  %div#recipe
    .toolbar
      = link_to "Back", nil, :class => "back"
      %h1= Recipes
    - unless flash.empty?
      .info
        - flash.each do |name, msg|
          = content_tag :div, msg, :id => "flash_#{name}"

    %h2= @recipe.name

    %ul.rounded
      %li= "Prep time: #{@recipe.prep_time}"
      %li= "Cook time: #{@recipe.cook_time}"
      %li= "Total time: #{@recipe.total_time}"
      %li= "Servings: #{@recipe.servings}"

    %h2 Ingredients

    %ul.rounded
      - @recipe.ingredients.split("\r\n").each do |ingredient|
        %li= ingredient

    %h2 Directions

    %ul.rounded
      - @recipe.directions.split("\r\n").each do |step|
        %li= step

Next steps

I still have a few things to do, for a future post. First, I want to build in some better mobile device detection so I can give high end mobile users a rich experience while still providing content for devices without the bells and whistles (hopefully another look at the Mobile Fu code will help with that). Second, I want to put in some authentication with Devise. Finally, I want to experiment more with jQTouch’s theming system to give my little application a more universal user interface.

In the meantime, if you have any questions or suggestions, please drop a comment below.

What do you think? Follow along on on Twitter or Facebook to let me know what you think and catch my latest posts. Better yet, subscribe to my newsletter for updates from Everyday Rails, book picks, and other thoughts and ideas that didn't quite fit here.

Black lives matter.

I stand with the Black community against systemic racism, police violence and brutality, intolerance, and hate in the United States and worldwide. We must all demand better from our leaders, and ourselves. Stop tolerating intolerance.

While you're here, please consider making a donation to Black Girls CODE, who do great, important work to provide opportunity to underprivileged girls interested in tech, or any organization working toward equity and safety for all, not just the privileged. Thank you.

Test with confidence!

If you liked my series on practical advice for adding reliable tests to your Rails apps, check out the expanded ebook version. Lots of additional, exclusive content and a complete sample Rails application.

Newsletter

Ruby on Rails news and tips, and other ideas and surprises from Aaron at Everyday Rails. Delivered to your inbox on no particular set schedule.