IPhone Web Development With Grails from CodeMash 2009

Web Development with

Christopher M. Judd

Christopher M. Judd
President/Consultant of

leader
Creator of open source projects FallME and Fiddle

Columbus iPhone
User Group

http://groups.google.com/group/cidug
Going the conversation

2008 Third Quarter Smart Phone Sales

Screen
320

480

Landscape

Portrait

Input

Multi-touch
Virtual Keyboard

Always Connected

EDGE
3G

Unlimited data

Browser

HTML 4.01
XHTML 1.0
JavaScript 3
CSS 2.1 (partial 3.0)
DOM Level 2
AJAX (XMLHTTPrequest)

Mobile Safari (WebKit)

Browser

HTML 4.01
XHTML 1.0
JavaScript 3
CSS 2.1 (partial 3.0)
DOM Level 2 XHTML Mobile Proﬁle (MP)
AJAX (XMLHTTPrequest) WAP 2.0
WAP/WML

Mobile Safari (WebKit)

iPhone Development

vs

Disadvantages:
Advantages:
Must know Objective-C
Access native features
Need Mac and OSX Leopard
camera
location awareness Give up ﬁrst born child in
3D support mountain of legal agreements
accelerometer (ﬁne grain)
Must have application
off-line access
approved and vetted before
Performance
distribution in App Store
Process is on Apple’s timeline
not yours

Advantages: Disadvantages:
Develop with Server-side Don’t have access to
technology of choice native features
Java Not as glamorous
Groovy/Grails
Network performance
Ruby
.NET
PHP
Perl
Don’t have to deal with
syncing data with cloud
Deployment and schedule
is under your control
Easier to deal with versioning

Support Levels

Incompatible Optimized
Compatible

Incompatible Websites
No plug-in support
Avoid
No mobile
HTML Frames
technology support Absolute positioning
Mouse and keyboard events

XHTML Mobile Proﬁle (MP)
WAP 2.0
WAP/WML

There is not much Mobile Safari
doesn’t support

Compatible Websites

Looks good and proportioned Home screen icon (Web Clip Icon)

• Web Application Framework
• Development Environment
• Open Source under Apache 2.0 License
• Current version 1.0.4 (1.1 is around the corner)
• Best Practices
Convention over conﬁguration
–
Don’t repeat yourself (DRY)
–
Default is what you expect (DIWYE)
–
Agile
–
Scaffolding
–
AJAX
–
Plug-ins
–
Unit testing
–
Web Services
–

Grails MVC

Controller

Domain
DB
GSP

Grails Development Environment
JDK
• JDK 1.4

Web Container/App Server
•
Build System
•
Application Stack
•
Persistence Framework
• GORM

Web Framework
•
Unit Test Framework
•
AJAX Framework
•
Database
•
Scheduling Framework
•
XML Framework
•
Logging Framework
•
View
•
IDE
•

Installing Grails

1. Download from http://www.grails.org/Download
• 1.0.4 - Stable Release
• 1.1-BETA2 - Development Release
2. Unzip archive
3. Set GRAILS_HOME environment variable
4. Add %GRAILS_HOME%bin to system path

Depends on JDK 1.4 or greater

Creating a Grails App

grails create-app mynotes

Running a Grails App
Navigate to http://localhost:8080/mynotes

grails run-app

Add Domain Classes
Note.groovy

class Note {
grails create-domain-class note
}

NoteTests.groovy
class NoteTests extends GroovyTestCase
{

void testSomething() {

}
}

Implement Domains
Add properties, methods, constraints, relationships

class Note {
String title
String content
Date dateCreated
Date lastUpdated

static constraints = {
title(blank:false, nullable:false, size:5..150)
content(nullable:false, maxSize:1000)
}

String toString() { title }

}

Generate Scaffolding

grails generate-all note

Generate Scaffolding

grails generate-all note

• Controller
• Views
• create
• edit
• list
• show

