Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The WebView Role in Hybrid Applications Develop...

Tech Space guests
June 11, 2015
27

The WebView Role in Hybrid Applications Development - Haim Michael

GDG Meetup 11/06/2015

Tech Space guests

June 11, 2015
Tweet

Transcript

  1. The WebView Role in Hybrid Applications Haim Michael June 11th,

    2015 All logos, trade marks and brand names used in this presentation belong to the respective owners. LifeMichael.com `
  2. Table of Content LifeMichael.com • Haim Michael Introduction • Hybrid

    Applications Overview • The WebView Class • JavaScript Libraries • JavaScript Calling Java • Java Calling JavaScript • Handling The Back Button • Handling External Links • Chrome DevTools Debugging • The PhoneGap Framework • Chrome Custom Tabs • Learning Resources • Questions & Answers
  3. Haim Michael Introduction • Professional Certifications Zend Certified Engineer in

    PHP Certified Java Professional Certified Java EE Web Component Developer OMG Certified UML Professional • MBA (cum laude) from Tel-Aviv University Information Systems Management LifeMichael.com
  4. Hybrid Applications Overview • The hybrid applications for mobile telephones

    include code written in a native programming language and code written in JavaScript that uses various client side web technologies. LifeMichael.com Device Display Web Browser Object
  5. The WebView Class • Instantiating WebView we get an object

    that functions as a web browser. • WebView extends View. We can treat the object as any other view. • As of Android 4.4, WebView is based on the Chromium open source project. LifeMichael.com
  6. The WebView Class LifeMichael.com public class SimpleHybridDemo extends Activity {

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView ob = new WebView(this); WebView.setWebContentsDebuggingEnabled(true); ob.getSettings().setJavaScriptEnabled(true); ob.loadUrl("file:///android_asset/demo.html"); setContentView(ob); } } MainActivity.java
  7. The WebView Class LifeMichael.com <form name="myform"> <br/>num 1: <input type="text"

    name="num_a"/> <br/>num 2: <input type="text" name="num_b"/> <br/><input type="button" onclick="calc()" value="+"/> <br/>result: <input type="text" name="result"/> </form> <script> function calc() { var a = parseInt(document.myform.num_a.value,10); var b = parseInt(document.myform.num_b.value,10); var sum = a+b; document.myform.result.value = sum; } </script> demo.html
  8. The WebView Class • Calling the getSettings() method on our

    WebView object we will get a WebSettings object through which we can configure the behavior of our WebView. … WebView ob; … WebSettings settings = ob.getSettings(); settings.setJavaScriptEnabled(true); settings.setDatabaseEnabled(true); … LifeMichael.com
  9. The WebView Class • Calling the setWebViewClient() method on our

    WebView object we can set our own implementation for WebViewClient class. … WebView ob; … ob.setWebViewClient(new WebViewClient() { public void shouldOverrideUrlLoading(WebView view, String url){ ob.loadUrl(… ); } }); … LifeMichael.com
  10. The WebView Class • Calling the setWebChromeClient() method on our

    WebView object we can set our own implementation for WebChromeClient class. • We can set a specific behavior to take place when things related to the browser UI happen (e.g. progress updates and JavaScript alerts). … WebView ob; … ob.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, String url){ … } }); … LifeMichael.com
  11. JavaScript Libraries • There are many JavaScript libraries optimized for

    touch screen devices we can use. LifeMichael.com
  12. JavaScript Libraries • You can find samples for hybrid applications

    developed using SenchaTouch at http://dev.sencha.com/deploy/touch/examples/ • You can find samples for hybrid applications developed using jQueryMobile at http://www.jqmgallery.com LifeMichael.com
  13. JavaScript Libraries • When displaying content in our web view

    we better add the viewport meta element. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> LifeMichael.com
  14. JavaScript Calling Java • Calling the addJavaScriptInterface() method on the

    WebView object we can bind an object to the JavaScript execution code allowing code in JavaScript to call methods on that object. LifeMichael.com
  15. JavaScript Calling Java • We should mark the methods defined

    in Java we want to allow their execution from code written in JavaScript with the @android.webkit.JavascriptInterface annotation. LifeMichael.com class CalculateObject { @android.webkit.JavascriptInterface public int calculateSum(int numA, int numB) { return numA + numB; } }
  16. JavaScript Calling Java LifeMichael.com public class JavaScriptJavaActivity extends Activity {

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView ob = new WebView(this); WebView.setWebContentsDebuggingEnabled(true); ob.getSettings().setJavaScriptEnabled(true); ob.addJavascriptInterface(new CalculateObject(),"ob"); ob.loadUrl("file:///android_asset/demo2.html"); setContentView(ob); } class CalculateObject { @android.webkit.JavascriptInterface public int calculateSum(int numA, int numB) { return numA + numB; } } }
  17. JavaScript Calling Java LifeMichael.com <form name="myform"> <br/>number 1: <input type="text"

    name="num_a"/> <br/>number 2: <input type="text" name="num_b"/> <br/><input type="button" onclick="calc()" value="+"/> <br/>result: <input type="text" name="result"/> </form> <script> function calc() { var a = parseInt(document.myform.num_a.value,10); var b = parseInt(document.myform.num_b.value,10); var sum = window.ob.calculateSum(a,b); document.myform.result.value = sum; } </script> demo2.html
  18. Java Calling JavaScript • We can use the loadUrl method

    passing over a string that starts with “javascript:” in order to invoke a specific function in JavaScript. webView.loadUrl("javascript:increment()"); LifeMichael.com
  19. Java Calling JavaScript LifeMichael.com public class JavaCallingJavaScript extends Activity {

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layout = new LinearLayout(this); final WebView webView = new WebView(this); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/demo3.html"); Button bt = new Button(this); bt.setText("count"); bt.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webView.loadUrl("javascript:increment()"); } }); layout.addView(bt); layout.addView(webView); setContentView(layout); } }
  20. Java Calling JavaScript LifeMichael.com <!DOCTYPE html> <html> <head lang="en"> <meta

    charset="UTF-8"> <title></title> </head> <body> <h3>Java Calling JavaScript</h3> <div id="msg">0</div> <script> function increment() { var ob = document.getElementById("msg"); ob.innerText = parseInt(ob.innerText)+1; } </script> </body> </html> demo.html
  21. Handling The Back Button LifeMichael.com • When the user presses

    the device's back button he is taken to the previous activity. • We can override this normal behavior by overriding the onBackPresses() function, that was defined in Activity. … public onBackPresses() { webView.loadUrl(…); }
  22. Handling External Links LifeMichael.com • When the user presses a

    URL link displayed inside the web view the user will be forwarded to the web browser. • We can set a different behavior by setting our own implementation for WebViewClient. ob.setWebViewClient(new WebViewClient() { public void shouldOverrideUrlLoading ( WebView view, String url) { view.loadUrl(… ); } });
  23. Handling External Links LifeMichael.com public class HandlingExternalLinks extends Activity {

    @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); String str = ""; str += "<br><a href=\"http://clock\">get system time</a>"; str += "<br><a href=\"http://sdk\">sdk version</a>"; str += "<br><a href=\"http://developer\">developer name</a>"; WebView browser = (WebView) findViewById(R.id.webby); browser.getSettings().setJavaScriptEnabled(true); browser.setWebViewClient(new URLIntercepter()); browser.loadData(str, "text/html", "UTF-8"); } } HandlingExternalLinks.java
  24. Handling External Links LifeMichael.com HandlingExternalLinks.java public class URLIntercepter extends WebViewClient

    { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url.contains("clock")) { String html = "<h2>" + new Date().toString() + "</h2>"; view.loadData(html, "text/html", "UTF-8"); return true; } else if(url.contains("sdk")) { String html = "<h2>The SDK version is " + Build.VERSION.SDK_INT + "</h2>"; view.loadData(html, "text/html", "UTF-8"); return true; }
  25. Handling External Links LifeMichael.com else if(url.contains("developer")) { String html =

    "<h2>Developer name is Haim Michael</h2>"; view.loadData(html, "text/html", "UTF-8"); return true; } else { return false; } } }
  26. Handling External Links LifeMichael.com <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

    android:layout_height="match_parent"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webby" android:layout_gravity="center_vertical"/> </LinearLayout> main.xml
  27. Chrome DevTools Debugging LifeMichael.com • We can use the Chrome

    DevTools debugger for debugging the code in JavaScript running inside the WebView. • We should call the setWebContentDebuggingEnabled static method (defined in WebView) passing over true in order to enable the debugging. WebView.setWebContentDebuggingEnabled(true); • We should open Chrome web browser and browse at the following URL address: chrome://inspect/#devices
  28. The PhoneGap Framework • The PhoneGap framework assists with the

    development of hybrid applications for mobile platforms. • The PhoneGap framework includes two parts. The JavaScript library that includes the definition of functions that allow using the platform native capabilities. The native code developed specifically separately for each and every mobile platform. LifeMichael.com
  29. The PhoneGap Framework • The implementation of the JavaScript library

    is different for each and every platform. It includes invocation of functions that belong to the native part. • You can find detailed documentation for PhoneGap capabilities at http://docs.phonegap.com. LifeMichael.com
  30. The PhoneGap Framework LifeMichael.com package org.apache.cordova.example; import android.app.Activity; import android.os.Bundle;

    import org.apache.cordova.*; public class cordovaExample extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } }
  31. The PhoneGap Framework LifeMichael.com <!DOCTYPE html> <html> <head> ... <title>Hello

    World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> ... </div> <script type="text/javascript" src="cordova-2.3.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html> index.html
  32. Chrome Custom Tabs • The chrome custom tab (as with

    Android M) is a customized window of Google Chrome shown on top of the active application. • The chrome custom tabs provide both the user and the developer with chrome's rendering capabilities, saved passwords, auto-fill from the keyboard, and all of Chrome's security features. LifeMichael.com
  33. Chrome Custom Tabs • When integrating web content into our

    application we can use the chrome custom tabs instead of using a web view object. • Using a chrome custom tab we can customize its look & feel, set a different color for the tool bar, add animation to the transition from the application to the chrome custom tab and add custom actions to the tab's tool bar. LifeMichael.com
  34. Chrome Custom Tabs • Using a chrome custom tab we

    can pre-start the chrome web browser and pre-fetch content in order to allow faster loading. • The chrome custom tab will usually fit when we want to take the user to a URL address that is not ours and in those cases in which we want to integrate between our application for Chrome OS and our application for android. LifeMichael.com
  35. Chrome Custom Tabs LifeMichael.com This screenshot is from the tutorial

    for using google chrome custom tabs, published by Google at https://developer.chrome.com/multidevice/android/customtabs You can find the pinterest's demo for using chrome custom tabs at https://youtu.be/7V-fIGMDsmE?t=15m35s
  36. Learning Resources • PhoneGap (Cordova) website at http://www.phonegap.com • You

    can find the free online course PhoneGap Basics at http://abelski.lifemichael.com • The following recommended textbooks focus on the PhoneGap open source framework: LifeMichael.com
  37. Learning Resources • The Android Platform main learning resource is

    the http://developer.android.com website. • Tutorial for learning how to use the chrome custom tabs at https://developer.chrome.com/multidevice/android/customta bs LifeMichael.com
  38. Questions & Answers • If you enjoyed my lecture please

    leave me a comment at http://speakerpedia.com/speakers/life-michael. Thanks for your time! Haim. LifeMichael.com