Prism مع نمط EF + WPFتطبيق

يتميز نمط Prism او مايعرف بأطار العمل Prism Framework  بمميزات عديدة ومن أهمها بناء تطبيق متألف من وحدات نمطية Module يتم تجميعها لتكوين تطبيق مجمع Composite Application  من خلال حقن هذه الوحدات داخل مناطق محجوزة مسبقا تدعى Regions , ونجد الكثير من المطوريين يشكون من صعوبة وحجم هذه المكتبة التي تحوي على الكثير من الأنماط التي تساعد على تقسيم المشروع الى عدة مهام ومن ثم توصيلها كقطعة واحدة , يصور أطار العمل Prism نمط MVVM بشكل رائع بالأعتماد المباشر على منهجية الحقن DI . يوفر فريق Prism دليل كامل يمكنك تحميله من الرابط التالي msdn.microsoft يتألف الدليل من مرجع أضافة الى أكواد متكاملة لجميع الأمثلة الموجودة في المرجع أضافة الى سلسة من الأدوات والمكتبات التي تحتاجها في عمل وبناء تطبيق Prism. الكثير من التطبيقات الموجودة في هذ الدليل تم تمثيلها بتقنية Silverlight ونجد القليل متمثلة بتقنية WPF , لذا قمت بتحويل التطبيق الذي يعطي مفهوم Composite App بأستخدام أدوات WPF , بالطبع يوجد بعض التشابهة مابين التقنيتين من حيث الأكواد والسياق. سيناريوا التطبيق يتمثل بعرض قائمة بالموظفين وعند الضغط على أحد الموظفين مباشرة يتم عرض تفاصيل الموظف أضافة الى عرض المشاريع التي قام بها كل موظف وقمت بأضافة زر بحث لأيجاد الموظف.تم أستخدام تقنية Dependency Injection من نوع Unity أضافة الى استخدام تقنية EntityFramework لتكوين طبقة الوصول الى البيانات DAL مع استخدام نمط Repository من نوع Generic لتضمين جميع العمليات التعديل والأضافة والقراءة CRUD , أضافة الى قاعدة بيانات متألفة من جدوليين تم بنائها بواسطة SqlSever وقد وضعتها ضمن التطبيق لأجل لصقها في SQlServer الخاص بك وتعديل فايل App.config من حيث تغيير اسم data source ,أرجو ألأستفادة. يمكنك تحميل التطبيق من الرابط التالي http://sdrv.ms/10Y8ETw

(Part 7) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012. تم في الدرس الحالي أكمال التطبيق من خلال بناء الواجه التي تعبر عن تفاصيل الموظف عند ضغط المستخدم على احد الموظفين الموجودين داخل ListBox .

(Part 6) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012. تم في الدرس الحالي بناءViewModel الخاص بتفاصيل الموظف , وتعريف الأكواد المنطقية الخاصة بتنفيذ التأشير على الموظف لأظهار تفاصيله.

(Part 5) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012. تم في الدرس الحالي بناء واجهة لأجل المستخدم بحيث يتم أظهار أسماء الموظفين في ListBox بالأعتماد على خاصية Binding بين View ,ViewModel 

(Part 4) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012 . تم في الدرس الحالي يتمثل بشرح نمط MVVM بحيث يتم التركيز على طبقة ViewModel وهو تمثيل Presentation Logic بحيث يتم عزل جميع Logic عن الواجهات الرسومية UI .

(Part 3) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012 و بيئة SqlServer 2012 . تم في الدرس الحالي بناء طبقة وسيطة, يتم تمثيل فيها بعض Business Logic .

(Part 2) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012. تم في الدرس الحالي تعريف منهجية ORM واستخدام تقنية EntityFramework لأجل تمثيل الوصول الى مصدر البيانات وتكوين طبقة وصول للبيانات DAL .

(Part 1) WPF + MVVM النمط

