Mobile Java with GWT
Murat 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) ...
who (the hell) am I?!?
Java, Flex, GWT, iOS, Android developer
Principle Mentor at Eteration
Eclipse Committer
GDG (GTUG) ...
who (the hell) am I?!?
Java, Flex, GWT, iOS, Android developer
Principle Mentor at Eteration
Eclipse Committer
GDG (GTUG) ...
who (the hell) am I?!?
Java, Flex, GWT, iOS, Android developer
Principle Mentor at Eteration
Eclipse Committer
GDG (GTUG) ...
as a mobile developer
Wednesday, October 9, 13
as a mobile developer
Wednesday, October 9, 13
as a mobile developer
Wednesday, October 9, 13
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.html5...
so an HTML5 talk???
Facebook killed HTML5 app..
Zuckerberg said HTML5 is
not there yet!!
try fastbook from sencha
fb.html5...
mobile apps!
Android
iPhone
Blackberry
Windows Phone
Tablets?!?
Wednesday, October 9, 13
mobile apps!
Android
iPhone
Blackberry
Windows Phone
Tablets?!?
Wednesday, October 9, 13
mobile apps!
Android
iPhone
Blackberry
Windows Phone
Tablets?!?
Wednesday, October 9, 13
Hybrid Apps: Teaching the old dog new tricks?
Wednesday, October 9, 13
Hybrid Apps: Teaching the old dog new tricks?
Wednesday, October 9, 13
Hybrid Apps: Teaching the old dog new tricks?
Wednesday, October 9, 13
html5 apps in native shell?? nuts!!
this is too complicated!!
have many of you have web development
experience?
how many o...
html5 apps in native shell?? nuts!!
this is too complicated!!
have many of you have web development
experience?
how many o...
but it is slow!!
building games?
3d physics?
image or sound processing?
...
Wednesday, October 9, 13
but it is slow!!
building games?
3d physics?
image or sound processing?
...
Wednesday, October 9, 13
but it is slow!!
building games?
3d physics?
image or sound processing?
...
no most of the time we just do this!
Wednesday...
wait is this really web?
Angry Birds for Chrome (GWT)
Quake on Mobile (requires Chrome Beta for
WebGL) http://mediatojicod...
wait is this really web?
Angry Birds for Chrome (GWT)
Quake on Mobile (requires Chrome Beta for
WebGL) http://mediatojicod...
wait is this really web?
Angry Birds for Chrome (GWT)
Quake on Mobile (requires Chrome Beta for
WebGL) http://mediatojicod...
Mobile (friendly) HTML5
Frameworks
jQueryMobile
Sencha
Zepto
mGWT
Wednesday, October 9, 13
Mobile (friendly) HTML5
Frameworks
jQueryMobile
Sencha
Zepto
mGWT
Wednesday, October 9, 13
Mobile (friendly) HTML5
Frameworks
jQueryMobile
Sencha
Zepto
mGWT
Wednesday, October 9, 13
Mobile (friendly) HTML5
Frameworks
jQueryMobile
Sencha
Zepto
mGWT
hey, wait! no javascript?!?
Wednesday, October 9, 13
GWT 101: java to
javascript?
GWT compiler does the
magic
Optimized high
performance javascript
cross browser compability
(...
GWT 101: java to
javascript?
GWT compiler does the
magic
Optimized high
performance javascript
cross browser compability
(...
UI & UX
Wednesday, October 9, 13
UI & UX
Wednesday, October 9, 13
UI & UX
Wednesday, October 9, 13
UI & UX
Wednesday, October 9, 13
gwt frameworks?
gwt-mobile-webkit: database, storage,
geolocation, widgets(?)
http://code.google.com/p/gwt-mobile-webkit/
...
gwt frameworks?
gwt-mobile-webkit: database, storage,
geolocation, widgets(?)
http://code.google.com/p/gwt-mobile-webkit/
...
gwt frameworks?
gwt-mobile-webkit: database, storage,
geolocation, widgets(?)
http://code.google.com/p/gwt-mobile-webkit/
...
gwt frameworks?
gwt-mobile-webkit: database, storage,
geolocation, widgets(?)
http://code.google.com/p/gwt-mobile-webkit/
...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
so what is mGWT
mobile widget library on gwt
native looking widgets for each platform
maven friendly
mvp ready (maven arch...
where to start?
get the source https://code.google.com/p/mgwt
or download the jar
or just use maven
<dependency>
<groupId>...
Hello World!!
public class MGWTEntryPoint implements EntryPoint {
public void onModuleLoad() {
// set viewport and other s...
using other libs:
ex. maps..
Google Maps Ver 2.0: http://
code.google.com/p/gwt-google-apis/
Google Maps Ver 3.0: http://
...
add a litte spice:
phonegap
geolocation
camera
accelerator
compass
phonebook
file system
even nfc
Wednesday, October 9, 13
add a litte spice:
phonegap
geolocation
camera
accelerator
compass
phonebook
file system
even nfc
basically any native API!...
phonegap in action
...
Button button = new Button("Hello mgwt");
button().addTapHandler(new TapHandler() {
@Override
publi...
phonegap, in real action
phoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){
@Overrid...
phonegap, in real action
phoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){
@Overrid...
even more...
public void onTap(TapEvent event) {
final MCheckBox check = ((MCheckBox) event.getSource());
if (check.getVal...
even more...
public void onTap(TapEvent event) {
final MCheckBox check = ((MCheckBox) event.getSource());
if (check.getVal...
going fancy, mvp!
code your UI in the View preferably in xml
via UIBinder
and your logic in the controller (activity)
soun...
going fancy, mvp!
code your UI in the View preferably in xml
via UIBinder
and your logic in the controller (activity)
soun...
mgwt, advanced
MVP
Model
View
Presenter
Maven Archetype
Wednesday, October 9, 13
mgwt, advanced
MVP
Model
View
Presenter
Maven Archetype
Wednesday, October 9, 13
connecting to backend
GWT-RPC (yeah, it rocks), but in native package?
JSONP with with RequestBuilder & Autobean
Wednesday...
connecting to backend
GWT-RPC (yeah, it rocks), but in native package?
JSONP with with RequestBuilder & Autobean
JsonpRequ...
accessing native js
can use any existing javascript
use javascript in type safe way
BUT!! don’t mess touch events!!
AND be...
JSNI
public native static String key(int index) /*-{
return $wnd.localStorage.key(index);
}-*/;
public native static void ...
building my swipe panel
just like the one in sencha
wrapped swipeview from cubiq
Wednesday, October 9, 13
building my swipe panel
just like the one in sencha
wrapped swipeview from cubiq
Wednesday, October 9, 13
building my swipe panel
just like the one in sencha
wrapped swipeview from cubiq
Wednesday, October 9, 13
building my swipe panel
just like the one in sencha
wrapped swipeview from cubiq
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
mgwt groups
https://groups.google.com/forum/?fromgroups#!forum/mgwt
Wednesday, October 9, 13
daniel to rescue..
Wednesday, October 9, 13
daniel to rescue..
Wednesday, October 9, 13
daniel to rescue..
Wednesday, October 9, 13
here it is
Wednesday, October 9, 13
here it is
Wednesday, October 9, 13
here it is
Wednesday, October 9, 13
gwtquery
coming from jQuery, no problem!
public void onModuleLoad() {
//Hide the text and set the width and append an h1 e...
skinning
default themes for
Android (>4.0)
iOS/iOS retina (<7.0)
Blackberry
easy to create yours
https://code.google.com/p...
wait, css in java?!?
.mgwt-Button {
display: inline-block;
float: left;
width: 145px;
height: 100px;
border: 1px solid rgb...
debugging
first class java debugging in your
IDE
GWT pretty compile and debug
javascript in your browser
use source maps an...
what about others?
iOS, works like charm.. pretty much native
android, near native experience
blackberry
windows phone
tab...
what can i really build?
anything!
but why not going native for games
many widgets.. lists, carousels, forms
dev friendly,...
</slides>
GDG Istanbul (every 3. or 4. Saturday)
DevFest Istanbul devfesttr.com
murat@muratyener.com
@yenerm
devchronicles...
Upcoming SlideShare
Loading in...5
×

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

1,796

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,796
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Mobile Java with GWT Murat Yener @yenerm Wednesday, October 9, 13
  2. 2. who (the hell) am I?!? Java, Flex, GWT, iOS, Android developer Principle Mentor at Eteration Eclipse Committer GDG (GTUG) Istanbul Organizer Conference Speaker Wednesday, October 9, 13
  3. 3. who (the hell) am I?!? Java, Flex, GWT, iOS, Android developer Principle Mentor at Eteration Eclipse Committer GDG (GTUG) Istanbul Organizer Conference Speaker Wednesday, October 9, 13
  4. 4. 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 Wednesday, October 9, 13
  5. 5. 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 Wednesday, October 9, 13
  6. 6. as a mobile developer Wednesday, October 9, 13
  7. 7. as a mobile developer Wednesday, October 9, 13
  8. 8. as a mobile developer Wednesday, October 9, 13
  9. 9. what (the hell) is this talk about?!? The fifth element... The Webview.. HTML5 mobile frameworks Phonegap keeping native UX Wednesday, October 9, 13
  10. 10. 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?? Wednesday, October 9, 13
  11. 11. 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?? Wednesday, October 9, 13
  12. 12. mobile apps! Android iPhone Blackberry Windows Phone Tablets?!? Wednesday, October 9, 13
  13. 13. mobile apps! Android iPhone Blackberry Windows Phone Tablets?!? Wednesday, October 9, 13
  14. 14. mobile apps! Android iPhone Blackberry Windows Phone Tablets?!? Wednesday, October 9, 13
  15. 15. Hybrid Apps: Teaching the old dog new tricks? Wednesday, October 9, 13
  16. 16. Hybrid Apps: Teaching the old dog new tricks? Wednesday, October 9, 13
  17. 17. Hybrid Apps: Teaching the old dog new tricks? Wednesday, October 9, 13
  18. 18. 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?? Wednesday, October 9, 13
  19. 19. 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?? Wednesday, October 9, 13
  20. 20. but it is slow!! building games? 3d physics? image or sound processing? ... Wednesday, October 9, 13
  21. 21. but it is slow!! building games? 3d physics? image or sound processing? ... Wednesday, October 9, 13
  22. 22. 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
  23. 23. 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... Wednesday, October 9, 13
  24. 24. 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... Wednesday, October 9, 13
  25. 25. 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... Wednesday, October 9, 13
  26. 26. Mobile (friendly) HTML5 Frameworks jQueryMobile Sencha Zepto mGWT Wednesday, October 9, 13
  27. 27. Mobile (friendly) HTML5 Frameworks jQueryMobile Sencha Zepto mGWT Wednesday, October 9, 13
  28. 28. Mobile (friendly) HTML5 Frameworks jQueryMobile Sencha Zepto mGWT Wednesday, October 9, 13
  29. 29. Mobile (friendly) HTML5 Frameworks jQueryMobile Sencha Zepto mGWT hey, wait! no javascript?!? Wednesday, October 9, 13
  30. 30. 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 :( Wednesday, October 9, 13
  31. 31. 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 :( Wednesday, October 9, 13
  32. 32. UI & UX Wednesday, October 9, 13
  33. 33. UI & UX Wednesday, October 9, 13
  34. 34. UI & UX Wednesday, October 9, 13
  35. 35. UI & UX Wednesday, October 9, 13
  36. 36. 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/ Wednesday, October 9, 13
  37. 37. 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/ Wednesday, October 9, 13
  38. 38. 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/ Wednesday, October 9, 13
  39. 39. 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/ Wednesday, October 9, 13
  40. 40. 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 Wednesday, October 9, 13
  41. 41. 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 Wednesday, October 9, 13
  42. 42. 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 Wednesday, October 9, 13
  43. 43. 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 Wednesday, October 9, 13
  44. 44. 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 Wednesday, October 9, 13
  45. 45. 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 Wednesday, October 9, 13
  46. 46. 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 Wednesday, October 9, 13
  47. 47. 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> Wednesday, October 9, 13
  48. 48. 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); } } Wednesday, October 9, 13
  49. 49. 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' /> Wednesday, October 9, 13
  50. 50. add a litte spice: phonegap geolocation camera accelerator compass phonebook file system even nfc Wednesday, October 9, 13
  51. 51. add a litte spice: phonegap geolocation camera accelerator compass phonebook file system even nfc basically any native API!! Wednesday, October 9, 13
  52. 52. 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); ... Wednesday, October 9, 13
  53. 53. 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"); } }); Wednesday, October 9, 13
  54. 54. 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"); } }); yes, you this is html5 and you can do that with gwt Wednesday, October 9, 13
  55. 55. 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... } }); } } } Wednesday, October 9, 13
  56. 56. 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! Wednesday, October 9, 13
  57. 57. 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 Wednesday, October 9, 13
  58. 58. 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 Wednesday, October 9, 13
  59. 59. mgwt, advanced MVP Model View Presenter Maven Archetype Wednesday, October 9, 13
  60. 60. mgwt, advanced MVP Model View Presenter Maven Archetype Wednesday, October 9, 13
  61. 61. connecting to backend GWT-RPC (yeah, it rocks), but in native package? JSONP with with RequestBuilder & Autobean Wednesday, October 9, 13
  62. 62. 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); } }); Wednesday, October 9, 13
  63. 63. 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!! Wednesday, October 9, 13
  64. 64. 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(); }-*/; Wednesday, October 9, 13
  65. 65. building my swipe panel just like the one in sencha wrapped swipeview from cubiq Wednesday, October 9, 13
  66. 66. building my swipe panel just like the one in sencha wrapped swipeview from cubiq Wednesday, October 9, 13
  67. 67. building my swipe panel just like the one in sencha wrapped swipeview from cubiq Wednesday, October 9, 13
  68. 68. building my swipe panel just like the one in sencha wrapped swipeview from cubiq Wednesday, October 9, 13
  69. 69. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  70. 70. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  71. 71. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  72. 72. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  73. 73. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  74. 74. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  75. 75. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt Wednesday, October 9, 13
  76. 76. daniel to rescue.. Wednesday, October 9, 13
  77. 77. daniel to rescue.. Wednesday, October 9, 13
  78. 78. daniel to rescue.. Wednesday, October 9, 13
  79. 79. here it is Wednesday, October 9, 13
  80. 80. here it is Wednesday, October 9, 13
  81. 81. here it is Wednesday, October 9, 13
  82. 82. 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); } }); } Wednesday, October 9, 13
  83. 83. 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"); Wednesday, October 9, 13
  84. 84. 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; } Wednesday, October 9, 13
  85. 85. 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 Wednesday, October 9, 13
  86. 86. what about others? iOS, works like charm.. pretty much native android, near native experience blackberry windows phone tablets? desktop?? Wednesday, October 9, 13
  87. 87. 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?!? Wednesday, October 9, 13
  88. 88. </slides> GDG Istanbul (every 3. or 4. Saturday) DevFest Istanbul devfesttr.com murat@muratyener.com @yenerm devchronicles.com Wednesday, October 9, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×