Mobile Java with GWT

(and alternatives)Murat Yener & Alex Theedom

@yenerm @alextheedom

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 did they just fix it??

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?

...

no most of the time we just do this!

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

Chromium WebView

Mobile (friendly) HTML5

Frameworks

jQueryMobile

Sencha

Zepto

mGWT

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/

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>

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' />

add a litte spice:

phonegap

geolocation

camera

accelerator

compass

phonebook

file system

even nfc

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(){

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

}

});

}

}

}

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

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

JSNI

public 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

gwtquery

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

}

});

}

skinning

default 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), inset

1px 0px 0px rgba(255,255,255,0.21), inset 0px -1px 0px

rgba(0,0,0,0.21), inset 0px 1px 0px rgba(255,255,255,0.41), 0px 1px

2px 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)

Interested in OSGi? No? ok, i thought so…

and GWT.create at San Francisco

murat@muratyener.com

@yenerm

devchronicles.com

40% discount with promo

code

VBK43when ordering

through

wiley.com

valid until end of

December 2015

who (the hell) am I?!?

Java (Spring/EE) developer

Microservices

Jersey Coders Mentor

Conference Speaker

Cross-platform Mobile

Development

Develop once run on multiple platforms

Choose just ‘one’ language

Two Approaches

Hybrid

Cross compile

Tabris

Hybrid

Java

.war

JSON

Lets see some code

UI coded in Java

Rendered in native UI

Codename One

Compile to native

C#

JDK 1.3

iOS

Windows Phone

C

Java 5

Lets see some code

Familiar to Swing

and GWT coders

Java 8 next release

Oracle Mobile Application

Framework (MAF)

Only Jdeveloper or Eclipse

Lightweight JVM

Lets see some code

Flow define GUI

Device feature via DeviceManager