Java Mobile Apps with GWT & PhoneGap

1. Java Mobile Apps with GWT & PhoneGap • Josh Marinacci, webOS Developer Advocate

2. overview • the problem • what are gwt & phone gap • building an app • device apis • fun stuff!

3. josh: java ninja

4. Open Source Project Founder

7. Swing, JavaFX, JavaStore

11. JavaScript

14. the problem • no Java on iOS, webOS, PlayBook OS and others • we want to code in Java • we want to use web technologies

15. the solution • GWT cross compiler • PhoneGap build scripts • Open source API bindings

16. what is GWT? • Google Web Toolkit • compiler: Java to JavaScript • UI Toolkit & JavaSE APIs • optimized by smart Googlers • works on any WebKit!

17. 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

18. First GWT App • download: code.google.com/webtoolkit/ • work through online tutorial • mobilize

19. generate new project webAppCreator -out MyApp com.myco.MyApp

20. 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$

21. GWT App Structure • client/ • GUI code, define services & proxies • server/ • implement services • shared/ • common code

22. build • run ant • gwtc will compile your app to javascript • generates permutations & war • run in appserver

23. [demo]

24. 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

25. What is PhoneGap? • packages HTML into native apps • iPhone -> generate ObjC wrapper -> app • Android -> generate Java wrapper -> app • webOS -> app

26. 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

27. 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

28. [demo]

29. Mobilize your App

30. Customizing for Mobile • improve your UI design for tapping • shrink everything with CSS • support multiple resolutions • hook into device APIs • use HTML Canvas

31. UI Styling with CSS • [example] • [master detail app with transitions]

32. Device Sizes • media-queries • [show same app on phone and touchpad]

33. Device Access: Camera • [example] • [simple app to take a picture, show it, then upload it to twitpic]

34. HTML Canvas • 2D drawing api in HTML • direct GWT support • good for games and graphics

35. Canvas • [demo of doing some charts]

36. GWT Play • [demo]

37. Tools • code.google.com/p/gwt-mobile-webkit/ • github.com/dennisjzh/GwtMobile-PhoneGap • Chrome w/ Developer Tools

38. developer.palm.com • 100% free: • docs & forums • tools & sdk • app submission • Use any tools or language you want!

39. Questions? • josh.marinacci@palm.com • JoshOnDesign.com • @joshmarinacci • Developer.Palm.Com • Come by the HP Booth!