iUI Plugin

iUI Plugin

Author : Christopher M. Judd

This plugin provides integration with iUI, popular User Interface (UI) Library for Safari development on iPhone. When installing the plugin, it downloads and installs iUI version 0.13 into your application. (iUI is currently at version 0.20)

Installation

To install the iUI plugin type this command from your project's root folder:

grails install-plugin iui

Installing the iUI plugin will:

  • install the iUI CSS, JavaScript and images into your /web-apps/js/iui directory
  • add a iphone.gsp template to extend views from
  • add a Grails apple-touch-icon.png to /web-apps/images directory

Usage

Using the iUI Grails plug-in is quite easy, simply reference the iphone layout. All the iUI CSS and JavaScript will automatically be included. In production and test environments the optimized versions will automatically be used.

The following figure is an example of a common iPhone list using the Grails iUI plug-in.

The following code example produced the previous figure.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="iphone" />
    <title>Note List</title>
  </head>
  <body>
    <div class="toolbar">
      <h1 id="pageTitle"></h1>
      <a id="backButton" class="button" href="#"></a>
      <g:link class="button" action="create">+</g:link>
    </div>
    <ul id="notes" title="Notes" selected="true">
      <g:each in="${noteList}" status="i" var="note">
       <li>
        <g:link action="show" id="${note?.id}">${fieldValue(bean:note, field:'title')}
        </g:link>
       </li>
      </g:each>
      <li>
       <g:link action="more" target="_replace" params="[offset: 8]">
         Show 8 More Notes…
       </g:link>
      </li>
    </ul>
  </body>
</html>

The template also includes a Home Screen icon in case your user creates a shortcut to your application.

Plugin version history

2008-11-5 0.2 Initial Release

FAQ

(Ask on the user mailing list, and ye shall be heard.)

No Comments Yet

Post a Comment