jQuery Mobile设计Android通讯录(第二章)

最新推荐文章于 2022-04-08 09:11:37 发布

disneylu

最新推荐文章于 2022-04-08 09:11:37 发布

阅读量3.6k

点赞数

本文是jQuery Mobile设计Android通讯录系统教程的第二篇，在上一篇教程中，初步介绍了我们要设计的应用的架构和页面结构，并介绍了Jquery Mobile框架中重要的页面元素的知识，以及Android Java应用程序如何跟前端的JavaScript页面进行交互。在本系列教程的第二篇，将介绍如何创建新的通讯录帐号及如何修改和删除已经存在的通讯录名单。

创建通讯录帐号

下面来看下如何新创建通讯录帐号。用户只需要输入自己的姓名，点保存按钮。其中该部分的代码是在ListPage.html中可以找到，代码如下：

 
 <html> 
  ... 
<body> 
<!-- Container Page --> 
<div data-role="page" data-theme="c" id="containerPage"> 
  ... 
  <!--  Create Account --> 
  <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;" data-role="button" 
        data-inline="true">Save</a> 
    </div> 
    ... 
  </div> 
  <div data-role="footer" id="ftrAccount"  data-theme="c"></div> 
 
</div> <!-- Container Page Ends Here --> 
... 
<script> 
... 
  function createAccount(){ 
    showProgress(); 
    contactSupport.createAccount($('#accountName').val(),'ListPage.html'); 
  } 
  ... 
</script>

◆我们把创建帐号这个页面放在页面容器中，这个页面有自己的头部，内容content部分和页脚部分。

◆当点SAVE按钮时，将会调用Javasccript中的createAccount()方法。

◆在Javasccript中的createAccount()方法中，获得用户的输入的帐号名,即使用

'#accountName').val()获得其值，然后通过调用后端Android Java应用中的createAccount方法去保存帐户名。跟后端Android Java的交互，在本系列的第一篇教程中有提到，如果不大清楚，请查看第一篇教程。

下面看下后端的Android Java应用中的createAccount方法如何编写。

 
 import android.accounts.AccountManager; 
import android.accounts.Account; 
... 
public class ContactsActivity extends Activity { 
  ... 
  private String accountType = null; 
  ... 
  public void onCreate(Bundle savedInstanceState) { 
    ... 
    accountType = "com.jquerymobile.demo.contact"; 
    ... 
  } 
 
  public void createAccount(String accountN, String displayPage){ 
    if(accountN != null && !"".equals(accountN)){ 
      accountNaccountName = accountN; 
      AccountManager.get(this).addAccountExplicitly(new Account(accountName,accountType), "dummyPassword", null); 
    } 
    loadPage(displayPage); 
  } 
  ... 
}

下面讲解下这段代码：

◆实际上帐号的创建是通过android.accounts.AccountManager类去创建的。Android2.0中加入了一个新的包android.accounts，该包主要包括了集中式的账户管理API，用以安全地存储和访问认证的令牌和密码，比如，我们的手机存在多个账户，每个账户下面都有不同的信息，甚至每个账户都可以与不同的服务器之间进行数据同步(例如，手机账户中的联系人可以是一个Gmail账户中的通讯录，可联网进行同步更新)。

这里首先通过AccountManager.get()获得了它的一个实例，接着调用其addAccountExplicitly方法，创建了一个新的帐号，和密码(这里的密码默认是dummyPassword),当帐号创建完后，将回调HTML页面，这里通过loadPage方法去加载回调HTML页面。

◆为了能调用Android API中的创建帐号的功能，必须在AndroidManifest.xml中进行如下设置，声明一个intent-filter：

 
 <intent-filter> 
  <action android:name="android.accounts.AccountAuthenticator"/> 
</intent-filter>

◆除此之外，必须在meta-data中声明帐号验证器如下：

 
 <meta-data 
  android:name="android.accounts.AccountAuthenticator" 
  android:resource="@xml/authenticator" />

Finally, the res/xml/authenticator.xml configuration file (which is value of the android:resourceattribute above) should have an element named account-authenticator where value ofandroid:accountType attribute is set to com.jquerymobile.demo.contact. Note that this is value of theaccountType in ContactsActivity. Summarizing the discussion, first look at the highlighted section inAndroidManifest.xml.

这里，用android:resource的值，指出了要在res/xml下配置一个验证配置文件authenticator.xml，文件如下：

 
 <?xml version="1.0" encoding="utf-8"?> 
