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

1. MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENER Friday, May 25, 12

2. MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENER Friday, 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 2011 Friday, 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=0 Friday, May 25, 12

5. MOBIL APPS Friday, May 25, 12

6. MOBIL APPS • Android Friday, May 25, 12

7. MOBIL APPS • Android • iPhone Friday, May 25, 12

8. MOBIL APPS • Android • iPhone • Blackberry Friday, May 25, 12

9. MOBIL APPS • Android • iPhone • Blackberry • Windows Phone Friday, 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 2012 Friday, 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 2012 Friday, May 25, 12

14. Friday, May 25, 12

15. 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, Notiﬁcations, 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.asp Friday, May 25, 12

20. CSS3 • Animated Transitions • Rounded Corners • Drop Shadows • Gradient Colors • Background Decoration • Text Effects • Web Fonts Friday, May 25, 12

21. JAVASCRIPT • IDE? • Debugging? Friday, May 25, 12

22. JAVASCRIPT • IDE? • Debugging? 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

29. GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Ofﬂine • APIs (Camera, GPS, Contacts...) Friday, May 25, 12

30. GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Ofﬂine • APIs (Camera, GPS, Contacts...) Friday, May 25, 12

31. UI Friday, 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

39. MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &Ofﬂine 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

53. STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven Archetype Friday, 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 locked Friday, 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 locked Friday, 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 locked Friday, 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

72. BUT WHERE IS THE MAP?!? Friday, May 25, 12

73. URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.com Friday, 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 SETTINGS Friday, May 25, 12

80. MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandler Friday, May 25, 12

81. MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandler Friday, 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 & OAuth Friday, 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()); } }); } }); & OAuth Friday, May 25, 12

85. MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuth Friday, May 25, 12

86. MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuth lug in browser p egap child Phon Friday, 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 ﬁles phonegap.plist: www folder: javascript ﬁles Friday, 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. JSNI Friday, May 25, 12

93. MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwt Friday, May 25, 12

100. OK THEN... Friday, May 25, 12

103. 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 soon Friday, 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 ﬁeld. • Don’t forget to add urls to permissions list Friday, 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 114028338330916709688 Friday, May 25, 12

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

Recommended

Recommended

More Related Content

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

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

More from Murat Yener

More from Murat Yener (8)

Recently uploaded

Recently uploaded (20)

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

Editor's Notes