These are slides from my CodeMash 2009 presentation on developing iPhone web applications using Grails, Groovy and iUI.

1. Web Development with
Christopher M. Judd

2. Christopher M. Judd
President/Consultant of
leader
Creator of open source projects FallME and Fiddle

3. December 2008 issue

4. Columbus iPhone
User Group
http://groups.google.com/group/cidug
Going the conversation

5. iPhone

6. 2008 Third Quarter Smart Phone Sales

7. iPhone Uniqueness

8. Screen
320
480
Landscape
Portrait

9. Input
Multi-touch
Virtual Keyboard

10. Always Connected
EDGE
3G
Unlimited data

11. Location Aware

12. Accelerometer

13. Camera

14. Browser
HTML 4.01
XHTML 1.0
JavaScript 3
CSS 2.1 (partial 3.0)
DOM Level 2
AJAX (XMLHTTPrequest)
Mobile Safari (WebKit)

15. Browser
HTML 4.01
XHTML 1.0
JavaScript 3
CSS 2.1 (partial 3.0)
DOM Level 2 XHTML Mobile Profile (MP)
AJAX (XMLHTTPrequest) WAP 2.0
WAP/WML
Mobile Safari (WebKit)

16. Browser
HTML 4.01
XHTML 1.0
JavaScript 3
CSS 2.1 (partial 3.0)
DOM Level 2 XHTML Mobile Profile (MP)
AJAX (XMLHTTPrequest) WAP 2.0
WAP/WML
Mobile Safari (WebKit)

17. iPhone Development
vs

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

19. 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

20. Support Levels
Incompatible Optimized
Compatible

21. Incompatible Websites
No plug-in support
Avoid
No mobile
HTML Frames
technology support Absolute positioning
Mouse and keyboard events
XHTML Mobile Profile (MP)
WAP 2.0
WAP/WML
There is not much Mobile Safari
doesn’t support

22. Compatible Websites
Looks good and proportioned Home screen icon (Web Clip Icon)

23. Optimized Websites

24. Grails

25. • 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 configuration
–
Don’t repeat yourself (DRY)
–
Default is what you expect (DIWYE)
–
Agile
–
Scaffolding
–
AJAX
–
Plug-ins
–
Unit testing
–
Web Services
–

26. Grails MVC
Controller
Domain
DB
GSP

27. 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
•

28. 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

29. Creating a Grails App
grails create-app mynotes

30. Running a Grails App
Navigate to http://localhost:8080/mynotes
grails run-app

31. Add Domain Classes
Note.groovy
class Note {
grails create-domain-class note
}
NoteTests.groovy
class NoteTests extends GroovyTestCase
{
void testSomething() {
}
}

32. 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 }
}

33. Generate Scaffolding
grails generate-all note

34. Generate Scaffolding
grails generate-all note
• Controller
• Views
• create
• edit
• list
• show

35. 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;
<!-- code remove for brevity --> <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>

36. Minimal iPhone Support

37. Home Screen Icon
(Web Clip Icon)

38. Home Screen Icon
(Web Clip Icon)

39. Home Screen Icon
(Web Clip Icon)
<link rel=quot;apple-touch-iconquot;
href=quot;images/apple-touch-icon.pngquot;/>

40. Home Screen Icon
(Web Clip Icon)
<link rel=quot;apple-touch-iconquot;
href=quot;images/apple-touch-icon.pngquot;/>
iPhone Adds
• Rounded corners
• Drop shadow
• Reflective shine

41. Home Screen Icon
(Web Clip Icon)
<link rel=quot;apple-touch-iconquot;
href=quot;images/apple-touch-icon.pngquot;/>
iPhone Adds
• Rounded corners
• Drop shadow
• Reflective shine

42. Home Screen Icon
(Web Clip Icon)
<link rel=quot;apple-touch-iconquot;
href=quot;images/apple-touch-icon.pngquot;/>
png image 57x57
iPhone Adds
• Rounded corners
• Drop shadow
• Reflective shine

43. 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;>

44. Custom iPhone
Applications
with iUI

45. 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

46. 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

47. 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>
<!-- code removed for brevity -->
</body>
</html>

48. Toolbar
<html>
<head>
<!-- code removed for brevity -->
</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

49. List
<html>
<head>
<!-- code removed for brevity -->
</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

50. 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>

51. Grails and iUI

52. 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

53. 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
}
}
}
}

54. 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 ) ])
}

55. 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>

56. Testing

57. iPhone/iPod Touch
Challenges
• Corporate Network Access
• Hands of keyboard
• Difficult to debug
Should definitely use for final testing

58. SDK iPhone Simulator
Challenges
• Only works on Leopard OSX
• Difficult to debug
Included with SDK/XCode

59. Safari
Challenges
• Renders things the iPhone won’t
Mac or Windows

60. iPhone Spoofing

61. Debugging

62. iPhone Bookmarklets
http://www.manifestinteractive.com/iphone/#_Webdev
Unique JavaScript solution
View source
Dump scripts
View cookies
etc

63. 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/