Cross Platform development : Showing pop up by communication between Android and Java Script

Thursday, 15 November 2012

Cross Platform development : Showing pop up by communication between Android and Java Script

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

  }
 }
}