mobile java with gwt, still write once run everywhere (mgwt+phonegap)

MOBILE JAVA(GWT, MGWT, PHONEGAP)

Still “Write Once Run Everywhere”

Murat YENER

Friday, May 25, 12

MURAT YENERJava/JavaEE, GWT, Flex, Android, iOS, Node.js...

Developer

Google Developer Group Istanbul

Eclipsist 2008/2009, EclipseCon 2010,

JavaOne 2011

Friday, May 25, 12

This talk is highly inspired by Matt Raible’s talk at Devoxxhttp://www.parleys.com/#st=5&id=2925&sl=0

Friday, May 25, 12

http://www.parleys.com/#st=5&id=2925&sl=0

http://www.parleys.com/#st=5&id=2925&sl=0

MOBIL APPS

Friday, May 25, 12

MOBIL APPS

• Android

Friday, May 25, 12

MOBIL APPS

• Android

• iPhone

Friday, May 25, 12

MOBIL APPS

• Android

• iPhone

• Blackberry

Friday, May 25, 12

MOBIL APPS

• Android

• iPhone

• Blackberry

• Windows Phone

Friday, May 25, 12

MOBIL APPS

• Android

• iPhone

• Blackberry

• Windows Phone

• Tablets?!?

Friday, May 25, 12

19911992

19931994

19951996

19971998

19992000

20012002

20032004

20052006

2007

2008

2012

2011

2012

WEB & MOBILE

HTMLHTML2

CSS+JSHTML4

CSS2XHTML

TablelessWeb

AJAX

HTML5

WM 2003

WM 5

WM 6

WinPhone7

2009

2010

2011

2012

iPhone

iPhone3GiPhone3GS

iPhone4iPhone4S

iPadiPad2

AndroidBetaAndroid 1.0

Android 1.1Cupcake

DonutEclair

FroyoGingerbread

Honeycomb

ICS

Friday, May 25, 12

19911992

19931994

19951996

19971998

19992000

20012002

20032004

20052006

2007

2008

2012

2011

2012

WEB & MOBILE

HTMLHTML2

CSS+JSHTML4

CSS2XHTML

TablelessWeb

AJAX

HTML5

WM 2003

WM 5

WM 6

WinPhone7

2009

2010

2011

2012

iPhone

iPhone3GiPhone3GS

iPhone4iPhone4S

iPadiPad2

AndroidBetaAndroid 1.0

Android 1.1Cupcake

DonutEclair

FroyoGingerbread

Honeycomb

ICS

+ BlackberrySymbian

...

Friday, May 25, 12

Friday, May 25, 12

Web Apps: Teaching the old dog new tricks?

Friday, May 25, 12

HTML MOBILE FRAMEWORKS

• Sencha

• Titanium

• ...

Friday, May 25, 12

HTML5

• Storage, WebSQL, Application Cache, Web Workers, WebSocket, Notifications, Drag&Drop, GeoLocation, Speech, Audio, Video, Canvas, SVG...

•New tags!!! <article> <aside> <section> <header> <footer> <nav> <audio> <video> <datalist> <details>...

• Gone!!! <applet> <center> <font> <frame> <frameset>

• http://www.w3schools.com/html5/html5_reference.asp

Friday, May 25, 12

http://www.w3schools.com/html5/html5_reference.asp

http://www.w3schools.com/html5/html5_reference.asp

CSS3• Animated Transitions

• Rounded Corners

•Drop Shadows

• Gradient Colors

• Background Decoration

• Text Effects

•Web Fonts

Friday, May 25, 12

JAVASCRIPT

• IDE?

•Debugging?

Friday, May 25, 12

Friday, May 25, 12

GOOGLE WEB TOOLKIT

•Write Java, compile Javascript

• Eclipse integration

•Debug Javascript on Java

• Browser compability (from IE6 to mobile!!!)

Friday, May 25, 12

GWT, MOBILE?

• Style? (CSS?)

•Native Widgetlar (Button, Combo, Checkbox...)

•Online/Offline

• APIs (Camera, GPS, Contacts...)

Friday, May 25, 12

UI

Friday, May 25, 12

LOOKING NATIVE• gwt-mobile-webkit: database, storage,

geolocation, widgets(?) http://code.google.com/p/

gwt-mobile-webkit/

• gwtmobile: GwtMobile-UI, Gwtmobile-Persistence, GwtMobile-PhoneGap(!) http://code.google.com/p/gwtmobile/

• touch4j: Sencha, $$ http://www.emitrom.com/gwt4touch

•mgwt: UI Widgets, GWT-Phonegap http://code.google.com/p/mgwt/

Friday, May 25, 12

http://code.google.com/p/gwt-mobile-webkit/




http://code.google.com/p/gwtmobile/

http://code.google.com/p/gwtmobile/

http://www.emitrom.com/gwt4touch




http://code.google.com/p/mgwt/




MGWT

• Standard GWT (Java)

• JavaScript via JSNI

•Native looking widgets

• iOS, Android, Blackberry...

• Phones & Tablets

•Online &Offline

Friday, May 25, 12

Friday, May 25, 12

PROJECT :)

• Chronometer + map (location, maps)

•MP3 player (audio)

• Friend List(contacts, http request, social login)

• History (storage)

Friday, May 25, 12

