Times have changed, and although Java ME still has market share, it is not available on all devices anymore. Java/Java ME developers had no problem moving to BlackBerry or Android but faced challenges on iOS. HTML5 plus PhoneGap apps promised a silver bullet for a “write once, run on all devices” approach via several frameworks, which, in the end, offered painful JavaScript and CSS development. Although GWT offers a great Java-to-JavaScript compiler and debugger, mgwt introduces native-looking widgets on iOS, Android, and even BlackBerry. Also, with the addition of GWT/PhoneGap projects, you can now code native-looking HTML apps that can use native APIs with regular, type-safe, well-known beautiful Java without coding a single line of HTML plus JavaScript. Learn more in this session.

1. Mobile Java with GWT
(and alternatives)
Murat Yener & Alex Theedom
@yenerm @alextheedom

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

3. as a mobile developer

4. what (the hell) is this talk
about?!?
The fifth element... The Webview..
HTML5 mobile frameworks
Phonegap
keeping native UX

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

6. mobile apps!
Android
iPhone
Blackberry
Windows Phone
Tablets?!?

7. Hybrid Apps: Teaching the old dog new tricks?

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

9. but it is slow!!
building games?
3d physics?
image or sound processing?
...
no most of the time we just do this!

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

11. Chromium WebView

12. Mobile (friendly) HTML5
Frameworks
jQueryMobile
Sencha
Zepto
mGWT

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

14. UI & UX

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

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

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

18. 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);
}
}

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

20. add a litte spice:
phonegap
geolocation
camera
accelerator
compass
phonebook
file system
even nfc

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

22. phonegap, in real action
phoneGap.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");
}
});

23. 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...
}
});
}
}
}

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

25. mgwt, advanced
MVP
Model
View
Presenter
Maven Archetype

26. connecting to backend
GWT-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);
}
});

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

28. 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();
}-*/;

29. building my swipe panel
just like the one in sencha
wrapped swipeview from
cubiq

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

31. daniel to rescue..

32. here it is

33. 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);
}
});
}

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

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

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

37. what about others?
iOS, works like charm.. pretty much native
android, near native experience
blackberry
windows phone
tablets?
desktop??

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

39. </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. 40%
discount with promo
code
VBK43
when ordering
through
wiley.com
valid until end of
December 2015

41. who (the hell) am I?!?
Java (Spring/EE) developer
Microservices
Jersey Coders Mentor
Conference Speaker

42. Cross-platform Mobile
Development
Develop once run on multiple platforms
Choose just ‘one’ language

43. Two Approaches
Hybrid
Cross compile

44. Tabris
Hybrid
Java
.war
JSON

45. Lets see some code
UI coded in Java
Rendered in native UI

46. Codename One
Compile to native
C#
JDK 1.3
iOS
Windows Phone
C
Java 5

47. Lets see some code
Familiar to Swing
and GWT coders
Java 8 next release

48. Oracle Mobile Application
Framework (MAF)
Only Jdeveloper or Eclipse
Lightweight JVM

49. Lets see some code
Flow define GUI
Device feature via
DeviceManager