In Android, map applications that call each other with JavaScript methods are implemented using the WebView control.

Source: Internet
Author: User

In Android, The WebView control can be used to call the pages to be loaded and Android methods. We need to implement the addJavascriptInterface method in WebView so that html can call the android method, here I personally think it is a bit similar to DWR.

To make it easy to understand, I wrote a simple Demo. The specific steps are as follows:

Step 1: Create an Android project named WebViewDemo (here I have defined an html page in assets ).

Step 2: Modify the main. xml layout file and add a WebView control and a Button control. The Code is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?>
<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 = "Welcome to Mr Wei's Blog ."
/>
<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 New demo.html file in the assetsdirectory. The Code is as follows (I don't know why mce is added here: these few things, <script> </script> is correct ):

<Html>
<Mce: script language = "javascript"> <! --

Function fillContent (){
Document. getElementById ("content"). innerHTML =
"This Content is showed by Android invoke Javascript function .";
}

// --> </Mce: script>
<Body>
<P> <a onClick = "window. demo. startMap ()" href = ""> Start GoogleMap </a> </p>
<P id = "content"> </p>
<P> A Demo ---- Android and Javascript invoke each other. </p>
<P> Author: Frankiewei </p>
</Body>
</Html>

Step 4: Modify the main core program WebViewDemo. java. The Code is as follows:

Package com. tutor. webwiewdemo;

Import android. app. Activity;
Import android. content. ComponentName;
Import android. content. Intent;
Import android. OS. Bundle;
Import android. view. View;
Import android. webkit. WebSettings;
Import android. webkit. WebView;
Import android. widget. Button;

Public class WebViewDemo extends Activity {
Private WebView mWebView;
Private Button mButton;
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
SetupViews ();
}
// Initialization
Private void setupViews (){
MWebView = (WebView) findViewById (R. id. webview );
WebSettings mWebSettings = mWebView. getSettings ();
// Add this sentence to use the javascript Method
MWebSettings. setJavaScriptEnabled (true );
// Added an interface method for calling html pages
MWebView. addJavascriptInterface (new Object (){
// Here I define a method to open the map application
Public void startMap (){
Intent mIntent = new Intent ();
ComponentName component = new ComponentName (
"Com. google. android. apps. maps ",
"Com. google. android. maps. MapsActivity ");
MIntent. setComponent (component );
StartActivity (mIntent );
}
}, "Demo ");
// Load the page
MWebView. loadUrl ("file: // android_asset/demo.html ");
MButton = (Button) findViewById (R. id. button );
// Add an Event Response to the button and execute the JavaScript fillContent () method.
MButton. setOnClickListener (new Button. OnClickListener (){
Public void onClick (View v ){
MWebView. loadUrl ("javascript: fillContent ()");
}
});
}
}

Step 5: run the above project to check the effect.

 

The html content changes when the button is clicked on the first page.

Click startGoogleMap in html to start the map application.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.