Android+Jquery Mobile学习系列(6)-个人信息设置

本节开始,进行代码的实战练习。我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂的功能。

 

  • 效果图

废话不多说,先看看个人信息的效果。

 

主页右上角一个[设置]按钮,点击按钮会弹出对话框,目前只有一个[我的信息]用于查看个人信息。


点击弹出框上的[我的信息],这时会进行个人信息详细列表,点击[返回]按钮会回到主页,而点击[修改]按钮会跳转到个人信息修改页面。

 

下图是从[我的信息]页面点击[编辑]按钮,跳转到的个人信息修改页面。

如果是第一次使用该程序,会被默认跳转到这个页面,并且没有返回按钮。


 
 

点击保存按钮会进行输入有效性验证,如果表单数据有错会在页面提示错误信息。

 

 

  • 数据库相关

如果不了解SQLite用法,建议先看看[学习系列(5)-SQLite数据库]。

 

个人信息建表代码如下:

Java代码  收藏代码
  1. StringBuilder user_info = new StringBuilder();  
  2. user_info.append("CREATE TABLE IF NOT EXISTS \"user_info\" (");  
  3. user_info.append("\"id\" INTEGER NOT NULL,");  
  4. user_info.append("\"name\"  varchar(99),");  
  5. user_info.append("\"sex\"  INTEGER,");  
  6. user_info.append("\"birthday\"  varchar(32),");  
  7. user_info.append("\"mobile_phone\"  varchar(32),");  
  8. user_info.append("\"email\"  varchar(99),");  
  9. user_info.append("\"delete_flag\"  INTEGER,");  
  10. user_info.append("\"user_type\"  INTEGER,");  
  11. user_info.append("\"update_time\"  varchart(99),");  
  12. user_info.append("\"id_number\"  varchart(99),");  
  13. user_info.append("\"qq_number\"  varchart(99),");  
  14. user_info.append("\"address\"  varchart(999),");  
  15. user_info.append("PRIMARY KEY (\"id\")");  
  16. user_info.append(");");  
  17. db.execSQL(user_info.toString());  

 

对应的JavaBean如下,为了方便,我的属性名全部与数据库字段一致,某些带下划线的也就没使用驼峰命名模式。

Java代码  收藏代码
  1. public class UserInfo extends BasePO{  
  2.     private static final long serialVersionUID = -8834697836148097731L;  
  3.     private Long id;  
  4.     private String name;  
  5.     private int sex;  
  6.     private String birthday;  
  7.     private String mobile_phone;  
  8.     private String id_number;  
  9.     private String qq_number;  
  10.     private String email;  
  11.     private String address;  
  12.     private int delete_flag;  
  13.     private int user_type;  
  14.     private String update_time;  
  15.   
  16.         ......  
  17.   
  18. }  

 

而Manager类似于DAO层,嫌麻烦,没有分开,增删改查全部在BaseManagerImpl封装好的,有特殊SQL才在UserManager中实现。

Java代码  收藏代码
  1. public class UserManager extends BaseManagerImpl<UserInfo>{  
  2.   
  3.     public UserManager(Context context) {  
  4.         super(context);  
  5.         super.TABLE = "user_info";  
  6.         super.clazz = UserInfo.class;  
  7.     }  
  8.       
  9.     public UserInfoBO getCurrentUser(){  
  10.         String sql = "SELECT * FROM "+TABLE+" ORDER BY update_time DESC";  
  11.         List<UserInfo> userList = super.findBySql(sql, null, 1, 1);  
  12.         if(!ObjectUtils.isEmpty(userList)){  
  13.             return new UserInfoBO(userList.get(0));  
  14.         }  
  15.         return null;  
  16.     }  
  17. }  

 

