Mobile Java with GWT Still “Write Once Run Everywhere”

Murat Yener @yenerm

who am I?!?

• Java, Flex, GWT, iOS, Android Developer

• Android Developer at Intel

• Eclipse Committer (libra anyone?)

• GDG Istanbul Organizer

• Conference Speaker

my history: iOS

java was everywhere…

• Java EE

• Web

• Java SE

• Java ME

• on Windows, Mac, Linux, Symbian…

literally everywhere!!

android to rescue

• Activities

• Services

• Widgets

• Intents

but still what about iOS??

the fifth element, the WebView

• HTML5 frameworks

• Phonegap

• Native (like) UX

come on HTML5 on mobile?

• Facebook killed the HTML5 app, Zuckerberg said HTML5 is not there yet…

!

• LinkedIn moved to native

try fastbook from Sencha fb.html5isready.com

and it took ages to fix the native app…

Hybrid Apps: Teaching the old dog new tricks?

html5 apps in native shell?? nuts!! this is too complicated!!

really?!?

• have many of you have web development experience?

• how many of you develop native apps?

• how many of you don’t like web development just because of javascript??

but it is slow…

• building games?

• 3d physics?

• image or sound processing?

• ...

no most of the time we just do this!

so this is web?!?

• Angry Birds for Chrome (GWT)

• Quake on Mobile (requires Chrome Beta for WebGL) http://mediatojicode.com/q3bsp/

“We started with the existing Jake2 Java port of the Quake II engine, then used the Google Web Toolkit (along with WebGL, WebSockets, and a lot of refactoring) to cross-compile it into Javascript. You can see the results in the video above — we were honestly a bit surprised when we saw it pushing over 30 frames per second on our laptops (your mileage may vary)!” from Google Code Blog...

Chromium WebView

Mobile (friendly) HTML5 Frameworks

• jQueryMobile

• Sencha

• Zepto

• …

Hey wait, I am a GWT dev

• GWT compiler does the magic

• Optimized high performance javascript

• cross browser compability (upto ie6)

• not really mobile look’n feel :(

UI & UX

GWT to Mobile• 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/

meet MGWT

• mobile widget library on gwt

• native looking widgets for each platform

• maven friendly

• mvp ready (maven archetype)

• and with gwt-phonegap

how to start?

• get the source https://code.google.com/p/mgwt

• or download the jar

• or just use maven

<dependency> <groupId>com.googlecode.mgwt</groupId> <artifactId>mgwt</artifactId> <version>1.1.2</version> </dependency>

hello world!public class MGWTEntryPoint implements EntryPoint {! public void onModuleLoad() { // set viewport and other settings for mobile MGWT.applySettings(MGWTSettings.getAppSetting());! // build animation helper and attach it AnimationHelper animationHelper = new AnimationHelper(); RootPanel.get().add(animationHelper);! // build some UI LayoutPanel layoutPanel = new LayoutPanel(); Button button = new Button("Hello mgwt"); layoutPanel.add(button);! // animate animationHelper.goTo(layoutPanel, Animation.SLIDE);}

}

other libraries

• 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' />

add a litte spice: phonegap• geolocation

• camera

• accelerator

• compass

• phonebook

• file system

• even nfc basicall

y any na

tive API!!

phonegap in action

...Button button = new Button("Hello mgwt");button().addTapHandler(new TapHandler() { @Override public void onTap(TapEvent event) { phoneGap.getNotification().alert("Done!!"); }}); layoutPanel.add(button);...

phonegap, in real actionphoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){

@Override public void onSuccess(Position position) { // check accuracy if (position.getCoordinates().getAccuracy() > 11) { raceView.getLabel().setText("Error: Accuracy"); } // geolocation returns mps, multiply with 3.6 to convert to kph double speed = 3.6 * position.getCoordinates().getSpeed(); if (speed > 0.2) {// if going

raceView.getLabel().setText(speed + "km @" + position.getCoordinates().getAccuracy());

currentLocation = position;// got the position now can start!start();

// stop if the threshold is reached if (isGoing && speed >= 60) { MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher); endLocation = position;calculate();

} } else {// if stoped raceView.getLabel().setText("get ready!!"); isGoing = false; }

}

@Override public void onFailure(PositionError error) { MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");

} });

