Mobile Java with mGWT, "Still Write Once Run Everywhere" (JavaOne 2013)

Mobile Java with GWTMurat Yener@yenerm

Wednesday, October 9, 13

who (the hell) am I?!?

Java, Flex, GWT, iOS, Android developer

Principle Mentor at Eteration

Eclipse Committer

GDG (GTUG) Istanbul Organizer

Conference Speaker


who (the hell) am I?!?

Java, Flex, GWT, iOS, Android developer

Principle Mentor at Eteration

Eclipse Committer

GDG (GTUG) Istanbul Organizer

Conference Speaker

Mobile App Developer at Intel


as a mobile developer


what (the hell) is this talk about?!?

The fifth element... The Webview..

HTML5 mobile frameworks

Phonegap

keeping native UX


so an HTML5 talk???

Facebook killed HTML5 app.. Zuckerberg said HTML5 is not there yet!!

try fastbook from sencha fb.html5isready.com

LinkedIn moved to native!!

so is it really better now??


mobile apps!

Android

iPhone

Blackberry

Windows Phone

Tablets?!?


Hybrid Apps: Teaching the old dog new tricks?


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

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?

...


but it is slow!!

building games?

3d physics?

image or sound processing?

...

no most of the time we just do this!Wednesday, October 9, 13

wait is this really 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...


http://mediatojicode.com/q3bsp/

http://mediatojicode.com/q3bsp/

Mobile (friendly) HTML5 Frameworks

jQueryMobile

Sencha

Zepto

mGWT


Mobile (friendly) HTML5 Frameworks

jQueryMobile

Sencha

Zepto

mGWThey, wait! n

o javascript

?!?


GWT 101: java to javascript?

GWT compiler does the magic

Optimized high performance javascript

cross browser compability (upto ie6)

not really mobile look’n feel :(


UI & UX


gwt frameworks?

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/


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

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://www.emitrom.com/gwt4touch

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

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

so what is mGWT

mobile widget library on gwt

native looking widgets for each platform

maven friendly

mvp ready (maven archetype)

and with gwt-phonegap


where 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>


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

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

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);

} }


using other libs: ex. 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' />


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




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






add a litte spice: phonegap

geolocationcameraacceleratorcompassphonebookfile systemeven nfc


add a litte spice: phonegap

geolocationcameraacceleratorcompassphonebookfile systemeven 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 reachedif (isGoing && speed >= 60) {

MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher); endLocation = position;calculate();

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

}

@Overridepublic void onFailure(PositionError error) {

MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");}

});


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 reachedif (isGoing && speed >= 60) {

MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher); endLocation = position;calculate();

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

}

@Overridepublic void onFailure(PositionError error) {

MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");}

});

yes, you th

is is html5 a

nd

you can do

that with g

wt


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... }

});

}

}

}


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


mgwt, advanced

MVP

Model

View

Presenter

Maven Archetype


connecting to backendGWT-RPC (yeah, it rocks), but in native package?

JSONP with with RequestBuilder & Autobean


connecting to backendGWT-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); }});


accessing native js

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!!


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

wrapped swipeview from cubiq


mgwt groups

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




daniel to rescue..


here it is


gwtquerycoming from jQuery, no problem!

public 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);

}

});

}


skinningdefault themes for

Android (>4.0)

iOS/iOS retina (<7.0)

Blackberry

easy to create yours https://code.google.com/p/mgwt/wiki/Styling

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


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

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!

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?!?


</slides>

GDG Istanbul (every 3. or 4. Saturday)DevFest Istanbul devfesttr.com

[email protected]@yenerm

devchronicles.com


mailto:[email protected]

mailto:[email protected]

Mobile Java with mGWT, "Still Write Once Run Everywhere" (JavaOne 2013)

Technology

Transcript of Mobile Java with mGWT, "Still Write Once Run Everywhere" (JavaOne 2013)