Java代码  收藏代码
  1. public class BaseManagerImpl<T> implements BaseManager<T> {  
  2.     protected String LOG_TAG = "BaseManagerImpl";  
  3.       
  4.     protected String TABLE = null;  
  5.     protected DBHelper dbHelper = null;  
  6.     protected Class clazz = null;  
  7.     protected Context context = null;  
  8.     public BaseManagerImpl(Context context) {  
  9.         super();  
  10.         dbHelper = BeanFactory.getDBHelper(context);  
  11.     }  
  12.       
  13.     @Override  
  14.     public long save(T t) {  
  15.         SQLiteDatabase db = dbHelper.getWritableDatabase();  
  16.         return db.insert(TABLE, null, ClassUtils.getContentValues(t));  
  17.     }  
  18.   
  19.     @Override  
  20.     public int delete(Serializable id) {  
  21.         SQLiteDatabase db = dbHelper.getWritableDatabase();  
  22.         return db.delete(TABLE, "id=?", new String[]{id.toString()});  
  23.     }  
  24.   
  25.     @Override  
  26.     public int update(T t) {  
  27.         SQLiteDatabase db = dbHelper.getWritableDatabase();  
  28.         try {  
  29.             return db.update(TABLE, ClassUtils.getContentValues(t), "id=?", new String[]{ClassUtils.getFieldValue(t, "id").toString()});  
  30.         } catch (Exception e) {  
  31.             Log.e(LOG_TAG, "反射无法找到对象的ID值", e);  
  32.             return 0;  
  33.         }  
  34.     }  
  35.   
  36.       
  37.     @Override  
  38.     public T get(Serializable id) {  
  39.         String getSQL = "SELECT * FROM "+TABLE+" WHERE id=?";  
  40.         List<T> list = this.findBySql(getSQL, new String[]{id.toString()}, 0, 0);  
  41.         if(!ObjectUtils.isEmpty(list)){  
  42.             return list.get(0);  
  43.         }  
  44.         return null;  
  45.     }  
  46.   
  47.     @Override  
  48.     public List<T> findBySql(String sql, String[] params,int pageSize,int pageNo) {  
  49.         if(StringUtils.isBlank(sql)){  
  50.             throw new RuntimeException("findBySql的sql不能为空!");  
  51.         }  
  52.         if(pageSize != 0 && pageNo != 0){//分页操作  
  53.             int begin = (pageSize - 1)*pageNo;  
  54.             sql = sql + " limit "+begin + ","+pageNo;  
  55.         }  
  56.         SQLiteDatabase db = dbHelper.getReadableDatabase();  
  57.         Cursor cursor = db.rawQuery(sql, params);  
  58.         List<T> tList = null;  
  59.         try {  
  60.             tList = ClassUtils.getObject(cursor, clazz);  
  61.         } catch (Exception e) {  
  62.             Log.e(LOG_TAG, "反射创建对象失败,clazz:"+clazz.getName(), e);  
  63.         }finally{  
  64.             cursor.close();  
  65.         }  
  66.         return tList;  
  67.     }  
  68.       
  69.     @Override  
  70.     public List<Map<String,String>> find(String sql,String[] params,int pageSize,int pageNo){  
  71.         if(StringUtils.isBlank(sql)){  
  72.             throw new RuntimeException("findBySql的sql不能为空!");  
  73.         }  
  74.         if(pageSize != 0 && pageNo != 0){//分页操作  
  75.             int begin = (pageSize - 1)*pageNo;  
  76.             sql = sql + " limit "+begin + ","+pageNo;  
  77.         }  
  78.         SQLiteDatabase db = dbHelper.getReadableDatabase();  
  79.         Cursor cursor = db.rawQuery(sql, params);  
  80.         List<Map<String,String>> list = new ArrayList<Map<String,String>>();  
  81.         try {  
  82.             String[] columnNames = cursor.getColumnNames();  
  83.             Map<String,String> map = null;  
  84.             while (cursor.moveToNext()) {  
  85.                 map = new HashMap<String, String>();  
  86.                 for (String column : columnNames) {  
  87.                     map.put(column, cursor.getString(cursor.getColumnIndex(column)));  
  88.                     list.add(map);  
  89.                 }  
  90.             }  
  91.         } catch (Exception e) {  
  92.             Log.e(LOG_TAG, "反射创建对象失败,clazz:"+clazz.getName(), e);  
  93.         }finally{  
  94.             cursor.close();  
  95.         }  
  96.         return list;  
  97.     }  
  98.   
  99.     @Override  
  100.     public void updateBySql(String sql, Object[] params) {  
  101.         SQLiteDatabase db = dbHelper.getWritableDatabase();  
  102.         db.execSQL(sql, params);  
  103.     }  
  104.   
  105.       
  106.     @Override  
  107.     public List<T> findAll() {  
  108.         String findAllSql = "SELECT * FROM "+TABLE;  
  109.         return this.findBySql(findAllSql, null, 0, 0);  
  110.     }  
  111.   
  112. }  

 

  • 开发过程