even more…public void onTap(TapEvent event) { final MCheckBox check = ((MCheckBox) event.getSource()); if (check.getValue()) { if (TWITTER.equalsIgnoreCase(type)) profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/twitter"); else if (FACEBOOK.equalsIgnoreCase(type)) profileView.getBrowser().showWebPage(Service.BASE_URL + "auth/facebook"); profileView.getBrowser().addLocationChangeHandler(new ChildBrowserLocationChangedHandler() { @Override

public void onLocationChanged(ChildBrowserLocationChangedEvent event) { //Do the login... }

});

}

}

} make use of the phonegap plugins!

going fancy, mvp!

• code your UI in the View preferably in xml via UIBinder

• and your logic in the controller (activity)

• sound familiar?

• easy navigation

• lots of boilerplate code

mvp in mgwt

• MVP

• Model

• View

• Presenter

• Maven Archetype

connecting to backend• GWT-RPC (yeah, it rocks), but in native package?

• JSONP with with RequestBuilder & AutobeanJsonpRequestBuilder jsonp = new JsonpRequestBuilder();String url = URL.encode(JSON_URL + "/sendData/" + “HelloWorld”);

jsonp.requestObject(url, new AsyncCallback<JavaScriptObject>() {

@Override

public void onFailure(Throwable caught) {

MgwtAppEntryPoint.phoneGap.getNotification().alert(caught.getMessage());

}

@Override

public void onSuccess(JavaScriptObject result) { JSONObject jsObj = new JSONObject(result); AutoBean<Score[]> bean = AutoBeanCodex.decode(factory, Score[].class, jsObj.toString());

Score[] scores = bean.as();

scoresCallback.onResponse(scores); } });

re-using javascript

• can use any existing javascript

• use javascript in type safe way

• BUT!! don’t mess touch events!!

• AND beware you are not in the safe and optimized zone anymore!!

basic JSNIpublic native static String key(int index) /*-{

return $wnd.localStorage.key(index);

}-*/;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 native static void removeItem(String key) /*-{

$wnd.localStorage.removeItem(key);

}-*/;

public native static void clear() /*-{

$wnd.localStorage.clear();

}-*/;

building my swipe panel

• just like the one in sencha

• so wrapped swipeview from cubiq

mgwt groups

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

daniel to rescue..

and just before a talk..

gquerypublic void onModuleLoad() { //Hide the text and set the width and append an h1 element $("#text").hide() .css("width", "400px") .prepend("<h1>GwtQuery Rocks !</h1>"); //add a click handler on the button $("button").click(new Function(){ public void f() { //display the text with effects and animate its background color $("#text").as(Effects) .clipDown() .animate("backgroundColor: 'yellow'", 500) .delay(1000) .animate("backgroundColor: '#fff'", 1500); }});

}

skinning

• default themes for

• Android (>4.0)

• iOS/iOS retina (<7.0)

• Blackberry

• easy to create yours

//append your own css as last thing in the head MGWTStyle.injectStyleSheet("yourcssfile.css");

https://code.google.com/p/mgwt/wiki/Styling

wait, css in java?!?.mgwt-Button { display: inline-block; float: left; width: 145px; height: 100px; border: 1px solid rgba(0,0,0,0.23); background: #ff6600; border-radius: 6px; box-shadow: inset -1px 0px 0px rgba(255,255,255,0.41), inset1px 0px 0px rgba(255,255,255,0.21), inset 0px -1px 0pxrgba(0,0,0,0.21), inset 0px 1px 0px rgba(255,255,255,0.41), 0px 1px2px rgba(0,0,0,0.21); text-align: center; font-size: 14px; margin: 5px; font-weight: bold; text-shadow: 0px 1px 1px rgba(0,0,0,0.49); color: white; line-height: 124px;}

debugging

• first class java debugging in your IDE

• GWT pretty compile and debug javascript in your browser

• use source maps and debug java in your browser!!

• use remote debugging to debug on mobile devices

what about others?

• iOS, works like charm.. pretty much native

• android, near native experience

• blackberry

• windows phone

• tablets?

• desktop??

what can i really build?• anything! (almost)

• but why not going native for games

• many widgets.. lists, carousels, forms

• dev friendly, you know java? just dive in!

• make use of current js

• windows phone? seriously?!?

murat@muratyener.com @yenerm

devchronicles.com

thanks… questions?