Adding iPhone support to groovyblogs

Since being given an ipod touch, I’ve been keen to explore the issues with designing for iphone web apps. With Grails In Action in final copy edits, I’ve finally got some free time to invest in a big refactor of groovyblogs.

I’ve already reworked the security system to use JSecurity, moved all the custom search logic over to Searchable, and fixed the dread “numerous repost” problems when people mess with their feedburner/blog software/etc. It’s now checks the hash of the post content to perform more reliable duplicate checking that is independent of whatever their blogs software assigns to their “permalink”.

If you’re keen to tinker with developing websites with iphone support, and you don’t have a device, you can still use emulators to get a feel for what’s possible. I’ve been working with iPhoney which gives you a pretty good sense of what the site will look like - including the ability to rotate the device. Here’s what my new groovyblogs iphone menu page looks like on the iPhoney emulator:

Now, on to the meat of implementing this sort of stuff. Grails supports plugins for both iUI and iWebKit (two of the main iPhone development libraries). Given the wealth of documentation available for iWebKit, I thought I’d take that for a spin first. The iWebKit plugin has some docs online, but the best way to get familiar with it is to watch the great screencast on getting started.

After following the screencast, I was ready to go. I whipped up my page using the taglibs and I was up and running. You have to set the layout template name of your page to be “iphone” - after that you just use the tags and enjoy the styling. Here’s the body of the new ipod homepage shown above:

<iphone:topbar title="groovyblogs">
            <iphone:leftnavigation navtype="button">
                <iphone:navelement action="pc" content="PC Website"/>
            </iphone:leftnavigation>
        </iphone:topbar>
        <iphone:content>
            <iphone:section>
                <iphone:list action="show" descriptionField="title" list="${entries}"/>
            </iphone:section>
        </iphone:content>

My first gotcha was that you’ve got to copy the /layouts/iphone.gsp from the plugin installation into your Grails app. The plugin page notes this saying that this would be fixed in Grails 1.1. No such luck. That still applies.

The iphone:list tag iterates over each of the entries in ${entries} and creates a menu item name ${entry.title} which is linked to the “show” action of the current controller. The id is also passed in. Once you’ve done that you get a nicely rendered menu page complete with a swipey link, rollovers and right arrow link. Here’s the same page running on my device:

Once you’ve chosen one of the menu options, the show action will fire to give you a more complete preview of the link. I wanted to make the structure of this page a little more “custom”, so I branched out of the iWebKit plugin taglibs to add some of my own markup.

<iphone:topbar title="${pageTitle}">
            <iphone:leftnavigation navtype="arrow">
                <iphone:navelement action="recent" content="Recent Entries"/>
            </iphone:leftnavigation>
        </iphone:topbar>
        <iphone:content>
            <iphone:section>

                <iphone:textbox header="${entry.title}">
                    <div style="color: gray; font-size: smaller;">
                        ${entry.blog.title} &raquo; ${entry.hitCount} clicks &raquo;
                        <g:dateFromNow date="${entry.dateAdded}"/>
                    </div>
                </iphone:textbox>

                <g:link controller="entries" action="jump" id="${entry.id}">
                    <img alt="no thumb" src="${g.createLink(controller: 'thumbnail', action: 'show', id: entry.id)}" style="float: left;"/>
                </g:link>

                <g:summariseEntry description="${entry.description}"/><br/><br/>

                <g:link controller="entries" action="jump" id="${entry.id}">
                    Visit &raquo;
                </g:link>

            </iphone:section>

        </iphone:content>

The iphone:textbox tag lets you do some funky stuff with those blue-headed entries that are common on iphone-friendly sites. I’ve reused my thumbnail code to render a preview (which looks pretty good even on a small device - and saves an expensive site launch if the content preview makes you lose interest). Here’s the new “show” action running on my touch:

So I’ve got to say that my first experiences with iWebKit were really great. The docs are fantastic, and the plugin saves you a ton of time getting up and running.

Now, on to some more groovyblogs feature updates before my next round of copy-edits come in…