Downloaded 42 times
![CACHE: Cache Manifest File : /css/screen.css /css/offline.css • Simple text file /js/screen.js • Served as text/cache- /img/logo.png manifest FALLBACK: • Declared inside the <html> tag offline.html localStorage.setitem("myKey", "My value"); LocalStorage : localStorage.setitem("myKey", • Simple key/value storage "{my json structure"); • Simple API localStorage.getitem['myKey'] 6](https://image.slidesharecdn.com/gr8conf-120610141535-phpapp02/75/Developing-Mobile-HTML5-Apps-with-Grails-6-2048.jpg)
Uploaded byGR8Conf
Developing Mobile HTML5 Apps with Grails
This document summarizes a presentation about building mobile web apps with Grails. It introduces Grails, a web framework that can help with resource handling, caching, and deploying apps to the cloud. It also discusses jQuery Mobile, a library that can be used to build responsive web apps. The presentation recommends using the jQuery Mobile Client Scaffolding and PhoneGap Build plugins with Grails to generate HTML5 apps and native packages.
Developing Mobile HTML5 Apps with Grails
- 1. Building Mobile WebApps with Grails Sébastien Blanc Sopra Group
- 2. About me •34 yearsold, 2 children •50% french 50% dutch 100% geek Text •Software engineer working for Sopra Group •Follow me on twitter @sebi2706 2
- 3. What is aMobile Web App ? 4 3
- 4.
- 5.
- 6. CACHE: Cache Manifest File : /css/screen.css /css/offline.css • Simple text file /js/screen.js • Served as text/cache- /img/logo.png manifest FALLBACK: • Declared inside the <html> tag offline.html localStorage.setitem("myKey", "My value"); LocalStorage : localStorage.setitem("myKey", • Simple key/value storage "{my json structure"); • Simple API localStorage.getitem['myKey'] 6
- 7.
- 8. 9 8
- 9. Geolocation if(navigator.geolocation){ navigator.geolocation.getCurrentPosition( function(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; } ); } 9
- 10. ? 11 10
- 11.
- 12. • Official jQueryProduct • Progressive Enhancement • Strong Community • Stable releases 12
- 13. jQuery Mobile syntax <html> <body> <div data-role="page"> <div data-role="header"> <h1>Single page</h1> </div> <div data-role="content"> <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> </body> </html> 13
- 14. Grails & MobileWeb Apps ★Grails is a Web Framework ★Resource handling ★Cache handling ★Dedicated plugins ★Deploy to the cloud in seconds 14
- 15. What’s next ? jQueryMobile Client Scaffolding plugin : generates a complete independent HTML5 app Phonegap Build plugin : get the native packages in one click ! 15
- 16. Searching for theholy Grail 16