Sunday, June 8, 2014

Calling Javascript from Android Java coding

In Android application, WebView is the component for display web pages. As Hybrid application are popular now, there are needs of calling javascript method from Android Java coding. We can do this by implement the addJavascriptInterface method in WebView.

The following example demonstarte this:
Step 1: Create a new Android project "JavascriptDemo" in Eclipse. A html web page is created in the assests directory.




Step 2: Modify activity_javascript_demo.xml layout document. Add a button in the WebView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
  <TextView   
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:text="Hello World!!" 
        /> 
    <WebView 
        android:id="@+id/webview" 
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
    /> 
    <Button 
        android:id="@+id/button" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Change the webview content" 
    /> 
</LinearLayout>

Step 3: Create a demo.html file under assest directory.

<html> 
    <script language="javascript"><!-- 
    
 function fillContent(){ 
     document.getElementById("content").innerHTML =  
   "This Content is showed by Android invoked Javascript function."; 
 } 
       
// --></script>   
  <body> 
    <p><a onClick="window.demo.startMap()" href="">Start GoogleMap</a></p> 
    <p id="content"></p> 
    <p>EasyInfoGeek.com</p> 
    <p>Javscript Demo ---- Android and Javascript interaction</p> 
     
  </body> 
</html>

Step 4: Modify JavascriptDemo.java
  1. package com.easyinfogeek.javascriptdemo;
  2.  
  3. import android.app.Activity;
  4. import android.content.ComponentName;
  5. import android.content.Intent;
  6. import android.os.Bundle;
  7. import android.view.Menu;
  8. import android.view.View;
  9. import android.webkit.WebSettings;
  10. import android.webkit.WebView;
  11. import android.widget.Button;
  12.  
  13. public class JavascriptDemo extends Activity {
  14.   private WebView mWebView;  
  15.      private Button mButton;  
  16.      public void onCreate(Bundle savedInstanceState) {  
  17.          super.onCreate(savedInstanceState);  
  18.          setContentView(R.layout.activity_javascript_demo);  
  19.          setupViews();  
  20.      }  
  21.       
  22.      private void setupViews() {  
  23.          mWebView = (WebView) findViewById(R.id.webview);  
  24.          WebSettings mWebSettings = mWebView.getSettings();  
  25.         
  26.          mWebSettings.setJavaScriptEnabled(true);  
  27.         
  28.          mWebView.addJavascriptInterface(new Object() {  
  29.         
  30.              public void startMap() {  
  31.                  Intent mIntent = new Intent();  
  32.                  ComponentName component = new ComponentName(  
  33.                          "com.google.android.apps.maps",  
  34.                          "com.google.android.maps.MapsActivity");  
  35.                  mIntent.setComponent(component);  
  36.                  startActivity(mIntent);  
  37.              }  
  38.          }, "demo");  
  39.         
  40.          mWebView.loadUrl("file:///android_asset/demo.html");  
  41.          mButton = (Button) findViewById(R.id.button);  
  42.          mButton.setOnClickListener(new Button.OnClickListener() {  
  43.              public void onClick(View v) {  
  44.                  mWebView.loadUrl("javascript:fillContent()");  
  45.              }  
  46.          });  
  47.      }  
  48.  
  49. }



Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)