TankEngine: New plugin for Rails iPhone Development

Noel Rappin, Friday, September 26, 2008 @ 1:24 pm

Picture of me at Windy City Rails taken by John McCaffrey

Last Saturday at Windy City Rails, I had the pleasure of announcing TankEngine, a new Rails plugin for targeting iPhone and Mobile Safari. ("git" it here)

Now, I know, I've done this already, so why a brand-new version of the plugin with a new name?

Good question. The original plugin was basically a wrapper around the iUI JavaScript and CSS classes. After working with iUI for a while, it turned out that I had a few differences of opinion with iUI (which I still think is a very nice piece of work).

• iUI is effectively optimized towards a drill-down list, and especially one where all the list data is sent down as a single page. This is somewhat restrictive for a Rails application.
• iUi has a custom history mechanism for managing going backward through the list, but the mechanism causes conflicts with any other DOM-id based JavaScript on the page.
• The CSS structure for iUI makes very strong assumptions about the structure of the underlying HTML

Again, not a criticism of iUI, just an acknowledgement that it wasn't quite meeting my needs.

Which brings us to TankEngine, which offers the following.

• A jQuery-based JavaScript layer, for managing iPhone-esque look and feel.
• A more flexible mechanism for deciding which requests get the iPhone content.
• An updated CSS page, based on the iUI original, but a bit more flexible, and also using WebKit specific CSS where appropriate.
• A lot of helpers for lists and toggles and the like.

There's still work to be done on the API, and adding some other iPhone style elements, but if you've got some needs in this area, check it out.

agile ajax

Comments: 10 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   This looks really cool.

   Does this still render the “drill down pages” of the iphone-versioned app using ajax in the same/similar way that iUI did?

   And if so does it still require the “requests should use render :layout => false (unless loaded into a new page with target=”_replace”).”? http://preview.tinyurl.com/3xwjfg

   Comment by Scott Motte, Thursday, October 2, 2008 @ 1:40 am

2. 

   Looks good so far. Are there any examples avaible?

   Comment by Sebastian, Thursday, October 2, 2008 @ 5:10 am

3. [...] Pathfinder Development » TankEngine: New plugin for Rails iPhone Development [...]

   Pingback by เร็วส์ หกสิบหก » นั่งเทียนเขียนข่าว#12, Thursday, October 2, 2008 @ 4:28 pm

4. [...] TankEngine [...]

   Pingback by Pathfinder Development » A Look Back At Past Post, Friday, October 3, 2008 @ 11:09 am

5. 

   Thanks guys, this is great. I got it to work right away.

   Comment by Johnny, Friday, November 14, 2008 @ 10:17 am

6. 

   Like Sebastian, it’d be great if you had some view examples!

   Comment by Johnny, Friday, November 14, 2008 @ 11:45 am

7. 

   good one

   Comment by john, Thursday, January 1, 2009 @ 10:47 pm

8. 

   Thank you. Does this supersede the iui plugin? I did a fair amount of searching, but could not find a tutorial or example of how to use this plugin. Are instructions/examples posted somewhere for someone new to iui?

   Comment by Donovan, Tuesday, January 20, 2009 @ 10:57 am

9. 

   I second the request for view examples. The intent is hard to discern from the code: how should I specify toolbar? How do I get pinstripes on panels? (Can I get pinstripes without modifying either the stylesheet or the default layout?)

   Comment by Bill Kirtley, Wednesday, March 11, 2009 @ 4:27 pm

10. 

    Thanks for the great start on using jquery w/iphone(rather than iui, which i think is great)

    Anyone having trouble getting landscape mode to fill the screen, besides me? !

    Consider putting something like this in the head/script tag.

    currentWidth = 0
    var updateLayout = function() {
    if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? “profile” : “landscape”;
    document.body.setAttribute(”orient”, orient);
    window.scrollTo(0, 1);
    $(’.viewport_body’).css({width:currentWidth})
    }
    };

    $(function(){setInterval(updateLayout, 500)});

    This is a great start thanks!

    Comment by paul Vudmaska, Saturday, April 4, 2009 @ 1:42 pm

Leave a comment