IT培训>移动开发教程

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

    作者:视频教程更新于： 2015-11-05 10:24:29

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

    创建通讯录帐号

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

    1. <html> 
    2.   ... 
    3. <body> 
    4.  
    5. <div data-role="page" data-theme="c" id="containerPage"> 
    6.   ... 
    7.    
    8.   <div data-role="header" id="hdrAccount" data-nobackbtn="true"  data-theme="c"> 
    9.     <h1>Create Accounth1> 
    10.   div> 
    11.   <div data-role="content" id="contentAccount"  data-theme="c"> 
    12.     <div align="CENTER"><img src="img/contacts-master-bgd.png">div> 
    13.     <div align="CENTER"><h4>Please enter name of the new account for this applicationh4>div> 
    14.     <div align="CENTER">Contacts created with this application will be associated with the new account specified below. 
    15.     Other contacts can be viewed, however, cannot be deleted or modified with this application.div> 
    16.     <div align="CENTER" id="accountDiv" data-role="fieldcontain"> 
    17.       <input id="accountName" type="text" /> 
    18.     div> 
    19.     <div align="CENTER"> 
    20.       <a href="javascript:createAccount();return false;" data-role="button" 
    21.         data-inline="true">Savea> 
    22.     div> 
    23.     ... 
    24.   div> 
    25.   <div data-role="footer" id="ftrAccount"  data-theme="c">div> 
    26.  
    27. div>  
    28. ... 
    29. <script> 
    30. ... 
    31.   function createAccount(){ 
    32.     showProgress(); 
    33.     contactSupport.createAccount($('#accountName').val(),'ListPage.html'); 
    34.   } 
    35.   ... 
    36. script> 

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

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

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

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

      下面讲解下这段代码：

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

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

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

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

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

      1. <meta-data 
      2.   android:name="android.accounts.AccountAuthenticator" 
      3.   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，文件如下：

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

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

      1. xml version="1.0" encoding="utf-8"?> 
      2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
      3.   package="com.jquerymobile.demo.contact" 
      4.   android:versionCode="1" 
      5.   android:versionName="1.0"> 
      6.     <uses-permission android:name="android.permission.READ_CONTACTS"/> 
      7.     <uses-permission android:name="android.permission.WRITE_CONTACTS"/> 
      8.     <uses-permission android:name="android.permission.GET_ACCOUNTS" /> 
      9.     <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" /> 
      10.     <application android:debuggable="true" android:icon="@drawable/icon" 
      11.       android:label="@string/app_name"> 
      12.         <service 
      13.           android:name=".authentication.AuthenticationService" 
      14.           android:exported="true"> 
      15.           <intent-filter> 
      16.             <action android:name="android.accounts.AccountAuthenticator" /> 
      17.             intent-filter> 
      18.             <meta-data android:name="android.accounts.AccountAuthenticator" 
      19.               android:resource="@xml/authenticator" /> 
      20.         service> 
      21.         <activity android:name=".ContactsActivity" 
      22.           android:configChanges="orientation|keyboardHidden" 
      23.           android:label="@string/app_name"> 
      24.             <intent-filter> 
      25.               <action android:name="android.intent.action.MAIN" /> 
      26.               <category android:name="android.intent.category.LAUNCHER" /> 
      27.             intent-filter> 
      28.         activity> 
      29.     application> 
      30. manifest>   

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

      1. package com.jquerymobile.demo.contact.authentication; 
      2.  
      3. import android.app.Service; 
      4. import android.content.Intent; 
      5. import android.os.IBinder; 
      6.  
      7. public class AuthenticationService extends Service { 
      8.   public IBinder onBind(Intent intent) { 
      9.     return null; 
      10.   } 
      11. } 

       

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

       

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

      1.  

      显示已存在的数据记录
      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()方法中处理的代码，如下：

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

      ◆首先是加载了进度等待图标
      ◆然后用window.location.search.substring(1)获得了当前链接的中?号后的参数，比如对于DetailPage.html?23这个例子来说，获得了23的值，并且赋值给 contactIdVar.val这个变量。
      ◆最后，通过调用后端JAVA应用的ContactsActivity.getContact()方法，传入的是两个参数，一个是当前通讯录的id,另外的setCurrentContact是回调前端显示处理结果的Javascript方法。下面看下ContactsActivity.getContact()方法的实现，如下：

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

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

      1. { 
      2.   "contactId":"265", 
      3.   "firstName":"Aafjes", 
      4.   "lastName":"Bertus", 
      5.   "note":{"rowId":"2265","text":"Author"}, 
      6.   "ims":[ 
      7.     {"rowId":"2274","protocol":"-1","value":""}, 
      8.     {"rowId":"2275","protocol":"0","value":"bertus@aim"}, 
      9.     {"rowId":"2276","protocol":"5","value":"bertus@google"}, 
      10.     {"rowId":"2277","protocol":"6","value":""}, 
      11.    。。。。。。。 
      12.   ], 
      13.   "phones":[ 
      14.     {"rowId":"2284","type":"1","no":"111-222-3333"}, 
      15.     {"rowId":"2285","type":"2","no":"222-000-9999"}, 
      16.     {"rowId":"2286","type":"3","no":"444-787-9900"}, 
      17.     {"rowId":"2287","type":"7","no":"555-744-9999"} 
      19.   ] 
      20. } 

      以上的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

    38. 不知道大家对我们的学习有多少的了解，那么我们就要好好的登录官网看看了http://bbs.kokojia.com/

     

    标签： 移动开发设计营销视频

    上一篇：jQuery Mobile设计Android通讯录(第一章)(1)

    下一篇：7notes应用识别度超高的手写笔记（视频）

为您推荐

广州挪贤计算机科技有限公司 版权所有

© 2013-2025 课课家 kokojia.com

课课家教育

首页 课程分类 课程套餐 线路图 读书 资讯 商城 博客 论坛 我的课程 帐户中心 购物车

未登录