<account-authenticator xmlns:android="http://schemas.android.com/apk/res/android" 
  android:accountType="com.jquerymobile.demo.contact" 
  android:icon="@drawable/icon" 
  android:smallIcon="@drawable/icon" 
  android:label="@string/app_name" 
/>

其中的android:accountType指出了要验证的帐号的实体类为com.jquerymobile.demo.contact。最后我们综合看下修改后的AndroidManifest.xml如下：

 
 <?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  package="com.jquerymobile.demo.contact" 
  android:versionCode="1" 
  android:versionName="1.0"> 
    <uses-permission android:name="android.permission.READ_CONTACTS"/> 
    <uses-permission android:name="android.permission.WRITE_CONTACTS"/> 
    <uses-permission android:name="android.permission.GET_ACCOUNTS" /> 
    <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" /> 
    <application android:debuggable="true" android:icon="@drawable/icon" 
      android:label="@string/app_name"> 
        <service 
          android:name=".authentication.AuthenticationService" 
          android:exported="true"> 
          <intent-filter> 
            <action android:name="android.accounts.AccountAuthenticator" /> 
            </intent-filter> 
            <meta-data android:name="android.accounts.AccountAuthenticator" 
              android:resource="@xml/authenticator" /> 
        </service> 
        <activity android:name=".ContactsActivity" 
          android:configChanges="orientation|keyboardHidden" 
          android:label="@string/app_name"> 
            <intent-filter> 
              <action android:name="android.intent.action.MAIN" /> 
              <category android:name="android.intent.category.LAUNCHER" /> 
            </intent-filter> 
        </activity> 
    </application> 
</manifest>

在文件中用uses-permission分别设置了帐号的读写或校验的权限，并且声明了帐号的管理服务实现类为com.jquerymobile.demo.contact. authentication.AuthenticationService,在这个类中，将编写一些关于帐号管理操作的业务逻辑。这个帐号业务管理器被定义为Android中的一个服务，代码如下：

 
 package com.jquerymobile.demo.contact.authentication; 
 
import android.app.Service; 
import android.content.Intent; 
import android.os.IBinder; 
 
public class AuthenticationService extends Service { 
  public IBinder onBind(Intent intent) { 
    return null; 
  } 
}

可以看到，这里跟普通的编写Android服务没什么大的区别，这里在onBind()中并没有编写具体的代码，只是返回了null。但如果你需要将创建的帐号跟一些在线服务结合起来，那么则需要在这里编写相关的实现代码，并且还需要实现android.accounts.AbstractAccountAuthenticator接口。这里我们足够用了，所以返回null。现在，运行程序，在输入帐号并保存后，你会发现在Android 手机中的Accounts and sync settings的选项设置中，会发现你刚才新建的帐号，如下图所示：

创建通讯录帐号

列出已存在的通讯录

下面，我们看下，当用户点某个人名的通讯录时，会显示其通讯录的详细情况。先回顾下在本系列教程第一篇中，提到的如下代码：

 
 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(); 
  }

这里，通过JavaScript去调用了showContact方法，用于显示某个人的具体通讯录，代码如下：

 
 function showContact(tmpId){ 
  showProgress(); 
  contactSupport.showContact(tmpId,'DetailPage.html'); 
}

这里，首先调用了等待图标的显示方法，然后同样调用后端Android Java的showContact方法调出通讯录的详细信息，然后再把结果回调显示到DetailPage.html中而后端Java对应的showContact方法如下：

 
 public void showContact(String contactId, String displayPage){ 
  loadPage(displayPage + "?" + contactId); 
}

这里再通过loadPage调用前端的JavaScirpt页面，并传入要查看的通讯录的参数contactId,假如现在要看的某人的通讯录的contatId是23，而回显通讯录详细信息的页面是DetailPage.html,则跳转的URL为DetailPage.html?23

通讯录详细信息页

