王家林android課程資源打包html5java和javascript相互溝通

1、因?yàn)锳ndroid軟件開發(fā)分工目前還沒有細(xì)化，程序員往往需要負(fù)責(zé)軟件界面的開發(fā)，盡管軟件的界面圖片已經(jīng)由美工設(shè)計(jì)好了，但如果使用layout技術(shù)把軟件做成如圖片所示的界面確實(shí)很困難，而且也比較耗時(shí)。Android通過WebView實(shí)現(xiàn)了JavaScript代碼與Java代碼互相通信的功能，使得Android軟件的界面開發(fā)也可以采用HTML網(wǎng)頁技術(shù)，這樣，廣大網(wǎng)頁美工可以參與進(jìn)Android軟件的界面開發(fā)工作，從而把程序員從中解脫出來。目前在一些場(chǎng)合已經(jīng)可以取代Layout。下面是一個(gè)使用Html作為UI實(shí)現(xiàn)的的電話撥號(hào)器的實(shí)例。 界面設(shè)計(jì)其中數(shù)據(jù)可以來自于SQLite數(shù)據(jù)庫，也可以來自于內(nèi)容提

2、供者，或者來自于網(wǎng)絡(luò)，點(diǎn)擊電話號(hào)碼下的鏈接能夠撥打電話，界面用Html實(shí)現(xiàn)。訪問數(shù)據(jù)庫需要用Java語言，并且數(shù)據(jù)需要在Html界面上顯示，但Html能運(yùn)行JavaScript腳本語言，而不支持Java語言。值得大家高興的是，Android實(shí)現(xiàn)了JavaScript與Java語言互訪的功能，這樣從HtmlJavaScriptJava，整個(gè)通道就被打通，Html可以使用SQLite數(shù)據(jù)庫及內(nèi)容提供者中的數(shù)據(jù)了。其中JavaScript和Java之間可以傳遞Json格式的數(shù)據(jù)，因此在傳遞數(shù)據(jù)時(shí)需要進(jìn)行數(shù)據(jù)格式的轉(zhuǎn)換。 創(chuàng)建名為“PhoneUIByHtmlDemo”的工程，圖片如下點(diǎn)擊【Finish

3、】。編寫網(wǎng)頁文件：在assets目錄下新建一個(gè)Html文件phoneui.html。內(nèi)容如下：Insert title here/該部分用到了JavaScript的一些知識(shí)。不熟練的讀者可以查閱相關(guān)書籍。/或者可由美工做出來之后，進(jìn)行必要的修改！function show(jsondata)/將傳遞過來的json數(shù)據(jù)轉(zhuǎn)換為對(duì)象var jsonobjs = eval(jsondata);/獲取下面定義的的表格var table = document.getElementById(personTable);/遍歷上面創(chuàng)建的json對(duì)象，將每個(gè)對(duì)象添加為表格中的一行，其每個(gè)屬性為一列for(var

4、i=0; ijsonobjs.length; i+)/添加一行 var tr = table.insertRow(table.rows.length); /添加三個(gè)單元格 var td1 = tr.insertCell(0); var td2 = tr.insertCell(1); td2.align = center; var td3 = tr.insertCell(2); /設(shè)置么個(gè)單元格的內(nèi)容和屬性， /其中innerHTML為設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML /jsonobjsi為對(duì)象數(shù)組中的第i個(gè)對(duì)象 td1.innerHTML = jsonobjsi.id; td2.

5、innerHTML = /為顯示的內(nèi)容添加超鏈接。 /超鏈接會(huì)調(diào)用Java代碼中的call（）方法并且把內(nèi)容作為參數(shù)傳遞過去 td3.innerHTML = +jsonobjsi.phone+ ; ;編號(hào)姓名電話說明：function show(jsondata)該方法將傳入的json數(shù)據(jù)進(jìn)行分割，每條數(shù)據(jù)作為一行顯示在下面的表格當(dāng)中。td3.innerHTML = +jsonobjsy.phone+ ; 為其文本加上超鏈接，點(diǎn)擊該超鏈接會(huì)調(diào)用HtmlActivity的內(nèi)部類SharpJavaScript類的實(shí)體對(duì)象的call方法來完成撥號(hào)，并將號(hào)碼傳入。onlo

6、ad=javascript:Sharp.contactlist()當(dāng)頁面加載時(shí)訪問Sharp所代表的HtmlActivity的內(nèi)部類SharpJavaScript類的實(shí)體對(duì)象的contactlist()方法，完成數(shù)據(jù)的獲取，并將數(shù)據(jù)拆分成Json數(shù)據(jù)，之后該方法會(huì)調(diào)用JavaScript中的show方法來為表格添加數(shù)據(jù)。編寫main.xml：編寫Contact.java：創(chuàng)建一個(gè)實(shí)體類，封裝聯(lián)系人信息。如下圖。其代碼如下：package com.sharpandroid.domain;public class Contact private Integer id;private String

7、name;private String phone;public Integer getId() return id;public void setId(Integer id) this.id = id;public String getName() return name;public void setName(String name) = name;public String getPhone() return phone;public void setPhone(String phone) this.phone = phone;public Contact(Integer id, Str

8、ing name, String phone) this.id = id; = name;this.phone = phone;public Contact()編寫HtmlActivity.Java：HtmlActivity.javapackage com.sharpandroid.html;import java.util.ArrayList;import java.util.List;import org.json.JSONArray;import org.json.JSONObject;import android.app.Activity;import android.content.