سلسة تعليمية تعرفك كيفية بناء تطبيق بالأعتماد على نمط MVVM وتقنية WPF اضافة الى استخدام بيئة VS 2012 و بيئة SqlServer 2012 . تم في الدرس الحالي بناء قاعدة بيانات متمثلة بجدوليين سوف يتم استخدامها في الدروس القادمة .

Dependency injection Principle DIP مبدأ التبعية

المقدمة

وهو نمط يدخل ضمن الأنماط الكائني المنحى OOP يستخدم لأجل تقليل الأقتران loosely coupled والأعتمادية مابين المكونات ,بحيث يجعلها أكثر مرونةواختبار, يركز هذا النمط في عمله على حذف الأكواد المتكررة والأعتمادية مابين المكونات بحيث يركز على حقن Inject الكائنات في Classes معينة من دون أن تقوم بخلق هذه الكائنات بنفسك مما يقلل الجهد على المطور ويجعل الأعتمادية تظهر في الوقت الحقيقي Run time ويكون الحقن بعدة طرق سوف نقوم بشرحها خلال البحث ,يستخدم DI بكثرة مع النمط Inversion of Control IOC وهو عبارة على وعاء يتحكم بالتدفق العام للبرنامج من خلال استخدام مبدأ حقن الأعتمادية DI.

المحتوى

لأجل فهم نمط DI يجب ان نقوم بأخذ مثال بسيط يشرح ستراتيجية الأعتمادية وأنعكاس الأعتمادية Dependency Inversion :

لنأخذ تطبيق بسيط يقوم بعملية أخبار Notification عبر أرسال رسالة معينة بأستخدام خدمة Email 

 من الرسم أعلاه نلاحظ أعتمادية الكلاس Notification  على كلاس Email بحيث يطلب الأول instance لأجل أرسال الرسالة عبر الأيميل , أذن كلاس Notification  يعرف مع من يتعامل وهذا بدوره يزيد من الأقتران مابين المكونين وهذ ما نشاهده في الكود التالي الذي يوضح مدى الأقتران مابين المكونين :

  نلاحظ أنه تم خلق كائن من نوع Email داخل كلاس Notification مما يزيد الأعتمادية في كتابة الكود , لكن توقع أن مديرك اراد أن ترسل الرسالة ليس فقط عبر الأيميل بل عبر SMS وايضا ترسل الى Databaase لأجل خزنها , أذن حسب الكود أعلاه يجب عليك أن تقوم بخلق ثلاث Instance داخل كلاس Notification ومن ثم أرسال الرسائل بالتسلسل مما يزيد الأقتران والجهد على المطور ويصعب الأختبار والتوسع.الحل هو بواسطة أستخدام نمط DI الذي يعمل على تقليل الأقتران من خلال خلق interface ندعوه IMessage يتم تنفيذه implement من قبل الخدمات المتوفرة للأرسال Email,Dbase,SMS . ويستخدمه using الكلاس Notification انظر الرسم التالي:

من الرسم أعلاه نلاحظ جميع الخدمات الأن تنفذ IMessageService وبهذه الهيكلية الجديدة يمكننا أن نطبق مبدأ DI وذلك من خلال حقن injection  الكلاس Notification بكائن بشرط ان كلاس Notification لا يخلق instance  في داخله وايضا لا يعرف أنتماءالكائن الذي سوف يحقن به لكن فقط يعرف انه من نوع IMessageService , وبهذا يمكننا أن نضيف اي خدمة أخرى في المستقبل من دون التأثير على الكلاس Notification.

عندما تريد تنفيذ النمط DI توجد عدة طرق كما مبينة في الرسم التالي :

أختيار الطريقة ألأفضل من هذه الطرق يعتمد على متطلبات وتعقيد العمليات الوظيفية أضافة الى وجود بعض المساوئ والمحاسن في الطرق المستخدمة , نأتي الأن الى شرح التطبيق و لأجل تنفيذ DI سوف نستخدم constructor injection وايضا Setter Injection.

