Download - Java Mobile Apps with GWT & PhoneGap
Java Mobile Apps with GWT & PhoneGap
Josh Marinacci, webOS Developer Advocate
overview
•the problem
•what are gwt & phone gap
•building an app
•device apis
•fun stuff!
josh: java ninja
Open Source Project Founder
Swing, JavaFX, JavaStore
JavaScript
the problem
•no Java on iOS, webOS, PlayBook OS and others
•we want to code in Java
•we want to use web technologies
the solution
•GWT cross compiler
•PhoneGap build scripts
•Open source API bindings
what is GWT?
•Google Web Toolkit
•compiler: Java to JavaScript
•UI Toolkit & JavaSE APIs
•optimized by smart Googlers
•works on any WebKit!
How GWT works
•write Java code against GWT APIs
•debug with your Java IDE
•compile to optimized JavaScript
•run in any browser
•client and server side code
First GWT App
•download: code.google.com/webtoolkit/
•work through online tutorial
•mobilize
generate new project
webAppCreator -out MyApp com.myco.MyApp
localhost:gwt-2.0.4 joshmarinacci$ ./webAppCreator -out MyApp com.joshondesign.myapp.MyAppNot creating tests because -junit argument was not specified.Created directory MyApp/srcCreated directory MyApp/warCreated directory MyApp/war/WEB-INFCreated directory MyApp/war/WEB-INF/libCreated directory MyApp/src/com/joshondesign/myappCreated directory MyApp/src/com/joshondesign/myapp/clientCreated directory MyApp/src/com/joshondesign/myapp/serverCreated directory MyApp/src/com/joshondesign/myapp/sharedCreated directory MyApp/test/com/joshondesign/myappCreated directory MyApp/test/com/joshondesign/myapp/clientCreated file MyApp/src/com/joshondesign/myapp/MyApp.gwt.xmlCreated file MyApp/war/MyApp.htmlCreated file MyApp/war/MyApp.cssCreated file MyApp/war/WEB-INF/web.xmlCreated file MyApp/src/com/joshondesign/myapp/client/MyApp.javaCreated file MyApp/src/com/joshondesign/myapp/client/GreetingService.javaCreated file MyApp/src/com/joshondesign/myapp/client/GreetingServiceAsync.javaCreated file MyApp/src/com/joshondesign/myapp/server/GreetingServiceImpl.javaCreated file MyApp/src/com/joshondesign/myapp/shared/FieldVerifier.javaCreated file MyApp/build.xmlCreated file MyApp/README.txtCreated file MyApp/.projectCreated file MyApp/.classpathCreated file MyApp/MyApp.launchCreated file MyApp/war/WEB-INF/lib/gwt-servlet.jarlocalhost:gwt-2.0.4 joshmarinacci$
GWT App Structure•client/
•GUI code, define services & proxies
•server/
•implement services
•shared/
•common code
build
•run ant
•gwtc will compile your app to javascript
•generates permutations & war
•run in appserver
[demo]
Web Technology: Browser Page or
App?•Browser: always remote
•easy deployment
•100% connection required
•App: always local
•loads faster, easy to launch
•have to submit to app catalog
What is PhoneGap?
•packages HTML into native apps
•iPhone -> generate ObjC wrapper -> app
•Android -> generate Java wrapper -> app
•webOS -> app
Build a Mobile App
•Turn the client code into an app
•Don’t use server code OR put server side code on a real server
•Generate native projects with Phone Gap
•Compile and submit for each platform
GWT + PhoneGap
• create phonegap dir
• copy phonegap-palm
• copy /war/myapp/ to framework/www/myapp/
• copy /war/MyApp.html to framework/www/index.html
• package, install, and run webOS app
• repeat for other platforms
[demo]
Mobilize your App
Customizing for Mobile
•improve your UI design for tapping
•shrink everything with CSS
•support multiple resolutions
•hook into device APIs
•use HTML Canvas
UI Styling with CSS
•[example]
•[master detail app with transitions]
Device Sizes
•media-queries
•[show same app on phone and touchpad]
Device Access: Camera
•[example]
•[simple app to take a picture, show it, then upload it to twitpic]
HTML Canvas
•2D drawing api in HTML
•direct GWT support
•good for games and graphics
Canvas
•[demo of doing some charts]
GWT Play
•[demo]
Tools
•code.google.com/p/gwt-mobile-webkit/
•github.com/dennisjzh/GwtMobile-PhoneGap
•Chrome w/ Developer Tools
developer.palm.com
•100% free:
•docs & forums
•tools & sdk
•app submission
•Use any tools or language you want!
Questions?
•JoshOnDesign.com
•@joshmarinacci
•Developer.Palm.Com
•Come by the HP Booth!