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

Eclipse Committer

Conference Speaker

Eclipse Committer

Conference Speaker

Mobile App Developer at Intel

Eclipse Committer

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

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

mobile apps!

Android

iPhone

Blackberry

Windows Phone

Tablets?!?

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

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?

but it is slow!!

building games?

3d physics?

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

Mobile (friendly) HTML5 Frameworks

jQueryMobile

Sencha

jQueryMobile

Sencha

jQueryMobile

Sencha

jQueryMobile

Sencha

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 :(

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/

gwt frameworks?

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

so what is mGWT

maven friendly

so what is mGWT

maven friendly

so what is mGWT

maven friendly

so what is mGWT

maven friendly

so what is mGWT

maven friendly

so what is mGWT

maven friendly

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>

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!

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

you can do

that with g

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

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

Presenter

Maven Archetype

mgwt, advanced

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

mgwt groups

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

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

murat@muratyener.com@yenerm

devchronicles.com

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)

JavaOne 2013: Introduction to PackedObjects

Duchess JavaOne 2011

Wdjhit javaone-2011-aa

Spring ME JavaOne

JavaOne 2010: OSGI Migrat

Windows Debugging Tools - JavaOne 2013

JavaOne summary

Javaone ts4693 v2

DataFX - JavaOne 2013

Project Zero JavaOne 2008

Participate @JavaOne Brazil 2012

DataFX 8 (JavaOne 2014)

JavaOne 2014: Java Debugging

JavaOne 2003, San Francisco 10.-13.6.2003 java.sun/javaone

JavaOne 2014 - 10 Key learnings

JavaOne 2016 - Faces Counter

Autumn collection JavaOne 2014

javaone handout infinispan - JBoss

JavaOne 2007 BOF Session

JavaOne Update zur Java Plattform