1 - يتم خلق :

   * classes لأجل الخدمات Email,SMS,Dbase

   * interface لأجل تنفيذ العمليات التي تتشارك فيها الخدمات وسوف يحوي على عملية أرسال الرسالة SendMessage 

   * files لأجل تبيين الطريقتين أعلاه لتنفيذ مبدأ DI .

   * classes لأجل تنفيذ Notification 

الرسم التالي يوضح الملفات التي تم أنشائها :

2 - نقوم بكتابة الكود التابع IMessageService :

 3 - يتم تنفيذ IMessageService لأجل الخدمات الثلاثة :

  نلاحظ من الكود اعلاه انه تم تنفيذ SendMessage في كل الخدمات ,ومن خلال هذه العملية يتم طباعة message واظهارها على بيئة cmd .

4 - نأتي الأن الى نواة التطبيق وهو كلاس Notification  :

 * بأستخدم طريقة  constructor injection 

نلاحظ خلق instance من نوع IMessageservice وتم حقن الكلاس Notification عبر Constructor ومساواته بالكائن messageService_ , نلاحظ أن كلاس Notification لا يعرف أنتماء messageService_ هل هو Email ام SMS , هذه هو جوهر DI ان تحقيق الأعتمادية يتم في Run time

5 - لنأتي الى تنفيذ البرنامج عبر الكلاس Program

اولاً تم خلق instance من نوع IMessageService يؤشر على الكلاس SMS وبعدها تم خلق instance من نوع Notification وتم أرسال الكائن messageService1 عبر Constructor بمعنى تم الحقن , وبعدها يتم أستدعاء العملية PromotionalNotification والتي بدورها ترسل الرسالة الى الوجه المحددة بالأعتماد على حقن الأعتمادية الذي تم.

مخطط يشرح لك سريان التدفق المتسلسل الى أظهار النتيجة :

الخاتمة 

بالطبع نمط Dependency Injection موسع جدا وله الكثير من الوظائف التي لم نذكرها فتتواجد في جميع المكتبات والمكونات تقريبا , فنشاهدها في خاصية Data Binding وفي تقنية WPF, Silverlight وايضا نلاحظ حضورها الفعال في الأنماط المهمة لبناء تطبيقات معقدة , واذا كنت من مطوري Net. فيمكنك أستخدام Unity Dependency Injection,

Managed Extensibility Framework MEF.

يمكنكم تحميل الكود من الرابط التالي http://sdrv.ms/VTsBXK

   

Three Layer Architecture Part II معمارية الطبقات الثلاث

بعد أن اوضحنا معمارية الطبقات الثلاث في المقالة السابقة Three Layer Architecture Part I , سنقوم الأن بتطبيق هذه الطبقات بالترتيب ونبدأ من الأسفل الى الأعلى Bottom-Up , بحيث نقوم بالبداية بخلق قاعدة البيانات ومن ثم نخلق طبقة التطبيق وبعدها طبقة التعامل مع المستخدم , سوف اقسم العمل الى نقاط متسلسلة لأجل تبسيط الأمر على القارئ.

1 - يتم فتح Sql Server لأجل بناء قاعدة البيانات ونقوم بتسميتها DBCompany وسوف تتألف من جدول واحد نسميه Customer يحوي على عدة حقول , شاهد الصورة التالية التي تبين كود Sql :

* وبعد تنفيذ الكود أعلاه سوف يتم خلق الجدول بالشكل التالي :

* وبعد ذلك نقوم بتعبئة بيانات الجدول وبهذا ننتهي من مرحلة بناء قاعدة البيانات.

2 - يتم خلق تطبيق من نوع WPF ندعوه ThreeLayerArchitecture ونقوم بخلق مشروعين من نوع ClassLibrary كما في الصورة التالية :

 3 - نقوم الأن ببناء الطبقة DAL سوف نعتمد ببناء هذه الطبقة على تقنية Entity Framework بحيث سوف نقوم بأستخدم قاعدة البيانات التي خلقناها في الخطوة رقم 1 , أذن لنقوم بتتبع الخطوات التالية:

