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

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

on

  • 8,060 views

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

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

Statistics

Views

Total Views
8,060
Views on SlideShare
8,045
Embed Views
15

Actions

Likes
5
Downloads
125
Comments
0

2 Embeds 15

http://mitchbox.tumblr.com 14
http://www.docshut.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

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

  • MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENERFriday, May 25, 12
  • MOBILE JAVA (GWT, MGWT, PHONEGAP) Still “Write Once Run Everywhere” Murat YENERFriday, May 25, 12
  • 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
  • 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
  • MOBIL APPSFriday, May 25, 12
  • MOBIL APPS • AndroidFriday, May 25, 12
  • MOBIL APPS • Android • iPhoneFriday, May 25, 12
  • MOBIL APPS • Android • iPhone • BlackberryFriday, May 25, 12
  • MOBIL APPS • Android • iPhone • Blackberry • Windows PhoneFriday, May 25, 12
  • MOBIL APPS • Android • iPhone • Blackberry • Windows Phone • Tablets?!?Friday, May 25, 12
  • MOBIL APPS • Android • iPhone • Blackberry • Windows Phone • Tablets?!?Friday, May 25, 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
  • + 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
  • Friday, May 25, 12
  • Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • Web Apps: Teaching the old dog new tricks?Friday, May 25, 12
  • HTML MOBILE FRAMEWORKS • Sencha • Titanium • ...Friday, May 25, 12
  • 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
  • CSS3 • Animated Transitions • Rounded Corners • Drop Shadows • Gradient Colors • Background Decoration • Text Effects • Web FontsFriday, May 25, 12
  • JAVASCRIPT • IDE? • Debugging?Friday, May 25, 12
  • JAVASCRIPT • IDE? • Debugging?Friday, May 25, 12
  • Friday, May 25, 12
  • Friday, May 25, 12
  • GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • GOOGLE WEB TOOLKIT • Write Java, compile Javascript • Eclipse integration • Debug Javascript on Java • Browser compability (from IE6 to mobile!!!)Friday, May 25, 12
  • GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Offline • APIs (Camera, GPS, Contacts...)Friday, May 25, 12
  • GWT, MOBILE? • Style? (CSS?) • Native Widgetlar (Button, Combo, Checkbox...) • Online/Offline • APIs (Camera, GPS, Contacts...)Friday, May 25, 12
  • UIFriday, May 25, 12
  • UIFriday, May 25, 12
  • UIFriday, May 25, 12
  • UIFriday, May 25, 12
  • 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
  • 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
  • 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
  • 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
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • MGWT • Standard GWT (Java) • JavaScript via JSNI • Native looking widgets • iOS, Android, Blackberry... • Phones & Tablets • Online &OfflineFriday, May 25, 12
  • Friday, May 25, 12
  • Friday, May 25, 12
  • PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • PROJECT :) • Chronometer + map (location, maps) • MP3 player (audio) • Friend List(contacts, http request, social login) • History (storage)Friday, May 25, 12
  • STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • STARTING MGWT • Eclipse GWT plugin • MGWT • Model-View-Presenter • Maven ArchetypeFriday, May 25, 12
  • 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
  • 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
  • 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
  • LOCATION • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • LOCATION UserLocation.getLocation(new UserLocationCallback() { @Override public void onLocationFound(Coordinates coords) { getMap(coords); } }); • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • LOCATION UserLocation.getLocation(new UserLocationCallback() { @Override public void onLocationFound(Coordinates coords) { getMap(coords); } }); • HTML5 Geolocation • Still no Javascript!!Friday, May 25, 12
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • BUT WHERE IS THE MAP?!?Friday, May 25, 12
  • URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • URL PERMISSIONS • maps.gstatic • mt1.googleapis • mt0.googleapis • maps.google.comFriday, May 25, 12
  • SECOND TRY • Stillwhen the location updates stop when the device is locked!Friday, May 25, 12
  • SECOND TRY • Stillwhen the location updates stop when the device is locked!Friday, May 25, 12
  • SECOND TRY Ph on e Ga stop p!! • Still when the location updates when the device is locked! !Friday, May 25, 12
  • PHONEGAP SETTINGSFriday, May 25, 12
  • MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandlerFriday, May 25, 12
  • MP3 PLAYER • Local vs Streaming • HTML5 <Audio> • com.phonegap.audiohandlerFriday, May 25, 12
  • 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
  • MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuthFriday, May 25, 12
  • 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
  • MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuthFriday, May 25, 12
  • MY FRIENDS • Getting contacts phoneGap.getContacts() • Social login gwt-google-apis & OAuth lug in browser p egap child PhonFriday, May 25, 12
  • 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
  • SWIPE PANEL • Google+ • Built in widget in Sencha and other frameworks • not in mGWT!?! • Wrapping Javascript with JSNI?Friday, May 25, 12
  • SWIPE PANEL • Google+ • Built in widget in Sencha and other frameworks • not in mGWT!?! • Wrapping Javascript with JSNI?Friday, May 25, 12
  • JSNIFriday, May 25, 12
  • JSNIFriday, May 25, 12
  • JSNIFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • MGWT GROUPS https://groups.google.com/forum/?fromgroups#!forum/mgwtFriday, May 25, 12
  • OK THEN...Friday, May 25, 12
  • OK THEN...Friday, May 25, 12
  • OK THEN...Friday, May 25, 12
  • LATEST NEWS!!!Friday, May 25, 12
  • LATEST NEWS!!!Friday, May 25, 12
  • LATEST NEWS!!!Friday, May 25, 12
  • PHONEGAP - CORDOVA • Apache Cordova Incubator • 1.3<problem<1.7 • Cordova 1.7 - GwtPhonegap 1.7 + mGWT 1.1 (Snapshot)Friday, May 25, 12
  • 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
  • LOCATION DEBUG • Go out!!! • Also only on iOS :(Friday, May 25, 12
  • 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
  • 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