一個App完成入門篇（五）- 完成新聞頁面

標籤：

本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。

• 匯入項目
• 資料範本分離MVVM模型
• 自訂事件
• 展示新聞
• 九宮格展示

將要學習的demo如下所示

1. 匯入完整項目

本節樣本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顯示出來即可。

一個App完成入門篇（五）- 完成新聞頁面