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

December 2008 issue

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

iPhone

2008 Third Quarter Smart Phone Sales

iPhone Uniqueness

Screen 320 480 Landscape Portrait

Input Multi-touch Virtual Keyboard

Always Connected EDGE 3G Unlimited data

Location Aware

Accelerometer

Camera

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)

Optimized Websites

Grails

• 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=\"Grails\" /></title> <meta name=\"layout\" content=\"main\" /> <link rel=\"stylesheet\" href=\"${createLinkTo(dir:'css',f <title>Note List</title> <link rel=\"shortcut icon\" href=\"${createLinkTo(dir:'ima </head> <g:layoutHead /> <body> <g:javascript library=\"application\" /> <div class=\"body\"> </head> <h1>Note List</h1> <body> <div class=\"list\"> <div id=\"spinner\" class=\"spinner\" style=\"display:none;\"  <img src=\"${createLinkTo(dir:'images',file:'spinner </div> </div> </div> <div class=\"logo\"><img src=\"${createLinkTo(dir:'images' </body> <g:layoutBody /> </html> </body> </html>

Minimal iPhone Support

Home Screen Icon (Web Clip Icon)

Home Screen Icon (Web Clip Icon) <link rel=\"apple-touch-icon\" href=\"images/apple-touch-icon.png\"/>

Home Screen Icon (Web Clip Icon) <link rel=\"apple-touch-icon\" href=\"images/apple-touch-icon.png\"/> iPhone Adds • Rounded corners • Drop shadow • Reflective shine

Home Screen Icon (Web Clip Icon) <link rel=\"apple-touch-icon\" href=\"images/apple-touch-icon.png\"/> 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=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\">

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=\"text/css\" media=\"screen\">@import \"/mynotes/js/iui/iui.css\";</style> <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\"> <link rel=\"apple-touch-icon\" href=\"/mynotes/images/apple-touch-icon.png\"/> <script type=\"text/javascript\" src=\"/mynotes/js/iui/iui.js\"></script> <script type=\"text/javascript\" src=\"/mynotes/js/application.js\"></script> </head> <body>  </body> </html>

Toolbar <html> <head>  </head> <body> <div class=\"toolbar\"> <h1 id=\"pageTitle\"></h1> <a id=\"backButton\" class=\"button\" href=\"#\"></a> <a href=\"/mynotes/note/create\" class=\"button\">+</a> </div> </body> </html> Manages state and history

List <html> <head>  </head> <body> <div class=\"toolbar\"> <h1 id=\"pageTitle\"></h1> <a id=\"backButton\" class=\"button\" href=\"#\"></a> <a href=\"/mynotes/note/create\" class=\"button\">+</a> </div> <ul id=\"notes\" title=\"Notes\" selected=\"true\"> <li><a href=\"/mynotes/note/show/46\">Grocery list</a></li> <li><a href=\"/mynotes/note/show/47\">Chrismas wish list</a></li <li> <a href=\"/mynotes/note/more?offset=8\" target=\"_replace\"> Show 8 More Notes... </a> </li> </ul> </body> </html> Just an HTML unordered list

Forms <html> <body> <div style=\"left: 0%;\" id=\"Notes\" title=\"Notes\" class=\"panel\"> <h2>Show Note</h2> <fieldset> <div class=\"row\"> <label>Title</label> <input type=\"text\" name=\"title\" value=\"Grocery list\"/> </div> <div class=\"row\"> <label>Content</label> <textarea rows=\"5\" cols=\"30\" name=\"content\"> Eggs Milk Coffee </textarea> </div> </fieldset> <form id=\"deleteForm\" name=\"deleteForm\" action=\"delete\" method=\"post\"> <input type=\"hidden\" name=\"id\" value=\"46\" /> <a class=\"whiteButton\" href=\"#\" target=\"_self\" onclick=\"document.deleteForm.submit()\">Delete</a> </form> </div> </body> </html>

Grails and iUI

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(\"User-Agent\") =~ \"Mobile.*Safari\") 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=\"notes\" title=\"Notes\" selected=\"true\"> <g:render template=\"iphone_notes\" /> </ul> _iphone_notes.gsp <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>

Testing

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 Spooﬁng

Debugging

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

0 comments

Notes on slide 1

7 Favorites