مقدمة لهندسة MVC: شرح الأمثلة

تعد بنية Model-View-Controller (MVC) واحدة من أكثر أنماط تطوير البرامج شيوعًا. يستخدم المنطق الكامن وراء هندسة MVC مبدأ التصميم لفصل الاهتمامات. يهدف هذا المبدأ إلى فصل الطلب إلى أقسام المنطقة ، حيث يتناول كل قسم قضية محددة ومنفصلة.

تتبع بنية MVC مبدأ فصل الاهتمامات بالحرف. في الواقع ، يمثل كل حرف في اختصار MVC قسمًا أساسيًا من طلبك. تستكشف هذه المقالة كل قسم من أقسام هندسة MVC بالتفصيل ويوضح لك كيفية استخدامها لتطوير البرامج.

ما هو النموذج؟

يعد نموذج معمارية MVC مكونًا رئيسيًا لنمط التصميم. هذا لأن نموذج التطبيق الخاص بك يخزن منطق البيانات. يحدد النموذج كيفية تخزين واسترداد البيانات الخاصة بك.

بالنسبة للتطبيق الذي يستخدم بنية وحدة التحكم MVC ، تعد البيانات مكونًا أساسيًا في تشغيله.

ما هو المنظر؟

عرض هندسة MVC هو واجهة المستخدم (UI) لتطبيقك. واجهة المستخدم هي ما يراه المستخدم على أجهزته عندما يتفاعل مع برنامجك. تعتمد حالة العرض على البيانات المخزنة باستخدام النموذج.

ما هو جهاز التحكم؟

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

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

بالإضافة إلى كونها قناة بيانات ، فإن وحدة التحكم هي أيضًا العقل المدبر للعملية. يقرر ما هي العملية التي يجب إجراؤها على أي بيانات وما هي البيانات التي سيتم إرجاعها إلى واجهة المستخدم.

كيف كل ذلك معا؟

تنشئ بنية MVC حلقة شبه مغلقة تعتمد على جميع المكونات لتعمل بشكل مناسب. يوضح الرسم التوضيحي التالي كيفية عمل هندسة MVC.

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

تطبيق معمارية MVC

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

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

إنشاء نموذج التطبيق

// مكتبة جافا
يستورد java.io. المسلسل
عامصف دراسي سعر الغاز الأدوات المسلسل {
 //attributes
نشرثابتةنهائيطويلالإصدار التسلسلي = 1 لتر ؛
نشر سلسلة driverName ؛
نشرتطفو كمية الغاز
نشر سلسلة gasType ؛
نشرتطفو كلفة؛
// المُنشئ الافتراضي
عام نموذج سعر الغاز () {
هذه.driverName = "" ؛
هذه.gasAmount = 0.00f ؛
هذه.gasType = "" ؛
هذه.cost = 0.00f ؛
 }
 // المنشئون الأساسيون
عام GasPriceModel (String driverName ، تطفو gasAmount ، سلسلة gasType ، تطفو كلفة) {
هذه.driverName = driverName ؛
هذه.gasAmount = gasAmount ؛
هذه.gasType = gasType ؛
هذه.cost = التكلفة ؛
 }
 // الحاصل والمحددات التي تقوم باسترداد البيانات ومعالجتها
عام سلسلة getDriverName () {
إرجاع اسم السائق ؛
 }
عامفارغ setDriverName (String driverName) {
هذه.driverName = driverName ؛
 }
عامتطفو getGasAmount () {
إرجاع كمية الغاز
 }
عامفارغ setGasAmount (تطفو gasAmount) {
هذه.gasAmount = gasAmount ؛
 }
عام سلسلة getGasType () {
إرجاع نوع الغاز.
 }
عامفارغ setGasType (String gasType) {
هذه.gasType = gasType ؛
 }
عامتطفو getCost () {
إرجاع كلفة؛
 }
عامفارغ setCost (تطفو كلفة) {
هذه.cost = التكلفة ؛
 }
}

هناك العديد من الأشياء المهمة التي يجب تحديدها في رمز النموذج أعلاه. الأول هو أنه يقوم بتنفيذ واجهة Serializable. تتيح لك هذه الواجهة حفظ حالة كل كائن تم إنشاؤه باستخدام ملف سعر الغاز class عن طريق تحويلها إلى تدفق بايت. يعني تنفيذ واجهة Serializable أنك بحاجة أيضًا إلى إنشاء معرف إصدار ، وهو ما تفعله السمة الأولى في الفصل أعلاه.

