本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。
- 導入項目
- 數據模板分離MVVM模型
- 自定義事件
- 展示新聞
- 九宮格展示
將要學習的demo效果圖如下所示
本節示例demo請參考下載地址，可以導入到設計器中學習。
為了方便大家理解頁面結構，請參考下圖
圖中紅框所示的上面部分是SegmentView組件，和下面的BottomBar共同組成頁面公共部分，而藍框中是一個SlideView組件，可以左右滑動切換頁面且跟SegmentView聯動，頁面個數則是取決于數據條數，如數據有四條就有四個頁面；綠框所示是ListView組件，在本教程中是SlideView的模板，而ListView又可以綁定不同模板來展現不同頁面；而黃框所示是跟上節教程中相同的直接引用一個UI頁面。總而言之，這里的頁面層級關系是SlideView的模板中嵌套了一個ListView，而ListView的模板又是其他不同頁面。
2. 數據模板分離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）
現在只需要修改SegmentView的template屬性，將屬性值指向我們剛剛定義的newsTypeTabTemplate.ui的url，View和ViewModule就聯系起來了。
最后我們要將數據模型module和它們都建立起聯系，只需要用SegmentView添加綁定了數據模型module的ListData組件即可。
更多關于數據綁定的介紹，詳見數據綁定
3. 自定義事件
為了讓更真實的模擬新聞類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，在瀏覽上一頁時預緩存下個頁面。
4. 展示新聞
新聞展示頁面的數據是通過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方法讓頭部或尾部復位。
5. 九宮格展示
最后，我們說一下第三張效果圖中點擊“+”號會彈出一個快速選擇新聞類型的UI界面如何實現。
首先畫出需要彈出的UI頁面newsTypeGrids.ui，也如之前教程中處理彈出Picker頁面一樣，在該頁面中只放一個GridView組件，其他地方設置成灰色半透明效果。再設置GridView的模板頁newsTypeGridTemplate.ui，同樣定義好數據映射，將之前給SegmentView定義的數據源也復制一份讓GridView綁定上，最后只需要在“+”號的touch事件中讓newsTypeGrids.ui顯示出來即可。
