• 0
Eng.Tareq Jehad

نمط التصميم MVC مع سي شارب.

سؤال

اخترت لكم اليوم درس جميل وهو نمط التصميم MVC مع السي شارب. طبعاً الكلام ينطبق على أي لغة برمجة OOP كون مفاهيم أنماط التصميم تعتمد بشكل كبيرعلى البرمجة كائنية التوجه.


 


ما هو نمط التصميم MVC؟


عبارة عن فصل النظام إلى ثلاث أقسام:


1. Modelويحوي الكلاسات والعمليات الحسابية. ضمن مجال قواعد البيانات يحمل كلاسات الجداول والعمليات الأساسية عليها. ضمن البرامج المحاسبة يحوي على الكلاسات والمعادلات الحسابية.


2. View: للتعامل مع المستخدم فقط، عن طريق أخذ بيانات من المستخدم، ومن ثم أظهارها بطريقة ما للمستخدم، بالإضافة لعرض رسائل الخطأ والتنبيهات.


3. Controller: وهو المسؤول عن ربط القسمين السابقين، فيقوم بأخذ البيانات من المستخدم عن طريق View والتحقق من صحتها، ثم يطلب من Model  القيام بعمليات حسابية معينة، ثم يعود بالنتيجة لل View. لعرضها للمستخدم.


 


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


بإمكاننا إستخدام أي تطبيق ضمن سي شارب. سأقوم باستخدام تطبيق WPF . والكلام ينطبق على الأنواع الأخرى Windows Forms, ASP.NET. فبالنهاية يعتبر مشروع العرض عبارة عن View.


 


1. إنشاء View:


نقوم بعمل مشروع جديد من نوع WPF مثلاً ونسميه MVCsharp. وبعدها نقوم بإضافة بعض العناصر للواجهة [View]. عبارة عن ثلاث حقول TextBox لإدخال العدد الأول والثاني ولإخراج الناتج. ونقوم بإضافة زر أيضا لطلب العملية الحسابية، ونضيف Label لرمز عملية الجمع: ونقوم بالتسمية كما في الشكل التالي، لحاجتنا لهذه الأسماء في التطبيق:


 


PiME6Iu.png?1


 


الآن نقوم بفتح كود هذه الواجهة، لكتابة الكود الأساسي للتعامل معها بكل بساطة، حيث سنقوم بعمل Property لإرجاع قيمة العدد الأول، و Property لإرجاع قيمة العدد الثاني. وميثود صغير تأخذ قيمة عديدة وتعرضها على txtSolution وسنقوم بإسناد حدث للزر. فقط كتعريف بدون أي كود داخله فتلك هي مهمة الـ Controller. وميثود أخرى صغيرة تقوم بأخذ نص معين وتعرضه بطريقة معينة حسب نوع المشروع، هنا سنعرض الرسالة ضمن MessageBox. فيكون لدينا كود الواجهة كالتالي:



public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

public double FirstNumber
{
get { return double.Parse(txtFirstNumber.Text); }
}

public double SecondNumber
{
get { return double.Parse(txtSecondName.Text); }
}

public void SetSolution(double solution)
{
txtSolution.Text = solution.ToString();
}

public void SetButtonClickEvent(RoutedEventHandler e)
{
btnCalculate.Click += e;
}

public void DisplayMessage(string message)
{
MessageBox.Show(message);
}
}


نلاحظ أن الكود عبارة عن تعامل صريح مع طريقة العرض فقط. لا يوجد عمليات حسابية. فقط كود خاص بنوع طريقة العرض، مثلا نلاحظ ضمن ميثود SetButtonClickEvent، أننا قمنا بتمرير متغير من نوع RoutedEventHandler. هذا ضمن WPF أما إذا كنت ضمن Windows Forms أو ASP.NET سيكون هذا المتغير من نوع EventArgs.


أيضا قمنا بعرض الرسالة ضمن MessageBox. هذا يصلح ل Wpf و Windows Froms، أما ضمن ASP.NET ربما نعرض الرسالة ضمن Label. فالنهاية طريقة العرض ترجع لنوع المشروع، وما يهمنا هو محتوى الرسالة وليس شكلها.


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


 


2. إنشاء Model:


نقوم بإضافة كلاس جديد للمشروع نسميه Model. يحوي على ميثود واحدة فقط [نسبة لصغر التطبيق هنا]، تقوم بأخذ عددين ثم يقوم بجمعهما وإرجاع نتيجة الجمع. ببساطة كالتالي:



class Model
{
public double AddNumbers(double firstNumber, double secondNumber)
{
return firstNumber + secondNumber;
}
}


