Making your Rails app mobile with WAP and WML

I’d been wanting to make my Ruby on Rails based San Francisco Sailing Weather site available for mobile / cell phones. Now that I’m on vacation in Germany I had a stretch on a train ride where I was able to crank out a simple working version. Here are the steps I took:

1. Set the WAP WML content type. You can do this on each controller method, or by using a controller specific before_filter, or an application wide before_filter as I did that applies to all actions with the name wap in app/controllers/application.rb:

<small>
before_filter :set_wap_content_type, <span>:</span>only => :wap
</small>
<small>
def set_wap_content_type
&#160;&#160;@headers["Content-Type"] = "text/vnd.wap.wml; charset=iso-8859-1"
end
</small>

2. Next I created an app/views/layouts/wap.rhtml decorator to wrap all of my WML documents with:

<small>
&lt;?xml version="1.0"?&gt;
&lt;!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"&gt;
&lt;wml&gt;
&lt;card title="&lt;%= @title %&gt;"&gt;
&lt;p align="center"&gt;
&lt;%= @content_for_layout %&gt;
&lt;/p&gt;
&lt;/card&gt;
&lt;/wml&gt;
</small>

3. Then I added a wap method to my index controller so that users can access the mobile version of the site via http://windandtides.com/wap

<small>
def wap
&#160;&#160;@title = "San Francisco Sailing Weather"
&#160;&#160;render(:layout => "wml")
end
</small>

4. Finally I created a app/views/index/wap.rhtml to provide the content for the home page:

<small>
&lt;%= link_to 'NOAA Marine Forecast', { :controller => '/marine/forecast', :action => 'wap' } %&gt;&lt;br/&gt;
&lt;%= link_to 'Wind Readings', { :controller => '/marine/wind', :action => 'wap' } %>&lt;br/&gt;
&lt;%= link_to 'Current Predictions', { :controller => '/marine/tide', :action => 'wap' } %&gt;
</small>

Here is a demo of the result. You could probably also use your regular actions and adjust the content-type and view you serve based on the accepts header which you can access via the respond_to method. WAP/WML enabling the sub pages turned out to be a snap as I’d already broken out the content into partials from when I added RSS support so I was able to re-use those partials without any additional changes.

Some helpful web tools and references that I used were:

W3schools WAP tutorial

W3schools WML reference
Web based WAP Emulator

This entry was posted in Ruby, Ruby on Rails, Software Engineering, WAP and WML. Bookmark the permalink.

6 Responses to Making your Rails app mobile with WAP and WML

  1. Andre Lewis says:

    Thanks for the helpful write-up Todd. I’m thinking of WAP-enabling my wifi cafes site (http://wifi.earthcode.com), so this is useful.

  2. Justin Rich says:

    I would also encourage you to look up the deck WML tag. I’ve found that it is cumbersome to browse WML pages when scrolling is involved. Decks and cards work really well to take that pain out of the process, however you’d have to do a bit more work and alter those partials a bit.

  3. Pingback: Labnotes » Rounded Corners

  4. Ed Pmentel says:

    May I suggest you look into the WURFL SDN Java project and this link http://wurfl.sourceforge.net/ruby/index.php
    -E

  5. Larry says:

    Hi,

    I am a surfer and have been doing some Rails stuff. I just started a rails site that has buoy reports for various places. I have an admin backend so I can add any regions that people would like. I just started out with some east/west coast areas for now. Thanks for the info, I figured out how to set the header info from your site, and was partly inspired from looking at what you did as well, so I knew it was doable. Sorry that my front page looks kind of primitive, html,css and content isn’t my thing, but I may try to get a picture up for the web part of it: http://www.surf.freespiritboston.net

  6. Pingback: 使用Rails开发支持WAP/WML的应用 - IceskYsl@1sters

Leave a Reply

Your email address will not be published. Required fields are marked *