the webview role in hybrid applications
TRANSCRIPT
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 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
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
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
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
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