متعلق ب: تعرف على كيفية إنشاء فصول في Java السمات الأربع الأخرى في سعر الغاز الفصل مهم بنفس القدر لأنهم يخبرونك بمن سيصل إلى البيانات التي سيُنشئها هذا النموذج. يخبرك أيضًا بنوع البيانات التي سيخزنها النموذج (سلاسل وعوامات).

إنشاء وحدة التحكم في التطبيق

// مكتبات جافا
يستورد java.io. ملف؛
يستورد java.io. FileNotFoundException ،
يستورد java.io. FileOutputStream ؛
يستورد java.io. استثناء IO ؛
يستورد java.io. ObjectOutputStream ؛
عامصف دراسي GasPriceController {
 // يحسب تكلفة غاز العميل ويعيده
عامتطفو حساب التكلفة (تطفو كمية الغاز سلسلة) {
تطفو التكلفة = 0.00f ؛
نهائيتطفو سعر الديزل = 4.925 ف ؛
نهائيتطفو قسط السعر = 5.002f ؛
نهائيتطفو السعر العادي = 4.680f ؛
إذا (نوع الغاز == "ديزل")
 التكلفة = المبلغ * سعر الديزل ؛
إذا (gasType == "Premium")
 التكلفة = المبلغ * قسط السعر ؛
إذا (gasType == "عادي")
 التكلفة = المبلغ * السعر العادي ؛
إرجاع كلفة؛
 }
// يحفظ البيانات من كل عملية بيع في ملف باستخدام النموذج
عامقيمة منطقية saveEntry (بيانات GasPriceModel) {
يحاول {
FileOutputStream fs = الجديد FileOutputStream (الجديد ملف ("data.dat") ، صحيح);
 ObjectOutputStream نظام التشغيل = الجديد ObjectOutputStream (fs) ؛
 os.writeObject (بيانات) ؛
 os.flush () ،
 os.close () ،
إرجاعصحيح;
 } قبض على (FileNotFoundException هـ) {
 e.printStackTrace () ،
 } قبض على (استثناء IO هـ) {
 e.printStackTrace () ،
 }
إرجاعخاطئة;
 }
}

تقوم وحدة التحكم أعلاه بأمرين ، فهي تقوم بعملية حسابية على البيانات المستلمة من العرض ، وتقرر البيانات المراد إرجاعها. تستخدم وحدة التحكم أعلاه أيضًا نموذج التطبيق لتخزين الكائنات التي تم إنشاؤها من إدخال العرض ، باستخدام saveEntry () طريقة.

إنشاء عرض التطبيق

