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/WEBINFCreated 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/GwtMobilePhoneGap
• Chrome w/ Developer Tools
developer.palm.com
• 100% free:
• docs & forums
• tools & sdk
• app submission
• Use any tools or language you want!
Questions?
• josh.marinacci@palm.com
• JoshOnDesign.com
• @joshmarinacci
• Developer.Palm.Com
• Come by the HP Booth!