Grails Request Flow
http://localhost:8080/mynotes/note/list
class NoteController {

def index = { redirect(action:list,params:params) }

def list = {
if(!params.max) params.max = 10
[ noteList: Note.list( params ) ]
}

// ... code removed for brevity
}

grails-app/views/layout/main.gsp
grails-app/views/note/list.gsp
<html>
<html> <head>
<head> <title><g:layoutTitle default=quot;Grailsquot; /></title>
<meta name=quot;layoutquot; content=quot;mainquot; /> <link rel=quot;stylesheetquot; href=quot;${createLinkTo(dir:'css',f
<title>Note List</title> <link rel=quot;shortcut iconquot; href=quot;${createLinkTo(dir:'ima
</head> <g:layoutHead />
<body> <g:javascript library=quot;applicationquot; />
<div class=quot;bodyquot;> </head>
<h1>Note List</h1> <body>
<div class=quot;listquot;> <div id=quot;spinnerquot; class=quot;spinnerquot; style=quot;display:none;quot;
 <img src=quot;${createLinkTo(dir:'images',file:'spinner
</div> </div>
</div> <div class=quot;logoquot;><img src=quot;${createLinkTo(dir:'images'
</body> <g:layoutBody />
</html> </body>
</html>

Home Screen Icon
(Web Clip Icon)

Home Screen Icon
(Web Clip Icon)

<link rel=quot;apple-touch-iconquot;
href=quot;images/apple-touch-icon.pngquot;/>

Home Screen Icon
(Web Clip Icon)


iPhone Adds
• Rounded corners
• Drop shadow
• Reflective shine

Home Screen Icon
(Web Clip Icon)


png image 57x57
iPhone Adds
• Rounded corners
• Drop shadow
• Reflective shine

Scaling

Default width is 980 Custom Viewport
and scaled down by 2:1 or 3:1
<meta name=quot;viewportquot;
content=quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;quot;>

Custom iPhone
Applications
with iUI

iUI
Provide a native iPhone application look and feel
Open Source library containing
Cascading Style Sheets (CSS)
JavaScript
Images

http://code.google.com/p/iui/

Transitions Lists Forms

iUI is AJAX
ommonly implemented as a single page
Named anchors URLs transition to named elements
Standard URLs make AJAX requests to server for snippet
Full page requests must use target of _self
Get more URLs must use target of _replace

Setting up iUI
1.Download tar
2.Uncompress
3.Copy images, iui.css, iui.js and iuix.js to web project
4.Import iui.css and iui.js
<html>
<head>
<title>Note List</title>
<style type=quot;text/cssquot; media=quot;screenquot;>@import quot;/mynotes/js/iui/iui.cssquot;;</style>
<meta name=quot;viewportquot;
content=quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;quot;>
<link rel=quot;apple-touch-iconquot; href=quot;/mynotes/images/apple-touch-icon.pngquot;/>
<script type=quot;text/javascriptquot; src=quot;/mynotes/js/iui/iui.jsquot;></script>
<script type=quot;text/javascriptquot; src=quot;/mynotes/js/application.jsquot;></script>
</head>
<body>

</body>
</html>

Toolbar
<html>
<head>
</head>
<body>
<div class=quot;toolbarquot;>
<h1 id=quot;pageTitlequot;></h1>
<a id=quot;backButtonquot; class=quot;buttonquot; href=quot;#quot;></a>
<a href=quot;/mynotes/note/createquot; class=quot;buttonquot;>+</a>
</div>
</body>
</html>

Manages state and history

List
<html>
<head>
</head>
<body>
<div class=quot;toolbarquot;>
<h1 id=quot;pageTitlequot;></h1>
<a id=quot;backButtonquot; class=quot;buttonquot; href=quot;#quot;></a>
<a href=quot;/mynotes/note/createquot; class=quot;buttonquot;>+</a>
</div>

<ul id=quot;notesquot; title=quot;Notesquot; selected=quot;truequot;>
<li><a href=quot;/mynotes/note/show/46quot;>Grocery list</a></li>
<li><a href=quot;/mynotes/note/show/47quot;>Chrismas wish list</a></li
<li>
<a href=quot;/mynotes/note/more?offset=8quot; target=quot;_replacequot;>
Show 8 More Notes...
</a>
</li>
</ul>
</body>
</html>

Just an HTML unordered list

Forms
<html>
<body>

<div style=quot;left: 0%;quot; id=quot;Notesquot; title=quot;Notesquot; class=quot;panelquot;>
<h2>Show Note</h2>
<fieldset>
<div class=quot;rowquot;>
<label>Title</label>
<input type=quot;textquot; name=quot;titlequot; value=quot;Grocery listquot;/>
</div>
<div class=quot;rowquot;>
<label>Content</label>
<textarea rows=quot;5quot; cols=quot;30quot; name=quot;contentquot;>
Eggs
Milk
Coffee
</textarea>
</div>
</fieldset>

<form id=quot;deleteFormquot; name=quot;deleteFormquot;
action=quot;deletequot; method=quot;postquot;>
<input type=quot;hiddenquot; name=quot;idquot; value=quot;46quot; />
<a class=quot;whiteButtonquot; href=quot;#quot;
target=quot;_selfquot;
onclick=quot;document.deleteForm.submit()quot;>Delete</a>
</form>

</div>
</body>
</html>

Grails iUI Plug-in
A plug-in for simplifying using iUI with Grails.
http://grails.org/iUI+Plugin

iPhone layout
iUI CSS, JavaScript and images
grails install-plugin iui Grails apple-touch-icon
Automatically uses optimized
JavaScript in production mode

Determine iPhone
User-Agents
iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

iPod Touch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1
(KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Use Regular Express - Mobile.*Safari
class IPhoneFilters {
def filters = {
all(controller:'*', action:'*') {
before = {
if (request.getHeader(quot;User-Agentquot;) =~ quot;Mobile.*Safariquot;)
request['fromIPhone'] = true
}

}
}
}

Render iPhone View

def list = {
if(!params.max) params.max = 8

if (request.fromIPhone)
render(view:'iphone_list', model:[noteList: Note.list( params )])
else
render(view:'list', model: [ noteList: Note.list( params ) ])
}

Snippets
Use templates

<ul id=quot;notesquot; title=quot;Notesquot; selected=quot;truequot;>
<g:render template=quot;iphone_notesquot; />
</ul>

_iphone_notes.gsp
<g:each in=quot;${noteList}quot; status=quot;iquot; var=quot;notequot;>
<li><g:link action=quot;showquot; id=quot;${note?.id}quot;>
${fieldValue(bean:note, field:'title')}
</g:link></li>
</g:each>
<li>
<g:link action=quot;morequot; target=quot;_replacequot; params=quot;[offset: 8]quot;>
Show 8 More Notes...
</g:link>
</li>

iPhone/iPod Touch

Challenges
• Corporate Network Access
• Hands of keyboard
• Difﬁcult to debug

Should definitely use for final testing

SDK iPhone Simulator

Challenges
• Only works on Leopard OSX
• Difﬁcult to debug

Included with SDK/XCode

Safari

Challenges
• Renders things the iPhone won’t

Mac or Windows

iPhone Bookmarklets
http://www.manifestinteractive.com/iphone/#_Webdev

Unique JavaScript solution
View source
Dump scripts
View cookies
etc

Resources

Web Development Guidelines for the iPhone (Safari Web Content Guide for iPhone OS)
- https://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/
Safari HTML Reference
- http://developer.apple.com/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari CSS Reference
- http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/
WebKit DOM Programming Topic
- http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/

IPhone Web Development With Grails from CodeMash 2009

IPhone Web Development With Grails from CodeMash 2009

Recommended

More Related Content

What's hot

What's hot (20)

Similar to IPhone Web Development With Grails from CodeMash 2009

Similar to IPhone Web Development With Grails from CodeMash 2009 (20)

Recently uploaded

Recently uploaded (20)

IPhone Web Development With Grails from CodeMash 2009

Report as inappropriate

10 likes

views