The WebView Role inHybrid Applications

Haim MichaelJune 11th, 2015

All logos, trade marks and brand names used in this presentation belong to the respective owners.

Li fe M

ic hae l .c o

m

`

Table of ContentLi fe M

ic hae l .c o

m● 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

Haim Michael Introduction● Snowboarding. Learning. Coding. Teaching. More than

16 years of Practical Experience.

Li fe M

ic hae l .c o

m

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

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

Device Display

Web Browser Object

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.

Li fe M

ic hae l .c o

m

The WebView ClassLi fe M

ic hae l .c o

m

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

The WebView ClassLi fe M

ic hae l .c o

m

<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

The WebView ClassLi fe M

ic hae l .c o

m

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);

…

Li fe M

ic hae l .c o

m

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

}

});

…

Li fe M

ic hae l .c o

m

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){

…

}

});

…

Li fe M

ic hae l .c o

m

JavaScript Libraries● There are many JavaScript libraries optimized for touch

screen devices we can use.

Li fe M

ic hae l .c o

m

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

Li fe M

ic hae l .c o

m

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" />

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

class CalculateObject {

@android.webkit.JavascriptInterface public int calculateSum(int numA, int numB) {

return numA + numB; }

}

JavaScript Calling JavaLi fe M

ic hae l .c o

mpublic 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; } }}

JavaScript Calling JavaLi fe M

ic hae l .c o

m

<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

JavaScript Calling JavaLi fe M

ic hae l .c o

m

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()");

Li fe M

ic hae l .c o

m

Java Calling JavaScriptLi fe M

ic hae l .c o

mpublic 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); }}

Java Calling JavaScriptLi fe M

ic hae l .c o

m

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

Java Calling JavaScriptLi fe M

ic hae l .c o

m

Handling The Back ButtonLi fe M

ic hae l .c o

m● 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(…);

}

Handling External LinksLi fe M

ic hae l .c o

m● 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(… );

}

});

Handling External LinksLi fe M

ic hae l .c o

m

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

Handling External LinksLi fe M

ic hae l .c o

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

Handling External LinksLi fe M

ic hae l .c o

m

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

Handling External LinksLi fe M

ic hae l .c o

m

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

Handling External LinksLi fe M

ic hae l .c o

m

Chrome DevTools DebuggingLi fe M

ic hae l .c o

m● 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

Chrome DevTools DebuggingLi fe M

ic hae l .c o

m

Chrome DevTools DebuggingLi fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

The PhoneGap FrameworkLi fe M

ic hae l .c o

m

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

The PhoneGap FrameworkLi fe M

ic hae l .c o

m<!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

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.

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

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.

Li fe M

ic hae l .c o

m

Chrome Custom TabsLi fe M

ic hae l .c o

m

This screenshot is from the tutorial for using google chrome custom tabs, published by Google athttps://developer.chrome.com/multidevice/android/customtabs

You can find the pinterest's demo for using chrome custom tabs athttps://youtu.be/7V-fIGMDsmE?t=15m35s

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:

Li fe M

ic hae l .c o

m

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

Li fe M

ic hae l .c o

m

Questions & Answers● If you enjoyed my lecture please leave me a comment

at http://speakerpedia.com/speakers/life-michael.

Thanks for your time!

Haim.

Li fe M

ic hae l .c o

m