* نقوم أولا بخلق ملف جديد نظيفه الى طبقة DAL أنظر اللصورة التالية:

* نقوم بأختيار Model كما في الصورة التالية :

* نقوم بأختيار المودل بالأعتماد على قاعدة بيانات مخلوقة مسبقا :

* نختار نوعية مصدر البيانات كما في الصورة ادناه :

* بعد ألأختيار أعلاه يجب أن نحدد السيرفر الخاص بقاعدة البيانات ونحدد قاعدة البيانات التي خلقناها مسبقا انظر الشكل التالي :

* بعد أختيار السيرفر وتحديد قاعدة البيانات سوف تظهر النافذة في الأسفل وبعدها يجب عليك الضغظ على Next :

* يجب عليك الأن أن تختار الجدول الذي تريد أن يتمثل في Model ومن ثم أضغظ على Finish :

* وفي النهاية سوف يتولد EFModel ويتولد Class Diagram مشابه للجدول الموجود في قاعدة البيانات : 

4 - نقوم ألأن بخلق طبقة BL والتي سوف تتعامل مع طبقة DAL أذن يجب عليك أن تظيف مرجع Reference الخاص بطبقة DAL الى BL وأيضا أضافة مرجع او مكتبة System.Data.Entity الموجودة ضمن مكتبة Net. , شاهد الخطوات التالية لأجل تنفيذ الطبقة :

* يتم أولا خلق Interface ندعوه IDataProvider يحوي على Method تقوم بأرجاع قائمة الموظفين , الكود ممثل في الشكل التالي :

* بعدها يتم خلق Class ندعوه DataProvider نجعلة ينفذ IDataProvider  عمله الرئيسي هو أحضار جميع بيانات الخاصة بجدول Customer من قاعدة البيانات وأرجاعها على شكل IList أن تم أستدعائه :

بالطبع يمكنك أن تقوم بأضافة الوظائف والقواعد المنطقية للتحكم بسيران العمليات والتحقق من المرجع والمرسل الى الطبقة الاحقة لكننا الأن نركز حول تطبيق معمارية الطبقات وليس عمل Domain او نواة خاصة بطبقة BL.

5 - نقوم ألأن ببناء الطبقة PL والتي سوف تتفاعل مع المستخدم يتم اولاً أضافة ملف ندعوه ViewModel ومن ثم نسخ فايل App.Config ولصقه في طبقة العرض PL لتسهيل الوصول واستخدام Entities ويجب أن يكون على الشكل التالي :

* نظيف Class الى ملف ViewModel وندعوه MainViewModel والذي سوف يتعامل مع طبقة BL ويعمل Binding مع View لتحقيق جزء من مبدأ MVVM بالطبع كان بأمكاننا أن تقوم بعزل ViewModel على dll منفرد واقصد خلق ClassLibrary لكن أردت أن أبسط التطوير , انظر الشكل التالي الذي يوضح الكود الخاص به :

نلاحظ من الكود أعلاه أن MainViewModel يستلم instance من نوع IDataProvider والذي بدوره يستدعي Method الموجودة داخل طبقة BL ومن ثم يذهب الى طبقة DAL لأرجاع قائمة بالأسماء, ويتسائل القارئ من أين  Constructor الخاص MainViewModel استلم كائن او مثيل من نوع IDataProvider , أنا سوف أجيبك في الخطوة التالي :

* يتم تعبئة DataContext لل MainWindow بمحتويات MainViewModel وهذا حسب هيكلية نمط MVVM بأن كل View لهViewModel أنظر الشكل التالي الذي يوضح الفكرة ويجيبك على السؤال السابق  :

