mobile java with mgwt, "still write once run everywhere"
DESCRIPTION
Updated Mobile Java with MGWT, "Still Write Once Run Everywhere" talk from GWT Create USTRANSCRIPT
![Page 1: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/1.jpg)
Mobile Java with GWT Still “Write Once Run Everywhere”
Murat Yener @yenerm
![Page 2: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/2.jpg)
who am I?!?
• Java, Flex, GWT, iOS, Android Developer
• Android Developer at Intel
• Eclipse Committer (libra anyone?)
• GDG Istanbul Organizer
• Conference Speaker
![Page 3: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/3.jpg)
my history: iOS
![Page 4: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/4.jpg)
java was everywhere…
• Java EE
• Web
• Java SE
• Java ME
• on Windows, Mac, Linux, Symbian…
![Page 5: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/5.jpg)
literally everywhere!!
![Page 6: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/6.jpg)
android to rescue
• Activities
• Services
• Widgets
• Intents
but still what about iOS??
![Page 7: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/7.jpg)
the fifth element, the WebView
• HTML5 frameworks
• Phonegap
• Native (like) UX
![Page 8: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/8.jpg)
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…
![Page 9: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/9.jpg)
Hybrid Apps: Teaching the old dog new tricks?
![Page 10: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/10.jpg)
html5 apps in native shell?? nuts!! this is too complicated!!
![Page 11: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/11.jpg)
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??
![Page 12: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/12.jpg)
but it is slow…
• building games?
• 3d physics?
• image or sound processing?
• ...
no most of the time we just do this!
![Page 13: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/13.jpg)
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...
![Page 14: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/14.jpg)
Chromium WebView
![Page 15: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/15.jpg)
Mobile (friendly) HTML5 Frameworks
• jQueryMobile
• Sencha
• Zepto
• …
![Page 16: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/16.jpg)
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 :(
![Page 17: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/17.jpg)
UI & UX
![Page 18: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/18.jpg)
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/
![Page 19: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/19.jpg)
meet MGWT
• mobile widget library on gwt
• native looking widgets for each platform
• maven friendly
• mvp ready (maven archetype)
• and with gwt-phonegap
![Page 20: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/20.jpg)
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>
![Page 21: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/21.jpg)
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);}
}
![Page 22: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/22.jpg)
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' />
![Page 23: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/23.jpg)
add a litte spice: phonegap• geolocation
• camera
• accelerator
• compass
• phonebook
• file system
• even nfc basicall
y any na
tive API!!
![Page 24: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/24.jpg)
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);...
![Page 25: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/25.jpg)
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");
} });
![Page 26: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/26.jpg)
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!
![Page 27: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/27.jpg)
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
![Page 28: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/28.jpg)
mvp in mgwt
• MVP
• Model
• View
• Presenter
• Maven Archetype
![Page 29: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/29.jpg)
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); } });
![Page 30: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/30.jpg)
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!!
![Page 31: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/31.jpg)
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();
}-*/;
![Page 32: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/32.jpg)
building my swipe panel
• just like the one in sencha
• so wrapped swipeview from cubiq
![Page 33: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/33.jpg)
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
![Page 34: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/34.jpg)
daniel to rescue..
![Page 35: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/35.jpg)
and just before a talk..
![Page 36: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/36.jpg)
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); }});
}
![Page 37: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/37.jpg)
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
![Page 38: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/38.jpg)
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;}
![Page 39: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/39.jpg)
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
![Page 40: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/40.jpg)
what about others?
• iOS, works like charm.. pretty much native
• android, near native experience
• blackberry
• windows phone
• tablets?
• desktop??
![Page 41: Mobile Java with MGWT, "Still Write Once Run Everywhere"](https://reader035.vdocuments.net/reader035/viewer/2022062615/5484018cb47959ce0c8b4a89/html5/thumbnails/41.jpg)
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?!?