史上最全系列之用户界面之webkit
一、webkit简介
WebKit 所包含的 WebCore排版引擎和 JSCore 引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。
WebKit的优势在于高效稳定，兼容性好，且源码结构清晰，易于维护。
尽管Webkit内核是个非常好的网页解析机制，但是由于以往微软把IE捆绑在Windows里(同样的Webkit内核的Safari捆绑在Apple产品里，GoogleChrome[1]捆绑在Google产品里)，导致许多网站都是按照IE来架设的，很多网站不兼容Webkit内核，比如登录界面、网银等网页均不可使用Webkit内核。目前几乎所有网站和网银已经逐渐支持WebKit，未来可能将取代IE内核的浏览器。
WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机Android、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
WebKit是开源的Web浏览器引擎，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。WebKit 还支持移动设备和手机，包括iPhone和Android手机都是使用WebKit做为浏览器的核心。
WebKit 是一个开源项目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应用程序。虽然设备本身的能力和形态因素都相当重要，但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是 Internet 用户可用内容的一个很小的子集，那么用户体验充其量也只能划分为二等。
WebKit 还应用在了桌面的 Safari 浏览器内，该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的是桌面版本还是 iPhone 或 Android 上的浏览器引擎，WebKit 均优先支持 HTML 和 CSS 特性。实际上，WebKit 还支持尚未被其他浏览器采纳的一些 CSS 样式 — 这些特性正在得到 HTML5 规范的考虑。
HTML5 规范是一个技术草案集，涵盖了各种基于浏览器的技术，它包括客户端 SQL 存储、转变、转型、转换等。HTML5 的出现已经有些时间了，虽然尚未完成，但一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后，Web 应用程序的简陋开端也将成为永久的记忆。Web 应用程序开发将成为主导 — 并且不只是在传统的桌面浏览器空间，还将在移动领域。移动将一跃成为首要考虑，而不再是后备之选。
二、相关接口和类
三、简单应用剖析
WebView是显示网页界面控件，下面介绍WebView的实例。
1、载入本地html文件
index.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>联系人列表</
title
>
<
script
type
=
"text/javascript"
>
//我们传入的jsondata是一个数组如：
//[{id:20,name:"王昌龙",phone:"18701445755"},......] 这样
function show(jsondata){
var jsonobjs = eval(jsondata);
var table = document.getElementById("personTable");
for(var y=0; y<
jsonobjs.length
; y++){
var
tr
=
table
.insertRow(table.rows.length); //添加一行
tr.onmouseover
=
function
(){
this.style.backgroundColor
=
"red"
;
}
tr.onmouseout
=
function
(){
this.style.backgroundColor
=
"#000000"
;
}
//添加三列
var
td1
=
tr
.insertCell(0);
var
td2
=
tr
.insertCell(1);
td2.align
=
"center"
;
var
td3
=
tr
.insertCell(2);
//设置列内容和属性
td1.innerHTML
=
jsonobjs
[y].id;
//转义
td2.innerHTML
=
"<a href='javascript:partner4java.call(\"
5554\")'>"+ jsonobjs[y].name + "</
a
>";
td3.innerHTML = jsonobjs[y].phone;
}
}
function init(){
var jsondata = "[{id:20,name:\"王昌龙\",phone:\"18701445755\"},{id:21,name:\"幻云\",phone:\"18701445755\"}]";
show(jsondata);
}
</
script
>
</
head
>
<
body
bgcolor
=
"#000000"
text
=
"#FFFFFF"
style
=
"margin:0 0 0 0"
>
联系人列表
<
table
border
=
"0"
width
=
"100%"
id
=
"personTable"
cellspacing
=
"0"
>
<
tr
>
<
td
width
=
"15%"
>编号</
td
><
td
align
=
"center"
>姓名</
td
><
td
width
=
"15%"
>电话</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
|
将index.html文件复制到工程下assets目录中。
WebView配置，载入本地html文件
|
01
02
03
04
05
06
07
08
09
10
11
12
|
private
WebView myWeb;
myWeb=(WebView)findViewById(R.id.myWeb);
urlWeb=(WebView)findViewById(R.id.urlWeb);
myWeb.getSettings().setJavaScriptEnabled(
true
);
//不保存表单数据
myWeb.getSettings().setSaveFormData(
false
);
//不保存密码
myWeb.getSettings().setSavePassword(
false
);
//不支持页面放大功能
myWeb.getSettings().setSupportZoom(
false
);
//显示页面
myWeb.loadUrl(
"file:///android_asset/index.html"
);
|
载入相关网页的WebView配置
|
01
02
03
04
05
|
private
WebView urlWeb;
urlWeb.getSettings().setJavaScriptEnabled(
true
);
urlWeb.getSettings().setSaveFormData(
true
);
urlWeb.getSettings().setSavePassword(
true
);
urlWeb.loadUrl(
"http://www.eoeandroid.com/forum.php"
);
|
示例的xml布局文件
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:tools
=
"http://schemas.android.com/tools"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:orientation
=
"vertical"
>
<
WebView
android:id
=
"@+id/myWeb"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
/>
<
WebView
android:id
=
"@+id/urlWeb"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
/>
</
LinearLayout
>
|
四、关于WebView缓存
使用WebView加载html时候，会在data/应用package下生成database与cache两个文件夹，请求的url记录是保存在webviewCache.db里，而url的内容是保存在webviewCache文件夹下。
附上示例程序效果图一张：
最后附上示例程序，由于个人能力有限，有所错漏在所难免，发现错误请指出，我会尽快修正。
TestWebKit.zip (1013.46 KB, 下载次数: 23)