Hello.Android.3rd.Edition之network acces翻译3-LocalBrowser

最新推荐文章于 2024-08-15 15:45:05 发布

Derrick

最新推荐文章于 2024-08-15 15:45:05 发布

阅读量414

点赞数

分类专栏： android 文章标签： network android javascript layout button browser

android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Android手机可以做很多有趣的事情，比如播放音乐，确定位置，画画等等。如果可以在一个手机网页上做这些事情的话，那就非常完美了，用嵌入式的webView的话，就可以了。

这最重要的方法在WebView类中就是addJavascriptInterface()和loadUrl()方法。

1. 建立一个工程，包含下列参数：

Project name: LocalBrowser
Build Target: Android 2.2
Application name: LocalBrowser
Package name: org.example.localbrowser
Create Activity: LocalBrowser
Min SDK Version: 8

2. 这个程序的UI是由两部分组成的，这第一部分是由布局文件main.xml来定义的，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
	<WebView 
	    android:id="@+id/web_view"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:layout_weight="1.0"/>
	<LinearLayout 
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:layout_weight="1.0"
	    android:padding="5sp">
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:textSize="24sp"
	        android:text="@string/textview"/>
	    <Button 
	        android:id="@+id/button"
	        android:text="@string/call_javascript_from_android"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="18sp"/>
	    <TextView 
	        android:id="@+id/text_view"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:textSize="18sp"/>
	</LinearLayout>
</LinearLayout>

3. 这第二部分是由html文件来组成的，它将会加载到WebView中，这个html文件是在assets路径下而不是在res路径下，因为它不是编译文件，所有的内容在assets路径下将会被逐字的加载到局部存储器中在你的程序在install时，这个路径是为了用作复制html，images，scripts内容到browser中，并且能正常的显示出来，即使没有连接到网络中。代码如下：

<html>
<head>
	<script language="JavaScript">
		function callJS(arg){
			document.getElementById('replaceme').innerHTML = arg;
		}
	</script>
</head>
<body>
	<h1>WebView</h1>
	<p>
	<a href="#" οnclick="window.alert('Alert from JavaScript')">
	Display JavaScript alert
	</a></p>
	<p>
	<a href="#" οnclick="window.android.callAndroid('Hello from Browser')">
	Call Android from JavaScript
	</a></p>
	<p id="replaceme">
	</p>
</body>
</html>

在这个html文件中有两个连接，第一个是window.alert()功能，打开一个包含短的信息的message。第二个连接是用来引起callAndroid()方法在window.android方法中。如果你加载这个页面到一个普通的浏览器中，window.android将会不能被定义，但是我们是把浏览器嵌入到android程序中，所以我们是可以成功的。

4. LocalBrowser.java内容如下：

package com.zy.localbrowser;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View.OnClickListener;

public class LocalBrowser extends Activity {
    
	private static final String TAG ="LocalBrowser";
	private final Handler handler = new Handler();
	private WebView webView;
	private TextView textView;
	private Button button;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        //Find the Android controls on the screen
        webView = (WebView) findViewById(R.id.web_view);
        textView = (TextView) findViewById(R.id.text_view);
        button = (Button) findViewById(R.id.button);
        
        //Turn on JavaScript in the embedded browser
        webView.getSettings().setJavaScriptEnabled(true);
        //Expose a Java object to JavaScipt in the browser
        webView.addJavascriptInterface(new AndroidBridge(), "android");
        //Set up a function to be called when JavaScript tries
        //to open an alert window
        webView.setWebChromeClient(new WebChromeClient(){
        	@Override
        	public boolean onJsAlert(final WebView view, final String url, final String message,
        			JsResult result) {
        		Log.d(TAG, "onJsAlert("+view+","+url+","+message+","+result+")");
        		Toast.makeText(LocalBrowser.this, message, 3000).show();
        		return true;
        	}
        });
        //Load the web page from a local assert
        webView.loadUrl("file:///android_asset/index.html");
        
        //This function will be called when the user presses the button on the Android side
        button.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Log.d(TAG, "onClick("+v+")");
				webView.loadUrl("javascript:callJS('Hello from Android')");
			}
		});
    }
    //Object exposed to JavaScript
    private class AndroidBridge{
    	public void callAndroid(final String arg){
    		handler.post(new Runnable() {
				
				@Override
				public void run() {
					Log.d(TAG, "callAndroid("+arg+")");
					textView.setText(arg);
				}
			});
    	}
    }
}

在程序中初始化了Handler方法，由于JavaScript进入到浏览器中用到了特殊的线程，但是Android UI是引用一个主线程(GUI)的。我们应用Handler来进行转换的。AndroidBridge方法是用来从JavaScript中读取android的java代码的。当JavaScript调用callAndroid()方法时，这个程序将会创建一个新的Runnable Object然后传到主线程中用Handler.post()方法。当这个主线程得到机会，将会引起run()方法。

应用loadUrl来加载本地网页，可以发现在这个方法中有三个”/”，你已经可以猜到，这个是调用assets路径的文件。

5. 定义string.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, LocalBrowser!</string>
    <string name="app_name">LocalBrowser</string>
	<string name="textview">TextView</string>
	<string name="call_javascript_from_android">
	    Call JavaScript from Android
	</string>
</resources>

Derrick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hello.Android.3rd.Edition之network acces翻译3-LocalBrowser

Android手机可以做很多有趣的事情，比如播放音乐，确定位置，画画等等。如果可以在一个手机网页上做这些事情的话，那就非常完美了，用嵌入式的webView的话，就可以了。这最重要的方法在WebView类中就是addJavascriptInterface()和loadUrl()方法。1. 建立一个工程，包含下列参数：Project name: LocalBrowserBu
复制链接

扫一扫