数据库存储准备好之后,就是开发实体功能。因为采用的是Web开发,所以肯定会涉及HTML和javascript文件,我将这些文件全部放在assets目录下,如下图所示。


 

 

------>入口界面

应用程序的入口界面是home.html,前面提到过JqueryMobile的转场方式采用的是AJAX的形式转场,也就是说所有的跳转都是在home.html中操作,所以home.html一定要包含所有的css和js文件,而其它html则完全不需要再单独引用js等(引用了也无效)。

Html代码  收藏代码
  1. <head>  
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  3.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  4.     <link rel="stylesheet" href="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">  
  5.     <script src="../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" >  
  6.     </script>  
  7.     <script src="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" >  
  8.     </script>  
  9.     <script src="../scripts/bless.ui.core.js" type="text/javascript" >  
  10.     </script>  
  11.     <script src="../scripts/home/bless.home.js" type="text/javascript" >  
  12.     </script>  
  13.     <script src="../scripts/insurer/bless.insurer.js" type="text/javascript" >  
  14.     </script>  
  15.     <script src="../scripts/insure_remind/bless.insurer_remind.js" type="text/javascript" >  
  16.     </script>  
  17.     <script src="../scripts/self/bless.self.js" type="text/javascript" >  
  18.     </script>  
  19.     <script src="../scripts/insurance_company/bless.company.js" type="text/javascript" >  
  20.     </script>  
  21.     <title>  
  22.     </title>  
  23.   </head>  
  24. <body>  
  25. <div data-role="page" id="home_index_page">  
  26. ......  
  27. </div>  
  28. </body>  

 

每次用户进入home.html页面都会先检查用户是否注册个人信息,如果没有则会直接跳转到个人信息新增页面(self_edit.html)。

Js代码  收藏代码
  1. $(document).on("pageinit", "#home_index_page", function() {  
  2.     initData_home();  
  3. });  
  4.   
  5. //全部变量 用于存储当前用户  
  6. var CURRENT_USER;  
  7. function initData_home() {  
  8.     var currentUserJson = javascriptUser.getCurrentUser();  
  9.     if (!$.isNull(currentUserJson)) {  
  10.         CURRENT_USER = $.parseJSON(currentUserJson);  
  11.         $("#home_index_page").find("#header_h1").html(CURRENT_USER.name);  
  12.     } else {  
  13.          $.changePageInitData("self/self_edit.html","self_edit_page",function(page, data, params){  
  14.             javascriptUser.toUserNew();  
  15.             initData_self_edit(page);  
  16.          });  
  17.     }  
  18. }  

注意一点:javascriptUser不是我在javascript中定义的,而是Android的WebView控件自己提供的后台与前台数据交互的接口,这个是一个Java类,你可以在里面编写各种后台代码,然后在前台通过[java类.方法]的形式调用后台数据,非常方便。但是注意这个Java类的参数和返回值最好都用最简单的数据类型(我基本都是用String)。

 

Java代码  收藏代码
  1. public class JavascriptUser {  
  2.     protected Activity activity;  
  3.     protected AppContext app;  
  4.     protected UserManager userManager;  
  5.     protected InsurerInfoManager insurerInfoManager;  
  6.     protected InsurancesManager insurancesManager;  
  7.     protected ImageInfoManager imageInfoManager;  
  8.     protected InsuranceCompanyManager insuranceCompanyManager;  
  9.       
  10.     public JavascriptUser(Activity activity) {  
  11.         super();  
  12.         this.activity = activity;  
  13.         app = (AppContext) activity.getApplication();  
  14.         userManager = (UserManager) BeanFactory.getDBManager(UserManager.class, activity);  
  15.         insurerInfoManager = (InsurerInfoManager) BeanFactory.getDBManager(InsurerInfoManager.class, activity);  
  16.         insurancesManager = (InsurancesManager) BeanFactory.getDBManager(InsurancesManager.class, activity);  
  17.         imageInfoManager = (ImageInfoManager) BeanFactory.getDBManager(ImageInfoManager.class, activity);  
  18.         insuranceCompanyManager = (InsuranceCompanyManager) BeanFactory.getDBManager(InsuranceCompanyManager.class, activity);  
  19.     }  
  20.   
  21.       ......  
  22.   
  23. }  

 

 在MainActivity中注册与前端关联。