STARTING MGWT

• Eclipse GWT plugin

•MGWT

•Model-View-Presenter

•Maven Archetype

Friday, May 25, 12

MAPS

• Google Maps Ver 2.0: http://code.google.com/p/gwt-google-apis/

• Google Maps Ver 3.0: http://code.google.com/p/gwt-google-maps-v3/

•No Javascript so far!

• <inherits name='com.google.gwt.maps.GoogleMaps' />

Friday, May 25, 12

http://code.google.com/p/gwt-google-apis/


http://code.google.com/p/gwt-google-maps-v3/






MAPS

• Google Maps Ver 2.0: http://code.google.com/p/gwt-google-apis/

• Google Maps Ver 3.0: http://code.google.com/p/gwt-google-maps-v3/

•No Javascript so far!

• <inherits name='com.google.gwt.maps.GoogleMaps' />

alpha

Friday, May 25, 12





























LOCATION

• HTML5 Geolocation

• Still no Javascript!!

Friday, May 25, 12

LOCATION

• HTML5 Geolocation

• Still no Javascript!!

UserLocation.getLocation(new UserLocationCallback() { @Override public void onLocationFound(Coordinates coords) { getMap(coords); }});

Friday, May 25, 12

FIRST TRY

• HTML5 Geolocation not accurared

• Just a straight line instead of a route

• The app stops when the device is locked

Friday, May 25, 12

FIRST TRY




enableHighAccuracy: True

Friday, May 25, 12

FIRST TRY





Google Maps Polylines

Friday, May 25, 12

FIRST TRY





Google Maps Polylines

PhoneGap?

Friday, May 25, 12

PHONEGAP

• or the new Cordova

• iOS Plugin (http://phonegap.com/start#ios-x4)

• Android Plugin (http://phonegap.com/start#android)

• and others...

Friday, May 25, 12

http://phonegap.com/start#ios-x4

http://phonegap.com/start#ios-x4

http://phonegap.com/start#android

http://phonegap.com/start#android

BUT WHERE IS THE MAP?!?

Friday, May 25, 12

URL PERMISSIONS

•maps.gstatic

•mt1.googleapis

•mt0.googleapis

•maps.google.com

Friday, May 25, 12

SECOND TRY

• Still when the location updates stop when the device is locked!

Friday, May 25, 12

SECOND TRY

• Still when the location updates stop when the device is locked!

PhoneGap!!!

Friday, May 25, 12

PHONEGAP SETTINGS

Friday, May 25, 12

MP3 PLAYER

• Local vs Streaming

• HTML5 <Audio>

• com.phonegap.audiohandler

Friday, May 25, 12

HISTORY

• LocalStorage, Javascript wrapper

•WebSQL

• Cookies!!

public native static void setItem(String key, String value) /*-{ $wnd.localStorage.setItem(key, value);}-*/;

public native static String getItem(String key) /*-{ return $wnd.localStorage.getItem(key);}-*/;

public static String getItem(String key){ return Cookies.getCookie(key);} public static void setItem(String key, String value){ Cookies.setCookie(key, value, new Date(2050, 1, 1), "", "", true);}

Friday, May 25, 12

MY FRIENDS

• Getting contacts

• Social login

phoneGap.getContacts()

gwt-google-apis

& OAuth

Friday, May 25, 12

MY FRIENDS


• Social login


gwt-google-apis

& OAuth

PLUS.initialize(new SimpleEventBus(), new GoogleApiRequestTransport(APPLICATION_NAME, API_KEY));

final Button b = new Button("Authenticate to get public activities"); b.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent e) { OAuth2Login.get().authorize(CLIENT_ID, PlusAuthScope.PLUS_ME, new Callback<Void, Exception>() {

@Override public void onSuccess(Void v) { PLUS.people().get("me").to(new Receiver<Person>() {

@Override public void onSuccess(Person person) { println("Hello " + person.getDisplayName()); } }).fire();

}

@Override public void onFailure(Exception e) { println(e.getMessage()); } });

} });

Friday, May 25, 12

MY FRIENDS


• Social login


gwt-google-apis

& OAuth

Friday, May 25, 12

MY FRIENDS


• Social login


gwt-google-apis

& OAuth

Phonegap child browser plug

in

Friday, May 25, 12

PHONEGAP PLUGIN

• Android http://wiki.phonegap.com/w/page/43708611/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20Android

• iOS http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS

plugins.xml <plugin name="BatteryLevelPlugin" value="com.example.BatteryLevelPlugin" />

plugins folder : .m .h files

phonegap.plist:

www folder: javascript files

Friday, May 25, 12

http://wiki.phonegap.com/w/page/43708611/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20Android






http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS



SWIPE PANEL

• Google+

• Built in widget in Sencha and other frameworks

• not in mGWT!?!

•Wrapping Javascript with JSNI?

Friday, May 25, 12

JSNI

Friday, May 25, 12

MGWT GROUPS

https://groups.google.com/forum/?fromgroups#!forum/mgwt

Friday, May 25, 12



OK THEN...

Friday, May 25, 12

mobile java with gwt, still write once run everywhere (mgwt+phonegap)

Technology

native gwtmobile

gwtphonegap http

webkit gwtmobile

html5web mobile

mobile javagwt

devoxx http

google web toolkit

ui widgets