EP 5: Use self-define Code Snippet to improve Coding Experience for NotifyProperty in ViewModel

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP5。

当我们在 EP2 的介绍时调整了 Xamarin.Forms 专案当中的结构，说是为了要搭配 MVVM 框架，来让我们的专案符合 MVVM 的这种开发框架的运用，但到目前为止似乎都没有谈到这部分的运用，本 EP5 就要来谈谈有关於这部分的处理罗~~~

那我们就开始吧! Go~~~

在 Xamarin.Forms 的专案当中，我们除了针对专案结构调整以利在使用 MVVM 的框架过程当中容易识别外，最主要我们还是要利用 Xamarin.Forms 配合 MVVM 框架所设计的 "Binding Engine" 所使用的 Binding (系结)技术，让 View 跟 ViewModel 能去做一个系结的处理。

而这个系结的处理，我们会需要用到 .NET 所设计的一个位在 System.ComponentModel 命名空间下公开介面(public Interface) "INotifyPropertyChanged"。

在这个 INotifyPropertyChanged 的 Interface 的使用时，就必须要去处理一些 Interface 的实作，其实不是只有在 Xamarin.Forms 技术才这样子用，在 .NET 的 WPF 的技术，或者是一些 .NET 其他的 Client 端的应用技术 (UWP)，也会透过这样的方式，让应用程序的 View 跟 ViewModel 之间的一个互动能更加地便利。

在这个部分上的话，如果按照原本 INotifyPropertyChanged 的官方文件 慢慢去处理 "INotifyPropertyChanged" 的实作，当然会比较辛苦一点。

而我已经有一个实作好 "INotifyPropertyChanged" 介面的 Library，并且也发布成一个 Nuget 的套件，可供大家直接安装下载使用。

所以在这个 EP5 的介绍里面，就直接带大家去使用这个已经实作好这个 INotifyPropertyChanged 的 Nuget 套件，就可以比较快速的去完成这个 Binding (系结)与 MVVM 框架撰写的前置动作。

顺带一提，类似这样子的一个前置动作，其实网路上有透过 "AOP" (Aspect Oriented Programming)技术的方式来完成实作 "INotifyPropertyChanged"，比较着名的 Framework 就是 PostSharp MVVM。

对照上图的 PostSharp 官网 的介绍写法，就可以知道 PostSharp 可以让各位为了使用 MVVM 框架要实作 INotifyPropertyChanged 时，透过用 PostSharp 的 Library 只要直接挂上相关的 Attribute 即可完成实作。

如果想要试用该 PostSharp 的话，也可直接下载 PostSharp 的延伸模组 在 Visual Studio 中来安装试用看看喔!

若透过我放在 Nuget 的套件来实作 INotifyPropertyChanged 的话，虽然已经是简化了实作 INotifyPropertyChanged 许多事情，但是在後续的一些处理上仍然会比较辛苦些，还是有很多地方比不上人家已经做好的整个透过 AOP 来处理的 Framework，还是需要得自己去刻一些东西，这会比较辛苦的部分。

在刻一些东西的时候呢，我们也可以透过 Visual Studio 带给我们的一些小技巧，设计所需的 code snippet 来去完成这些琐碎的事情，除了来加速自己的开发外，还是可以了解到原本设计 "INotifyPropertyChanged" 时的内涵喔~~~

首先，在我们的这个 Xamarin.Forms 的专案里面，我们就来安装一下这个协助实作 INotifyPropertyChanged 的 Nuget 套件。

找到专案管理 Nuget 套件这个部分，再点到 "浏览" 的分页後直接在搜寻框里面搜寻 "Xam.Plugin.BaseBindingLibrary" 这个 Nuget 套件。

安装在这个 Xamarin.Forms 的专案里面就可以，不需要安装到其他的专案。另外，Visual Studio 安装 Nuget 套件期间会有授权 (MIT) 与变更同意的一个请求动作，当这样子安装完成的时候会看到在相依性的套件里面出现它。