هنا لدينا فقط Logic في العمل، بعيداً عن أليات العرض والإدخال والتحقق وغيرها. وهذا ما يفيدنا في فصل العمل وإعادة الإستخدام.


 


 


3. إنشاء Controller:


نقوم بإضافة كلاس جديد للمشروع نسميه Controller. حيث سيقوم بربط القسمين Model, View مع بعضهما. فيقوم بإضافة حدث الزر السابق الموجود ضمن View، ويقوم بطلب الأعداد منها، ثم يقوم بطلب العملية الحسابية من Model، ويرسلها إلى View لعرضها. بالإضافة لعمل أليات التحقق من صحة البيانات. فيكون لدينا الكود التالي:



class Controller
{
private Model model;
private MainWindow view;

public Controller(Model model, MainWindow view)
{
this.model = model;
this.view = view;
view.SetButtonClickEvent(Button_Click);

}

private void Button_Click(object o, RoutedEventArgs e)
{
try
{
double firstNumber = view.FirstNumber;
double secondNumber = view.SecondNumber;

double solution = model.AddNumbers(firstNumber, secondNumber);

view.SetSolution(solution);
}
catch (FormatException ex)
{
view.DisplayMessage("Enter a correct numbers");
}
catch (Exception ex)
{
view.DisplayMessage(ex.ToString());
}
}
}


هنا قمنا بتعريف حدث الزر وإسناده للزر ضمن View. وبالطبع نحن بحاجة لتعريف متغيرين Model, View للتعامل معهما ضمن Controller. قمنا بوضع الكود الخاص بجلب البيانات ومعالجتها وإرسالها إلى العرض ضمن try, catch لإلتقاط أي خطأ ممكن، وكون أكثر خطأ ممكن حصوله هو ادخال قيم غير صحيحة أو غير عديدة قمنا بمعالجة الخطأ  Format Exception ففي حال طلبنا العددين من الـ View وكان هناك خطأ بصيغة الأعداد، هنا يمكننا إلتقاط الخطأ وإرساله إلى الـ View لعرضه ضمن آلية العرض.


وفي حال كانت البيانات صحيحة سنقوم بجمع النتيجة عن طريق Model وعرضها للمستخدم عن طريق الميثود SetSolution الموجود ضمن الـ View.


 


الآن بقي علينا تجميع الثلاث أجزاء. وحيث أن البرنامج سيظهر كَ View لذلك نذهب إلى كود الواجهة ونقوم بإضافة السطرين التاليين ضمن Constructor الخاص بها.



public MainWindow()
{
InitializeComponent();
Model model = new Model();
Controller controller = new Controller(model, this);
}


الآن لو قمنا بتجربة العمل، سنجد الية العمل تتنفذ كما هو متوقع منها.


 


QqDJzFP.png?1


 


بالتوفيق.


2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

4 إجابة على هذا السؤال .

  • 0

موضوع جميل وابحث عنه 

 

على أي بيئة تعمل ؟؟؟

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أهلاً بك أخي الكريم.

 

نعم الموضوع مهم جداً، وبإمكاننا توسعته.

 

البيئة:

  • Windows 8
  • C# WPF

شكل العناصر على الواجهة، عبارة عن Styles ضمن WPF

 

...With best wishes

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الحمد لله تم تنفيذ أول برنامج بواجهة

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace WpfApplication1{    public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            Model model = new Model();            Controller controller = new Controller(model, this);               }        public double FirstNumber        {            get { return double.Parse(text1.Text); }        }        public double SecondNumber        {            get { return double.Parse(text2.Text); }        }        public void SetSolution(double solution)        {            sol.Text = solution.ToString();        }        public void SetButtonClickEvent(RoutedEventHandler e)        {            calc.Click += e;        }        public void DisplayMessage(string message)        {            MessageBox.Show(message);        }    }    class Model    {        public double AddNumbers(double firstNumber, double secondNumber)        {            return firstNumber + secondNumber;        }    }    class Controller    {        private Model model;        private MainWindow view;        public Controller(Model model, MainWindow view)        {            this.model = model;            this.view = view;            view.SetButtonClickEvent(Button_Click);        }        private void Button_Click(object o, RoutedEventArgs e)        {            try            {                double firstNumber = view.FirstNumber;                double secondNumber = view.SecondNumber;                double solution = model.AddNumbers(firstNumber, secondNumber);                view.SetSolution(solution);            }            catch (FormatException ex)            {                view.DisplayMessage("Enter a correct numbers");            }            catch (Exception ex)            {                view.DisplayMessage(ex.ToString());            }        }    }}
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

نعم اخي الكريم

إن شاء الله، سنقوم لاحقاً ببناء برامج أقوى واكبر لتتضح لنا أهمية هذا النمط في التصميم والتطوير.

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .