本节教程将引见怎样用DeviceOne简朴而高效的完成一个消息页面。

导入项目
数据模板星散MVVM模子
自定义事宜
展示消息
九宫格展示
将要进修的demo结果图以下所示

1. 导入完全项目

本节示例demo请参考下载地点，能够导入到设想器中进修。

为了轻易人人明白页面构造，请参考下图

图中红框所示的上面部份是SegmentView组件，和下面的BottomBar配合构成页面大众部份，而蓝框中是一个SlideView组件，能够摆布滑动切换页面且跟SegmentView联动，页面个数则是取决于数据条数，如数占有四条就有四个页面；绿框所示是ListView组件，在本教程中是SlideView的模板，而ListView又能够绑定差别模板来展示差别页面；而黄框所示是跟上节教程中雷同的直接援用一个UI页面。总而言之，这里的页面层级关联是SlideView的模板中嵌套了一个ListView，而ListView的模板又是其他差别页面。

1. 数据模板星散
   DeviceOne的数据绑定是采用了MVVM形式的，完成了页面和数据星散，数据经由过程绑定在差别模板上掌握了页面的显现。DeviceOne供应了两个数据绑定组件，都是MM范例组件，一个是ListData，它本质上是一个可变数组（支撑JSON array），能够增编削查数据；别的一个是HashData，它本质上是一个可变key-value键值对，也能够增编削查。

这里我们给SegmentView定义一个数据源jsonTabs，
再把这个数据源赋值给数据绑定组件ListData，定义SegmentView的数据模子module。

由于数据绑定组件能够绑定差别的数据源，而一个数据源只能被一个数据绑定组件绑定，是一对多的关联，所以当我们想把雷同的数据源作为SlideView的数据模子module时须要复制一份数据源。

定义好数据模子module，我们再来定义ViewModel也就是模板视图。先给SegmentView定义一个模板视图UI页面newsTypeTabTemplate.ui，修正根ALayout的id为do_ALayout_root，内里拖拽一个Label，修正id为do_Label_title，调解Label的位置和大小。

然后我们在newsTypeTabTemplate.ui.js里把Label的text和tag属性经由过程UI组件通用的setMapping要领跟数据模子module联络起来，定义映照关联，如许ViewModule模板视图就完成了。（个中name和selected是jsonTabs数据源中的key）

末了我们要将数据模子module和它们都建立起联络，只须要用SegmentView增加绑定了数据模子module的ListData组件即可。

更多关于数据绑定的引见，详见数据绑定

1. 自定义事宜
   为了让更实在的模仿消息类App的运用习气，我们处置惩罚一下挑选差别的SegmentView时底下的SlideView页面也随着切换的结果，即让SegmentView和SlideView联动起来。这个步骤异常简朴，只须要在SegmentView的indexChanged事宜中将当前SegmentView所处cell的index赋值给SlideView的cell，即可完成。

我们想要在SlideView切换差别的cell的同时页面数据也随着切换，这就须要在SlideView的indexChanged事宜里做大批操纵，为了优化代码构造，这里就将切换数据的操纵悉数放在自定义事宜selectOneTab中完成，只在触发indexChanged事宜的回调中同时触发该自定义事宜，如许我们在定阅selectOneTab事宜时所作代码也都邑被执行了。

定阅selectOneTab事宜，在个中做更新数据的操纵

须要特别注重的是，自定义事宜的定阅和触发能够不在同一个页面的剧本环境中完成，只须要保证自定义事宜的触发在定阅今后即可。

更多关于自定义事宜的运用，详见自定义事宜。

这里为了更好的体验结果，让SlideView能无穷滑动而且加载速率更快，只须要简朴的设置两个属性即可。其一就是将SlideView的looping属性设置为true，完成无穷滑动；其二就是设置isAllCache属性为true，在阅读上一页时预缓存下个页面。

1. 展示消息
   消息展示页面的数据是经由过程Http组件要求的背景数据，在手势向下pull或向上push滑动页面时革新要求，接下来细致说下这个步骤怎样完成。

展示消息
用上面一样的要领，我们先处置惩罚一下SlideView的数据和模板，差别的是这里SlideView的模板里嵌套了一个ListView组件，所以我们先处置惩罚ListView组件。ListView的数据是从背景经由过程http要求猎取的，所以在增加了ListView的页面newsIndexSlideTemplate.ui对应的newsIndexSlideTemplate.ui.js剧本环境中去要求数据，并在Http的要求胜利事宜中将数据绑定给一个ListData组件，再让ListView去绑定该数据，同时复位pull或push出来的头部。（须要注重的是，这里直接将要求到的数据绑定给ListView组件，所以须要前背景沟通好数据格式，在背景保留时也是用JSON Array。）

由于ListView是支撑多模版的，这里我们给ListView组件绑定两个模板，一个用于展示消息列表newsRowTemplate0.ui，一个用于展示轮播图片newsRowTemplate1.ui。这两个模板也一样在模板页的根节点上挪用setMapping要领定义好数据映照关联，如许数据与模板就结合起来了，在ListView上就可以显现我们从背景要求到的数据了。

这里提一个小的处置惩罚，由于我们不确定要展示的数据到底有多少个字节，悉数展示要占用多大的空间，所以我们设置ListView的模板页中要展示数据的Label的高度为-1，示意自动高度，而且将maxLines属性设置为2，示意最多只显现两行，如许就可以掌握每一个cell显现数据的空间都是牢固高度的，数据能整洁分列。

别的一个小处置惩罚就是让图片显现的速率更快，由于一切图片都是收集图片，显现之前都邑先去要求，如许在收集环境不稳定时可能会致使图片显现框先涌现默许图片（设置defaultImage）再显现真正要显现的图片。这里只须要简朴的设置ImageView的cacheType为temporary，示意第一次加载图片时就缓存到当地，今后每次翻开这个ImageView都邑先读缓存的当地图片，然后再读服务器的收集图片，如许就可以优化ImageView的加载速率，从而进步体验。

革新消息
想要在ListView页面上向下pull和向上push操纵中猎取新的数据并从新显现在模板中，起首要设置ListView的isFooterVisible和isHeaderVisible属性为true，如许上下拉的时刻使头部和尾部可见，再分别在ListView的pull和push事宜中去从新要求数据，而且在http要求的success事宜中挪用ListView的rebound要领让头部或尾部复位。

1. 九宫格展示
   末了，我们说一下第三张结果图中点击“+”号会弹出一个疾速挑选消息范例的UI界面怎样完成。

起首画出须要弹出的UI页面newsTypeGrids.ui，也如之前教程中处置惩罚弹出Picker页面一样，在该页面中只放一个GridView组件，其他地方设置成灰色半透明结果。再设置GridView的模板页newsTypeGridTemplate.ui，一样定义好数据映照，将之前给SegmentView定义的数据源也复制一份让GridView绑定上，末了只须要在“+”号的touch事宜中让newsTypeGrids.ui显现出来即可。