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.

In posts_controller.rb change from:

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

to

UPDATE:: format.html should come before format.iphone. For some reason it was working for browsers that were not IE. Weird.

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:

<div class="panel" title="<%= @post.title %>" selected="true">
  <h3><%= @post.title %></h3>
  <%= render :partial => 'post.html.erb', :locals => {:post => @post} %>
</div>  

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.

In application.iphone.erb:

<div class="toolbar">
  <h1 id="pageTitle"></h1>
  
  <%= link_to "Search", search_path, :class => 'button' %>
</div>

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 <li>'s to replace the “More news…” link (notice the target for the “More news…” link is “_replace”).

In posts/index.iphone.erb

<ul title="News" selected="true">
  <%= render :partial => 'post_items', :locals => {:posts => @posts} %>
</ul>

In posts/_post_items.iphone.erb

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

A quick change in the posts_controller.rb from:

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

to:

UPDATE:: Same change to the ordering of format.html and format.iphone.

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

Styling Form Select Inputs

My search form has a dropdown for choosing the country that you want to search. By default, this did not look very nice. Since it didn’t need a label, I just left it out in the form and added some additional CSS.

In search/index.iphone.erb

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

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

  <fieldset>
    <div class="row">
      <%= country_select :search, :country, ['United States', 'Canada'], {} %>
    </div>  

    <div class="row">
      <label for='search_city'>City</label>
      <input type="text" value="" name="search[city]" id="search_city"/>
    </div>

    <div class="row">
      <label for='search_state'>State</label>
      <input type="text" value="" name="search[state]" id="search_state"/>
    </div>
  </fieldset>
  <%= link_to "Submit", "#", :class => 'whiteButton', :type => "submit" %>
<% end %>

And in my extra iphone.css (anything else that I needed to add to iui.css)

.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;
}

Conclusion

All told, I probably spent less than eight hours over a couple of nights adding a simple iPhone interface to my existing application. I still want to look in to modifying the CSS more to have it look more like the regular StagingTracks website, but that can come later. This was a fun little experiment.

So I needed to paginate large collection of data in a new app I am working on. will_paginate is a good drop in replacement for the the default rails paginator. But I am also using acts_as_taggable_on_steroids (for tagging) and acts_as_ferret (for searching), so i needed special pagination for those scenarios.

acts_as_ferret

A quick Google search led me to this for paginating acts_as_ferret search results. I modified the offset calculation and ended up with this:

module ActsAsFerret
  module ClassMethods
    def paginate_search(query, options = {})
      options, page, per_page = wp_parse_options!(options)
      offset = (page.to_i - 1) * per_page
      options.merge!(:offset => offset, :limit => per_page)
      result = result = find_by_contents(query, options)
      returning WillPaginate::Collection.new(page, per_page, result.total_hits) do |pager|
        pager.replace result
      end
    end
  end
end

Drop that in a file lib/ferret_pagination.rb, require it in you environment.rb, and you can now do this in your controller:

@entries = Entry.paginate_search params[:query],
                                       :page => params[:page],
                                       :per_page => 20

acts_as_taggable (on steroids)

So with that out of the way, I was now ready to tackle paginating entries tagged with a certain tag. Another quick google search turned up some ideas in the will_paginate comments. I used this one as a starting point and this is what I ended up with:

module ActiveRecord
  module Acts #:nodoc:
    module Taggable #:nodoc:
      module SingletonMethods
        # Return the number of time this class has been tagged with this tag
        def tagging_counts(tag)
          count_by_sql("select count(*) FROM tags, taggings WHERE " + sanitize_sql(['tags.name = ? AND tags.id = taggings.tag_id AND taggings.taggable_type = ?', tag, name]))
        end

        # paginate a call to find_tagged_with
        # tag is the tag to find
        # options is the option to use for pagination (:page, :per_page) and for find_tagged_with
        def paginate_by_tag(tag, options = {})
          options, page, per_page = wp_parse_options!(options)
          offset = (page.to_i - 1) * per_page
          options.merge!(:offset => offset, :limit => per_page.to_i)
          items = find_tagged_with(tag, options)
          count = tagging_counts(tag)
          returning WillPaginate::Collection.new(page, per_page, count) do |p|
            p.replace items
          end
        end
      end
    end
  end
end

Again, drop that in a file lib/taggable_pagination.rb, require it in you environment.rb, and you can now do this in your controller:

@entries = Entry.paginate_by_tag @tag.name,
                                     :order => 'entries.created_at DESC',
                                     :page => params[:page],
                                     :per_page => 20

Thanks

Thanks to Brandon for posting the ferret pagination code, Jim for the acts as taggable pagination code, and PJ for the will_paginate code.

UPDATED: Corrected problem noted in comments