MVVM مقدمة حول نمط

المقدمة

تزايد النمو للواجهات الرسومية GUI وظهور مبدأ separation of concerns والذي يركز على تقليل تعقيد الأكواد من خلال أستخدام الطبقات, أدى بضلاله الى تطوير الأنماط المتعلقة بطبقة العرض Presentation Patterns لتقليل التعقيد على المطور والوصول الى الأمثلية ومحصلة هذا التطور ظهور في عام 1979 نمط (Model-View-Controller (MVC والذي أعطى طرق جديدة للتعامل مع الواجهات الرسومية وترتيب ألأكواد ضمن طبقات منعزلة وتحقيق مبدأ SOC المذكور أعلاه وقد تنوع النمط MVC على مر السنين بحيث تولدت الكثير من الأنماط المشابه لعمله.وفي بداية التسعينات ظهر الكتاب الذي أعطى لنا حلول شائعة لمشاكل شائعة يعاني منها المطوريين بأستمرار وقد الفه الملوك الأربعة GOF تصميم الأنماط  .وفي عام 1994 قام Mike Potel من شركة IBM بأظهار النمط (Model-View-Presenter (MVP الذي تم تنفيذه مباشرة على تطبيقات ++Java,C.وبعد هذه الفترة وتحديدا في 2004 قام Martin Fowler بتحليل النمط MVP وطور بعض مكوناته واعطى تسمية جديدة (Presentation Model (PM واطلق نمطين اساسيين منه وهما (Supervising Controller and Passive View) وتميز النمطين بأعطاء تصور رائع حول منهجية الكائنية المنحى OOP وخاصية Binding وبعده مباشرة بعام واحد أطلق John Gossman اول شرارة لنمط (Model-View-ViewModel (MVVM وبعده بفترة قصيرة قام Josh Smith بوضع مقاله في MSDN تربط النمط MVVM مع تقنية WPF , واعطى توضيح رائع بأن نمط MVVM هو نمط يأخذ فكرته الأساسية من النمط PM لكن مع أضافة بعض التغيرات والصفات التي تلائم تقنية WPF/Silverlight. قامت شركة مايكروسوفت بأستخدام الأنماط  وتطويرها بما يتناسب مع تقنياتها فنلاحظ في تقنية Asp.Net تم التركيز على النمط MVC واما النمط PM نلاحظ حضوره في (Composite Application Blocks (CABالذي استخدم مع تقنية WinForms , واما النمط MVVM فقد استخدم لتقنية WPF/Silverlight/WPF8

المحتوى

سوف نركز في بحثنا حول نمط MVVM بحيث سوف  نتطرق اولا حول المكونات الرئيسية أنظر الشكل التالي :

1 . Model :

يمثل البيانات Data والأكواد المنطقية الخاصة بعمليات المشروع Business Logic ويمكننا أن نفصل BLogic في طبقة منعزلة تسمى Business Layer وبالطبع يعتمد على حجم وتعقيد العمليات المنطقية للمشروع , تحوي هذه الطبقة على Entities التي تقوم بخزن البيانات في داخلها ويتم ملأئها من خلال تعبئتها يدويا او عن طريق ربطها بقاعدة بيانات ويتم الربط عن طريق DAL او يمكن أن تعبأ بواسطة Service معين.

2 . ViewModel :

وهو يمثل المنطق الخاص بطبقة العرض PL بحيث يحوي على جميع الأكواد المنطقية التي تدعم الواجهات الرسومية ومهامها.يعتمد VM في عمله على خاصية Notification,Command,Binding الى أخره للتعامل مع طبقة View ,ويركز على أخبار View بكافة التغيرات ان حدثت والعكس صحيح.يستخدم VM عدة Interface لأتمام عمله فمثلا يستخدم INotifyPropertyChanged لأجل الأخبار في حالة اي تغيير يحدث , ICommand لأجل أثارة الحدث Event من دون استخدام Code behind مع مساعدة كلاس يدعى RelayCommand ,وأيضا يفضل أن يوضع في VM التحقق من صحة الأدخال Validation وذلك لأجل عزل جميع UI logic عن طبقة View.ويتميز VM بأنه يعطي الفرصة للمطور والمختبر بأن يقوموا بأختبار الكود مباشرة من خلاله ومن دون الحاجة الى بناء الواجه الرسومية المتمثلة View , والذي بدوره يعطي تدفق عمل متوازي للمطور والمصمم.

3. View :

وهي طبقة العرض UI والتي تعتمد على لغة XAML في بناء الواجهات الجميلة .نمط MVVM يركز على مبدأ وهو أن كل View يتبع ViewModel لأجل التبسيط وعمل هذه التبعية من خلال خاصية DataContex الموجودة في View بحيث يتم تعبئتها بوضع كل محتويات ال VM في داخلها مما يعطي قابلية ربط العناصر الموجودة في VM سواء كانت Property , Commands بالعناصر الموجودة في View سواء كانت ListBox,TextBlock.ومن محاسن نمط MVVM انه يعطي مفهوم Code behind clear ويعني بأنك لا تحتاج الى كتابةالأكواد #C في ملف Main بل هذه الأكواد سوف تذهب الى VM ويبقى في View فقط كود XAML .

بعد شرح المكونات الرئيسية نأتي الأن الى تبيين مفهوم نمط MVVM عن طريق أخذ مثال بسيط وهو تطبيق يحوي على نافذة تتألف من :

* Button يسمى Show عند الضغط عليه مباشرة يظهر قائمة بالأسماء.

* ListBox تحوي أسماء ألموظفين .

الخطوات التالية يمكنك تتبعها لبناء التطبيق :

1. يتم خلق فايلين الأول ندعوه Model والثاني ViewNodel كما في الصورة التالية :

2. في داخل فايل Model يتم خلق class ندعوه DataService يحوي على على Properties وهي CustomerName,Specialty وايضا يتم بناء مجموعة من الأشخاص وذلك من خلال أستخدام ObservableCollection ويتم تعبئتها يدويا بالكائنات .

3. في داخل فايل ViewModel يتم خلق class ندعوه MainViewModel

ينفذ مباشرة INotifyPropertyChanged الذي يعتمد على event PropertyChanged الذي يقوم بأخبار اي تغيرات تطرأ على View ولهذا يجب ان يمرر اسم كلا من Property التي نريد أن نراقبها الى هذا event لعمل Notification , ونلاحظ من الكود أعلاه وجود العنصرين CustomerName,Specialty اضافة الى قائمة Cusomers التي يتم أرجاعها الى listBox في View عن طريق Binding.

ونلاحظ من الكود في الأسفل تنفيذ ShowCommand بحيث يكون من نوع ICommand ويتم بنائه بالأعتماد على كلاس يدعى RelayCommand الذي ينفذ العمليتان الرئيسيتان وهي Execute,CanExecute بحيث اذ ارجع CanExecute قيمة True يتم مباشرة تنفيذ Execute وتفعيل Button ,واما اذا كانت القيمة false يتم وضع الزر disable .ويمكنك الأستعانة بأدوات MVVMlight التي تعطي امكانية بعدم كتابة الكود الخاص ب RelayCommand او INotifyPropertyChanged ولكننا قمنا في تطبيقنا بكتابة الكود لتوضيح MVVM Pure بدون اي ادوات او framework أضافي.

4. يتم الدخول الى MainWindow لأجل كتابة كود XAML بحيث يتم أولا تعيين VM الى View من خلال خاصية DataContext وقد تم الوصول الى ملف ViewModel عن طريق أستخدام xmln ووضع مختصر vm للوصول اليه. الرسم التالي يوضح العمل :

نأتي الى خلق listBox ونعيين لها القائمة Customers الموجودة في VM هذه العملية تدعى Binding أنظر الرسم التالي الذي يوضح هذه الخاصية :

وبعد ذلك نقوم برسم Button نسميه Show ونعينه الى ShowCommand الموجود في VM

بعد تنفيذ البرنامج سوف نحصل على النافذة التالي :

وعند الضغط على الزر Show مباشرة يتم تفعيل event وعمل أخبار الى VM وتنفيذ ShowCommand الذي ينفذ العمليتان Execute,CanExecute وفي النهاية يتم أرجاع من Model القائمة وعبر خاصية Binding تحدث محتويات ListBox بالأسماء.أنظر النتيجة النهائية :

الخاتمة :

تساعدنا الأنماط الى حل الكثير من المشاكل التي تواجهنا في المشاريع , ويجب أن نعرف أن جميع الأنماط تظهر الى الوجود بالأعتماد على الأنماط السابقة وهذا ما شاهدناه عند قرائتنا لتاريخ الأنماط المتعلقة بطبقة العرض , بحيث نلاحظ أن الأب لهذه الأنماط هو نمط MVC بحيث كان ظهوره سبب بظهور الأنماط التي ساعدتنا في بناء واجهات رسومية مرتبة ومنفصلة وجميلة , وأخر هذه الأنماط النمط MVVM الذي يعتبر أحدث نمط من أنماط Presentation Patterns والذي تميز بكثير من المميزات ومنها أفضل طريقة لأجل databinding , قابلية الأختبار العالية, نظافة الكود الداخلي Code behind, تحقيق مبدأ Seperation of Concerns من خلال التقسيم  (View, ViewModel, Model).ويمكنك ان تستخدم MVVM نقي بدون اي اضافات او تستخدم MVVMframework والتي توجد على عدة انواع .

يمكنك تحميل التطبيق من خلال الرابط التالي :
http://sdrv.ms/YWoKv8