通讯录详细信息页Detail.html页面代码如下，它分为三个部分，分别是显示已存在的详细通讯录信息页，空白的用于新建显示录入通讯录的信息页以及在删除通讯录时显示的界面，先来看显示已存在的详细通讯录信息页的代码如下：

 
 <div data-role="page" data-theme="c" id="containerPage"> 
  <!-- Header for contact details --> 
  <div data-role="header" id="hdrDetail" data-nobackbtn="true" data-theme="c"> 
    <h1><img align="top"  src="img/contacts.png"> Details</h1> 
  </div> 
 
  <div data-role="content" id="contentDetail" data-theme="c"> 
    <form id="contactForm" onsubmit="return false;"> 
      <input id="contactId" type="hidden">  
 
      <div id="namesDiv" data-role="fieldcontain"> 
        <table> 
          <tbody> 
            <tr> 
              <td>First name</td> 
              <td><input id="firstName" type="text"></td> 
            </tr> 
            <tr> 
              <td>Last<br> 
                name</td> 
              <td><input id="lastName" type="text"></td> 
            </tr> 
            <tr> 
              <td>Notes</td> 
              <td><input id="note" type="text"></td> 
            </tr> 
          </tbody> 
        </table> 
      </div> 
 
      <div data-role="collapsible" data-collapsed="true"> 
        <h3>Phone Numbers</h3> 
        <table id="phonesTable"></table> 
      </div>

注意如下几点：

◆这里的contactId是一个隐藏域，记录当前查看或修改的通讯录的ID号，在更新时必须用到。

◆这里的电话号码是一个可以展开输入的伸缩面板，使用的是jQuery Mobile框架中的可伸缩区块的方法。这里，为方便用户输入电话提供了更多的输入选项，当用户点“Phone Number”时，会下拉显示出更多的四种不同的通讯方式以供用户输入。只需要在代码中写入data-role="collapsible" data-collapsed="true"两个jQuery Mobile的属性即可。实际效果如下图：

通讯录详细信息页

我们继续来看，剩下的象EMAIL及“更多”部分，都同样使用了jQuery Mobile中的可收缩区域的技术去实现，具体代码请参考附件，这里不再列出，下面是其中的几个截图如下：

通讯录详细信息页

最后是显示三个新增，修改及删除的按钮及页面的底部，代码如下：

 
 <div align="CENTER" data-role="controlgroup" data-type="horizontal"> 
      <a href="javascript:generateJson();return false;" data-role="button" ><h5>Save</h5></a> 
      <a id="deleteButton"  href="javascript:showDialog();return false;" data-role="button"  ><h5>Delete</h5></a> 
      <a href="javascript:showListPage();return false;" data-role="button" ><h5>Cancel</h5></a> 
    </div> 
  </div> 
 
  <!-- Footer for contact details --> 
  <div data-role="footer" id="ftrDetail" data-theme="c"></div> 
... 
</div> <!-- Container page -->

◆注意这里使用了data-role="controlgroup"这一jQuery Mobile提供的属性，将三个按钮都以同一分组的形式放在同一个区域，而data-type="horizontal" 则表示以垂直的方式分组将按钮进行摆放设置。

◆三个按钮都通过Javascript实现触发。

接下来是显示进度条等待的页面，代码如下，比较简单，不详细论述。

 
 <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 alt="" id="spin" src="img/wait.gif"> 
  </div> 
</div> 
 
<div data-role="footer" id="ftrProgress" data-theme="c"></div>

当用户要删除某条通讯录时，会出现新的页面，以询问用户是否确认删除，代码如下：

 
 <div data-role="header" id="hdrDialog" data-nobackbtn="true" data-theme="c"> 
  <h1>Confirm delete</h1> 
</div> 
 
<div data-role="content" id="contentDialog"  data-theme="c"> 
  <div align="CENTER"> 
    <h4>Are you sure you want to delete this contact?</h4> 
  </div> 
  <div align="CENTER" data-role="controlgroup" data-type="horizontal"> 
    <a href="javascript:deleteContact();return false;" data-role="button"><h5>Delete</h5></a> 
    <a href="javascript:showDetail();return false;" data-role="button"><h5>Cancel</h5></a> 
  </div> 
</div> 
 
<div data-role="footer" id="ftrDialog" data-theme="c"></div>

用JavaScript控制页面的显示和隐藏

