from tkinter import Tk, Frame, Label, Button root = Tk() frame1 = Frame(root) frame1.pack() label1 = Label(frame1, text="hello aosus community") label1.pack() button1 = Button(frame1, text="submit") button1.pack()

root.mainloop()

نلاحظ بدأنا باستيراد المكونات التي سنستخدمها في بناء هذه الواجهة البسيطة

from tkinter import Tk, Frame, Label, Button

ثم عرفنا النافذة الرئيسية والتي أيضا ستقوم بإنشاء tcl interpreter (مفسر للغة tcl) وتعرض لنا الواجهة الرئيسية التي ستحمل كل الواجهات التي سنستخدمها.
وهي عبارة عن instance من الكلاس Tk والذي تحدثنا عنه منذ قليل.

root = Tk()

ثم بعد ذلك عرفنا ثلاثة مكونات في الواجهة؛ Frame, Label, Button
حيث مررنا ال root لل Frame لكي يكون أب له. كما مررنا ال Frame إلى ال Button وال Label لأنه سيكون أب لهما.
نلاحظ أيضا أننا قد مررنا text إلى الكلاس الخاص بالزر والنص وهذا عبارة عن النص الذي يظهرفي النافذة. وسنشرحه لاحقا مع المدخلات الأخرى الممكنة.

# root is the parent of frame1frame1 = Frame(root)frame1.pack()# frame1 is the parent of label1label1 = Label(frame1, text="hello aosus community")label1.pack()# frame1 is also the parent of button1button1 = Button(frame1, text="submit")button1.pack()

قد تتسائل ما هي وظيفة الميثود pack ولم استخدمتها. هذه الميثود تعتبر من أحد طرق التحكم بمواضع العناصر داخل الواجهة. ومن المهم جدا استعمالها على ال widgets لأنها أيضا المسؤولة عن ظهور العناصر في الواجهة، وبدون استعمالها على ال widget فلن تظهر في الواجهة.
يتحكم بال packer (.pack()) بأماكن العناصر داخل الأب. في الوضع الطبيعي تكون العناصر فوق بعضها (يعني متتالية وليست منطبقة فوقها) ويمكن التحكم بمكان ظهور العنصر عبر تمرير side

label1 = Label(frame1, text="hello aosus community")label1.pack(side="left")button1 = Button(frame1, text="submit")button1.pack(side="right")








الـ side تأخذ أربع قيم محتملة 'left', 'right', 'top', 'bottom'.
إذا لم تعطها قيمة فستأخذ افتراضيا 'top' أي أعلى. كما تأخذ pack عدة مدخلات أخرى سنغطيها في وقت لاحق إن شاء الله.
2- Label
ال Label هو أحد عناصر الواجهة، ويستخدم لملء جزء من الواجهة بالنص، كما يمكن استخدامه أيضًا في إظهار الصور.
# pip install Pillow 

from tkinter import Tk, Labelfrom PIL import ImageTk, Image
root = Tk()image1 = Image.open("black-cat-on-top-of-car.jpg")image1 = image1.resize((300, 300))image_ob = ImageTk.PhotoImage(image1)
cat_label = Label(root, image=image_ob)

cat_label.pack()
text_label = Label(root, text="a cute black cat", background="black", foreground="white",underline=2, padx=4, pady=4, height=2, )text_label.pack()root.mainloop()


ونستعرض بعض المدخلات الممكنة لل Label
المدخل
الوصف
text
وهذا هو النص الذي سيظهر في الواجهة
bg, background
كلاهما يقوم بتغيير لون خلفية النص ويمكن استعمال أيهما
fg, foreground
وهذان لتغيير لون النص نفسه ويمكن استعمال أيهما
font
وهذا لتغيير الخط المستخدم في كتابة النص على الواجهة
image
وهذا لعرض صورة في الواجهة مكان ال label
padx
وهذا لإضافة مسافة قبل وبعد النص المراد بداخل ال label وتكون على الجانبين وتكون أيضا بداخل ال label أي تأخذ الألوان المقدمة لخلفية ال label
pady
نفس السابق لكن تضيف المسافة أعلى وأسفل ال label بدلا من يمن ويسار
textvariable
وهذا إذا ما كنت تريد إضافة نص إلى ال label بشكل تفاعلي أي مثلا عند ضغط زر او ما شابه وسنشرحها لاحقا باستفاضة
underline
ويمكن هذا المدخل من إضافة خط أسفل الحرف الذي ستمرر له (الإندكس) مثلا underline=5 أي الحرف السادس
width
لتحديد العرض الخاص بال label وهذا بناء على عدد الأحرف وليس ال pixel أي أن النص لن يسع أكثر من الاحرف الذي تكتبها
height
وهذا لتحديد الطول العمودي الخاص بال label
هذه بعض الخيارات ويوجد المزيد لكن لا يسعنا ذكرها في هذه المقالة.
3- Button
ال Button -أي زر- تمكنك من إنشاء واجهة تفاعلية، حيث يمكنك إضافة حدث لهذا الزر وتغيير الواجهة/الكود بناء على هذا الحدث.
مثلا عند الضغط على زر معين تستطيع تغيير النص. أو تسجيل المستخدم عند ملئه المدخلات وغيرها استخدامات.
تتشارك ال Button مع ال Label في عدة خيارات منها bg fg font height width underline padx pady
image text في حالة ما أردت إظهار صورة في الزر بدلا من النص يمكنك استعمال خيار image لدينا أيضا عدة خيارات أخرى في ال Button نستعرضها في ما يلي:
المدخل
الوصف
activebackground
عن طريق هذا الخيار يمكنك التحكم بلون خلفية الزر عند النقر عليه أو لمسه إذا ما كان بالهاتف
activeforeground
عن طريق هذا الخيار يمكنك التحكم بلون النص داخل الزر عند النقر عليه أو لمسه
bd
ويمكنك هذا الخيار من تحديد حجم الإطار (border) أو الحواف الخاصة بالزر وقيمته الإفتراضية 2
state
ويمكنك هذا الخيار من تحديد حالة الزر حيث يمكن جعل الزر غير ممكن الضغط عليه واستخدامه إلا عند انطباق شروط معينة
command
يمكنك هذا الخيار من إعطاء الزر دالة أو ميثود يتم استدعاءها عند الضغط على الزر
highlightcolor
هذا الخيار يمكنك من تحديد لون الزر عند عمل focus له أي تركيز في الواجهة