分享用cnode社区api做DeviceOne应用的过程（二）

接上一部分 分享用cnode社区api做DeviceOne应用的过程（一）

接下来我们来看看这个App的设计和开发过程。 我们先看首页

####1. UI结构从上到下分3个部分：

• do_ALayout：openPage使用透明模式（沉浸式），最上面留40高度作为系统状态栏
• do_SegmenetView:作为可以左右滑动的tab分页，分5部分
• do_SlideView:界面的主题，分5页，每个和上面的tab分页一一对应。

####2. 代码结构如下图首页的代码都在source://view的根目录，从上到下

• index.ui/js :首页page的主ui
• listview_cell.ui/js: 首页中slideview的模板ui，主体是一个do_ListView组件
• listview_cell_cell.ui/js: listview的模板ui
• tap_segmentview.ui/js: 首页中的顶部tab部分，之所以单独作为一个ui文件是为了把逻辑从index中分离出来，避免耦合太多
• tap_cell.ui/js: tab部分是一个do_SegmentView组件，这个ui是它的模板ui
• next_cell.ui :这是listview的另一个模板ui，只有当listview滑动到最底部才会看见

####3. 关键代码

• 首页slideview左右滑动触发顶部tab的同步

//index.ui.js
slideview.on("indexChanged",function(d){
        segmentview.index = d; 
        do_Page.fire("indexChanged",topics[d]);
})

slideview手势滑动的时候触发page的自定义消息“indexChanged",并把最新的主题标示传递给segmentview。segmentview接受到后刷新标示的背景色。

//topic_segmentview.ui.js
segmentview.on("indexChanged", function(index) {
        for (var i = 0; i < 5; i++) {
                var d = segmentview_listdata.getOne(i);
                if (index == i) {
                        d.bgColor = "FF7F00FF";
                } else {
                        d.bgColor = "FF7F0000";
                }
                segmentview_listdata.updateOne(i, d);
        }
        segmentview.refreshItems();
})

• 顶部tab的点击触发首页slideview同步

//tab_cell.ui.js
root.on("touch", function() {
        do_Page.fire("slideview_indexChanged", tag_label.tag);
})

//index.ui.js
do_Page.on("slideview_indexChanged",function(index){
        slideview.index = index;
})

• 从cnode.js的api获取到首页的数据并加载到listview上，这个函数还有一个作用是加载更多数据，从10条数据到20条数据。这里看上去像是ajax，实际上只是参考ajax封装的一个函数，本质还是调用android和ios对应的http访问的类来获取数据。

//listview_cell.ui.js
// private function
function fetchdata(num) {
        var topic = listview.tag;
        var url = "?page=" + num + "&limit=10";
        if (topic != "main")
                url = url + "&tab=" + topic;
        http.ajax({
                parent : "topics_options",
                url : url,
                success : function(data) {
                        if (num == 1)
                                do_ListData.removeAll();
                        else {
                                do_ListData.removeData([ do_ListData.getCount() - 1 ]);
                        }
                        do_ListData.addData(data);
                        var next = {};
                        next.template = 1;
                        do_ListData.addOne(next);
                        // core.p(do_ListData);
                        listview.refreshItems();
                },
                beforeSend : function(options, do_Http) {
                        if (num == 1)
                                page.showView("source://script/do/view/waitting.ui");
                },
                complete : function() {
                        if (num == 1)
                                page.hideView("source://script/do/view/waitting.ui");
                }
        })
}

• 滑动到listview底部就加载新数据

//listview_cell.ui.js
listview.on("scroll", function(position) {
        if (position.lastVisiblePosition == current_page * 10) {
                fetchdata(++current_page);
        }
})