Login required
Download

iwebkit Plugin

 (1)
Author(s): sebi2706
Current Release: 0.3
Grails Version: 1.2-M2 > *
Tags iphone
Fisheye
Docs
Edit Plugin
grails install-plugin iwebkit

iWebKit

Author : Sébastien Blanc

This plugin provides integration with iWebkit, a powerful User Interface Library for Safari development on iPhone. By using this plugin, the grails developer will have an iphone web app skeleton (CSS and javascript) but also a extended tag library helping in creating iphone web pages in an easy,clean and fast way.

Version 0.3 comes with a lot of new features :

  • iWebkit 4.6.2
  • Scaffolding
  • Form tags
  • rotation/orienation support
  • Geolocation support

screencast

Installation

grails install-plugin iwebkit

Usage


After the plugin has been installed, just set the "iphone" layout : 

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

Scaffolding

Scaffolding is a feature that I really like with grails so I decided to provide the same thing for the plugin. That means that you will be able to build a complete mobile website in less than 60 seconds :

grails create-app bookstore
grails install-plugin iwebkit
grails install-iwebkit-templates

create a domain class : 

grails create-domain class book
class Book {
String name
String icon
}

grails generate-all

add some test data to your bootstrap 

new Book(name:'Grails in action',icon:'/bookstore/images/grails.png').save();
new Book(name:'Groovy in action',icon:'/bookstore/images/groovy.png').save();

Run the application, that's it !

TagLib

topbar

This will render the topbar of your webpage, a topbar can contain a title and navigation items.

attributes :

  • title

leftnavigation

attributes :

  • navtype : "arrow" or "button"

rightnavigation

attributes :

  • navtype : "arrow" or "button"

navelement

leftnavigation and rightnavigation contains navelement

atttributes :

  • action : maps to the controller action
  • controller (optional) :specify a controller
  • content : label of the navigation element
  • image : link to image path

content

section

textbox

attributes : *header : header label of this textbox

list

This will render an "Iphoned" html list. The list tag supports the following attributes:

  • action : maps to the controller action
  • controller (optional) :specify a controller
  • descriptionField : String attribute that will be used as label
  • imageField (optional) : path to associated image
  • list: bean reference of the list
  • customid (optional): useful for transient objects

Form support

Basically all the tags that you can use with grails core tag library are also available with the namespace "iphone" (i.e <iphone:submit/>). I got some issues with the select tag so this one is not available, but if you surround your regular g:select tag with the <iphone:section> tag it will works as wel.

Orientation support

You can now use "untouchable links", that means that you can bind a link/action to a specific orientation of your iphone (portrait mode, landscape mode). Basically , it works the same way as the g:createLink, you just have to pass an extra parameter "value" wich contains the angle of your phone : 

<iphone:orientation>
   <iphone:angle value="90" action="addComment" id="${blog.id}"/>
</iphone:orientation>

But sometimes you don' t want to link to another page but you just want to update a html element of your current page, well that is also possible just pass this extra parameter "remote='true'" and also the id of the html element you want to update by using the "update' parameter. Basically with remote on true this tag works like the g:remoteLink tag :

<iphone:orientation>
   <iphone:angle value="90" remote="true" update="tweetTimeline" action="updateTimeline" id="${user.id}" />
</iphone:orientation>
<div id="tweetTimeline">
  …
</div>

orientation

angle

  • value: angle of your phone (90 : landscape left, -90:landscape right, 0: portrait)
  • action : maps to the controller action
  • controller (optional) :specify a controller
  • id(optional) : id of your bean
  • remote(optional): set this on true if you want to use ajax and update a html element of the current page
*update(optional):
  • customid : useful for not persisted objects

Geolocation support

Always dreamed to add location based services to your web application. Well that sounds a bit complicated to add this feature. Well with iwebkit plugin adding LBS to your site is as difficult as adding this tag in your page :

<iphone:locateMe/>

You're done, your application is now aware of your current location. What happens ? Well this tag encapsulates some javascript that can access the geolocation API, convert the result to a JSON string and send it to the iwebkit controller. The controller will create a Geolocation Somain object and put it in the session.

The Geolocation domain class implements the official W3C's geolocation specifications , so it's pretty easy to use/mashup this object with external services/libraries.

You may not always want to put your current location in the session but pass it through a form submission. This is possible if you pass the parameter "formMode='true'" and put your tag inside a form. Follow the convention of adding a "position" property to your domain class and when you're application will start up, the plugin will take care of overriding the setter of your "position" property.

The plugin also comes with an action called "showMap" (/iwebkit/showMap) that will retrieve your location from the session and show it on a google map. The main purpose of this page is to provide a sample on how you use your location object, use it as a starting point for your own implementations.