Friday, July 24, 2009

Getting started with the iWebkit grails plugin - part 1

A few weeks ago I gave a workshop for the NLGUG on using the iWebkit plugin for Grails. This plugin will help you to built web application targeted for the iPhone, but also for Android based devices !

During this workshop we built a twitter client and we had some issues with the twitter plugin which doesn' t work with the API changes twitter brings this last weeks. So I choose for this tutorial to built a twitter search client that won't use anymore the twitter plugin.

Our application will be a clone of the http://search.twitter.com/ website but designed for a mobile use. We will start with basic functionnalities and in upcoming posts we will enhance this first app.

Let's starts directly :

grails create-app TweetSearch
































































Go into your project directory and install the iWebKit plugin :


grails install-plugin iwebkit
































































Okay ! You are ready to built a real mobile web application, setting things up wasn't too hard, no ?

Now we want to use the search twitter API, a quick look on the API page shows that's it is a REST based API and that the response format can be json, nice grails&groovy are perfect candidates to implement this kind of APIs.

To have more control on the returning json response we will convert it into a custom made domain object, so let's create a new domain class :


grails create-domain-claas tweet










We will keep it simple and convert only 3 properties from the json response. Open the Tweet class and add these properties :


class Tweet {
String status
String user_id
String image_url
}

Let's grails generate all the stuff we need :

grails generate-all tweet
Now we have a standard grails project structure with controllers and views.

Let's start to write the request, we will use the fantastic Httpbuilder library that make writing httprequest as easy as pie!
To use this libray you have some options :


Make sure all dependencies are in the lib folder of your app.
The request needs only one parameter : the search criteria , so something like that will do the trick :


def list = {
def http = new HTTPBuilder( 'http://search.twitter.com')
def jsonresultshttp.request( GET, JSON ) {
uri.path = '/search.json?'
uri.query = [ q: 'grails' ]
headers.'User-Agent' = 'Mozilla/5.0 Ubuntu/8.10 Firefox/3.0.4'
response.success = { resp, json ->
jsonresults = json.results
}

response.failure = { resp ->
println "Unexpected error:${resp.statusLine.statusCode}"
}
}
List listItems = new ArrayList()
Tweet tweet
jsonresults.each {
tweet = new Tweet(status:it.text,user_id:it.user_id,image_url:it.profile_image_url)
listItems.add(tweet)
}
return [ results : listItems ]
}


Don't forget to include the imports in the controller :


import groovyx.net.http.*;
import static groovyx.net.http.ContentType.JSON
import static groovyx.net.http.Method.GET
For now as you can see we use a hardcoded search criteria "grails" to test the first part the UI : showing the list of tweets ! Let's start with the exciting stuff :

We will modify the list.gsp file to make it "mobile" compliant. The first thing you have to do is set the " iphone" layout :

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="iphone" />
<title>Tweet List</title>
</head>

By setting this layout the plugin take care of :

  • Setting references to the css, javascript and images files

  • Setting the right viewport

We can now starting writing the content of the view :


<body>
<iphone:topbar title="Results"/>
<iphone:content>
<iphone:section>
<iphone:list action="show" descriptionField="status" list="${results}" customid="status"/>
</iphone:section>
</iphone:content>
</body>

As you can see we make extensive use of the iphone tag library which take care of setting the right css classes and binding stuff with our domain model and actions.

A iphone webpage will always have a structure like the code above : A topbar, then content that consists of sections. Sections can hold List , text areas etc ...

Start the application

grails run-app

and browse to http://localhost:8080/tweetsearch/tweet

You should see something like that :





That's nice no ?

But let's add some user interaction support, we will add a search input field. Go edit your view list.gsp and add this new section before the list section :


<iphone:section>
<g:formRemote name="myForm"
action="list" url="${[action:'list']}">
Search : <input type="text" name="searchTerm"/>
</g:formRemote>
</iphone:section>

Now we have to modify our list action to use the "searchTerm" parameter :

def list = {
def searchTerm = params["searchTerm"]
def http = new HTTPBuilder( 'http://search.twitter.com')
def jsonresultshttp.request( GET, JSON ) {
uri.path = '/search.json?'
uri.query = [ q: searchTerm]
headers.'User-Agent' = 'Mozilla/5.0 Ubuntu/8.10 Firefox/3.0.4
response.success = { resp, json ->
jsonresults = json.results
}
response.failure = { resp ->
println "Unexpected error:${resp.statusLine.statusCode}"
}
}
List listItems = new ArrayList()
Tweet tweet
jsonresults.each {
tweet = new Tweet(status:it.text,user_id:it.user_id,image_url:it.profile_image_url)
listItems.add(tweet)
}
return [ results : listItems ]
}


Ok restart your application, you will now see an empty list but also a search input text , enters whatever you want and submit, you should see something like this :


Okay that will be it for this first part of this serie, I encourage you to modify the show,gsp view by yourself to render a tweet in its whole ...

I hope that in the next posts I could introduce the new version of the iwebkit plugin with orientation support and also .... Geolocalization support !!!!!

Source code of this project can be found here ! The project will also soon be hosted into Github
You can follow me on twitter : twitter.com/sebi2706

6 comments:

  1. Very comprehensive article. I actually think I'll try to do some iPhone stuff on one of my sites.

    ReplyDelete
  2. Very nice article ...
    I just discovered iWebkit 2 days ago and wanted to dive into iphone web app dev !

    That's an awesome starting point. Very clear

    thanks for that
    @grooveek

    PS : Sebastion Blanc, c'est plutôt français, non ?

    ReplyDelete
  3. Very nice example. Do you have other example?

    ReplyDelete
  4. Nice! Check out the Grails "rest" plugin, too... it simplifies the REST/JSON client side logic.

    ReplyDelete
  5. Hi

    The link for downloading sourcecode does not work
    Is it possible for you to let me know a link or email it to me at kumudamnews1@gmail.com.

    Thanks for your help

    ReplyDelete
  6. hello,finally i solved my problem with the help of your blog it is very nice and unique blog...FFMPEG Development

    ReplyDelete