Java Mobile Apps with GWT &

hurtpotatocreekΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

58 εμφανίσεις

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.xml
Created 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.xml
Created 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!