Java代码  收藏代码
  1. /** javascript与Java对象映射,页面可使用javascript:ajax.xx()来调用AjaxManager的方法 */  
  2. webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser");  

 

有了JavascriptUser后台接口就非常方便了,你就可以用在里面写代码逻辑来查询数据库数据,判断用户是否存在。

 

------>新增/修改页面

新增和修改因为文本元素一样,所以共用一个页面。根据我的开发习惯,代码逻辑先不写,而是先把界面UI做好,下面是self_edit.html页面代码。

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <title>  
  7.     </title>  
  8.   </head>  
  9.   <body>  
  10.     <div data-role="page" data-control-title="修改我的信息" id="self_edit_page">  
  11.       <div data-theme="b" data-role="header" data-position="fixed">  
  12.         <id="a_back" data-role="button" data-rel="back" href="#" class="ui-btn-left" data-icon="back">返回</a>  
  13.         <h3>  
  14.           修改我的信息  
  15.         </h3>  
  16.         <id="a_save" data-role="button" data-theme="b" href="#" data-icon="check" data-iconpos="left" class="ui-btn-right">  
  17.           保存  
  18.         </a>  
  19.       </div>  
  20.       <div data-role="content">  
  21.         <h5 style="color:red" id="error_msg"></h5>  
  22.         <form method="post" action="#">  
  23.         <input type="hidden" name="id" id="id" >  
  24.         <input type="hidden" name="delete_flag" id="delete_flag" >  
  25.         <input type="hidden" name="user_type" id="user_type" >  
  26.         <div role="main" class="ui-content">  
  27.         <div class="ui-field-contain" data-controltype="textinput">  
  28.             <label for="name">  
  29.                 姓名  
  30.             </label>  
  31.             <input name="name" id="name" placeholder="您的姓名..." value="" type="text">  
  32.         </div>  
  33.         <div id="sex" class="ui-field-contain" data-controltype="radiobuttons">  
  34.             <fieldset data-role="controlgroup" data-type="horizontal">  
  35.                 <legend>  
  36.                     性别  
  37.                 </legend>  
  38.                 <input id="radio1" name="sex" value="1" type="radio" checked="checked">  
  39.                 <label for="radio1">  
  40.                     男  
  41.                 </label>  
  42.                 <input id="radio2" name="sex" value="2" type="radio">  
  43.                 <label for="radio2">  
  44.                     女  
  45.                 </label>  
  46.             </fieldset>  
  47.         </div>  
  48.         <div class="ui-field-contain" data-controltype="dateinput">  
  49.             <label for="birthday">  
  50.                 生日  
  51.             </label>  
  52.             <input name="birthday" id="birthday" placeholder="您的出生日期..." value=""  
  53.             type="date">  
  54.         </div>  
  55.         <div class="ui-field-contain" data-controltype="textinput">  
  56.             <label for="id_number">  
  57.                 身份证号  
  58.             </label>  
  59.             <input name="id_number" id="id_number" placeholder="您的身份证号码..." value=""  
  60.             type="text">  
  61.         </div>  
  62.         <div class="ui-field-contain" data-controltype="textinput">  
  63.             <label for="mobile_phone">  
  64.                 移动电话  
  65.             </label>  
  66.             <input name="mobile_phone" id="mobile_phone" placeholder="您的手机号码..." value=""  
  67.             type="tel">  
  68.         </div>  
  69.         <div class="ui-field-contain" data-controltype="textinput">  
  70.             <label for="email">  
  71.                 电子邮箱  
  72.             </label>  
  73.             <input name="email" id="email" placeholder="您的E-Mail地址..." value="" type="email">  
  74.         </div>  
  75.         <div class="ui-field-contain" data-controltype="textinput">  
  76.             <label for="qq_number">  
  77.                 QQ  
  78.             </label>  
  79.             <input name="qq_number" id="qq_number" placeholder="您的QQ号码..." value=""  
  80.             type="text">  
  81.         </div>  
  82.         <div class="ui-field-contain" data-controltype="textarea">  
  83.             <label for="address">  
  84.                 联系地址  
  85.             </label>  
  86.             <textarea name="address" id="address" placeholder="你的直接联系地址..."></textarea>  
  87.         </div>  
  88.         </div>  
  89.         </form>  
  90.     </div>  
  91.   </div>  
  92.   </body>  
  93. </html>  

 整个页面都是采用JqueryMobile样式,对于新手不知道怎么做页面布局的,我建议到JqueryMobile中文站了解,该站点首页有一个“jquery mobile UI builder”页面元素在线设计器,你可以通过拖动控件的形式设计页面元素,然后选择“inspect code”查看代码。

 

