Chasing an mobile web vision

闯荡在移动互联网的世界中

移动互联网时代--Android上的一个例子

我们来演示一个获取联系人,并用网页展现出来的简单例子。

 首先,我们在eclipse环境中创建一个Android project,我们的Activity名称是com.example.RIAExample,并且修改界面的layout文件如下:

<?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"
    
>
<WebView android:id="@+id/web"
 android:layout_width
="fill_parent" android:layout_height="fill_parent">
</WebView>
</LinearLayout>

可以看到,界面中仅仅包含一个WebView控件。

 接下来,创建一个简单的java类来描述一个联系人的信息,它包含联系人姓名和号码。

 

package com.example;

import java.util.Vector;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class RIAExample extends Activity {
    
    
private WebView web;
    
    
//模拟号码簿
    private Vector<Person> phonebook = new Vector<Person>();
    
/** Called when the activity is first created. */
    @Override
    
public void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
this.initContacts();
        web 
= (WebView)this.findViewById(R.id.web);
        web.getSettings().setJavaScriptEnabled(
true);//开启javascript设置,否则WebView不执行js脚本
        web.addJavascriptInterface(this"phonebook");//把RIAExample的一个实例添加到js的全局对象window中,
                                                        
//这样就可以使用window.phonebook来调用它的方法
        web.loadUrl("file:///android_asset/phonebook.html");//加载网页
     
    }

    
    
/**
     * 该方法将在js脚本中,通过window.phonebook.getContacts()进行调用
     * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组
     * 
@return
     
*/

    
public JavaArrayJSWrapper getContacts(){
        System.out.println(
"fetching contacts data");
        Person[] a 
= new Person[this.phonebook.size()];
        a 
= this.phonebook.toArray(a);
        
return new JavaArrayJSWrapper(a);
    
    }

    
    
/**
     * 初始化电话号码簿
     
*/

    
public void initContacts(){
        Person p 
= new Person();
        p.name 
= "Perter";
        p.phone_number 
= "8888888";
        phonebook.add(p);
        p 
= new Person();
        p.name 
= "Jack";
        p.phone_number 
= "777777";
        phonebook.add(p);
       
    }

    
    
/**
     * 通过window.phonebook.debugout来输出js调试信息。
     * 
@param info
     
*/

    
public void debugout(String info){
        
        System.out.println(info);
    }

}

下面是html文件,它非常简单。
<html>
    
<head>
        
<script type="text/javascript" src="fetchcontacts.js"/>
</head>
<body>
    
<div id = "contacts">
        
<p> this is a demo </p>
    
</div>
</body>
</html>

而主角就是我们的javascript脚本fetchcontacts.js
window.onload= function(){
    window.phonebook.debugout(
"inside js onload");//调用RIAExample.debugout
    var persons = window.phonebook.getContacts();//调用RIAExample.getContacts()
    if(persons){//persons实际上是JavaArrayJSWrapper对象
        window.phonebook.debugout(persons.length() + " of contact entries are fetched");
        
var contactsE = document.getElementById("contacts");
        
var i = 0
        
while(i < persons.length()){//persons.length()调用JavaArrayJSWrapper.length()方法
            
            pnode 
= document.createElement("p");
            tnode 
= document.createTextNode("name : " + persons.get(i).getName() + " number : " + persons.get(i).getNumber());//persons.get(i)获得Person对象,然后在js里面直接调用getName()和getNumber()获取姓名和号码
            pnode.appendChild(tnode);
            contactsE.appendChild(pnode);
            i 
++;
        }

    }
else{
        window.phonebook.debugout(
"persons is undefined");
    }

    
}


 例子很简单,我加了注释希望有助大家理解,其他我就不深入解释了。
我把例子的源代码放上来,你可以下来试一试。

RIADemo

这个例子说明通过WebView.addJavascriptInterface方法,我们可以扩展JavaScript的API,获取Android的数据。这样,JS的粉丝就可以使用Dojo,JQuery,Prototy等这些知名的js框架来搭建android应用程序来展现它们很酷很玄的效果!但是,目前addJavascriptInterface还不够灵活强大,为什么呢?敬请关注第四篇“what next?”


posted on 2009-03-14 16:16 勤劳的蜜蜂 阅读(5343) 评论(6)  编辑  收藏

评论

# re: 移动互联网时代--Android上的一个例子 2009-03-16 10:20 kingLv

JavaArrayJSWrapper这个类在哪个包中,我找了半天没找着,很郁闷  回复  更多评论   

# re: 移动互联网时代--Android上的一个例子 2009-03-16 10:22 kingLv

谢谢你的一系列的android的blog,我也一直在看关于android的sdk  回复  更多评论   

# re: 移动互联网时代--Android上的一个例子 2009-03-16 10:35 勤劳的蜜蜂

JavaArrayJSWrapper是我自己写的,你下载我例子的源码就看到实现了。
如果你也关注这些东西,那我们一起来讨论,我的联系方式jerrylee2002@hotmail.com以及jerrylee.li@gmail.com  回复  更多评论   

# re: 移动互联网时代--Android上的一个例子[未登录] 2009-03-19 16:41 javaeye

在s60的平台上如何做OSGI的应用?

  回复  更多评论   

# re: 移动互联网时代--Android上的一个例子 2009-03-19 21:19 勤劳的蜜蜂

s60上如果有cdc的vm,就可以跑osgi,然后开发OSGi的应用就和在desktop上一样。  回复  更多评论   

# re: 移动互联网时代--Android上的一个例子 2009-04-13 16:26 mxx

hello 我是mxx 一不留神发现你又开始写blog了,呵呵呵呵...  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: