Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Java with GWT: Still "Write Once, Run Everywhere"

996 views

Published on

Times have changed, and although Java ME still has market share, it is not available on all devices anymore. Java/Java ME developers had no problem moving to BlackBerry or Android but faced challenges on iOS. HTML5 plus PhoneGap apps promised a silver bullet for a “write once, run on all devices” approach via several frameworks, which, in the end, offered painful JavaScript and CSS development. Although GWT offers a great Java-to-JavaScript compiler and debugger, mgwt introduces native-looking widgets on iOS, Android, and even BlackBerry. Also, with the addition of GWT/PhoneGap projects, you can now code native-looking HTML apps that can use native APIs with regular, type-safe, well-known beautiful Java without coding a single line of HTML plus JavaScript. Learn more in this session.

Published in: Mobile
  • Be the first to comment

Mobile Java with GWT: Still "Write Once, Run Everywhere"

  1. 1. Mobile Java with GWT (and alternatives) Murat Yener & Alex Theedom @yenerm @alextheedom
  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 Mobile App Developer at Intel
  3. 3. as a mobile developer
  4. 4. what (the hell) is this talk about?!? The fifth element... The Webview.. HTML5 mobile frameworks Phonegap keeping native UX
  5. 5. 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 did they just fix it??
  6. 6. mobile apps! Android iPhone Blackberry Windows Phone Tablets?!?
  7. 7. Hybrid Apps: Teaching the old dog new tricks?
  8. 8. 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??
  9. 9. but it is slow!! building games? 3d physics? image or sound processing? ... no most of the time we just do this!
  10. 10. 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...
  11. 11. Chromium WebView
  12. 12. Mobile (friendly) HTML5 Frameworks jQueryMobile Sencha Zepto mGWT
  13. 13. 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 :(
  14. 14. UI & UX
  15. 15. 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/
  16. 16. 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
  17. 17. 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>
  18. 18. 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); } }
  19. 19. 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' />
  20. 20. add a litte spice: phonegap geolocation camera accelerator compass phonebook file system even nfc
  21. 21. 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); ...
  22. 22. 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"); } });
  23. 23. 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... } }); } } }
  24. 24. 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
  25. 25. mgwt, advanced MVP Model View Presenter Maven Archetype
  26. 26. 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); } });
  27. 27. 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!!
  28. 28. 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(); }-*/;
  29. 29. building my swipe panel just like the one in sencha wrapped swipeview from cubiq
  30. 30. mgwt groups https://groups.google.com/forum/?fromgroups#!forum/mgwt
  31. 31. daniel to rescue..
  32. 32. here it is
  33. 33. 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); } }); }
  34. 34. 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");
  35. 35. 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; }
  36. 36. 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
  37. 37. what about others? iOS, works like charm.. pretty much native android, near native experience blackberry windows phone tablets? desktop??
  38. 38. 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?!?
  39. 39. </slides> GDG Istanbul (every 3. or 4. Saturday) Interested in OSGi? No? ok, i thought so… and GWT.create at San Francisco murat@muratyener.com @yenerm devchronicles.com
  40. 40. 40% discount with promo code VBK43 when ordering through wiley.com valid until end of December 2015
  41. 41. who (the hell) am I?!? Java (Spring/EE) developer Microservices Jersey Coders Mentor Conference Speaker
  42. 42. Cross-platform Mobile Development Develop once run on multiple platforms Choose just ‘one’ language
  43. 43. Two Approaches Hybrid Cross compile
  44. 44. Tabris Hybrid Java .war JSON
  45. 45. Lets see some code UI coded in Java Rendered in native UI
  46. 46. Codename One Compile to native C# JDK 1.3 iOS Windows Phone C Java 5
  47. 47. Lets see some code Familiar to Swing and GWT coders Java 8 next release
  48. 48. Oracle Mobile Application Framework (MAF) Only Jdeveloper or Eclipse Lightweight JVM
  49. 49. Lets see some code Flow define GUI Device feature via DeviceManager

×