* الأن نقوم برسم الواجه الرسوميةGUI بواسطة لغة XAML والتي سوف تحوي على ListBox ندخل بداخلها Customers من ViewModel , وقد وضعنا Style خاص لأجل أضهار العناصر بشكل جميل أضافة الى تزويد حدث معين عند وصول الماوس لأي عنصر في ListBox يتغير شكله:

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

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

الخاتمة 

تتعدد معماريات وتصاميم الأنظمة بالأعتماد على حجم وتعقيد المشروع المقترح , فنلاحظ الكثير من مصممين ومطوري الأنظمة يلجأوا الى عائلة المعماريات والتي تشمل معمارية الطبقات الثلاث التي ركزنا عليها في بحثنا مع وجود الكثير من المعماريات التي تعطي تصاميم ومعماريات جيدة ولجميع الأغراض ومثال أخر معمارية المستويات الثلاث 3tier او المتعددة Ntier .ومن خلال التطبيق أعلاه شاهدنا كيفية عزل الأكواد ضمن طبقات وكيفية الأنتقال مابين الطبقات مما يسهل الأختبار والوصول الى الخطأ.وأوضحنا جزء بسيط حول نمط MVVM .يمكنكم تحمل البرنامج من الرابط التالي : http://sdrv.ms/Zk4DqN      

Three Layer Architecture Part I معمارية الطبقات الثلاث

المقدمة

يوم بعد يوم نلاحظ تطور العالم الحقيقي للتطبيقات وتزايد تعقيداته التي أدت بدورها الى ظهور الكثير من العراقيل في طريق المطور , ولحل هذه الصعوبات تظهر بين الحين وألأخر حلول وتقنيات تهتم بالجانب المعماري للأنظمة بحيث تعطي الأسس الصحيحة والمتينة التي تمكن المطور من عبور الصعوبات بدون قلق .فالمطور في بداية بناء التطبيق يجب أن يركز اولاً على مفهوم معمارية التطبيق Application Architecture والتي تسعى الى تعريف المتطلبات التي تؤثر على هيكلية التطبيق وتقلل من المخاطر وتوفر الحلول الجيدة.سوف يكون أتجاه المقالة حول معمارية الطبقات الثلاث بالرغم من وجود الكثير من المعماريات التي تدخل ضمن سلة Architecture Style والتي تحوي على عدة تصنيفات ومعماريات. 

المحتوى

Layer Architecture :

وهي معمارية توجد ضمن التصنيف الهيكلي Structure , تعمل على تقليل الأقتران (loose coupling) مابين الطبقات من خلال عزل الأكواد في طبقات مستقلة مما يعطي أمكانية تغليف المعلومات الداخلية داخل كل طبقة وعدم كشفها الى الطبقات الأخرى.تعتبر هذه المعمارية من المعماريات المهمة وذلك لأنها تضمن سهولة الصيانة وألأختبار وأيجاد الأخطاء بسهولة   بسبب تحديد الأكواد ضمن طبقات محددة, وتوفر هذه المعمارية مبدأ الأستقلالية مابين الطبقات بحيث يمكنك ان تظيف مكون معين لأحد الطبقات من دون التأثير على الطبقات الأخرى.تحوي معمارية الطبقات على ثلاث طبقات أساسية أنظر الرسم التالي:

 

1 - طبقة العرض (PL):

وهي الطبقة التي تمثل الواجهة الرسومية GUI والتي يتعامل معها المستخدم بصورة مباشرة , وتكون هذه الطبقة على عدة أنواع حسب نوعية التطبيق فأذا كان التطبيق عبارة عن Web فتكون هذه الطبقة مبنية بتقنية Asp .Net او Silverlight اما أذا كان التطبيق مخصص لتطبيقات ويندوز فتكون هذه الطبقة مبنية بتقنية WPF او WinForm 

2 - طبقة التطبيق (BL):

