Chasing an mobile web vision
          

          闖蕩在移動互聯(lián)網(wǎng)的世界中
          

          




          
	
					
	
          
		
          
			移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
		
          
		
          我們來演示一個(gè)獲取聯(lián)系人，并用網(wǎng)頁展現(xiàn)出來的簡單例子。
          

           首先，我們在eclipse環(huán)境中創(chuàng)建一個(gè)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>
          

          可以看到，界面中僅僅包含一個(gè)WebView控件。
          

           接下來，創(chuàng)建一個(gè)簡單的java類來描述一個(gè)聯(lián)系人的信息，它包含聯(lián)系人姓名和號碼。
          

           
          

          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設(shè)置，否則WebView不執(zhí)行js腳本
          
                  web.addJavascriptInterface(this, "phonebook");//把RIAExample的一個(gè)實(shí)例添加到j(luò)s的全局對象window中，
          
                                                                  //這樣就可以使用window.phonebook來調(diào)用它的方法
          
                  web.loadUrl("file:///android_asset/phonebook.html");//加載網(wǎng)頁
          
               
          
    }
          
    
          
              /**
          
     * 該方法將在js腳本中，通過window.phonebook.getContacts()進(jìn)行調(diào)用
          
     * 返回的JavaArrayJSWrapper對象可以使得在js中訪問Java數(shù)組
          
     *           @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調(diào)試信息。
          
     *           @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");//調(diào)用RIAExample.debugout
          
              var persons = window.phonebook.getContacts();//調(diào)用RIAExample.getContacts()
          
              if(persons){//persons實(shí)際上是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()調(diào)用JavaArrayJSWrapper.length()方法
          
                      
          
            pnode           = document.createElement("p");
          
            tnode           = document.createTextNode("name : " + persons.get(i).getName() + " number : " + persons.get(i).getNumber());//persons.get(i)獲得Person對象，然后在js里面直接調(diào)用getName()和getNumber()獲取姓名和號碼
          
                      pnode.appendChild(tnode);
          
            contactsE.appendChild(pnode);
          
            i           ++;
          
        }
          
    }          else{
          
        window.phonebook.debugout(          "persons is undefined");
          
    }
          
    
          
}
          


          
 例子很簡單，我加了注釋希望有助大家理解，其他我就不深入解釋了。
          
我把例子的源代碼放上來，你可以下來試一試。
          

          

          

          RIADemo
          

          這個(gè)例子說明通過WebView.addJavascriptInterface方法，我們可以擴(kuò)展JavaScript的API，獲取Android的數(shù)據(jù)。這樣，JS的粉絲就可以使用Dojo，JQuery，Prototy等這些知名的js框架來搭建android應(yīng)用程序來展現(xiàn)它們很酷很玄的效果！但是，目前addJavascriptInterface還不夠靈活強(qiáng)大，為什么呢？敬請關(guān)注第四篇“what next?”
          

          

          

          
 
		
          
			posted on 2009-03-14 16:16 勤勞的蜜蜂 閱讀(5487) 評論(6)  編輯  收藏  
		
          
	
          
	
	





          
	    
    


          

          評論
          
	
	
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
					
						2009-03-16 10:20
					
				kingLv
			
          
			
          
				JavaArrayJSWrapper這個(gè)類在哪個(gè)包中，我找了半天沒找著，很郁悶  回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
					
						2009-03-16 10:22
					
				kingLv
			
          
			
          
				謝謝你的一系列的android的blog，我也一直在看關(guān)于android的sdk  回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
					
						2009-03-16 10:35
					
				勤勞的蜜蜂
			
          
			
          
				JavaArrayJSWrapper是我自己寫的，你下載我例子的源碼就看到實(shí)現(xiàn)了。
          如果你也關(guān)注這些東西，那我們一起來討論，我的聯(lián)系方式j(luò)errylee2002@hotmail.com以及jerrylee.li@gmail.com  回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子[未登錄]
					
						2009-03-19 16:41
					
				javaeye
			
          
			
          
				在s60的平臺上如何做OSGI的應(yīng)用?

          

            回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
					
						2009-03-19 21:19
					
				勤勞的蜜蜂
			
          
			
          
				s60上如果有cdc的vm,就可以跑osgi，然后開發(fā)OSGi的應(yīng)用就和在desktop上一樣。  回復(fù)  更多評論
				  
			
          
		
			
          
				# re: 移動互聯(lián)網(wǎng)時(shí)代--Android上的一個(gè)例子
					
						2009-04-13 16:26
					
				mxx
			
          
			
          
				hello 我是mxx 一不留神發(fā)現(xiàn)你又開始寫blog了，呵呵呵呵...  回復(fù)  更多評論
				  
			
          
		

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發(fā)表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          



    







          
        
	




主站蜘蛛池模板：
桃园市|
福泉市|
岳池县|
凤山县|
侯马市|
蒙阴县|
莱西市|
浮梁县|
齐河县|
大厂|
西和县|
蒲城县|
开远市|
防城港市|
临桂县|
资溪县|
永丰县|
清河县|
武汉市|
张北县|
大渡口区|
珲春市|
女性|
隆昌县|
镇赉县|
太和县|
南丹县|
资阳市|
石柱|
海伦市|
诸城市|
胶南市|
海阳市|
哈尔滨市|
阳山县|
衡山县|
兴仁县|
沙洋县|
兴安盟|
昭苏县|
海原县|