نظرة عامة

مرحبا بك في العالم المثير في واجهات المستخدم مع تك-إنتر هذا الفصل يطمح الى جعلك ملم بالواجهة الرسومية الوجهة المدمجة مع جميع مكاتب البايثون. طريقة نطق اسم الواجهة باللغة الانجليزية كالتالي (tea-kay-inter) واجهة البايثون للـTk وهي واجهة Tcl\Tk.

تك-إنتر مناسب للعديد من النطاقات من برامج سطح المكتب الصغير الى الرسم البياني العلمي والبحث العلمي في العديد من المجالات عندما يقوم شخص ما بتعلم البايثون يحتاج الى تعلم واجهة مستخدم و تك-إنتر تبدوا الطريقة الاسرع والاسهل في الاستخدام.

تك-إنتر اداة رائعة في برمجة واجهة المستخدم بلغة بايثون المميزات التي تجعل تك-انتر الخيار الافضل لبرمجة واجهة المستخدم:

  1. الاسهل في التعلم (اسهل من اي واجهة مستخدم في بايثون)
  2. الاكواد قصيرة وتستطيع انتاج الكثير من الاشياء بها
  3. نظام طبقي يجعل من السهل الفهم
  4. امكانية الاستخدام على اي نظام تشغيل
  5. مدمجة مع البايثون مما يعطي سهولة في الوصول

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

الاشياء المهمة التي سوف نتعلمها في هذا الفصل يشمل التالي:

  • فهم المبدا من root window او النافذة الجذرية والـ main loop
  • فهم المكونات – نقصد المكونات الرئيسية لعمل برنامج
  • فهم الخيارات المتاحة من قائمة المكونات (ماذا لدينا من مكونات)
  • عمل layout للبرنامج اي طريقة عرض المكونات على النافذة باستخدام geometry managers
  • برمجة الاحداث event و الـcall back لتفعيل خصائص البرنامج
  • عمل الانماط والاشكال لتخصيص البرنامج

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

 واجهة المستخدم – الصورة الكبيرة

سوف نستخدم نسخة بايثون 3.12.2 وهي من نسخ الجيل 3 لبايثون والذي بدوره يختلف عن الجيل الثاني. من هتا سوف نحتاج الى معرفة ثلاثة اشياء على كل مصمم واجهة برنامج تعلمها.

  • ما هي الممكونات التي يجب ان تظهر على النافذه؟

هذا يشمل المكونات التي سوف تختارها لعمل الواجهة وتشمل هذه المكونات الازرار, حقول الادخال, خانات الاختيار, زر الراديو, شريط التمرير في تك-انتر المكوانت المضافة في النافذة تسمى widget وكلمة widget هي اختصار لكملة window gadgets وهي المكونات التي توضع على النافذة او frame.

  • اين يجب ان تذهب هذه المكونات؟

يشمل هذا اختيار مكان تواجد المكون في الشاشة او الـ frame وهيكلة العرض والترتيب على النافذة وهو اختصاص geometry manager

  • كيف تتعامل المكاونات مع بعضها البعض وكيف تتصرف عند حدوث امر؟

وتشمل اضافة خصائص للمكون او طريقة عمل للمكون على سبيل المثال عند الضغط على زر كيف سوف يتصرف هذا الزر او عند استخادم شريط التمرير كيف سوف يتحرك او عند استخدام زر الراديو او خانات الاختيار كيف سوف يتصرف البرنامج عند اختيار احدها طريقة عمل السابق في تك-انتر يسمى command binding او event binding باستخدام callbacks.

الصورة التالية توضح المكونات الثلاثة للواجهة الرسومية

النافذة الجذرية – لوحة الرسم الخاصة بك

رسم واجهة مستخدم ليس الا فن ومثل اي فن تحتاج الى لوحة للرسم عليها واظهار افكارك هذه اللوحة تسمى النافذة الجذر هدفنا الاول هو كيفية جعل اللوحة الجذر في وضع الاستعداد

رسم النافذة الجذر هو شئ سهل فقط تحتاج الى ثلاثة سطور:

import tkinter as tk
root = tk.Tk() #line 2
root.mainloop()

خزن الكود السابق باختصار py. باستخدام IDLE اذا كنت لا تعلم كيف او لا تملك البرنامج يمكن الرجوع الى الهامش والبحث عن تنصيب البايثون واستخدام الـIDLE والان مع شرح الكود السابق.

  • في السطر الاول قمنا باستدعاء وحدة (مكتبة) تك-انتر في السطر الاول وسميناه tk وهذه الطريقة alias  والان يمكننا استخدام المكتبة والوصول الى كل الدوال والمتتغيرات التابعة لها باضافة الـ alias tk في قبل الكلمة كما في السطر الثاني ()tk.Tk.
  • في السطر الثاني قمنا بتعريف متغير من class تك-اينتر وهذا قام بانشاء النافذة الجذر كما في الصورة السابقة طبقا للتقاليد يتم تسمية النافذة الجذر بالأ root window ولكن انت حر في تسميتها.
  • في السطر الثالث قمنا باستدعاء event loop وهي mainloop وهي المسؤولة عن ابقاء النافذة ظاهرة لو قمت بحذف الدالة سوف تختفي النافذة بعد دقيقة من التشغيل عند ما يتم ايقاف السكربت وهذا يحدث بشكل سريع حتى انك لن ترى النافذه على الشاشة استخدام الـ main loop يبقي على النافذه تعمل حتى الخروج من من البرنامج بالضغط على زر الاغلاق.
  • تك-انتر ايضا يقبل بكتابة ()mainloop بدلا من كتابة ()root.mainloop.