9、Intent;import .Uri;import android.os.Bundle;import android.webkit.WebView;import com.sharpandroid.domain.Contact;public class HtmlActivity extends Activity private WebView webView; /* Called when the activity is first created. */ Override public void onCreate(Bundle savedInstanceState) super.onCreat

10、e(savedInstanceState); setContentView(R.layout.main); webView = (WebView)this.findViewById(R.id.webView);/瀏覽器 webView.getSettings().setJavaScriptEnabled(true);/支持js webView.getSettings().setSaveFormData(false);/不保存表單 webView.getSettings().setSavePassword(false);/不保存密碼 webView.getSettings().setSuppor

11、tZoom(false);/不支持放大功能 webView.addJavascriptInterface(new SharpJavaScript(), sharp);/addJavascriptInterface方法中要綁定的Java對(duì)象 webView.loadUrl(file:/android_asset/index.html); public class SharpJavaScript public void contactlist() try String json = buildJson(getContacts();webView.loadUrl(javascript:show(+

12、json + );/調(diào)用js的show()方法 catch (Exception e) e.printStackTrace(); public void call(String phone) Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(tel:+ phone); HtmlActivity.this.startActivity(intent); /模擬從數(shù)據(jù)庫或者從網(wǎng)絡(luò)獲取數(shù)據(jù) public List getContacts() List contacts = new ArrayList(); contacts.add(new

13、 Contact(1, 張三, 5554); contacts.add(new Contact(2, 李四, 5556); contacts.add(new Contact(3, 王五, 5557); return contacts; public String buildJson(List contacts) throws Exception JSONArray array = new JSONArray(); for(Contact contact : contacts) JSONObject jsonObject = new JSONObject(); jsonObject.put(id

14、, contact.getId(); jsonObject.put(name, contact.getName(); jsonObject.put(phone, contact.getPhone(); array.put(jsonObject); return array.toString(); 關(guān)鍵代碼詳解：webView = (WebView)this.findViewById(R.id.webView);/瀏覽器獲得webView對(duì)象。webView.getSettings().setJavaScriptEnabled(true);/支持jswebView.getSettings().s

15、etSaveFormData(false);/不保存表單webView.getSettings().setSavePassword(false);/不保存密碼webView.getSettings().setSupportZoom(false);/不支持放大功能完成對(duì)webView的一些屬性設(shè)置。webView.addJavascriptInterface(new SharpJavaScript(), sharp);把Java對(duì)象綁定到JavaScript中。在JavaScript中通過“Sharp”可以引用到該對(duì)象。參數(shù)一 要綁定的Java對(duì)象參數(shù)二 在JavaScript中訪問該對(duì)象時(shí)使用

16、的名字。webView.loadUrl(file:/android_asset/index.html);加載指定Url路徑對(duì)應(yīng)的文件到webView上?！?HYPERLINK android_assetindex.html file:/android_asset/index.html”對(duì)應(yīng)于assets下的index.html文件。file表示在文件系統(tǒng)中。/android_asset對(duì)應(yīng)項(xiàng)目中的assets目錄。public List getContacts()該方法是為了簡(jiǎn)化本程序的操作，模擬從數(shù)據(jù)庫或者網(wǎng)絡(luò)獲取數(shù)據(jù)。我們?cè)趯?shí)際開發(fā)時(shí)可以在該方法中實(shí)現(xiàn)從數(shù)據(jù)庫或網(wǎng)絡(luò)獲取數(shù)據(jù)。 public

17、 String buildJson(List contacts) throws Exception把傳入的對(duì)象數(shù)組構(gòu)建成Json數(shù)據(jù)返回。JSONArray是Android提供的一個(gè)將數(shù)據(jù)轉(zhuǎn)化成Json數(shù)據(jù)的一個(gè)工具類。我們可以調(diào)用它的相關(guān)方法生成Json數(shù)據(jù)。這與我們自己拼湊Json數(shù)據(jù)方便了很多。public class SharpJavaScript public void contactlist() try String json = buildJson(getContacts();webView.loadUrl(javascript:show(+ json + );/調(diào)用js的sho

18、w()方法 catch (Exception e) e.printStackTrace(); 該內(nèi)部類封裝了一些操作，供JavaScript調(diào)用。String json = buildJson(getContacts();獲得Json數(shù)據(jù)。webView.loadUrl(javascript:show(+ json + );調(diào)用index.html中JavaScript的show()方法，并將json數(shù)據(jù)傳入。public void call(String phone) Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(tel:+

19、 phone); HtmlActivity.this.startActivity(intent); 該方法創(chuàng)建一個(gè)撥打電話的意圖。添加撥號(hào)權(quán)限功能清單文件如下：AndroidManifest.xml 運(yùn)行程序?qū)⒊绦虬l(fā)布到sharp模擬器上面。結(jié)果如下圖。為了測(cè)試撥號(hào)效果，再啟動(dòng)一個(gè)AVD，啟動(dòng)listen。在sharp中點(diǎn)擊【5556】號(hào)碼。之后sharp中界面如下圖。listen中界面如下。項(xiàng)目總結(jié)整體的流程是，當(dāng)該應(yīng)用開始執(zhí)行時(shí)，首先執(zhí)行PhoneActivity中的onCreate（）方法，在OnCreate（）方法內(nèi)部首先獲取了在main.xml中定義的webView對(duì)象，之后通過其關(guān)聯(lián)的webSettings對(duì)象對(duì)webView進(jìn)行一系列的初始化設(shè)置如是否支持JavaScript，之后將PhoneActivity的一個(gè)內(nèi)部類SharpJa