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

  • 8,109 views
Uploaded on

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

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

  • 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,109
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
128
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