新增修改页面唯一的交互操作就是[保存]按钮,当用户点击[保存]按钮时,首先用js获取页面元素的值,然后以参数的形式调用与后台交互的JavascriptUser接口中的saveUserInfo方法执行输入有效性和保存操作。

Js代码  收藏代码
  1. $(document).on("pageinit", "#self_edit_page", function() {  
  2.   
  3.     $("#self_edit_page").find("#a_save").unbind("click").bind("click",function(){  
  4.         //保存  
  5.         var pageDom = $("#self_edit_page");  
  6.        var id = pageDom.find("#id").val();  
  7.        var name = pageDom.find("#name").val();  
  8.        //radio button获取值得方式  
  9.        var sex = pageDom.find('input[name="sex"]:checked').val();  
  10.        var birthday = pageDom.find("#birthday").val();  
  11.        var mobilePhone = pageDom.find("#mobile_phone").val();  
  12.        var email = pageDom.find("#email").val();  
  13.        var delete_flag = pageDom.find("#delete_flag").val();  
  14.        var user_type = pageDom.find("#user_type").val();  
  15.        var id_number = pageDom.find("#id_number").val();  
  16.        var qq_number = pageDom.find("#qq_number").val();  
  17.        var address = pageDom.find("#address").html();  
  18.        //调用JavascriptUser的saveUserInfo保存信息  
  19.        var result = javascriptUser.saveUserInfo(id, name, sex, birthday, mobilePhone, email, delete_flag, user_type, id_number, qq_number, address);  
  20.          
  21.        if ($.startWith(result,"true,")) {//返回true则保存成功  
  22.         if($.isNull(id)){//第一次注册后返回到主页  
  23.             $.mobile.changePage ('../home.html');  
  24.         }else{//编辑操作返回 个人详细信息页面  
  25.             $.changePageInitData("self_detail.html","self_detail_page",function(page, data, params){  
  26.                     initData_self_Detail(page, result.substring("true,".length) );  
  27.                 });  
  28.         }  
  29.        } else {//返回其它信息则将错误信息显示在页面  
  30.         $("#self_edit_page").find("#error_msg").html(result);  
  31.        }  
  32.     });  
  33.       
  34. });  

 

Java代码  收藏代码
  1. public String saveUserInfo(String id_,String name,String sex,String birthday,String mobile_phone,String email,String deleteFlag_,String userType_,  
  2.         String id_number,String qq_number,String address){  
  3.         try {  
  4.             /**先做输入有效性验证*/  
  5.             List<Validator> list = new ArrayList<Validator>();  
  6.             list.add( new Validator(ValidateUtils.ValidateEnum.EMPTY, "姓名", new Object[]{name}) );  
  7.             list.add( new Validator(ValidateUtils.ValidateEnum.CHARACTERS, "姓名", new Object[]{name.trim(),"<>'\""}) );  
  8.             if(StringUtils.isNotBlank(birthday)){  
  9.                 list.add( new Validator(ValidateUtils.ValidateEnum.DATE, "生日", new Object[]{birthday,"yyyy-MM-dd"}) );  
  10.             }  
  11.             if(StringUtils.isNotBlank(mobile_phone)){  
  12.                 list.add( new Validator(ValidateUtils.ValidateEnum.NUMBER, "移动电话", new Object[]{mobile_phone}) );  
  13.             }  
  14.             if(StringUtils.isNotBlank(email)){  
  15.                 list.add( new Validator(ValidateUtils.ValidateEnum.EMAIL, "E-Mail", new Object[]{email}) );  
  16.             }  
  17.             if(StringUtils.isNotBlank(qq_number)){  
  18.                 list.add( new Validator(ValidateUtils.ValidateEnum.NUMBER, "QQ", new Object[]{qq_number}) );  
  19.             }  
  20.             String check = ValidateUtils.validateList(list);  
  21.             if(StringUtils.isNotBlank(check)){  
  22.                 return check;  
  23.             }  
  24.               
  25.             /**再做入库操作*/  
  26.             boolean edit = StringUtils.isNotBlank(id_);  
  27.             Long id = StringUtils.isNotBlank(id_) ? Long.valueOf(id_) : UserInfo.uuid();  
  28.             Integer delete_flag = Enums.DeleteEnum.AVAILABLE.getKey();  
  29.             Integer user_type = StringUtils.isNotBlank(userType_) ? Integer.valueOf(userType_) : Enums.UserTypeEnum.USER.getKey();  
  30.             String update_time = DateUtil.date2string(new Date(), DateUtil.yyyy_MM_dd_HH_mm_ss);  
  31.               
  32.             UserInfo user = new UserInfo(id, name, Integer.valueOf(sex), birthday, mobile_phone, id_number, qq_number, email, address, delete_flag, user_type, update_time);  
  33.             if(edit){  
  34.                 userManager.update(user);  
  35.                 Log.i(Enums.LogTagEnum.COMMON.getKey(), "修改个人信息:"+user.toString());  
  36.             }else{  
  37.                 userManager.save(user);  
  38.                 Log.i(Enums.LogTagEnum.COMMON.getKey(), "新增个人信息:"+user.toString());  
  39.             }  
  40.             // 初始化当前用户  
  41.             app.setUser(new UserInfoBO(user));  
  42.             return "true,"+user.getId();  
  43.         } catch (Exception e) {  
  44.             Log.e(Enums.LogTagEnum.COMMON.getKey(), "输入异常:"+e.getMessage(), e);  
  45.             return "输入异常:"+e.getMessage();  
  46.         }  
  47.     }  

 我写了一个非常非常简单的Validator验证组件,因为为了方便写了很多小组件,具体逻辑在后面章节[组件化]统一说明。

 

 

