Rhomobile provides great instant gratification in building applications. See my last article for a starter.

There are some elements you’ll miss as you start to work on the iPhone target. The back button is one and the custom tab bar is another.

The main bar can currently be customized by building rhodes from source (the way I did in the previous post). Open platform/iphone/rhorunner.xcodeproj in Xcode and double-click MainWindow.xib under Resources. This will launch it in Interface Builder.

You might wonder why the bottom bar is a toolbar and not a tab bar. Native iPhone apps typically use a tab bar that switches the view above the bar. This isn’t going to work for rhodes however–we aren’t going to change to a different view. We’ll simply tell the UIWebView to go to another part of the application. Fortunately, this is not a huge break from iPhone tradition. There are other applications out there that operate with a toolbar.

Click on each of the existing items in the tool bar and drag them out of the interface. You’ll see and hear the crumpled-paper and vaporizing whoosh sound. I am probably the only person who thinks kindly of Newton whenever I see this animation :)

Drag a bar button item from the library to your bar. You can choose to have a custom image OR text but not both. I’m asking our artist to add text to icons here that need to have the tab bar look with both text and an image. When your buttons are placed, surround them with flexible space button bar items so they are evenly spaced across the bar.

Next, go back to Xcode and add a handler to accept clicks from your buttons. In Classes/WebViewController.h and add this after the @interface block:

-(IBAction)goUsers;

Then add an implementation to Classes/WebViewController.m:

-(IBAction)goUsers {
        [self navigateRedirect:@"/app/User"];
}

In interface builder, go to File->Reload All Class Files. This will allow IB to see the new method. Now right-click the new button and drag the circle after Sent actions/Selector over to the WebViewController in your MainWindow.xib hierarchy navigator. You can choose goUsers and things are wired up. There’s a little hard-coding going on here in the IBAction url, but keep in mind this whole exercise of editing the bar is going to go away with version 1.4 of rhodes.

Finally, to get the back button… remove

display: none

from the #backButton section of iphone.css. Now you can add navigation using this button in your views. My app/User/index.irb that has a back button to the main screen:

<div>
<h1 id=”pageTitle”>
Users
</h1>
<a id=”backButton” href=”/app”>Main</a>
</div>

<ul id=”users” title=”Users” selected=”true”>
<a href=”User/new” target=”_self”>New</a>
<%@users.each do |x|%>

<li><%=link_to “#{x.name}”, :action => :show, :id => x.object%></li>

<%end%>
</ul>

The back button might still have the blue theme applied, but a patch has been submitted to get it fixed in rhodes.