在本教程的第一讲中，已经讲解了如何通过jQuery及Javscript，控制一个页面容器中各个容器子页的显示和隐藏，这里只是简单提到复习下，详细的请参考第一篇教程。我们可以在jQuery的ready()方法中，定义一系列的变量，分别指代页面容器中各子页的头部，内容部分和页脚部分，然后由于各个部分其实都是div层的结构，所以显示时只需要调用show方法即可，隐藏时调用hide方法即可，下面是部分代码，具体代码请参考下载附件：

 
 <script> 
  ... 
  //定义变量  
  var contactIdVar; 
 
  <!-- contact details --> 
  var hdrDetailVar; 
  var contentDetailVar; 
  var ftrDetailVar; 
 
 
  $(document).ready(function () { 
       contactIdVar = $('#contactId'); 
 
    <!-- contact details --> 
    hdrDetailVar = $('#hdrDetail'); 
    contentDetailVar = $('#contentDetail'); 
    ftrDetailVar = $('#ftrDetail'); 
 
      ... 
  }   
  function hideDetail(){ 
    hdrDetailVar.hide(); 
    contentDetailVar.hide(); 
    ftrDetailVar.hide(); 
  } 
 
  function showDetail(){ 
    hideDialog(); 
    hideProgress(); 
    hdrDetailVar.show(); 
    contentDetailVar.show(); 
    ftrDetailVar.show(); 
  }   
 
</script>

显示已存在的数据记录

Having reviewed the structure of content pages in DetailPage.html, let us look into how to populate the contact details for an existing contact. Recall that the ContactsActivity.showContact() method displays DetailPage.html appending id of the contact as an HTTP query string, e.g. DetailPage.html?23. Let us see below how JavaScript code in DetailPage.html will process that information. The related section in jQuery $(document).ready() function is given below.

在知道了页面结构后，我们现在看下，如何将后端的数据显示在前端的界面中，这样当用户点选一个已存在的通讯录时，会把该通讯录的详细信息显示出来。我们看下之前说的，举例说到的DetailPage.html?23这样方式的链接，看下在DetailPage.html中，是如何用Javascript去读取后端的数据的，关键是看jQuery中的ready()方法中处理的代码，如下：

 
 $(document).ready(function () { 
  ... 
  showProgress(); 
  contactIdVar.val(window.location.search.substring(1)); 
  contactSupport.getContact(contactIdVar.val(),'setCurrentContact'); 
});

◆首先是加载了进度等待图标

◆然后用window.location.search.substring(1)获得了当前链接的中?号后的参数，比如对于DetailPage.html?23这个例子来说，获得了23的值，并且赋值给 contactIdVar.val这个变量。

◆最后，通过调用后端JAVA应用的ContactsActivity.getContact()方法，传入的是两个参数，一个是当前通讯录的id,另外的setCurrentContact是回调前端显示处理结果的Javascript方法。下面看下ContactsActivity.getContact()方法的实现，如下：

 
 public void getContact(String contactId, String contactCallback){ 
  String json = ContactUtility.getContactJSON(contactId, ...); 
  final String callbackFunction = "javascript:" + contactCallback + "('" + json + "')"; 
  loadURL(callbackFunction); 
}

这里，通过getContactJSON方法，产生了JSON格式的数据。下面看下如何产生JSON格式的数据。下面是应用中模拟生成的JSON代码，代码如下：

 
 { 
  "contactId":"265", 
  "firstName":"Aafjes", 
  "lastName":"Bertus", 
  "note":{"rowId":"2265","text":"Author"}, 
  "ims":[ 
    {"rowId":"2274","protocol":"-1","value":""}, 
    {"rowId":"2275","protocol":"0","value":"bertus@aim"}, 
    {"rowId":"2276","protocol":"5","value":"bertus@google"}, 
    {"rowId":"2277","protocol":"6","value":""}, 
   。。。。。。。 
  ], 
  "phones":[ 
    {"rowId":"2284","type":"1","no":"111-222-3333"}, 
    {"rowId":"2285","type":"2","no":"222-000-9999"}, 
    {"rowId":"2286","type":"3","no":"444-787-9900"}, 
    {"rowId":"2287","type":"7","no":"555-744-9999"} 
  ], 
  "emails":[ 
    {"rowId":"2271","type":"1","value":"bertus@home.xyz"}, 
    {"rowId":"2272","type":"2","value":"bertus@work.xyz"}, 
    {"rowId":"2273","type":"3","value":"bertus@other.xyz"} 
  ], 
  "organizations":[ 
    {"rowId":"2269","type":"1","name":"Publications Inc.","title":"CEO"}, 
    {"rowId":"2270","type":"2","name":"Volunteers Corp.","title":"Member"} 
  ], 
  "addresses":[ 
    {"rowId":"2266","type":"1","street":"Alhambra st.","city":"Alhambra","state":"MI", 
      "country":"USA","zip":"48100","poBox":""}, 
    {"rowId":"2267","type":"2","street":"1 Corporation st","city":"Alhambra","state":"MI", 
      "country":"USA","zip":"48000","poBox":"44456"}, 
    {"rowId":"2268","type":"3","street":"","city":"","state":"", 
      "country":"","zip":"","poBox":""} 
  ] 
}

以上的JSON中，contactId, firstName, lastName都是字符串类型，而address,email,phones等都是每个JSON对象中包含了多个对象，形成一个JSON数组。

◆注意在以上的对象中，都有一个rowId，它都是不会重复的，用以区别不同的记录，也方便在前端Javascript代码中进行处理。

◆在ims数组中，有protocol属性，它代表是用户使用哪种即时通讯工具，这是由Android 通讯录 API给出的定义，定义如下：

o protocol=-1, 自定义

o protocol=0, AIM

o protocol=1, MSN

o protocol=2, Yahoo

o protocol=3, Skype

o protocol=4, QQ

o protocol=5, Google

o protocol=6, ICQ

o protocol=7, Jabber

◆同样，在phones数组中的type属性，也是Android 通讯录 API给出的定义，如下：

o type=1, Home

o type=2, Mobile

o type=3, Work

o type=7, Other

◆emails数组中的type属性，API定义如下：

o type=1, Home

o type=2, Work

o type=3, Other

◆organizations 数组中的type属性定义如下：

o type=1, Work

o type=2, Other

◆addresses 数组中的type属性定义如下：

o type=1, Home

o type=2, Work

o type=3, Other

在JavaScript中解析JSON

下面我们看下如何在Javascript中对JSON进行解析。

定义常量

我们为了设计方便，在Javscirpt中先定义一些常量，以方便代码的书写和阅读，代码如下：

 
 <script> 
  // Constants 
  var STYLED_IN = '<input type="text" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="'; 
  var TR_O = '<tr><td>'; 
  var TD_C = '</td></tr>'; 
  var TD_M = '</td><td>'; 
  var VALUE = ' value="'; 
 
  var WORK_ORG_FRAGMENT_SFX = '">'+TD_C; 
 
  var HOME_FRAGMENT_PRX = TR_O+'Home'+TD_M+STYLED_IN; 
  var MOBILE_FRAGMENT_PRX = TR_O+'Mobile'+TD_M+STYLED_IN; 
  var WORK_FRAGMENT_PRX = TR_O+'Work'+TD_M+STYLED_IN; 
  var OTHER_FRAGMENT_PRX = TR_O+'Other'+TD_M+STYLED_IN; 
 
  var HOME_PHONE_FRAGMENT_MID = '_1_No"' + VALUE; 
  var MOBILE_PHONE_FRAGMENT_MID = '_2_No"' + VALUE; 
  var WORK_PHONE_FRAGMENT_MID = '_3_No"' + VALUE; 
  var OTHER_PHONE_FRAGMENT_MID = '_7_No"' + VALUE; 
  ...

以上要注意的是在变量 STYLED_IN中，增加了jQuery Mobile中特定的样式。jQuery Mobile允许动态向一个表中增加行，但我们发现目前的版本，在动态增加行后，jQuery Mobile并没有将上一层的

标记中的样式自动应用到<input>中去，所以要另外增加。

定义一些变量

下面定义一些初始变量，并进行初始化。

  
  <script> 
  ... 
  var currentContact; 
  var firstNameVar; 
  var lastNameVar; 
  var noteVar; 
  var contactIdVar; 
  var phonesTableVar; 
  ... 
  $(document).ready(function () { 
    firstNameVar = $('#firstName'); 
    lastNameVar = $('#lastName'); 
    noteVar = $('#note'); 
    contactIdVar = $('#contactId'); 
    phonesTableVar = $('#phonesTable'); 
    ... 
  }

接下来，我们使用jQuery的parseJSON功能去解析后端程序返回的JSON字符串，其中用变量 currentContact保存JSON字符串，而contactId, firstName, lastName和note则可以直接从JSON中解析出来，比较简单，如下所示：

 
 function setCurrentContact(jsonText){ 
    currentContact = $.parseJSON(jsonText); 
    contactIdVar.val(currentContact.contactId); 
    firstNameVar.val(currentContact.firstName); 
    lastNameVar.val(currentContact.lastName); 
noteVar.val(currentContact.note.text);

解析对象数组

接下来，我们看下如何解析象Phone,Email,Address这些对象数组类型的JSON元素。这里其实只需要用循环对JSON中的Phone,Email,Address分别进行遍历，然后再用变量保存即可，下面以Phone为例进行说明，分别用 tmpType, tmpRowId, tmpNo保存了解析出来的type,rowId和no。

 
 var phonesArr = currentContact.phones; 
    ...      
 
    if(phonesArr !== null){ 
      for(i = 0; i < phonesArr.length; i++){ 
        var tmpType = (phonesArr[i]).type; 
        var tmpRowId = (phonesArr[i]).rowId; 
        var tmpNo = (phonesArr[i]).no; 
        ...

根据不同的电话类型，我们构建了对应的HTML片断去展示JSON解析出来的电话号码，比如如果是家庭号码，并且tmpRowId为15和值是222333444,则以如下形式展示：

HOME_FRAGMENT_PRX + tmpRowId + HOME_PHONE_FRAGMENT_MID + tmpNo + FRAGMENT_SFX

这实际上出来的效果是如下的HTML代码：

 
 <tr><td>Home</td><td><input type="text" 
  class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" 
  id="15_1_No" value="2223334444"></td></tr>

最后，我们综合来看下解析JSON字符串的代码中，其中Phone部分的展示方法如下：

 
 var mobilePhoneSet = false; 
var homePhoneSet = false; 
var workPhoneSet = false; 
var otherPhoneSet = false;           
 
if(phonesArr !== null){ 
  for(i = 0; i < phonesArr.length; i++){ 
        var tmpType = (phonesArr[i]).type; 
        var tmpRowId = (phonesArr[i]).rowId; 
        var tmpNo = (phonesArr[i]).no; 
 
    if(tmpType == 1){//home 
      phonesTableVar.append(HOME_FRAGMENT_PRX + tmpRowId + HOME_PHONE_FRAGMENT_MID + tmpNo + FRAGMENT_SFX); 
      homePhoneSet = true; 
    }else if(tmpType == 2){//mobile 
      phonesTableVar.append(MOBILE_FRAGMENT_PRX + tmpRowId + MOBILE_PHONE_FRAGMENT_MID + tmpNo + FRAGMENT_SFX); 
      mobilePhoneSet = true; 
    }else if(tmpType == 3){//work 
      phonesTableVar.append(WORK_FRAGMENT_PRX + tmpRowId + WORK_PHONE_FRAGMENT_MID + tmpNo + FRAGMENT_SFX); 
      workPhoneSet = true; 
    }else if(tmpType == 7){//other 
      phonesTableVar.append(OTHER_FRAGMENT_PRX + tmpRowId + OTHER_PHONE_FRAGMENT_MID + tmpNo + FRAGMENT_SFX); 
      otherPhoneSet = true; 
    } 
  } 
}

要注意的是，假如通讯录中有的联系人并没有所有的电话类型(比如只有工作电话，而没记载家庭电话)，则需要用如下代码：

 
 var HOME_PHONE_FRAGMENT_LOCAL = TR_O+'Home'+TD_M+STYLED_IN+'-1_1_No">'+TD_C; 
  var MOBILE_PHONE_FRAGMENT_LOCAL = TR_O+'Mobile'+TD_M+STYLED_IN+'-1_2_No">'+TD_C; 
  var WORK_PHONE_FRAGMENT_LOCAL = TR_O+'Work'+TD_M+STYLED_IN+'-1_3_No">'+TD_C; 
  var OTHER_PHONE_FRAGMENT_LOCAL = TR_O+'Other'+TD_M+STYLED_IN+'-1_7_No">'+TD_C; 
  ... 
  if(phonesArr !== null){ 
    ... 
  } 
  if(!homePhoneSet){ 
    phonesTableVar.append(HOME_PHONE_FRAGMENT_LOCAL); 
  } 
  if(!mobilePhoneSet){ 
    phonesTableVar.append(MOBILE_PHONE_FRAGMENT_LOCAL); 
  } 
  if(!workPhoneSet){ 
    phonesTableVar.append(WORK_PHONE_FRAGMENT_LOCAL); 
  } 
  if(!otherPhoneSet){ 
    phonesTableVar.append(OTHER_PHONE_FRAGMENT_LOCAL); 
  }

解析下上面这段代码，假设某个联系人没工作移动电话，那么 workPhoneSet 为false,上面的代码会变为：

 
 <tr><td>Home</td><td><input type="text" 
    class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="-1_1_No"></td></tr>

这实际上是向DIV区域加了一个空白的文本域而已。

最后，当解析完后端返回的JSON字符串后，就在 setCurrentContact最后，调用showDetail()方法，显示出内容页面即可

 
 function setCurrentContact(jsonText){ 
    ... 
    showDetail(); 
  }

最后，总结下显示已存在的通讯录的页面流向和步骤，如下：

 
 ContactsActivity.loadPage('DetailPage.html?id') 
  -> DetailPage.html:$(document).ready() 
    -> ContactsActivity.getContact(id, 'setCurrentContact') 
      ->  DetailPage.html:setCurrentContact(json)

删除一条通讯录

当用户点删除按钮时，代码如下：

 
 function deleteContact(){ 
  showProgress(); 
  contactSupport.deleteContact(contactIdVar.val(),'ListPage.html'); 
}

这里同样也是调用后端JAVA应用的deleteContact方法，并且向后端传入要删除的当前通讯录的ID。而后端的代码如下：

 
 public void deleteContact(String contactId, String displayPage){ 
  ContactUtility.deleteContact(contactId, ...); 
  loadPage(displayPage); 
}

其中这里的ContactUtility.deleteContact方法，将会在后续的教程中详细讲解。

保存通讯录

在保存已经写好的通讯录后，当用户点保存按钮时，将会将用户的输入产生为JSON格式，然后提交到后端去，代码如下：

 
 function generateJson(){ 
  showProgress(); 
  var jsonText = '{'; 
  jsonText += '"contactId":"' + contactIdVar.val() + '"'; 
  jsonText += ',"firstName":"' + firstNameVar.val() + '"'; 
  jsonText += ',"lastName":"' + lastNameVar.val() + '"'; 
  jsonText += ',"note":{"rowId":"","text":"' + noteVar.val() + '"}'; 
  ...

可以看到，实际上就是将用户的输入组织为JSON格式的字符串，注意，其中note中的rowId这里可以设置为空字符串，因为对于新增记录来说，这个字段并不重要。

下面是对电话phones字段的保存代码，如下：

 
 // Phones 
  jsonText += ',"phones":['; 
  $('input[id$="_No"]').each(function(index) { 
    jsonText += '{"rowId":"","type":"'; 
    jsonText += (($(this).attr('id')).split('_'))[1] + '","no":"'; 
    jsonText += $(this).attr('value') + '"'; 
    jsonText += '},'; 
  }); 
  jsonText = addClosingBracket(jsonText); 
  ... 
  jsonText += '}'; 
  contactSupport.saveContact(jsonText,'ListPage.html'); 
}             
 
function addClosingBracket(txt){ 
  if((txt.length - 1) == txt.lastIndexOf(',')){ 
    txttxt = txt.substring(0,txt.length - 1) + ']'; 
  }else{ 
    txt += ']'; 
  } 
  return txt; 
}

对于电话类型type,这里要将用户的输入进行截取，比如id="15_1_No",则电话类型为1，

这里做了一个简单对所有的<input>元素进行分析截取。

当准备好要向后端提交的JSON格式后，则可以调用后端JAVA应用的ContactsActivity.saveContact()方法进行保存，代码如下：

 
 import org.codehaus.jackson.map.ObjectMapper; 
 
public class ContactsActivity extends Activity { 
  ... 
  public void saveContact(String json, String displayPage){ 
    ObjectMapper mapper = new ObjectMapper(); 
    try{ 
      Contact c = mapper.readValue(json,Contact.class); 
        ContactUtility.saveOrUpdateContact(c, getContentResolver(), accountName, accountType); 
    }catch(Exception e){ 
      ... 
    } 
    loadPage(displayPage); 
  } 
  ... 
}

其中ObjectMapper类是Jackson JSON解析处理器中的一个负责将JSON转化为POJO实体类的工具类。Jackson JSON(http://jackson.codehaus.org/)是个不错的JSON分析处理工具。其使用很简单，这里通过mapper.readValue(json,Contact.class);

就完成了将JSON字符串解析转为Contract实体类的工作，最后用saveContact()方法进行保存。

小结

在本系列教程的第二篇，讨论了如何读取和编辑存在的通讯记录到前端页面，如何新建通讯录的帐号。

文章转自：http://www.61ic.com/Mobile/Android/201107/36079.html