iPhone optimized Merb application with iUI
Get the latest iui
svn checkout http://iui.googlecode.com/svn/trunk
Inside there is the iui folder. Copy that folder to the public directory of your merb app.
Setup application.iphone.erb
This loads the javascript and css files as well as setting up the toolbar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Title</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta name="apple-touch-fullscreen" content="YES" /> <link rel="stylesheet" href="/iui/iui.css" type="text/css" media="screen" charset="utf-8" /> <link rel="stylesheet" href="/stylesheets/iui-custom.css" type="text/css" media="screen" charset="utf-8" /> <script type="application/x-javascript" src="/iui/iui.js"></script> </head> <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#searchForm"></a> </div> <%= catch_content :for_layout %> </body> </html> |
Add redirect option to iui.js form submit
1 2 3 4 5 6 7 8 9 10 11 12 13 | // original function submitForm(form) { iui.showPageByHref(form.action || "POST", encodeForm(form), form.method); } // added from http://cookingandcoding.wordpress.com/2008/09/05/iphone-web-applications-with-iui-and-ruby-on-rails-part-1/ function submitForm(form) { if (form.getAttribute("redirect") == "true") form.submit(); else iui.showPageByHref(form.action || "POST", encodeForm(form), form.method); } |
Setup your views
All your views should be named with the iphone extension. e.g. show.iphone.erb or show.iphone.haml, etc.
Most importantly, the iui javascript and css makes some opinions about how you should format your javascript in order to easily retain that ‘iphone look and feel’.
The pdf book “iPhone in Action” is the best resource for this that I could find (check it out at http://www.manning.com/callen/), but you can read through this tutorial on iUI and Rails for the basics of that look and feel.
Add the iphone mime type
(I stole the following from this great tutorial on providing different formats in merb by hassox. Thanks hassox!)
In init.rb put:
1 2 3 4 | Merb::BootLoader.after_app_loads do # iPhone mime-type Merb.add_mime_type(:iphone, :to_html, %w[application/xhtml+xml]) end |
In controllers/application.rb put:
1 2 3 4 5 6 7 8 9 | class Application < Merb::Controller before :set_iphone_content_type private def set_iphone_content_type self.content_type = :html if self.content_type == :iphone self.content_type = :iphone if request.user_agent =~ /(Mobile\/.+Safari)/ end end |
That’s it. Reset your local server, and you should now be able to navigate to http://localhost:4000 in iphoney and see your cool new iphone optimized site.