• Save
Android WebView, The Fifth Element
Upcoming SlideShare
Loading in...5
×
 

Android WebView, The Fifth Element

on

  • 1,229 views

 

Statistics

Views

Total Views
1,229
Views on SlideShare
1,229
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

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

Android WebView, The Fifth Element Android WebView, The Fifth Element Presentation Transcript

  • Android, The FifthElementMurat Yener, eteration@yenermSaturday, June 15, 13
  • who (the hell) am I?!?• Java, Flex, GWT, iOS, Android developer• Principle Mentor at Eteration• Eclipse Committer• GDG (GTUG) Istanbul Organizer• Conference SpeakerSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • Me as an Android DeveloperSaturday, June 15, 13
  • what (the hell) is the fifthelement?!?Saturday, June 15, 13
  • what (the hell) is the fifthelement?!?• ActivitiesSaturday, June 15, 13
  • what (the hell) is the fifthelement?!?• Activities• IntentsSaturday, June 15, 13
  • what (the hell) is the fifthelement?!?• Activities• Intents• ServicesSaturday, June 15, 13
  • what (the hell) is the fifthelement?!?• Activities• Intents• Services• WidgetsSaturday, June 15, 13
  • what (the hell) is the fifthelement?!?• Activities• Intents• Services• Widgets• ... and the WebView (hybrid apps, webapps)Saturday, June 15, 13
  • an HTML5 talk?!?• Facebook killed HTML5 app, Zuckerbergsaid HTML5 is not there yet!!• Sencha Built FastBookfb.html5isready.com• LinkedIn moved to native• anybody think its better now?Saturday, June 15, 13
  • an HTML5 talk?!?• Facebook killed HTML5 app, Zuckerbergsaid HTML5 is not there yet!!• Sencha Built FastBookfb.html5isready.com• LinkedIn moved to native• anybody think its better now?Saturday, June 15, 13
  • wait its too complicated!• How many of you have web developmentexperience?• How many of you develop native mobileapps?• How many of you don’t like webdevelopment just because javascriptSaturday, June 15, 13
  • wait its too complicated!• How many of you have web developmentexperience?• How many of you develop native mobileapps?• How many of you don’t like webdevelopment just because javascriptSaturday, June 15, 13
  • but it is slow!• building games?• 3d physics?• image processing?• ...?Saturday, June 15, 13
  • but it is slow!• building games?• 3d physics?• image processing?• ...?Saturday, June 15, 13
  • but it is slow!• building games?• 3d physics?• image processing?• ...?Nooo! We just build lists and detail pages!!(well, most of the time...)Saturday, June 15, 13
  • “We started with the existing Jake2 Java port of the Quake IIengine, then used the Google Web Toolkit (along with WebGL,WebSockets, and a lot of refactoring) to cross-compile it intoJavascript. You can see the results in the video above — wewere honestly a bit surprised when we saw it pushing over 30frames per second on our laptops (your mileage may vary)!”from Google Code Blog...Wait!! Is this web?!?• Angry Birds for Chrome (GWT)• Quake on Mobile http://media.tojicode.com/q3bsp/(requires Chrome Beta with WebGL)Saturday, June 15, 13
  • “We started with the existing Jake2 Java port of the Quake IIengine, then used the Google Web Toolkit (along with WebGL,WebSockets, and a lot of refactoring) to cross-compile it intoJavascript. You can see the results in the video above — wewere honestly a bit surprised when we saw it pushing over 30frames per second on our laptops (your mileage may vary)!”from Google Code Blog...Wait!! Is this web?!?• Angry Birds for Chrome (GWT)• Quake on Mobile http://media.tojicode.com/q3bsp/(requires Chrome Beta with WebGL)Saturday, June 15, 13
  • “We started with the existing Jake2 Java port of the Quake IIengine, then used the Google Web Toolkit (along with WebGL,WebSockets, and a lot of refactoring) to cross-compile it intoJavascript. You can see the results in the video above — wewere honestly a bit surprised when we saw it pushing over 30frames per second on our laptops (your mileage may vary)!”from Google Code Blog...Wait!! Is this web?!?• Angry Birds for Chrome (GWT)• Quake on Mobile http://media.tojicode.com/q3bsp/(requires Chrome Beta with WebGL)Saturday, June 15, 13
  • Mobile HTML5Frameworks• jQueryMobile• Sencha• Zepto• mGWT, hey wait! no javascript?!? Seriously?!!Saturday, June 15, 13
  • Java to Javascript?!?• GWT Compiler does the magic• Optimized, high performance js• Cross browser compability (upto ie6)Saturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Android vs iOSSaturday, June 15, 13
  • Setup• get the source from https://code.google.com/p/mgwt/• or download the jar• or use Maven!<dependency>      <groupId>com.googlecode.mgwt</groupId>      <artifactId>mgwt</artifactId>      <version>1.1.2</version></dependency>Saturday, June 15, 13
  • Hello Worldpublic 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);  }}Saturday, June 15, 13
  • Add a little spice:Phonegap• Geolocation• Camera• Accelerometer• Compass• Phonebook• File System• even NFCSaturday, June 15, 13
  • Add a little spice:Phonegap• Geolocation• Camera• Accelerometer• Compass• Phonebook• File System• even NFCBasicallyanyNativeAPI!!Saturday, June 15, 13
  • PhonegapButton button = new Button("Hello mgwt");button().addTapHandler(new TapHandler() {@Overridepublic void onTap(TapEvent event) {phoneGap.getNotification().alert("Done!!");}});layoutPanel.add(button);Saturday, June 15, 13
  • more PhonegapphoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){@Overridepublic void onSuccess(Position position) {// check accuracyif (position.getCoordinates().getAccuracy() > 11) {raceView.getLabel().setText("Error: Accuracy");}// geolocation returns mps, multiply with 3.6 to convert to kphdouble speed = 3.6 * position.getCoordinates().getSpeed();if (speed > 0.2) {// if goingraceView.getLabel().setText(speed + "km @" + position.getCoordinates().getAccuracy());currentLocation = position;// got the position now can start!start();// stop if the threshold is reachedif (isGoing && speed >= 60) {MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher);endLocation = position;calculate();}} else {// if stopedraceView.getLabel().setText("get ready!!");isGoing = false;}}@Overridepublic void onFailure(PositionError error) {MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");}});Saturday, June 15, 13
  • more PhonegapphoneGap.getGeolocation().watchPosition(geolocationOptions, new MyGeolocationCallback(){@Overridepublic void onSuccess(Position position) {// check accuracyif (position.getCoordinates().getAccuracy() > 11) {raceView.getLabel().setText("Error: Accuracy");}// geolocation returns mps, multiply with 3.6 to convert to kphdouble speed = 3.6 * position.getCoordinates().getSpeed();if (speed > 0.2) {// if goingraceView.getLabel().setText(speed + "km @" + position.getCoordinates().getAccuracy());currentLocation = position;// got the position now can start!start();// stop if the threshold is reachedif (isGoing && speed >= 60) {MgwtAppEntryPoint.phoneGap.getGeolocation().clearWatch(geolocationWatcher);endLocation = position;calculate();}} else {// if stopedraceView.getLabel().setText("get ready!!");isGoing = false;}}@Overridepublic void onFailure(PositionError error) {MgwtAppEntryPoint.phoneGap.getNotification().alert("Problem getting location");}});yes, you can really do thatwith mgwt/phonegapSaturday, June 15, 13
  • 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(newChildBrowserLocationChangedHandler() {@Overridepublic void onLocationChanged(ChildBrowserLocationChangedEvent event) {//Do the login...}});}}Saturday, June 15, 13
  • 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(newChildBrowserLocationChangedHandler() {@Overridepublic void onLocationChanged(ChildBrowserLocationChangedEvent event) {//Do the login...}});}}Make use of thePhonegap Plugins!!Saturday, June 15, 13
  • mgwt experienced• MVP• Model• View• Presenter• Maven ArchetypeSaturday, June 15, 13
  • mgwt experienced• MVP• Model• View• Presenter• Maven ArchetypeSaturday, June 15, 13
  • mvp?!?• Code your UI in View• and logic in Acitivityclasses• sound familiar?!?• easy navigation• a bit of boilerplatecodeSaturday, June 15, 13
  • mvp?!?• Code your UI in View• and logic in Acitivityclasses• sound familiar?!?• easy navigation• a bit of boilerplatecodeSaturday, June 15, 13
  • calling the backend• GWT-RPC• JSONP & AutoBeanJsonpRequestBuilder jsonp = new JsonpRequestBuilder();String url = URL.encode(JSON_URL + "/sendData/" + “HelloWorld”);jsonp.requestObject(url, new AsyncCallback<JavaScriptObject>() {@Overridepublic void onFailure(Throwable caught) {MgwtAppEntryPoint.phoneGap.getNotification().alert(caught.getMessage());}@Overridepublic void onSuccess(JavaScriptObject result) {JSONObject jsObj = new JSONObject(result);AutoBean<Score[]> bean = AutoBeanCodex.decode(factory, MyModel[].class, jsObj.toString());Score[] scores = bean.as();scoresCallback.onResponse(scores);}});Saturday, June 15, 13
  • Calling Native JS• Use any existing Javascript• Use Javascript in a type safe way• BUT dont mess touch events• AND beware you are not in safe zoneanymoreSaturday, June 15, 13
  • JSNIpublic 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();}-*/;Saturday, June 15, 13
  • gwtquerypublic 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);      }    });}Saturday, June 15, 13
  • skinning• offers default themes for• android• iOS/iOS Retina• Blackberry• easy to create yourshttps://code.google.com/p/mgwt/wiki/Styling//append your own css as last thing in the headMGWTStyle.injectStyleSheet("yourcssfile.css");Saturday, June 15, 13
  • 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), inset1px 0px 0px rgba(255,255,255,0.21), inset 0px -1px 0pxrgba(0,0,0,0.21), inset 0px 1px 0px rgba(255,255,255,0.41), 0px 1px2px 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;}Saturday, June 15, 13
  • debugging• First Class Java Debugging on your IDE• Gwt Pretty Compile! and debugJavascript in your browserSaturday, June 15, 13
  • What about other OSs• iOS, works like charm• Blackberry• Windows Phone• Tablets?!• Desktop?!?Saturday, June 15, 13
  • What can I really build?• Anything!• but why not going native for games• lists, carousels, forms...• make use of current js• windows phone?? seriously?!?Saturday, June 15, 13
  • thanks to...Saturday, June 15, 13
  • thanks to...Saturday, June 15, 13
  • thanks to...Saturday, June 15, 13
  • special thanks to mymentor Naci DaiSaturday, June 15, 13
  • </slides>murat@muratyener.comblogs.eteration.comdevchronicles.com@yenerm114028338330916709688like what you see??click to download!@gdgistanbulSaturday, June 15, 13