Adding an iPhone Interface to an Existing Rails Application

I have been gradually adding new features to my StagingTracks.com website. Really, it is a place where I can try out new things outside the office. I have upgraded the UI to be a little cleaner by using the Blueprint CSS framework. It was a easy way to normalize the CSS across browsers and easily implement a column-based layout. I also added Twitter notifications when new shops, clubs, and shows are added and reminders for upcoming shows each week. Does the model railroading community really need all of this? Probably not, but it helps me keep my skillz sharp.

Finding Shops, Clubs, and Shows on your iPhone

When I built StagingTracks a few years ago, I did it because I was traveling and wanted to easily find the model railroading community wherever I was. As it has grown over the past few years, so has technology. While it was possible to navigate the StagingTracks website using a browser on the phone, it was not optimal. Since this is my little sandbox for experimenting, I wanted to see how difficult it would be to add an optimized iPhone interface.

Native app or Web app?

I spend my daylight hours developing web applications for others, so it made sense that I should reuse the infrastructure that I already had in place. I didn’t want to learn iPhone SDK and all that is involved with that right now and I had recently come across the iUi javascript and css framework. iUI can give web applications a native iPhone application feel, so I just needed to see how to incorporate it into my “legacy” Rails application.

Resources

A quick Google search for iUI and Rails turned up Ben Smith’s excellent iPhone on Rails article.

iPhoney

Reading through the article, I downloaded iPhoney for quick testing without an iPhone. Be sure to use the iPhone User Agent in the iPhoney menu.

Local Subdomain for Testing

I was going to serve the iPhone version from the subdomain iphone.stagingtracks.com, so I needed to setup something similar in my local development environment. Fortunately, this was very easy with the Ruby Ghost gem found via Robby Russell’s Get to know a gem: Ghost.

sudo ghost add iphone.localhost.com

We needed to add the .com so that the call to the request.subdomains will pick out the iphone portion.

iUI Framework

After downloading the iUI framework from the project site, I moved everything into its rightful place.

public
  - stylesheets
    - iui.css
  - javascripts
    - iui.js
  - images
    - iui
      - copy all of the .gif and .png files into here

Because I moved the images into the /images/iui folder, I needed to update the image locations in the iUI css. A quick find/replace and I was ready to go.

Application changes

I won’t go into all the details since Ben’s article hit most of the high points. Here are the few additional bits that I came across as I was adding my iPhone interface.

Basic approach

The basic approach to adding the iphone interface is to update the controller to render the iphone partial without the layout (since everything is AJAX) and then create an iphone template.

def show 
  @post = Post.find(params[:id])
end  

to

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

iphone template posts/show.iphone.erb:

  
<%= @post.title %>
  <%= render :partial => 'post.html.erb', :locals => {:post => @post} %>
  

Search Button

Since one of the more interesing features of StagingTracks is the ability to search for organizations near you, I wanted that to be prominent. By adding a “button” link to the toolbar, it now shows up on every page.

  

  
  <%= link_to "Search", search_path, :class => 'button' %>

Dynamically Growing Lists (a.k.a pagination)

Since I already had paging in place for the blog posts, I wanted to be able to reuse that, if possible. Turns out that was pretty easy to add as well. I needed to separate the post_items into a separate partial so that I could return the next page of

  <%= render :partial => 'post_items', :locals => {:posts => @posts} %>

<% posts.each do |post| %>
  
<%= link_to post.title, post %>
<% end %>
<%= content_tag :li, link_to("More news...", posts_path(:page => posts.next_page), :target => "_replace") if posts.next_page %>

def index
  @posts = Post.latest.published.paginate :page => page, :order => 'published_at desc'
end

def index
  @posts = Post.latest.published.paginate :page => page, :order => 'published_at desc'
  respond_to do |format|
    format.html
    format.iphone do
      if page == 1
          render :layout => false
        else
          render :layout => false, :partial => "post_items", :locals => {:posts => @posts}
      end
    end
  end
end

<% form_tag(search_path, :class => 'panel', :title => 'Search')  do %>
  
Find Local Shops, Clubs, and Shows

  <%= content_tag :p, flash[:error], :class => 'error' if flash[:error] %>

  

    

      <%= country_select :search, :country, ['United States', 'Canada'], {} %>
    
  

    

      City
      
    

    

      State
      
    
  
  <%= link_to "Submit", "#", :class => 'whiteButton', :type => "submit" %>
<% end %>

.row > select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
    height: 42px;
    background: none;
    font-size: 16px;
    width: 100%;
}

.error {
  font-weight: bold;
  color: #8a1f11;
  margin-left: 14px;
}