Upload
murat-yener
View
1.395
Download
5
Embed Size (px)
DESCRIPTION
Updated Mobile Java with MGWT, "Still Write Once Run Everywhere" talk from GWT Create US
Citation preview
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?!?