وهي نواة التطبيق تحوي على جميع الأوامر والوظائف المنطقية التي تحدد سير العمليات المنطقية وتحدد تدفق العمل , تعتبر هذه الطبقة كطبقة وسيطة بين المستخدم الذي يتعامل مع طبقة العرض  وطبقةالوصول الى البيانات التي تتعامل مع قاعدة البيانات. طبقة BL تمنع طبقة العرض PL من الوصول المباشر الى طبقة الوصول الى البيانات DAL مما يزيد من أمنية التطبيق.يعتمد بناء هذه الطبقة على مدى تعقيد الوظائف المنطقية والتطبيقية للنظام ويمكنك أن تعتمد على تقنيات تساعدك في بناءهذه الطبقة ومنها تقنية تدفق العمل Work Flow .

3 - طبقة الوصول الى البيانات (DAL):

وهي الطبقة التي تحوي على عمليات التعامل مع البيانات من خلال الأرجاع والأرسال والتحديث والوصول الأمن الى مخزن البيانات , وهناك عدة تقنيات لبناء هذه الطبقة التي تساعدنا الى الوصول الى قواعدة البيانات ومن هذه التقنيات Entity framework , NHibernate وهي تقنيات تمثل جسر بين لغات الكائنية المنحى OOP وقواعد البيانات العلائقية RDB ,وتدخل هذه التقنيات ضمن منهجية Object Relation Mapping ORM.

ملاحظة 

يمكنك أن تقوم بأضافة طبقة أخرة تدعى Service Layer SL , وذلك عندما يتعامل تطبيقك مع بيانات وخدمات موجودة على الغيمة Cloud او تطبيقات أخرى , او عندما تزود خدمات الى تطبيقات أخرى.ويمكنك أن تستخدم تقنية Windows Communication Foundation WCF لبناء هذه الطبقة.

الفرق بين الطبقات layers والمستويات tiers :

layers :هي توصف المجموعة المنطقية التي تتألف من الوظائف والمكونات في التطبيق واقصد أنها تمثل الطبقات المنطقية مثل PL,BL,DAL  التي أوضحناها سابقا.

 tiers : توصف التوزيع الفيزيائي واقصد توزيع المكونات على السيرفرات والشبكات, فعندما نقوم ببناء الطبقات الثلاث Layers فأنك بالفعل تقوم بخلق ثلاث صيغ Dynamic-link library فكل طبقة سوف تحوي على dll خاص بها فأذا قمت بنشر ملفات dll على جهاز واحد فأنك عملت مستوى واحد 1tier لكن أذا نشرت كل dll على جهاز حاسوب فأنك حققت معمارية 3tier وهي أيضا معمارية مهمة تصنف ضمن تصنيف النشر والتوزيع Deployment ويمكنك أضافة الكثير من المستويات وأقصد السيرفرات . 

أذن layers هو توزيع الأكواد والمكونات والوظائف على طبقات في التطبيق لتسهيل الصيانة وتقليل تكرار الكود وسهولة الأختبار أما tires هو عزل الطبقات layers على سيرفرات لأجل تقليل العبأ على السيرفر وسهولة الصيانة وتحقيق المرونة العاليةاضافةالى الوصول للأمثلية

في المقالة القادمة سوف نركز على تطبيق معمارية الطبقات الثلاث .

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

WPF الدرس السادس من دروس تعلم تقنية

يركز الدرس السادس على بناء الواجه الرسومية User Interface بواسطة لغة XAML وتم التطرق الى بعض اساسيات نمط MVVM من خلال بناء  ViewModel وتضمينه Business Logic ,وقد أوضحنا في الدرس ايضا عملية Binding وأرجو تحميل البرنامج من الرابط التالي :

Programm

WPF الدرس الخامس من تقنية

يركز الدرس على أنشاء الواجهات الرسومية UI وذلك بأستخدام لغة XAML ويتم التطرق حول أهمية Style وكيفية عمل مشاركة بالمصادر ولم ندخل الى كتابة الأكواد المنطقية بل كان التركيز على الواجهات فقط. 

OOP مفهوم الكائنية المنحى

المقدمة  :

