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 中透过建构子直接产生的假资料写法:

在这边我们就先将它独立出来为一个方法，并且让这方法直接回传一个 ObservableCollection<Person> 的集合给 People:

那接下来就开始实作 MockData 类别来处理这个假资料的产生罗!

GoGo~~~

在 Xamarin.Forms 专案当中新增一个资料夹叫做 Utilities。

并在 Utilities 资料夹当中继续新增一个类别。

把这个类别命名为 MockData 後新增。

确认在 Utilities 资料夹中新增完成。

在这个 MockData 类别当中调整存取权为 public (范本的预设值是 private)。

接着再把前面在 PeoplePageViewModel 调整成方法产生 ObservableCollection<Person> 的集合，改放到这个 MockData 类别当中。

放到 MockData 类别当中後，再帮这个方法的签章中加入 static 的关键字。

完成之後，我们再回到 PeoplePageViewModel 的建构方法修正一下。

原本前面在建构式中修正成透过方法设定给 People 属性的写法进行调整。

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

再继续进一步调整变更为一个公开栏位的 People 设计。

改换成使用 Utilities 命名空间底下的 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。

接下来先到 PeoplePageViewModel 的 AddCommand 来小试身手一下:

透过 Shell 来测试 DisplayAlert。

双平台(iOS、Android)测试 Alert 的结果呈现。

而在这边的 AddCommand 本身应该是会转跳到另外一个页面，来供使用者在 App 当中去填写联络人的资料後储存。所以我们在这边就会使用到 Shell 的 Navigation 运作 GoToAsync 方法的呼叫:

而 Shell 的 Navigation 运作，在这边不多谈，有需要进一步了解的朋友可以参考连结文件:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

而 GoToAsync 的方法是非同步呼叫的，所以我们再加上 async/await 的关键字处理。

接着在指定要转跳的 URI 与页面。

新增一个新的 PersonDetailPage 的页面。

因为 AppShell 的 XAML 的标记中皆没有规划到此页面的转跳，所以 AppShell 并不认识此页面的路由路径，会无法正确地转跳成功喔。

我们就再到 AppShell 中来编辑。

动态注册这个新增该 PersonDetailPage 页面的路由路径。

好的，都撰写完成後我们就将专案重新建置 "Ctrl + F5"(执行但不侦错) 到双平台(iOS、Android)上跑看看，确认到目前为止所变更的效果如何。

点选右上角的 "新增" 按钮，都能正确转跳到 PersonDetailPage 的页面。

OK，本篇 EP8 就到这边结束吧~~~

甘虾各位，鸠咪^_<