------>个人信息详细页面

在首页选择"我的信息"可以跳转到个人信息页面,首先先看self_detail.html页面代码。

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <title>  
  7.     </title>  
  8.   </head>  
  9.   <body>  
  10.   <!-- data-dom-cache="true" -->  
  11.     <div data-role="page" data-control-title="我的信息" id="self_detail_page" >  
  12.       <div data-theme="b" data-role="header" data-position="fixed">  
  13.         <data-role="button" data-rel="back" data-transition="slide" href="#" class="ui-btn-left" data-icon="back">返回</a>  
  14.         <h3>  
  15.           我的信息  
  16.         </h3>  
  17.         <id="a_edit" data-role="button" data-theme="b" href="#" data-icon="edit" data-iconpos="left" class="ui-btn-right">  
  18.           修改  
  19.         </a>  
  20.       </div>  
  21.       <div data-role="content">  
  22.         <ul data-role='listview' id="ul_self_detail">  
  23.             
  24.         </ul>  
  25.     </div>  
  26.   </div>  
  27. </body>  
  28. </html>  

 

下面这段是转场到self_detail.html的逻辑代码,在转场到self_detail.html时会调用JavascriptUser接口获取个人信息数据。

Php代码  收藏代码
  1. $(document).on("pageinit", "#home_setting_page", function() {  
  2.     $("#home_setting_page").find("#a_editSelf").unbind("click").bind("click", function() {  
  3.         $.changePageInitData("self/self_detail.html","self_detail_page",function(page, data, params){  
  4.             initData_self_Detail(page,CURRENT_USER.id);  
  5.         });  
  6.     });  
  7. });  
  8.   
  9.   
  10. unction initData_self_Detail(pageDOM,id) {  
  11.    if (id != undefined) { //修改操作  
  12.     var userJson = javascriptUser.getUser(id);  
  13.     var currentUser = $.parseJSON(userJson);  
  14.     var DOM = pageDOM.find("#ul_self_detail");  
  15.       
  16.     var html = "";  
  17.     html = html + "<li><p>姓名:"+currentUser.name+"</p></li>";  
  18.     html = html + "<li><p>性别:"+ (currentUser.sex==1 ? "男" : "女") +"</p></li>";  
  19.     html = html + "<li><p>生日:"+currentUser.birthday+"</p></li>";  
  20.     html = html + "<li><p>移动电话:"+currentUser.mobile_phone+"</p></li>";  
  21.     html = html + "<li><p>电子邮箱:"+currentUser.email+"</p></li>";  
  22.     html = html + "<li><p>身份证号:"+currentUser.id_number+"</p></li>";  
  23.     html = html + "<li><p>QQ号:"+currentUser.qq_number+"</p></li>";  
  24.     html = html + "<li><p>联系地址:"+currentUser.address+"</p></li>";  
  25.     DOM.html(html);  
  26.     //只有执行刷新操作才能出ListView样式  
  27.     DOM.listview("refresh");  
  28.    }else{  
  29.     pageDOM.find("#a_back").hide();  
  30.    }  

 

 

------>详情页面到修改页面

最后一个功能是self_detail.html页面点击[修改]按钮进入self_edit.html页面并且将数据回填到页面元素中。

Js代码  收藏代码
  1. $(document).on("pageinit", "#self_detail_page", function() {  
  2.     $("#self_detail_page").find("#a_edit").unbind("click").bind("click",function(){  
  3.         $.changePageInitData("self_edit.html","self_edit_page",function(page, data, params){  
  4.         initData_self_edit(page,CURRENT_USER.id);  
  5.     });  
  6.     });  
  7. });  
  8.   
  9. function initData_self_edit(pageDOM,id) {  
  10.    if (id != undefined) { //修改操作  
  11.     var userJson = javascriptUser.getUser(id);  
  12.     var currentUser = $.parseJSON(userJson);  
  13.     pageDOM.find("#id").val(currentUser.id);  
  14.     pageDOM.find("#delete_flag").val(currentUser.delete_flag);  
  15.     pageDOM.find("#user_type").val(currentUser.user_type);  
  16.     pageDOM.find("#name").val(currentUser.name);  
  17.     $.radioChecked(pageDOM.find("input[name='sex']"),currentUser.sex);  
  18.     pageDOM.find("#birthday").val(currentUser.birthday);  
  19.     pageDOM.find("#mobile_phone").val(currentUser.mobilePhone);  
  20.     pageDOM.find("#email").val(currentUser.email);  
  21.     pageDOM.find("#id_number").val(currentUser.id_number);  
  22.        pageDOM.find("#qq_number").val(currentUser.qq_number);  
  23.        pageDOM.find("#address").html(currentUser.address);  
  24.    }else{  
  25.     pageDOM.find("#a_back").hide();  
  26.    }  

 

 

  • 注意事项

1、关于WebView与javascript交互:不是只有javascript调用Java,也可以java调用javascript方法。具体可参考博客[Android中webview跟JAVASCRIPT中的交互]

 

2、关于JqueryMobile页面转场及传参与常规的Java Web有很大不同,可以参考我的博客[学习系列(4)-页面转场及参数传递]或者这个博客[Jquery Mobile中文章跳转传值如何实现]

 

3、javascript调用Java代码传递的参数和返回值最好都是基本数据类型,我基本用的String,以前试过用JavaBean或者Map之类的不行。

 

4、如果javascript想从后台获得一个对象或者对象集合,建议在后台转换成JSON字符串,然后在前端通过$.parseJSON转换成对象。一定要注意的是JavaBean中的属性值一定不能包含"\n"(换行符)之类的特殊字符,如果有的话,传给$.parseJSON就会报错,而且LogCat不会直接说这行错了,而是会显示一些莫名其妙的错误提示,很难跟踪。

关于"\n"换行符的解决办法非常简单,就是将字符串"\n"替换成"\\n":

Java代码  收藏代码
  1. String value ......  
  2. value.replaceAll("\r\n", "\\\\r\\\\n").replaceAll("\n", "\\\\n")  

 

5、动态添加listview元素之后一定要刷新listview,否则JqueryMobile不会渲染成自己的效果。

Java代码  收藏代码
  1. $("#listview").append(......);  
  2. $("#listview").listview("refresh");  

 

6、radio button动态设置值的话也要刷新checkboxradio,否则页面看起来没效果:

Js代码  收藏代码
    1. $.radioChecked(pageDOM.find("input[name='sex']"),currentUser.sex);  
    2.   
    3. $.radioChecked = function(fn, value) {  
    4.         for (var i = 0; i < fn.length; i++) {  
    5.             if ($(fn[i]).val() == value) {  
    6.                 $(fn[i]).attr("checked",true).checkboxradio("refresh");  
    7.             } else {  
    8.                 $(fn[i]).attr("checked",false).checkboxradio("refresh");  
    9.             }  
    10.         }  
    11. }; 
posted @ 2017-08-17 15:37  brave-sailor  阅读(527)  评论(0编辑  收藏  举报