كائنية المنحى او تدعى بالموجه هي في الأصل منهجية لتطوير البرامجيات , تستخدم طرق واساليب برمجية مختلفة عن الطرق البرمجية الأجرائية  procedural programming  السابقة ومنها لغة  (C, Pascal, etc.) التي تعمل بالطريقة الخطية بحيث يكون البرنامج عبارةعن سلسة من الخطوات تنفذ خطوة بعد خطوة هذه الطريقة تصلح للبرامج الصغيرة  ولذلك تم أستبدال هذه الطريقة بمنهجية OOP بسبب تعقد المهام الحاسوبية وزيادة حجم المشاريع والكلف المقدرة , فقد قامت هذه المنهجية بتسهيل حل المشاكل وزيادة المبدأ الوظيفي وتقليل تكرارت الكود وتقسيم المشاريع الضخمة الى عدة قطع يتم توزيعها الى  الفريق البرمجي الى أخره من الفوائد الأخرى.مفهوم الكائنية المنحنى يركز على خلق شبكة من الكائنات Objects محددة بفئات او أصناف تحدد معالمها تدعى Classes التي تحوي على الخصائص والصفات والسلوكيات لمجموعة من الكائنات المتشابهة ويمكن أن يعرف على انه قالب Template لاجل كائن معين والكائن بدوره هو مثيل instance لهذا القالب او الفئة . 

المحتوى :

1- الكائنات Objects

الكائن يعرف فيزيائيا بأنه  يمثل كل الأشياء things الموجوة حولنا  سواء مادي او برمجي او كائنات حية , فالأنسان هو كائن يتفاعل مع الكائنات التي حوله ويملك صفات وخصائص ومنها (اللون ,الطول,الوزن,... ) وفي نفس الوقت يملك سلوكيات او مايسمى بأفعال يقوم بها ومنها(الأكل,المشي,التكلم,....).دعنا نأخذ مثال يوضح مفهوم الكائن لنفترض أنك مدير شؤون الموظفين تدعى أحمد ولديك وظيفة شاغرة قمت بالأعلان عنها في الأنترنيت واستلمت عدة طلبات , وبعد أختبار جميع الخيارات قمت بالأتصال بأحد المرشحين للوظيفة لأجل اللقاء معه والمرشحة تدعى مريم لننظر الصورة التالية التي توضح الفكرة:

من الصورة نرى حسب نظرة الكائنية المنحى كائنين يمتلك كلا منهما على صفات وسلوكيات قد تكون متشابهة او مختلفة في تركيبها.

2- الفئات Classes 

كل الكائنات يمكن أن توضع ضمن حدود او فئة خاصة تحدد حدودها وذلك لأجل تبسيط مفهوم الكائنات أضافة الى الوصول الى مبدأ التجريد abstract ,فلو أخذنا أحمد ومريم يمكننا أن نخلق فئة,هذه الفئة تملك جميع الصفات والسلوكيات التي تجمعهم معا ويمكن أن نسميها Person بحيث يكون عبارة عن قالب لوصف الكائنات ويمكن أن نقسم الفئة Class الى مكونين رئيسيين هما :

* الصفات (Properties)وهي صفات وخصائص توصف الكائن.

* الطرق (Methods) وبعض الأحيان تسمى بالأفعال (action) التي يتم ربطها بالكائن. 

أذن نأتي الى وصف المكونين ونطبقها على مثالنا.

صفات الفئة Class properties :

وهي عبارة عن البيانات التي تريد أن تسجلها مع الكائن, فيمكننا أن نخلق صفات عامة تجمع الكائنين أحمد ومريم توضع في الفئة Person أنظر الى الصورة التالية التي توضح الصفات :

طرق وأفعال الفئة(Class methods):

