Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Development with


     Christopher M. Judd
Christopher M. Judd
President/Consultant of

                                    leader
Creator of open source projects Fa...
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)



          ...
Browser

   HTML 4.01
  XHTML 1.0
   JavaScript 3
 CSS 2.1 (partial 3.0)
  DOM Level 2                               XHTML...
Browser

   HTML 4.01
  XHTML 1.0
   JavaScript 3
 CSS 2.1 (partial 3.0)
  DOM Level 2                               XHTML...
iPhone Development

        vs
Disadvantages:
Advantages:
                             Must know Objective-C
 Access native features
                    ...
Advantages:                  Disadvantages:
 Develop with Server-side     Don’t have access to
    technology of choice   ...
Support Levels

Incompatible                Optimized
               Compatible
Incompatible Websites
No plug-in support
                                                       Avoid
                    ...
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 ...
Grails MVC

    Controller




                 Domain
                          DB
      GSP
Grails Development Environment
      JDK
  •                               JDK 1.4


      Web Container/App Server
  •
  ...
Installing Grails

1. Download from http://www.grails.org/Download
  • 1.0.4 - Stable Release
  • 1.1-BETA2 - Development ...
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 {
g...
Implement Domains
    Add properties, methods, constraints, relationships

class Note {
  String title
  String content
  ...
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 ind...
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-...
Home Screen Icon
        (Web Clip Icon)



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



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



    <link rel=quot;apple-touch-iconquot;
        href=quot;images/apple-touch-...
Scaling




        Default width is 980                              Custom Viewport
   and scaled down by 2:1 or 3:1
<me...
Custom iPhone
 Applications
   with iUI
iUI
 Provide a native iPhone application look and feel
  Open Source library containing
   Cascading Style Sheets (CSS)
  ...
iUI is AJAX
ommonly implemented as a single page
Named anchors URLs transition to named elements
Standard URLs make AJAX r...
Setting up iUI
     1.Download tar
     2.Uncompress
     3.Copy images, iui.css, iui.js and iuix.js to web project
     4...
Toolbar
<html>
  <head>
   <!-- code removed for brevity -->
  </head>
  <body>
    <div class=quot;toolbarquot;>
       <...
List
 <html>
   <head>
      <!-- code removed for brevity -->
   </head>
   <body>
     <div class=quot;toolbarquot;>
   ...
Forms
<html>
  <body>

  <div style=quot;left: 0%;quot; id=quot;Notesquot; title=quot;Notesquot; class=quot;panelquot;>
  ...
Grails and iUI
Grails iUI Plug-in
      A plug-in for simplifying using iUI with Grails.
                   http://grails.org/iUI+Plugin
...
Determine iPhone
User-Agents
 iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
    like G...
Render iPhone View

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

    if (request.fromIPhone)
      render(view:'iphone...
Snippets
                                Use templates

 <ul id=quot;notesquot; title=quot;Notesquot; selected=quot;truequ...
Testing
iPhone/iPod Touch

                      Challenges
                      • Corporate Network Access
                     ...
SDK iPhone Simulator

              Challenges
              • Only works on Leopard OSX
              • Difficult to debug...
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
          ...
Resources


Web Development Guidelines for the iPhone (Safari Web Content Guide for iPhone OS)
   - https://developer.appl...
Upcoming SlideShare
Loading in …5
×

IPhone Web Development With Grails from CodeMash 2009

10,597 views

Published on

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

Published in: Education, Technology
  • Be the first to comment

IPhone Web Development With Grails from CodeMash 2009

  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/

×