والان مبروك لقد قمت بانشاء اول كائن لك وهو نافذة الجذر بما انك الان مستعد للرسم على اللوحة الام root window لذلك قم بتحريك مخيلتك للرسم على اللوحة.

قم بحفظ الثلاثة سطور في مخيلتك لانها الاساس في انشاء الواجهات وهي من تستضيف المكونات في داخلها وهي الهيكل الرئيسي في رسم الواجهات جميع الاكواد التي سوف تنشئ واجهة تك-انتر سوف تكون بين السطر الثاني والثالث.

المكونات – الجزء الرئيسي من الواجهة الرسومية

بما اننا الان نملك النافذة الجذر من البرنامج جاهزة حان الوقت للتفكير في السؤال ما هي المكونات التي يجب ان تظهر في هذه النافذة في مسطلحات التك-انتر هذه المكونات تسمى widgets.

الطريقة التي يتم اضافة فيها الودجات widgets  او الشكل العام هو كالتالي:

my_widget = tk.Widget-name (its container window, ** its configuration options)

في المثال التالي سوف نقوم باضافة مكونان زر و نص label للنافذة الام root container وايضا لاحظ كيف اضيقة الاكواد الى الاكواد السابقة نعني الهيكل الرئيسي الذي تعلمناه في المثال السابق:

import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="I am a label widget")
button = tk.Button(root, text="I am a button")
label.pack()
button.pack()
root.mainloop()

تشغيل البرنامج السابق سوف ينتج الشاشة التالية حيث تحتوي على زر ونص label:

  • في المثال السابق اضفنا الكائن من النوع label الى النافذة والكملة root تعني اضيفها الى النافذة الجذر او النافذة الام اما الخيار الثاني هو اضافة النص على الكائن label باستخدام الـoption text
  • وبنفس الطريقة اضفنا الزر الى النافذة الام
  • في السطر الخامس استخدمنا الدالة ()pack لاهميتها في تحديد موقع الزر والنص على النافذة سوف نناقش الدالة pack والعديد من الدوال الاخرى عند دخلونا في فصل مهام geometry manager ولكن من الجدير ملاحظة انه يجب تحديدها للمكونات حتى تظهر.

بعد الخصائص المشتركة في المكونات

انتبه ان الخصائص المذكورة مهمة ومشتركة بين مكونات النافذة (الازرار, الحقول, القوائم المنسدلة…الخ):

  • جميع المكونات هي كائنات تاتي من class او كلاس فعلى سبيل المثال button = button(its_parent) تاتي من الكلاس button
  • كل المكونات تحتوي على خيارات (options) والتي تمثل طريقة تصرفها وشكلها وهذا يشمل خصائص مثل النص في المكون, الحجم الخط, اللون على سبيل المثال الزر كمكون يملك خصائص لتغير النص الخاص فيه والتحكم في الحجم تغير اللون الخارجي والداخلي وتغير الاطار.
  •  لتغير هذه الخصائص يمكنك وضع القيم بشكل مباشر عند تكوين المكون ويمكنك تغيرها بعد ذلك باستخدام الدالة ()config.او ()configure. مع ملاحظة ان الدالة الثانية هي استنساخ للدالة الاولى وتقوم بنفس العمل.

جميع مكونات tkinter

طرق كتابة المكون

هناك طريقتان لعمل المكون في التك-إنتر:

الاولى عن طريق كتابة سطر واحد باسم المكون واضافة طريقة العرض على النافذه باستخدام الدالة ()pack او اي طرقة اخرى للعرض باستخدام (geometry manager) كما هو موضح في الشرح التالي باستخدام المرجع my_label:

my_label = tk.Label(root, text="I am a label widget")
my_label.pack()

الطريقة الثانية كتابة المكون مع طريقة العرض الاثنين معا في سطر واحد بدون مرجع my_label:

tk.Label(root, text="I am a label widget").pack()

نمط كتابة المكون في التك-انتر متشابه الى حد كبير لنعطيك فكرة عن طريقة كتابة بعد المكونات المستخدمة بكثرة في تك-انتر انظر الى الكود في الاسفل:

Label(parent, text="Enter your Password:")
Button(parent, text="Search")
Checkbutton(parent, text="Remember Me", variable=v, value=True)
Entry(parent, width=30)
Radiobutton(parent, text="Male", variable=v, value=1)
Radiobutton(parent, text="Female", variable=v, value=2)
OptionMenu(parent, var, "Select Country", "USA", "UK", "India","Others")
Scrollbar(parent, orient=VERTICAL, command= text.yview)

هل لاحظة التشابه في الكتابة للمكون هل يمكنك ملاحظة الاختلافات؟ من المهم التعرف على طريقة كتابة المكون وللتذكير سوف انظر الى الكود التالي لمعرفة طريقة كتابة المكون بصفة عامة:

<pre class="wp-block-syntaxhighlighter-code">Widget-name(its_parent, **its_configuration_options)<br /><br /><br /></pre>

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.