Previous section discuss how to show progress dialog while Webview loading url. Further discussion will lead you to depth knowledge about Webview and its usefulness. This article will cover
- How to load a custom HTML inside a Webview ?
- How to add Java Script interface to android Webview ?
- How to display Native Alert Dialog from Java Script code ?
Create one custom HTML file and keep into assets folder. Now just load it into Webview
/**
* Load Our Custom JS Inside Webview
*/
webView.loadUrl("file:///android_asset/myhtml.html");
we can add JS interface to android webview and can pop up our native dialog box. Webview provide a way to add JS interface. So just we have to make one class and add object of class to Webview like
/**
* Now Added Java Interface Class
*/
webView.addJavascriptInterface(new myJsInterface(this), "Android");
Now create a class myJsInterface
public class myJsInterface {
private Context con;
public myJsInterface(Context con) {
this.con = con;
}
public void showToast(String mssg) {
AlertDialog alert = new AlertDialog.Builder(con)
.create();
alert.setTitle("My Js Alert");
alert.setMessage(mssg);
alert.setButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
}
}
In webView.addJavascriptInterface(new myJsInterface(this), "Android"), Android ensure that which method need to be called when you perform action inside a Html (its Java Script)
HTML and JS file , Keep this file inside assets folder
<html>
<head>
My custom js Interface
</head>
<body>
<input type="button" value="Show Dialog" onClick="showAndroidToast('This is Js Alert.')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
<body>
</html>
See the Java script function, it have the Tag we pass from android activity. So it will redirect to myJsInterface's method showToast(mssg) , and alert dialog is populated
function showAndroidToast(toast) {
Android.showToast(toast);
}
Lets combine all except HTML
package com.example.webviewtag;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class WebViewDemo extends Activity {
WebSettings wSettings;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = new WebView(this);
webView.setClickable(true);
wSettings = webView.getSettings();
wSettings.setJavaScriptEnabled(true);
/**
* <b> Support Classes For WebView </b>
*/
WebClientClass webViewClient = new WebClientClass();
webView.setWebViewClient(webViewClient);
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);
/**
* Now Added Java Interface Class
*/
webView.addJavascriptInterface(new myJsInterface(this), "Android");
/**
* Load Our Custom JS Inside WebView
*/
webView.loadUrl("file:///android_asset/myhtml.html");
setContentView(webView);
}
public class WebClientClass extends WebViewClient {
ProgressDialog pd = null;
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
pd = new ProgressDialog(WebViewDemo.this);
pd.setTitle("Please wait");
pd.setMessage("Page is loading..");
pd.show();
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
pd.dismiss();
}
}
public class WebChromeClass extends WebChromeClient {
}
public class myJsInterface {
private Context con;
public myJsInterface(Context con) {
this.con = con;
}
public void showToast(String mssg) {
AlertDialog alert = new AlertDialog.Builder(con)
.create();
alert.setTitle("My Js Alert");
alert.setMessage(mssg);
alert.setButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
}
}
}
Have a look on Screen Shot of application
0 comments:
Post a Comment