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