Your SlideShare is downloading. ×
  • Like
Mobile Java with GWT, Still Write Once Run Everywhere (mGWT+Phonegap)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Java with GWT, Still Write Once Run Everywhere (mGWT+Phonegap)

  • 8,325 views
Published

Mobile Native looking Cross Platform applications with Java using GWT+mGWT+phonegap.

Mobile Native looking Cross Platform applications with Java using GWT+mGWT+phonegap.

Published in Technology , News & Politics
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,325
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
129
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENERFriday, May 25, 12
  • 2. MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENERFriday, May 25, 12
  • 3. MURAT YENER Java/JavaEE, GWT, Flex, Android, iOS, Node.js... Developer Google Developer Group Istanbul Eclipsist 2008/2009, EclipseCon 2010, JavaOne 2011Friday, May 25, 12
  • 4. This talk is highly inspired by Matt Raible’s talk at Devoxx http://www.parleys.com/#st=5&id=2925&sl=0Friday, May 25, 12
  • 5. MOBIL APPSFriday, May 25, 12
  • 6. MOBIL APPS • AndroidFriday, May 25, 12
  • 7. MOBIL APPS • Android • iPhoneFriday, May 25, 12
  • 8. MOBIL APPS • Android • iPhone • BlackberryFriday, May 25, 12
  • 9. MOBIL APPS • Android • iPhone • Blackberry • Windows PhoneFriday, May 25, 12
  • 10. MOBIL APPS • Android • iPhone • Blackberry • Windows Phone • Tablets?!?Friday, May 25, 12
  • 11. MOBIL APPS • Android • iPhone • Blackberry • Windows Phone • Tablets?!?Friday, May 25, 12
  • 12. HTML HTML2 CSS+JS Eclair 1991 HTML4 Donut Android Cupcake 1992 1993 CSS2 Honeycomb 1994 XHTML WM 2003 Beta Android 1.1 1995 Android 1.0 Gingerbread 1996 1997 Tableless WM 5 iPad Froyo ICS iPhone Web iPhone3GS iPad2 1998 1999 WM 6 2000 AJAX iPhone3G iPhone4S 2001 iPhone4 2002 2003 WinPhone7 2004 2005 HTML5 WEB & MOBILE 2006 2007 2008 2012 2009 2010 2011 2011 2012 2012Friday, May 25, 12
  • 13. + Blackberry Symbian ... HTML HTML2 CSS+JS Eclair 1991 HTML4 Donut Android Cupcake 1992 1993 CSS2 Honeycomb 1994 XHTML WM 2003 Beta Android 1.1 1995 Android 1.0 Gingerbread 1996 1997 Tableless WM 5 iPad Froyo ICS iPhone Web iPhone3GS iPad2 1998 1999 WM 6 2000 AJAX iPhone3G iPhone4S 2001 iPhone4 2002 2003 WinPhone7 2004 2005 HTML5 WEB & MOBILE 2006 2007 2008 2012 2009 2010 2011 2011 2012 2012Friday, May 25, 12
  • 14. Friday, May 25, 12
  • 15. Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • 16. Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • 17. Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • 18. HTML MOBILE FRAMEWORKS • Sencha • Titanium • ...Friday, May 25, 12
  • 19. HTML5 • Storage, WebSQL, Application Cache, Web Workers, WebSocket, Notifications, Drag&Drop, GeoLocation, Speech, Audio, Video, Canvas, SVG... • New tags!!! <article> <aside> <section> <header> <footer> <nav> <audio> <video> <datalist> <details>... • Gone!!! <applet> <center> <font> <frame> <frameset> • http://www.w3schools.com/html5/html5_reference.aspFriday, May 25, 12
  • 20. CSS3 • Animated Transitions • Rounded Corners • Drop Shadows • Gradient Colors • Background Decoration • Text Effects • Web FontsFriday, May 25, 12
  • 21. JAVASCRIPT • IDE? • Debugging?Friday, May 25, 12
  • 22. JAVASCRIPT • IDE? • Debugging?Friday, May 25, 12
  • 23. Friday, May 25, 12
  • 24. Friday, May 25, 12
  • 25. GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • 26. GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • 27. GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • 28. GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • 29. GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Offline • APIs (Camera, GPS, Contacts...)Friday, May 25, 12
  • 30. GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Offline • APIs (Camera, GPS, Contacts...)Friday, May 25, 12
  • 31. UIFriday, May 25, 12
  • 32. UIFriday, May 25, 12
  • 33. UIFriday, May 25, 12
  • 34. UIFriday, May 25, 12
  • 35. LOOKING NATIVE • 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/Friday, May 25, 12
  • 36. LOOKING NATIVE • 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/Friday, May 25, 12
  • 37. LOOKING NATIVE • 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/Friday, May 25, 12
  • 38. LOOKING NATIVE • 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/Friday, May 25, 12
  • 39. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 40. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 41. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 42. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 43. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 44. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 45. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 46. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • 47. Friday, May 25, 12
  • 48. Friday, May 25, 12
  • 49. PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • 50. PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • 51. PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • 52. PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • 53. STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • 54. STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • 55. STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • 56. STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • 57. 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 />Friday, May 25, 12
  • 58. 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 />Friday, May 25, 12
  • 59. MAPS • Google Maps Ver 2.0: http://code.google.com/p/gwt-google-apis/ • Google Maps Ver 3.0:lpha a http://code.google.com/p/gwt-google-maps-v3/ • No Javascript so far! • <inherits name=com.google.gwt.maps.GoogleMaps />Friday, May 25, 12
  • 60. LOCATION • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • 61. LOCATION UserLocation.getLocation(new UserLocationCallback() { @Override public void onLocationFound(Coordinates coords) { getMap(coords); } }); • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • 62. LOCATION UserLocation.getLocation(new UserLocationCallback() { @Override public void onLocationFound(Coordinates coords) { getMap(coords); } }); • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • 63. FIRST TRY • HTML5 Geolocation not accurared • Just a straight line instead of a route • The app stops when the device is lockedFriday, May 25, 12
  • 64. FIRST TRY • HTML5 Geolocation not accurared • Just a straight line instead of a route • The app stops when the device is lockedFriday, May 25, 12
  • 65. FIRST TRY • HTML5 Geolocation not accurared • Just a straight line instead of a route • The app stops when the device is lockedFriday, May 25, 12
  • 66. FIRST TRY • HTML5 Geolocation not accurared enableHighAccuracy: True • Just a straight line instead of a route • The app stops when the device is lockedFriday, May 25, 12
  • 67. FIRST TRY • HTML5 Geolocation not accurared enableHighAccuracy: True • Just a straight line instead of a route Google Maps Polylines • The app stops when the device is lockedFriday, May 25, 12
  • 68. FIRST TRY • HTML5 Geolocation not accurared enableHighAccuracy: True • Just a straight line instead of a route Google Maps Polylines • The app stops when the device is locked PhoneGap?Friday, May 25, 12
  • 69. PHONEGAP • or the new Cordova • iOS Plugin (http://phonegap.com/start#ios-x4) • Android Plugin (http://phonegap.com/start#android) • and others...Friday, May 25, 12
  • 70. PHONEGAP • or the new Cordova • iOS Plugin (http://phonegap.com/start#ios-x4) • Android Plugin (http://phonegap.com/start#android) • and others...Friday, May 25, 12
  • 71. PHONEGAP • or the new Cordova • iOS Plugin (http://phonegap.com/start#ios-x4) • Android Plugin (http://phonegap.com/start#android) • and others...Friday, May 25, 12
  • 72. BUT WHERE IS THE MAP?!?Friday, May 25, 12
  • 73. URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • 74. URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • 75. URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • 76. SECOND TRY • Stillwhen the location updates stop when the device is locked!Friday, May 25, 12
  • 77. SECOND TRY • Stillwhen the location updates stop when the device is locked!Friday, May 25, 12
  • 78. SECOND TRY Ph on e Ga stop p!! • Still when the location updates when the device is locked! !Friday, May 25, 12
  • 79. PHONEGAP SETTINGSFriday, May 25, 12
  • 80. MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandlerFriday, May 25, 12
  • 81. MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandlerFriday, May 25, 12
  • 82. HISTORY • LocalStorage, Javascript wrapper 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); }-*/; • WebSQL • Cookies!! public static String getItem(String key){ return Cookies.getCookie(key); } public static void setItem(String key, String value){ Cookies.setCookie(key, value, new Date(2050, 1, 1), "", "", true); }Friday, May 25, 12
  • 83. MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuthFriday, May 25, 12
  • 84. MY FRIENDS PLUS.initialize(new SimpleEventBus(), new GoogleApiRequestTransport(APPLICATION_NAME, API_KEY));     final Button b = new Button("Authenticate to get public activities"); • Getting contacts     b.addClickHandler(new ClickHandler() {       @Override       public void onClick(ClickEvent e) {         OAuth2Login.get().authorize(CLIENT_ID, PlusAuthScope.PLUS_ME, new Callback<Void, Exception>() {       @Override phoneGap.getContacts()       public void onSuccess(Void v) {         PLUS.people().get("me").to(new Receiver<Person>() {       @Override • Social login       public void onSuccess(Person person) {         println("Hello " + person.getDisplayName());       }     }).fire();       }           @Override gwt-google-apis   public void onFailure(Exception e) {         println(e.getMessage());       }     });       }     }); & OAuthFriday, May 25, 12
  • 85. MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuthFriday, May 25, 12
  • 86. MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuth lug in browser p egap child PhonFriday, May 25, 12
  • 87. PHONEGAP PLUGIN • Android http://wiki.phonegap.com/w/page/43708611/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20Android plugins.xml <plugin name="BatteryLevelPlugin" value="com.example.BatteryLevelPlugin" /> • iOS http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS plugins folder: .m .h files phonegap.plist: www folder: javascript filesFriday, May 25, 12
  • 88. SWIPE PANEL • Google+ • Built in widget in Sencha and other frameworks • not in mGWT!?! • Wrapping Javascript with JSNI?Friday, May 25, 12
  • 89. SWIPE PANEL • Google+ • Built in widget in Sencha and other frameworks • not in mGWT!?! • Wrapping Javascript with JSNI?Friday, May 25, 12
  • 90. JSNIFriday, May 25, 12
  • 91. JSNIFriday, May 25, 12
  • 92. JSNIFriday, May 25, 12
  • 93. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 94. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 95. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 96. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 97. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 98. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 99. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • 100. OK THEN...Friday, May 25, 12
  • 101. OK THEN...Friday, May 25, 12
  • 102. OK THEN...Friday, May 25, 12
  • 103. LATEST NEWS!!!Friday, May 25, 12
  • 104. LATEST NEWS!!!Friday, May 25, 12
  • 105. LATEST NEWS!!!Friday, May 25, 12
  • 106. PHONEGAP - CORDOVA • Apache Cordova Incubator • 1.3<problem<1.7 • Cordova 1.7 - GwtPhonegap 1.7 + mGWT 1.1 (Snapshot)Friday, May 25, 12
  • 107. DEBUGGING • Desktop: First Class Java Debugging • Mobil: Gwt Pretty Compile! iOS: Remote debugging of HTML and JS on device - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ! [NSClassFromString(@"WebView") _enableRemoteInspector]; Android: Chrome Beta? Most probably will be available soonFriday, May 25, 12
  • 108. LOCATION DEBUG • Go out!!! • Also only on iOS :(Friday, May 25, 12
  • 109. CONCLUSION • MGWT + PhoneGap works! Not a silverbullet but sill great! • Only way to connect backend JSONP (JSON with Padding) • JSNI is very easy... BUT! be careful when touch events are involved! • Browse Phonegap plugins before going native! • Test location on field. • Don’t forget to add urls to permissions listFriday, May 25, 12
  • 110. Like the talk... A Hall14:30 and Matt Raible Devoxx 2011 </PRESENTATION> murat@muratyener.com blogs.eteration.com devchronicles.com @yenerm 114028338330916709688Friday, May 25, 12