أن كل فئة تحوي على عدة أفعال يقوم بها الكائن لأجل التلاعب بالبيانات الموجودة داخل صفات الكائن . فلو أخذنا الفئة Person لوجدنا أن كلا من أحمد ومريم يملكان عدة أفعال ومنها التحدث , المشي, الكتابة الى أخره من الأفعال .وفي كل الأحوال تختلف الأفعال المستخدمة في العالم الحقيقي للشركة لكننا الأن لسنا مهتمين بالجانب التطبيقي بل نريد أن نوصل مفهوم وسياق OOP أذن يمكننا أن نرى الصورة التالية التي توضح الصفات والسلوكيات ضمن فئة Person :

 أردت أن أوضح من هذا المثال بأن مريم هي عبارة عن كائن جديد جاء الى الشركة لكي تعمل بالوظيفة الشاغرة وبالأعتماد على مبدأ OOP فيجب علينا خلق كائن خاص بها لأجل تسجيل بياناتها ويكون هذا الكائن تابع الى الفئة التي تم خلقها Person والتي ينتمي اليها أحمد لأنهما يتشاركا بالصفات والسلوكيات لكن البيانات الداخليةالتي تحملها المواصفات Properties مختلفة بالطبع عن أحمد.أذن لو ذهبنا الى العالم الحقيقي قليلا فعندما يأتي موظف جديد الى الشركة سوف نعرف مباشرة بأنه سوف يتم خلق كائن له او يمكن أن نقول مثيل instance يمثل الفئة Person وبعد خلق الكائن يتم تعبئة مواصفاته بالبيانات والتلاعب بهذه البيانات عن طريق الأفعال والسلوكيات.

وكل من الكائنات والفئات يتم ترابطها من خلال علاقات هذه العلاقات والمفاهيم تعكس مفهوم OOP ويمكن أن تصنف الى ألأنواع التالية :

 

·     التغليف (Encapsulation) : وهي أن كل شخص يملك معلومات شخصية مثل بيانات كارت البنك او بيانات سرية, ويجب أن تكون هذه المعلومات مغلفة لأجل أن لايصل لها شخص واقصد كائن او فئة معينة بمعنى تبقى سرية للشخص المالك اي مغلفة داخل الكائن .

·   التجريد (Abstraction)  : وهي أن كل شخص يملك بيانات مثل أسم الشخص , عنوان السكن , الهاتف الى أخره. هذه البيانات يمكن للشخص أن يتشارك مع شخص أخر من خلال أضهارها له او أضهارها للكل او أضهار بعضها حسب الحاجة  ويمكن عمل هذا بأستخدام الكلمات المحجورة   Public , Protected  وممكن أن أعطي مثال على المجرد وهو شاحن البضاعة يهمه عندما يشحن البضاعة من مكان الى أخر وزن وحجم البضاعة ولايهمه لون البضاعة.

·   التعددية(Polymorphism) : وهي التنفيذ المتعدد لنفس الواجهة بحيث تعتمد على مصطلح يسمى Overloading  الذي يعكس هذه التعددية ,ونقصد من هذا أن جميع الأنواع يمكنهم أن يتحدثوا مثال ألأنسان , الحيوان, الأسماك كل هذه ألأنوع تتحدث بلغة مختلفة أذن Polymorphism  كيف  يحل هذه المشكلة : خصائص التكلم ممكن أن تكون مختلفة من حيث الأبناء عن ألاب او النوع الرئيسي او يمكن أن تكون متشابهة بمعنى الأنسان يتحدث لغة البشر لكن الأبناء الذين يرثوا من الكائن الأب(الأنسان) يمكن أن يتحدثو بلغات مختلفة لكنها في كل الأحوال لغة بشرية .

·   الوراثة(Inheritance)   : وهو أن الشخص ممكن أن يرث بعض الصفات والسلوكيات من الأب وهذا منطقي , برمجيا يمكن الأستفادة من هذا النوع بعمل كلاس أب رئيسي parent class مثلا عمل Person وخلق أبناء child class  يرثوا منه مثلا Employee, Customer  

 في المقالات القادمة سوف أقوم بشرح كل من المفاهيم الاربعة أعلاه مع التطبيق.