接下来在 Xamarin.Forms 的专案中所设计 ViewModes 资料夹的部分，我们就可以开始设计与 Page 所对应的 ViewModel 类别，理论上我们就要实作就这四个 Page 对应的 ViewModel，但又因为在要实做这个 ViewModel 的过程，可能都会有一些共通的设计出现。

所以通常在这边的选择，就是先做一个基底 ViewModel 类别，在这边就把它命名的部分叫做 BasePageViewModel。会这样取就是说後面会有一个 ViewModel 的名称，就会是让自己知道说这个类别，是用来作为 ViewModel 的使用用途。

这只是一个个人的命名习惯，各位可以自己根据需要做一些调整，或着是开发团队可以去讨论跟制定相关的开发惯例。

这边我们就直接在 public class BasePageViewModel 後面直接撰写继承 BaseBindingLibrary 当中的 "BaseNotifyProperty"。

透过这个继承类别的动作就取代了很多在官方文件上要实作 "INotifyPropertyChanged" 这个 Interface 的处理。

就如果我们没有要做一些很特殊的设计，就可能就可以直接往其他对应 Page 的 ViewModel 去设计了，但因为通常现在我们的 App 应该都对网际网路很依赖，所以每一个要呈现的页面，都要能随时地侦测到网际网路存不存在，并且做出对应的画面的 UI 反应。

而这个 "网际网路是否已连线" 的这个状态，基本上每个页面都会用到，所以在这里这个 BasePageViewModel，就直接先帮它设计这个 Property 在这里，以便处理 "网际网路是否已连线" 的状态。

这个部份我有做成 code snippet，所以你会看到我这边就直接打这个 code snippet 的缩写 "prop"，再按 "Tab" 两下，那 Visual Studio 就会自动地帮我长出对应那个已经设计的 BaseNotifyProperty 所要对应的 NotifyProperty 的撰写。

另外，那这个设计网际网路有通跟不通两种状态，所以就设计成 bool 的型态。

本来为了要搭配实作 "INotifyPropertyChanged" 这个 Interface 所要完成 NotifyProperty 的撰写颇为繁琐，在这边透过 "prop" 的 "code snippet" 这些小技巧就能将这个 NotifyProperty 这样子就做完了。

後面的话我们就在新增一个设计，就是要给 PeoplePage 设计对应的 ViewModel。

所以一样，再继续於 ViewModels 资料夹中新增设计一个新的类别叫做 "PeoplePageViewModel" 这样子的一个名称，这样的名称也是为了方便识别对应给 PeoplePage 用的 ViewModel。

再来这边我们就可以直接继承我们的前面所完成的那个 BasePageViewModel 这样就完成了。

我们在这个 PeoplePage 的 ViewModel 里面，那基本上就会设计两个东西:
第一个可能会有一个 People 的集合资料要做储存。
第二个大概就会是相关的一些 Command 去做页面控制动作的反应。

所以在这边我们就来完成 People 的这个集合资料的 NotifyProperty 的设计。

那这个集合会是使用已经有实作好双向 Binding 的一个集合叫做 ObservableCollection，它会是在 System.Collections.ObjectModel 命名空间底下，可以先撰写好它的命名空间的 using。

那当然因为它的这个集合里面的每一个元素，在这边我要把它设计叫做 Person，那我们就直接把 ObservableCollection 的泛型设计为 Person，而这个 Person 呢为了不影响我们当前程序的撰写，我们先透过 Visual Studio 的提示来快速产生，等一下再做 Person 的一个放置的调整。

那接着再回到我们的这边这个集合名称就叫 People，最後按一下那 Enter 离开 code snippet 的编辑。

好的，撰写到这边我们先整个 Xamarin.Forms 的专案重新建置 (Ctrl + B) ，确认到目前为止所变更的程序码在编译上都没问题，那我们在继续到下个阶段的部分罗。

确认没有问题的话，後续继续要设计的部分，就留待 EP6 再继续介绍罗~~~

谢谢各位，我们下篇见^_<