مثال لجدول محدد مسبقًا.
سنرى في هذا الدرس مثالاً بسيطًا يوضح كيفية استخدام مكون DataTable، يتيح لنا هذا العنصر ربط جدول بيانات بصفحتنا مثل هذا:
في هذا المثال الأول، سيتم ربط المكون الذي تم تعبئته مسبقًا فقط من فئة الفول الخاصة بنا، وبعد ذلك سيتم عرض كيفية التعامل مع معلوماته ديناميكيًا.
في البداية سنقوم بإنشاء مشروع JSF بالبنية التالية:
كما نرى، تم إنشاء فئتين جافا، أحدهما يتوافق مع فئة الشخص التي تسمح لنا بمعالجة الأشخاص الذين سنعرضهم في جدولنا والآخر يتوافق مع الفول الذي سيسمح لنا بإدارة طاولتنا مع كل منهم الأعمدة والسجلات.
تزودنا فئة Person.java بالبيانات الأساسية للشخص التي سنعرضها في الجدول، وهنا نضيف المجموعة المقابلة وطرق الحصول عليها، بالإضافة إلى مُنشئ بمعلمات لملء الأشخاص مباشرة.
تشير فئة TablaBean.java إلى الجدول وإدارة الأشخاص فيه، ويتم تخزين السجلات المعروضة في نوع الشخص ArrayList والذي، لغرض هذا الدليل، يتم تعبئته في المنشئ.
في ملف Index.xhtml، نقوم بإنشاء مكون DataTable الذي نربط به قائمة الأشخاص مباشرة في القيمة وفي الأعمدة المعنية سمات الحبة المشار إليها في var=”data”، مع كون البيانات هي العنصر الذي يمثل البيانات لكائن الشخص في كل سطر من الجدول.
عند تشغيله سيكون لدينا شيء من هذا القبيل
كما نرى، يتم تقديم المعلومات في وضع الجدول، حيث أننا لم نربط بعد أنماط CSS، فنحن نقدر فقط البنية في الصفوف والأعمدة دون أي نوع من التصميم، ومع ذلك يمكننا إضافة خاصية "الحدود" إلى الجدول و هامش يحتوي على شيء مثل هذا:
نحن نعلم أخيرا أنه يمكننا الاستفادة منها
مثال على إدارة البيانات في DataTable.
سنواصل في هذا القسم المثال السابق حيث سنرى كيفية التعامل مع بيانات الجدول لتنفيذ عمليات شائعة مثل تسجيل المعلومات أو تعديلها أو حذفها.
أضف أشخاصا.
لتسجيل الأشخاص، سنقوم بتعديل صفحة Index.xhtml الخاصة بنا والتي سنربط بها نموذج تسجيل الأشخاص. نقوم بذلك عن طريق ربط مكونات الإدخال والاختيار في لوحة الشبكة المرتبطة بكائن "myPerson" الذي يتم إرسال البيانات المختلفة إليه. سجل السمات، ثم يتم ربط زر يستدعي طريقة "addPerson()" التي ستسمح تم تسجيل شخص جديد في نظامنا.
كما نرى يتم إضافة هذه العناصر الجديدة قبل أن يحصل DataTable على نتيجة مثل هذا:
بعد تعديل الفهرس، سنقوم بإجراء التغييرات اللازمة على فئة TableBean.java، كما في هذا المثال سنستمر في استخدام مستوى النطاق الافتراضي، لذلك سنجعل قائمة الأشخاص ثابتة بحيث يمكن التلاعب بها دون أي مشاكل، بالإضافة إلى ذلك، سنقوم بإزالة حشو القائمة لأن الفكرة هي أن تكون قادرًا على تسجيل الأشخاص من خلال نموذج التسجيل.
كما نرى، عند تعريف القائمة على أنها ثابتة، فإننا ننشئ مثيلًا لها على مستوى الفصل، ولا نفعل ذلك في المُنشئ حيث سيتم استدعاؤه في مناسبات مختلفة بواسطة jsf الخاص بنا مما قد يتسبب في إنشاء مثيل جديد للقائمة والذي قد يؤدي إلى يتسبب في فقداننا للمعلومات التي يمكن أن تحتوي عليها.
بالإضافة إلى ذلك، أضفنا كائنًا من النوع Person لنتمكن من إدارة بيانات التسجيل وأضفنا طريقة "aggregarPersona()" التي تسمح بإضافة عنصر جديد إلى القائمة ويتم استدعاؤه من زر jsf، وبعد ذلك نقوم بإنشاء مثيل جديد لـ كائن "minhaPessoa" الذي سيسمح بتنظيف استمارة التسجيل.
عند تشغيل النظام سنرى السلوك التالي:
في البداية يكون النموذج فارغًا ويتم عرض رأس جدولنا أيضًا ولكن بدون أي محتوى (تذكر أننا قمنا بإلغاء ملء القائمة)، لذلك لا يظهر الرأس عندما لا يكون هناك أشخاص مسجلون بعد، لذلك نستخدم خاصية "تم العرض" حيث نتحقق من أن حجم القائمة أكبر من الصفر، وإلا فلن تظهر الرؤوس. (ستتم مناقشة تشغيل هذه الخاصية بالتفصيل لاحقًا)
عندما نضيف أشخاصًا، يتم تخزينهم في القائمة وعرضهم في DataTable
استبعاد الأشخاص.
بعد أن نجحنا في تسجيل الأشخاص في قائمتنا، يمكننا إزالتهم منها، ولهذا سنضيف عمودًا جديدًا من الإجراءات في dataTable الخاص بنا والذي سيحتوي على رابط للطريقة "eliminarPerson()" التي سنقوم بإنشائها في الفول الخاص بنا
للقيام بذلك، نقوم بتعديل ملف Index.xhtml حيث سنضيف بعد عمود "الجنس" عمود "الإجراءات"
كما نرى، نستخدم مكونًا
لاحقًا، في فئة TablaBean.java، أضفنا طريقة "eliminarPersona()" التي تستقبل كائن الشخص الذي نريد حذفه كمعلمة، وهذا يتوافق مع "البيانات" التي نرسلها من jsf، ويعادل الشخص الموجود في السطر الذي نريد حذفه، ثم إزالته من القائمة.
عند تشغيل النظام سيكون لدينا ما يلي:
وفي كل مرة نقوم بحذف سجل من خلال الرابط المقابل، سيتم تحديث الجدول
تحرير الأشخاص.
بعد تسجيل الأشخاص وحذفهم من قائمتنا بنجاح، يمكننا تعديلهم، ولهذا سنقوم بتعديل الجدول الخاص بنا مما يجعله قابلاً للتحرير عندما نريد تحديث بعض البيانات، ولهذا سنستخدم خاصية “rendered” مرة أخرى والتي ستظهر أو إخفاء الخيارات القابلة للتحرير حسب ما يقرره المستخدم.
كما نرى في كل عمود، يتم إضافة مكون
في حالتنا، يقوم "data.edit" باستدعاء متغير منطقي (تحرير) أضفناه في فئة الشخص، إذا كانت الخاصية صحيحة فسوف تظهر
ويجب أن يتم الأمر نفسه بالنسبة لأعمدة المهنة والرواتب والجنس على التوالي، حيث بدلاً من إضافة أ
وبالمثل، فإن الخاصية المقدمة ملزمة بإظهار التحرير والسرد أو إظهار التسمية اعتمادًا على الحالة.
بعد ذلك، تم تعديل عمود "الإجراءات" حيث كان لدينا في السابق رابط "للحذف" فقط، والآن سنضيف رابطين آخرين، أحدهما "للتحرير" والآخر "لحفظ" المعلومات بعد تحريرها.
كما نرى، يوجد الآن 3 روابط لطرق التحرير والحفظ والحذف على التوالي، ومع ذلك فإن التحرير والحفظ لهما الخاصية المعروضة التي تجعل رابطين فقط من الروابط الثلاثة مرئيين في المرة الواحدة (تذكر أن المقدمة تحتوي على صواب أو خطأ اعتمادًا على بشرط ) لذلك سيظهر رابط الحذف دائمًا بشكل افتراضي لأنه لا يحتوي على الخاصية المعروضة، بينما لن يتم رؤية التعديل والحفظ معًا أبدًا. (يسمح لك بإضافة مسافة بين الروابط)
داخليًا، على المستوى الرسومي، سيبدو جدول البيانات كما يلي:
على الرغم من أنه يمكنك رؤية جميع المكونات معًا بيانيًا، إلا أنه من المهم أن تكون واضحًا جدًا أن الخاصية المقدمة ستعرض المكونات فقط اعتمادًا على القيمة الحقيقية أو الخاطئة في ذلك الوقت.
بعد تعديل ملف Index.xhtml، حان الوقت الآن لتعديل فئة Person.java التي تمت إضافة خاصية "تحرير" إليها والتي يستخدمها العارض المذكور أعلاه.
كما نرى، ترتبط السمة المنطقية الجديدة بالمجموعة الخاصة بها وget. بالإضافة إلى ذلك، لضبط بنية التمرين، أضفنا الخاصية إلى المُنشئ ذو المعلمات، على الرغم من أنها لم تعد مستخدمة في هذه المرحلة من التمرين.
بهذه الطريقة، في كل مرة يتم فيها تقديم =”#{data.edit}” في ملف Index.xhtml، سيتم استدعاء هذا المتغير، مما يسمح بإظهار المكونات أو إخفائها اعتمادًا على الحالة.
أخيرًا، ومع التغييرات السابقة، بدأنا في تعديل فئة Bean حيث يجب أن نضيف الطرق المقابلة لها عند الحذف والحفظ والتي يتم استدعاؤها من حقل "Actions".
كما نرى، يستقبل أسلوب التحريرPersona() كائن شخص (من استدعاء jsf، كما هو الحال في أسلوب الحذف) ويتم تعديل خاصية "تحرير" الخاصة به عن طريق إرسال القيمة true إليه، مما سيسمح لهذا السجل بالإخفاء ال
من ناحية أخرى، ستكون طريقة savePersona() مسؤولة عن تغيير كل خاصية "تحرير" لجميع الكائنات الموجودة في القائمة إلى false بحيث تتم استعادة dataTable بقيم الأشخاص وليس بالعناصر القابلة للتحرير.
عند تشغيل النظام سيكون لدينا ما يلي:
وعند الضغط على تعديل يتغير النظام إلى:
كما هو واضح، عند النقر على رابط التحرير، تظهر المكونات القابلة للتحرير تلقائيًا بينما يتم إخفاء المكونات غير القابلة للتحرير، وبالمثل يختفي رابط التحرير لإفساح المجال لرابط الحفظ كما هو موضح أعلاه.
و مستعد!!!
على مدونتي وعلى قناتي ، كنت أشارك مواد حول لغة البرمجة الرائعة هذه ، يمكنك العثور على العديد من المقالات و مقاطع فيديو من البدايةأريكم كيفية تنزيل الأدوات اللازمة لبدء البرمجة ، ننتقل أكثر وأكثر من خلال المفاهيم الأساسية ، من خلال مفاهيم البرمجة الشيئيةالمعايير المواضيعهياكل البيانات ، والوصول إلى قواعد البيانات من بين أمور أخرى ، إلى البناء التطبيقات ذات واجهات المستخدم.
كما يمكنك العثور على ملف بالطبع من البداية حيث أقوم بتدريس كيفية إنشاء تطبيقات الجوال على نظام Android من خلال تسلسل فيديو خطوة بخطوة يتم تحديثه باستمرار.
والآن سأبدأ التسلسل من البداية حيث سندخل عالم إصدار java Enterprise ، ونوضح لك كيفية إعداد بيئة التطوير وكيفية إنشاء تطبيقات الويب الأولى باستخدام Java.
لهذا السبب أدعوك لزيارة codejavu.blogspot.com ، للزيارة قناتي كريستيان هينو وأنهم يدركون تمامًا التكميلات الجديدة
قد يثير اهتمامك أيضًا.
هل هناك أي شيء تريد إضافته أو التعليق على هذا الإدخال؟ لا تتردد في القيام ....وإذا أعجبك ، أدعوك لمشاركته ص اشترك من خلال النقر على زر "الانضمام إلى هذا الموقع" للاستماع إلى المزيد من المنشورات مثل هذه 😉