This document provides an overview of using WebView in hybrid mobile applications. It discusses how WebView allows embedding web content in native apps and describes how to load URLs, enable JavaScript, and handle events. It also covers interacting between JavaScript and Java code, debugging with Chrome DevTools, and frameworks like PhoneGap that simplify hybrid app development. Resources for further learning include the PhoneGap and Android developer websites.

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
● Snowboarding. Learning. Coding. Teaching. More than
16 years of Practical Experience.
LifeMichael.com

4. 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

5. 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

6. 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

7. 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

8. 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

9. The WebView Class
LifeMichael.com

10. 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

11. 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

12. 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

13. JavaScript Libraries
● There are many JavaScript libraries optimized for touch
screen devices we can use.
LifeMichael.com

14. 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

15. 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

16. 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

17. 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;
}
}

18. 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;
}
}
}

19. 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

20. JavaScript Calling Java
LifeMichael.com

21. 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

22. 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);
}
}

23. 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

24. Java Calling JavaScript
LifeMichael.com

25. 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(…);
}

26. 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(… );
}
});

27. 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

28. 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;
}

29. 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;
}
}
}

30. 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

31. Handling External Links
LifeMichael.com

32. 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

33. Chrome DevTools Debugging
LifeMichael.com

34. Chrome DevTools Debugging
LifeMichael.com

35. 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

36. 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

37. 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");
}
}

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. 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

45. 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