Advertisement
Check these out next
IPhone Web Development With Grails from CodeMash 2009
Jan. 9, 2009•0 likes•4,654 views
10 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Education
Technology
These are slides from my CodeMash 2009 presentation on developing iPhone web applications using Grails, Groovy and iUI.
Christopher JuddFollow
CTO, consultant, author at Manifest SolutionsAdvertisement
Advertisement
Advertisement
Recommended
What's new in flutter and dart in 2020 Ahmed Abu Eldahab
The Magic of flutter Comex oman 2019Ahmed Abu Eldahab
T2 Web FrameworkShinpei Ohtani
Google flutter and why does it matterAhmed Abu Eldahab
Developing Cross platform apps in flutter (Android, iOS, Web)Priyanka Tyagi
The magic of flutterShady Selim
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 Profile (MP) AJAX (XMLHTTPrequest) WAP 2.0 WAP/WML Mobile Safari (WebKit)
- 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)
- iPhone Development vs
- 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
- 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 Profile (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 configuration – 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; <!-- 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>
- Minimal iPhone Support
- Home Screen Icon (Web Clip Icon)
- 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) <link rel=quot;apple-touch-iconquot; href=quot;images/apple-touch-icon.pngquot;/> iPhone Adds • Rounded corners • Drop shadow • Reflective shine
- 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
- 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
- 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> <!-- code removed for brevity --> </body> </html>
- 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
- 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
- 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 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(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>
- Testing
- iPhone/iPod Touch Challenges • Corporate Network Access • Hands of keyboard • Difficult to debug Should definitely use for final testing
- SDK iPhone Simulator Challenges • Only works on Leopard OSX • Difficult to debug Included with SDK/XCode
- Safari Challenges • Renders things the iPhone won’t Mac or Windows
- iPhone Spoofing
- 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/
Advertisement