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?

•josh.marinacci@palm.com

•JoshOnDesign.com

•@joshmarinacci

•Developer.Palm.Com

•Come by the HP Booth!