Mobile Java with GWT Still “Write Once Run Everywhere” Murat Yener @yenerm
Dec 05, 2014
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?!?