iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 8

EP 8: Build a MockData and Register Page Route to Shell

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP8。

由於在上一篇 EP7 當中有提到,PeoplePage 給 ListView 呈現的假資料,可以規劃設計到一個專屬的 MockData 類別當中去,以免擾亂我們 ViewModel 程式中的邏輯理解,又或者是之後要抽換成透過一些永久儲存的方式來處理時,調整上也會比較方便,

這是在上一篇 EP7 介紹 PeoplePageViewModel 中透過建構子直接產生的假資料寫法:
PeoplePageViewModel 的 Command 設計

在這邊我們就先將它獨立出來為一個方法,並且讓這方法直接回傳一個 ObservableCollection<Person> 的集合給 People:
PeoplePageViewModel 的 Command 設計

那接下來就開始實作 MockData 類別來處理這個假資料的產生囉!

GoGo~~~


在 Xamarin.Forms 專案當中新增一個資料夾叫做 Utilities。
新增一個資料夾

並在 Utilities 資料夾當中繼續新增一個類別。
新增一個類別

把這個類別命名為 MockData 後新增。
命名為 MockData

確認在 Utilities 資料夾中新增完成。
Utilities 資料夾中新增

在這個 MockData 類別當中調整存取權為 public (範本的預設值是 private)。
加入 public 修飾詞

接著再把前面在 PeoplePageViewModel 調整成方法產生 ObservableCollection<Person> 的集合,改放到這個 MockData 類別當中。
改寫到 MockData 類別當中

放到 MockData 類別當中後,再幫這個方法的簽章中加入 static 的關鍵字。
方法的簽章中加入 static

完成之後,我們再回到 PeoplePageViewModel 的建構方法修正一下。

原本前面在建構式中修正成透過方法設定給 People 屬性的寫法進行調整。
建構式賦予 People 資料的修正

改換成使用 Utilities 命名空間底下的 MockData 的 GetPeople 方法的呼叫。
MockData 的 GetPeople 方法

再繼續進一步調整變更為一個公開欄位的 People 設計。
MockData 的 People 欄位

改換成使用 Utilities 命名空間底下的 MockData 的 People 欄位取得資料。
MockData 的 People 欄位資料設定

到這邊就先暫時重構成讓假資料來自於 MockData 的處理完畢!

BTW, 如果要寫得更有 MockData 的韻味,可以參考一下 Dependency Injection (DI) 的設計運用:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/dependency-injection

這裡就不再深入討論了(這不是本系列文要探討的主題咩༼ つ ◕_◕ ༽つ)。

接下來我們在 EP6 的時候已經針對 PeoplePage 設計了 ToolbarItem 來預設做為 "新增" 聯絡人的功能運用,並且已經將其 Command 繫結到 PeoplePageViewModel 的 AddCommand。
PeoplePage 的 AddCommand 繫結

接下來先到 PeoplePageViewModel 的 AddCommand 來小試身手一下:
PeoplePageViewModel 的 AddCommand 設計1

透過 Shell 來測試 DisplayAlert。
PeoplePageViewModel 的 AddCommand 設計2

雙平台(iOS、Android)測試 Alert 的結果呈現。
PeoplePageViewModel 的 AddCommand 執行結果

而在這邊的 AddCommand 本身應該是會轉跳到另外一個頁面,來供使用者在 App 當中去填寫聯絡人的資料後儲存。所以我們在這邊就會使用到 Shell 的 Navigation 運作 GoToAsync 方法的呼叫:
Shell 的 Navigation 運作 1

而 Shell 的 Navigation 運作,在這邊不多談,有需要進一步了解的朋友可以參考連結文件:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

而 GoToAsync 的方法是非同步呼叫的,所以我們再加上 async/await 的關鍵字處理。
Shell 的 Navigation 運作 2

接著在指定要轉跳的 URI 與頁面。
Shell 的 Navigation 運作 3

新增一個新的 PersonDetailPage 的頁面。
新的 PersonDetailPage 的頁面 1

新的 PersonDetailPage 的頁面 2

新的 PersonDetailPage 的頁面 3

因為 AppShell 的 XAML 的標記中皆沒有規劃到此頁面的轉跳,所以 AppShell 並不認識此頁面的路由路徑,會無法正確地轉跳成功喔。

我們就再到 AppShell 中來編輯。
AppShell 動態註冊 PersonDetailPage 頁面的路由路徑 1

動態註冊這個新增該 PersonDetailPage 頁面的路由路徑。
AppShell 動態註冊 PersonDetailPage 頁面的路由路徑 2

好的,都撰寫完成後我們就將專案重新建置 "Ctrl + F5"(執行但不偵錯) 到雙平台(iOS、Android)上跑看看,確認到目前為止所變更的效果如何。
雙平台(iOS、Android)上執行呈現的效果 1

點選右上角的 "新增" 按鈕,都能正確轉跳到 PersonDetailPage 的頁面。
雙平台(iOS、Android)上執行呈現的效果 2

OK,本篇 EP8 就到這邊結束吧~~~

甘蝦各位,鳩咪^_<


上一篇
EP 7: Design the layout of item by DataTemplate in TopStore App
下一篇
EP 9: Navigation by Shell in TopStore App
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言