شريط أزرار التحكم

شريط أزرار التحكم

حينما شرعت في تطوير المشروع مفتوح المصدر Subtitle Edit لجعله محررا للفديو، احتجت إلى تطوير الفئة التي تقوم بعرض الفديو والترجمة وهي الفئة VideoPlayerContainer.. تجدون كودها الأصلي هنا.

أول ما تلاحظونه هو أن كود هذه الفئة طويل نوعا، لأن فيه تعريف كل مكونات نافذة الفديو معا، وهي:

- اللوحة Panel التي سيتم عرض الفديو عليها.

- اللوحة التي سيتم عرض الترجمة عليها.

- لوحة التحكم في تشغيل الفديو وما عليها من أزرار.

الأسوأ من هذا، أن كل زر يوضع على لوحة التحكم، يتكون من ثلاث صور:

1- صورة الزر في الوضع العادي

2- صورة الزر عند مرور الفأرة فوقه.

3- صورة الزر عند ضغطه.

ولكي يعمل الزر بشكل صحيح، يجب كتابة الكود الذي يعرض الصورة المناسبة والكود الذي ينفذه الزر عند ضغطه.

والمثير للعجب، هو أن هذا الكود الطويل تم تكراره ست مرات (لستة أزرار) مع أنه كود متشابه، الاختلاف الأساسي فيه هو أسماء الصور التي يعرضها كل زر، والوظيفة التي ينفذها الزر عند ضغطه!

وبسبب هذا التنظيم السيئ للكود، عندما حاولت تعديل شكل أحد الأزرار، حدثت أخطاء مزعجة، واضطررت إلى إلغاء تعديلاتي، وقررت أن أعيد تنظيم هذا الكود بشكل برمجي أكثر كفاءة، باستخدام البرمجة الكائنية Object Oriented Programming أو اختصارا OOP.

مبدئيا، قمت بتعريف فئة خاصة للزر، يمكن إخبارها بالصور المطلوب أن يعرضها الزر في حالاته الثلاث، وعند ضغط هذا الزر يطلق حدثا Event نستطيع من خلاله تنفيذ الوظيفة التي نريدها.

بالنسبة للصور، يتم حفظ الصور الثلاث لكل زر في موارد النافذة Resources.. فمثلا، يتم حفظ صور زر التشغيل Play بالأسماء التالية:

pictureBoxPlay.Image

pictureBoxPlayOver.Image

pictureBoxPlayDown.Image

نفس الحال بالنسبة للزر Pause:

pictureBoxPause.Image

pictureBoxPauseOver.Image

pictureBoxPauseDown.Image

كما تلاحظ، الاختلاف الوحيد بين مجموعتي الأسماء هو في الجزء Play و Pause.. وهذا معناه أننا لو أرسنا إلى فئة الزر النص "Paly" فقط فيمكننا تكوين أسماء الصور الثلاث بتشبيك النصوص!.. وهذا هو الحال نفسه مع باقي الأزرار.

وقد أسميت فئة الزر ControlButton، وقد جعلتها ترث فئة اللوحة Panel لأني سأضيف عليها ثلاثة مربعات صور PictureBoxes.. ستجدون كود هذه الفئة في المشروع المشار إليه في نهاية المنشور.

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

1- من الصفر إلى الاحتراف فيجوالبيزيك دوت نت 2015

2- من الصفر إلى الاحتراف سي شارب 2015

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

كما أنشأت فئة ثالثة لعرض شريط التقدم وشريط الصوت، أسميتها ControlBar.

ولم أتوقف هنا، بل أنشأت فئة للوحة التحكم نفسها، لأضع فيها كل الكود الذي يضيف الأزرار وشريط التقدم وشريط الصوت وغيرها من اللافتات، ويحدد مواضعها ويتحكم في وظيفتها، بحيث أعزل كل هذا عن الفئة VideoPlayerContainer فتصير كل وظيفة معزولة عن الأخرى، ويصير الكود أبسط فهما وأسهل تصحيحا وتطويرا.

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

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

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

يمكن تحميل المشروع (يوجد منه نسخة سي شارب ونسخة فيجوال بيزيك) من هذا الرابط.

ويمكن رؤية استخدام شريط التحكم في نافذة تشغيل الفديو بتحميل برنامج محرر الفديو والترجمة من هنا