// مكتبات جافا
استيراد java.awt. تخطيط الحدود؛
استيراد java.awt. تخطيط الشبكة.
استيراد java.awt.event. حدث
استيراد java.awt.event. برنامج ActionListener
استيراد javax.swing. JButton.
استيراد javax.swing. JComboBox.
استيراد javax.swing. JFrame.
استيراد javax.swing. JLabel.
استيراد javax.swing. JOptionPane ؛
استيراد javax.swing. يانيل.
استيراد javax.swing. JTextField ؛
يمتد GasPriceView من الفئة العامة إلى JFrame بتنفيذ ActionListener {
//attributes
 SerialVersionUID الطويل الثابت الخاص = 1L ؛
 وحدة تحكم GasPriceController الخاصة ؛
 اسم برنامج تشغيل JLabel الخاص ؛
 اسم JTextField الخاص ؛
 JLabel gasAmount الخاص ؛
 كمية JTextField الخاصة ؛
 نوع غاز JLabel الخاص ؛
 JComboBox الخاص اكتب كومبو.
 خاص JButton btnClear ؛
 JButton btnSave الخاص ؛
 سلسلة نهائية ثابتة خاصة [] نوع =
 {"ديزل" ، "ممتاز" ، "عادي"} ؛
// المُنشئ الافتراضي
 public GasPriceView () {
 هذا (new GasPriceController ()) ؛
 }
// المنشئ الأساسي الذي يتسبب في ظهور واجهة المستخدم
 public GasPriceView (وحدة تحكم GasPriceController) {
سوبر ("تطبيق بيع الغاز") ؛
 setDefaultCloseOperation (JFrame. EXIT_ON_CLOSE) ،
 setSize (400500) ؛
 setVisible (صحيح) ؛
this.controller = تحكم ؛
configView () ؛
 }
// إنشاء واجهة المستخدم للتطبيق
 عرض الفراغ الخاص () {
setLayout (جديد BorderLayout ()) ؛
 JPanel pnl = new JPanel (new GridLayout (4،2،2،2)) ؛
driverName = new JLabel ("اسم السائق:") ؛
 pnl.add (driverName) ،
 nameField = جديد JTextField () ،
 pnl.add (nameField) ؛
 gasAmount = new JLabel ("كمية الغاز (جالون):")؛
 pnl.add (gasAmount) ؛
 amountField = new JTextField () ،
 pnl.add (amountField) ؛
 gasType = new JLabel ("نوع الغاز:") ؛
 pnl.add (gasType) ؛
 typeCombo = JComboBox جديد(نوع)؛
 pnl.add (typeCombo) ؛
 btnClear = new JButton ("مسح") ؛
 pnl.add (btnClear) ،
 btnSave = new JButton ("حفظ") ؛
 pnl.add (btnSave) ؛
إضافة (pnl ، BorderLayout. المركز)؛
ActionListener () ،
}
 // يستمع إلى النقر فوق أحد الزرين
 الفراغ العام ActionListener () {
 btnClear.addActionListener (هذا) ؛
btnSave.addActionListener (هذا) ؛
 }
// ينفذ إجراءً إذا تم النقر فوق زر معين
 @تجاوز
 public void actionPerformed (ActionEvent ev) {
إذا (ev.getSource (). يساوي (btnClear)) {
 nameField.setText ("") ،
 amountField.setText ("") ؛
 }
إذا (ev.getSource (). يساوي (btnSave)) {
String gasType = (String) typeCombo.getSelectedItem () ،
 float gasAmount = Float.parseFloat (amountField.getText ()) ؛
 float driverTotal = controller.calculateCost (gasAmount، gasType) ؛
 String driverName = nameField.getText () ،
 JOptionPane.showMessageDialog (null، driverName + "should pay $" + driverTotal)؛
عميل GasPriceModel = new GasPriceModel (driverName ، gasAmount ، gasType ، driverTotal) ؛
Controller.saveEntry (العميل) ؛
 }
}
}

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

تنفيذ تطبيق MVC

يستورد java.awt. EventQueue؛
عامصف دراسي تطبيق {
عامثابتةفارغ رئيسي (سلاسل سلسلة []) {
 EventQueue.استدعاء لاحقا(
الجديد قابل للتشغيل () {
@تجاوز
عامفارغ يركض() { 
 وحدة تحكم GasPriceController = الجديد GasPriceController () ، 
الجديد GasPriceView (تحكم) ؛ 
 }
 });
 }
}

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

سيؤدي ملء واجهة المستخدم بالبيانات ذات الصلة إلى إنشاء واجهة المستخدم المنبثقة التالية:

إذا نظرت إلى يسار الصورة أعلاه ، فسترى أن التطبيق أنشأ أيضًا ملفًا جديدًا يسمى "data.dat." لذلك ، يقوم تطبيق MVC هذا بجمع البيانات من المستخدم من خلال واجهة المستخدم (عرض) ، والتي ترسل تلك البيانات إلى مراقب. تقوم وحدة التحكم بمعالجة البيانات عن طريق إجراء بعض العمليات الحسابية ، ثم تقوم بتخزين تلك البيانات في ملف باستخدام النموذج. متعلق ب: إدخال وإخراج جافا: دليل المبتدئين

إدخال وإخراج جافا: دليل المبتدئين

إذا ألقيت نظرة فاحصة على التطبيق الذي تم إنشاؤه في هذه المقالة ، فهناك العديد من الفوائد الواضحة. بعض هذه الفوائد تشمل:

• قابلية التوسع
• أسهل اختبار التعليمات البرمجية
• إنشاء كود أكثر إيجازًا

لكن هندسة MVC ليست هي نمط التصميم الوحيد المفيد الذي يمكن أن يعزز عملية التطوير الخاصة بك.

كيفية إنشاء تعليمات برمجية قابلة لإعادة الاستخدام في JavaScript باستخدام أنماط التصميم

سيمكنك فهم كيفية استخدام أنماط التصميم من استخدام التعليمات البرمجية القابلة لإعادة الاستخدام في JavaScript. إليك ما تحتاج إلى معرفته.

اقرأ التالي

عن المؤلف