程序入口介绍
在我们的应用中，ContactsActivity 是程序的主类，代码如下：
WebView webView;
private Handler handler = null;
private String accountType = null;
private String accountName = null;
...
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 初始化WebView
webView = new WebView(this);
setContentView(webView);
//允许使用Javscript
webView.getSettings().setJavaScriptEnabled(true);
//检查应用中的帐号是否已经建立
accountType = "com.jquerymobile.demo.contact";
Account[] accounts = AccountManager.get(this).getAccountsByType(accountType);
if(accounts.length != 0){
accountName = accounts[0].name;
}
handler = new Handler();
webView.addJavascriptInterface(this, "contactSupport");
// 装载index.html页
loadPage("index.html");
}
...
}
代码中关键点讲解如下：
· 首先初始化WebView并允许Webview使用Javascript。
· 由于在前面已经提到，通讯录的使用必须关联帐号，所以这里使用android.accounts.AccountManager类去检查应用中是否已经存在帐号，如果存在的话，将帐号名称赋值给变量accountName。
· We initialize the handler field.接着使用handler机制，将ContactsActivity的对象实例和前端的Javascript绑定，交互的接口名称为contactSupport。
index.html页的代码如下，其中，在jQuery的ready方法中，当加载页面完毕后，就开始加载ListPage.html了。
ListPage.html
首先讲解的是ListPage.html代码，其中回忆下前文提到的结构图，可以看到这个页面容器包含了三个内容页，分别是创建帐号，通讯录列表和进度等待，代码如下：
<head>
<B><!-- jQuery Mobile Libraries --></B>
<link rel="stylesheet" href="css-js/jquery.mobile-1.0a3.min.css" />
<script src="css-js/jquery-1.5.min.js"></script>
<script src="css-js/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<B><!-- Container Page --></B>
<div data-role="page" data-theme="c" id="containerPage">
<B><!-- Contact List --></B>
<div data-role="header" id="hdrList" data-nobackbtn="true">
<h1><img align="top" src="img/contacts.png"> Contacts</h1>
<a id="buttonAddContact" data-icon="plus" class="ui-btn-right"
href="<B>javascript:addContact();</B>return false;" data-role="button" data-inline="true">Add</a>
</div>
<div data-role="content" id="contentList" data-theme="c">
<ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
</div>
<div data-role="footer" id="ftrList"></div>
<B><!-- Progress --></B>
<div data-role="header" id="hdrProgress" data-nobackbtn="true" data-theme="c">
<h1>Processing...</h1>
</div>
<div data-role="content" id="contentProgress" data-theme="c">
<div align="CENTER"><h4>Please wait.</h4></div>
<div align="CENTER"><img id="spin" src="img/wait.gif"/></div>
</div>
<div data-role="footer" id="ftrProgress" data-theme="c"></div>
<B><!-- Create Account --></B>
<div data-role="header" id="hdrAccount" data-nobackbtn="true" data-theme="c">
<h1>Create Account</h1>
</div>
<div data-role="content" id="contentAccount" data-theme="c">
<div align="CENTER"><img src="img/contacts-master-bgd.png"></div>
<div align="CENTER"><h4>Please enter name of the new account for this application</h4></div>
<div align="CENTER">Contacts created with this application will be associated with the new account specified below.
Other contacts can be viewed, however, cannot be deleted or modified with this application.</div>
<div align="CENTER" id="accountDiv" data-role="fieldcontain">
<input id="accountName" type="text" />
</div>
<div align="CENTER">
<a href="javascript:createAccount();return false;" <B>data-role="button"
data-inline="true"</B>>Save</a>
</div>
...
</div>
<div data-role="footer" id="ftrAccount" data-theme="c"></div>
</div> <B><!-- Container Page Ends Here --></B>
...
以上的代码中，注意如下几点
· 所有的三个内容页都有页头，页脚和内容区域。其中，每个部分都是用DIV层的方式去定义的，并且定义了data-theme=“c”，这个是使用了jQuery Mobile框架中预先定义好的颜色样式，详细的请参考jQuery Mobile手册中的论述。
· jQuery Mobile有预先定义好的返回按钮，但我们将在应用程序中去定义，因此这里并不需要，所以设置data-nobackbtn=“true”。
· 在“Contact List”的内容页中，有一个增加的按钮，它是调用了addContact()方法，这个方法稍后会学习到。而id="contentList"的那个DIV中，实际上目前的内容是空的，在程序中，会动态把结果集填充到这里，另外请注意这里使用了jQuery Mobile中的listview样式，表明这是一个列表的样式。
· 注意在“Create Account”中的按钮，其中用了data-incline=“true”，这表示按钮的大小刚好是跟文字“Save”的大小相匹配的。
下面我们继续分析ListPage.html。接下来，我们看下如何实现同一个时间之显示页面容器中的某个页面，比如我们在新建帐号时，只希望显示新建帐号的这个div。方法很简单，在jQuery的ready()方法中，将初始化一些变量，以保存页面容器中的页面，这通过jQuery中的$('#...')选择器就可以实现了。然后，在需要显示某个层的地方，定义hidePage()和showPage()方法，在这些方法中分别调用层的hide和show方法，就可以实现了。下面是例子，部分雷同的代码省略，详细见代码下载：
var hdrListVar;
var contentListVar;
var ftrListVar;
var hdrProgressVar;
var contentProgressVar;
var ftrProgressVar;
var hdrAccountVar;
var contentAccountVar;
var ftrAccountVar;
$(document).ready(function () {
// Initialize commonly used variables
hdrListVar = $('#hdrList');
contentListVar = $('#contentList');
ftrListVar = $('#ftrList');
hdrProgressVar = $('#hdrProgress');
contentProgressVar = $('#contentProgress');
ftrProgressVar = $('#ftrProgress');
hdrAccountVar = $('#hdrAccount');
contentAccountVar = $('#contentAccount');
ftrAccountVar = $('#ftrAccount');
...
});
...
function hideList(){
hdrListVar.hide();
contentListVar.hide();
ftrListVar.hide();
}
function showList(){
hideProgress();
hideAccount();
hdrListVar.show();
contentListVar.show();
ftrListVar.show();
}
function hideProgress(){
hdrProgressVar.hide();
contentProgressVar.hide();
ftrProgressVar.hide();
}
...
</script>
接下来，我们看下getAllContacts()方法，这个方法中，是获得通讯录列表，代码如下：
final String accountCallbackFunction = "javascript:" + accountCallback + "()";
if(accountName == null){
loadURL(accountCallbackFunction);
return;
}
final String json = ContactUtility.getAllContactDisplaysJSON(getContentResolver());
final String callbackFunction = "javascript:" + callback + "('" + json + "')";
loadURL(callbackFunction);
}
We had partially reviewed that code before. To recap:这段代码之前已经提到，其中我们着重看getAllContactDisplaysJSON方法，它会把后端的结果集取出，转变为JSON格式的字符串，然后回调到前端的Javascript中的方法去把JSON格式的数据重新整理。在我们的应用中，是按字母表顺序把联系人的姓名进行分组，下面我们来看其JSON格式的数据集，关于JSON本文不再详细展开论述，请参考相关文档。
{"key":"A","values":[
{"contactId":"257","displayName":"Aach Herb","key":"A"},
...,
{"contactId":"256","displayName":"Aaker David","key":"A"}
]
},
{"key":"B","values":[
{"contactId":"259","displayName":"Belanger Andre","key":"B"},
...,
{"contactId":"260","displayName":"Bohme Jacob","key":"B"}
]
},
...
]
}
可以看到，其中按字母表顺序进行了分组，key属性代表的是字母，values的值是一个JSON格式的数组，包含的是每个字母下的联系人的具体通讯录。
接下来，我们看下前端页面的Javascript如何解析后端传送过来的JSON格式的字符串。代码如下：
<ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
</div>
...
<script>
...
// Commonly used variables
...
var contactSelectionsVar;
$(document).ready(function () {
// Initialize commonly used variables
...
contactSelectionsVar = $('#contactSelections');
...
}
...
function setContactsList(jsonText){
var tmpJson = $.parseJSON(jsonText);
if(tmpJson != null && tmpJson.contacts != null){
var tmpContacts = tmpJson.contacts;
for(i = 0; i < tmpContacts.length; i++){
var tmpKey = (tmpContacts[i]).key;
var tmpKeyFragment = '<li data-role="list-divider">'+tmpKey+'</li>';
contactSelectionsVar.append(tmpKeyFragment);
var tmpValues = (tmpContacts[i]).values;
if(tmpValues != null){
var j;
for(j = 0; j < tmpValues.length; j++){
var tmpDisplayName = tmpValues[j].displayName;
var tmpContactId = tmpValues[j].contactId;
var tmpLiFragment = '<li><a href="javascript:showContact(' +
tmpContactId + ');return false;">'+tmpDisplayName+'</a></li>';
contactSelectionsVar.append(tmpLiFragment);
}
}
}
}
contactSelectionsVar.listview('refresh');
showList();
}
...
</script>
· 首先，利用了jQuery的parseJSON方法，去解析后端获得的JSON格式代码，解析后的赋值给tmpJson变量。
然后，使用var tmpContacts = tmpJson.contacts;一句，获得了前文提到的JSON格式中的CONTACTS部分的内容,然后再使用一个FOR循环，在循环体内，每次通过
var tmpKey = (tmpContacts[i]).key，获得的JSON字符串中的key部分(即每个字母)，
· 然后将tmpKey变量与'
组合成变量tmpKeyFragment。其中
是jQuery Mobile中的列表项目分割符号。
· .再将tmpKeyFragment变量，使用jQuery的append方法添加到contactSelectionsVar这个DIV区域中。
· 接下来的这步，是先读取JSON字符串中的values属性中的值，变量tmpValues存放的就是每个字母下的所有通讯录联系人列表，然后使用循环去读取每个联系人的contactId和displayName。
再把tmpDisplayName和 tmpContactId组合成tmpLiFragment变量，注意这里加入了一个链接'，其目的是当用户点这个联系人的名称时，会用javascript调出另外的显示详细信息的页面。同样，最后我们将其添加到contactSelectionsVar这个div层中。
· 最后，我们使用contactSelectionsVar.listview的refresh方法，更新列表。
下图是该部分代码跟实际效果的对应图，可以清楚看到两者间的结构：
▲
小结
在本系列教程的第一篇，我们介绍了将要设计的应用的概况，页面结构和jQuery Mobile框架中页面的一些元素知识，也介绍了Android中的后端JAVA程序如何跟前端的Javascript进行互相数据交互的基本知识。在下篇教程中，我们将学习如何新建立一个通讯录的帐号，以及如何对通讯录列表进行增删改。
