//related to chat_cell.ui var root = ui("$");;//$是这个ui文件根节点组件的通配符，如果指定组件的id，也可以用id来获取对象 root.setMapping({ "photo_imageview.source" : "photo", "name_label.text" : "name", "lastmessage_label.text" : "lastmessage.message", "lasttime_label.text" : "lastmessage.time", "unread_label.visible" : "unread", "unread_label.text" : "unread-count", "name_label.fontColor" : "isgroup", });
对应的数据本应该是第一次运行从网络上获取之后再缓存到本地的，我们是模拟，所以先手动生成一个文件到data/chats/chat.json
4. 我们回到chats/index.ui，我们需要给这里ui文件里的listview设置模板，绑定数据。
设置index.ui 里的listview的templates属性为 source://view/chats/chat_cell.ui
注意：chat_cell.ui存储在source/default/view/chats/chat_cell.ui,但是source://的根节点指的是 source/default/目录
在index.ui.js里添加绑定数据的代码
//related to index.ui var storage = sm("do_Storage"); var listdata = mm("do_ListData"); var listview = ui("listview"); var json_path = "data://chats/chat.json";//本地缓存的数据 if (storage.fileExist(json_path)) { storage.readFile(json_path, function(data, e) { //deviceone.print(JSON.stringify(data)); listdata.addData(data); listview.bindItems(listdata); listview.refreshItems(); }) } var page = sm("do_Page"); page.on("loaded",function(){ //这个页面加载完显示出来后触发这个事件 //我们可以在这个事件里去获取最新的网络数据，来更新listview和data/chats/chat.json });
我们在真机上看看效果
在运行中有几个细节：
* 上下滑动的时候，图片不断的刷新，原因是我们的ImageView的source是网络图片，每次显示的时候都是从网络上获取的，所以这里需要把chat_cell.ui里的ImageView的cacheType属性换成"always" 意思是只从网络上读取一次就会缓存到本地，下一次不会再从网络上读取了。关于cacheType属性参考API文档
* ImageView也是圆角的，圆角通常可以使用border属性来设置，但是android只有ImageView不能通过border来设置圆角，ImageView还有一个专有属性radius来设置Android才有效，这个我们以后可以改进
5. 处理右上角的add按钮，点击弹出菜单
先给右上角ImageView的enable属性设置为true，才可以处理点击事件，在chats/index.ui.js里添加代码
var add_button = ui("add_imageview"); add_button.on("touch", function() { var menu = ui("menu_id"); if (menu) {//如果已经add过，就只是让这个view显示，而不是add一个新的 if (menu.visible == false) menu.visible = true; } else { main.add("menu_id", "source://view/chats/chat_add_menu.ui"); } });
其中chat_add_menu.ui 是弹出的菜单对应的ui文件，这个ui文件的根节点大小和chat/index.ui一样，这样确保我点击任何空白处都可以关闭这个菜单（实际上是隐藏这个菜单），我们在这个ui文件里把对应的布局都拖拽好，其中需要添加4个资源png文件。
这里有个小技巧，顶部的三角形标记只能通过一个ImageView加载一个三角形图标来实现。
我们再给chat_add_menu的根节点添加点击事件，点击的时候把自己隐藏，在chat_add_menu.js
var root = ui("$"); root.on("touch",function(){ root.visible = false; });
最后我们先看看真机效果，点击加号弹出菜单，点击任何地方都把菜单隐藏。
这一节暂时先到这里，我们先开始拖拽后几个主页面，那几个页面基本完成后再重新回到这一个页面来细琢。
您可能感兴趣的文章: