حاوية العنوان label وصناديق المدخلات Entry في واجهة المستخدم الرسومية في بايثون

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

هذه المقالة جزء من سلسلة مقالات تشرح أساسيات مكتبة TKinter لبناء واجهات رسومية في بايثون، وإليك فهرس السلسلة كاملة:

واجهات المستخدم الرسومية في بايثون باستخدام TKinter.
مدخل إلى عناصر واجهات المستخدم الرسومية Widgets في بايثون.
حاوية العنوان label وصناديق المدخلات Entry في واجهة المستخدم الرسومية في بايثون.
الأزرار Buttons ومربعات الرسائل messagebox في واجهة المستخدم الرسومية في بايثون.
مربعات الاختيار وأزرار الانتقاء والقوائم في واجهة المستخدم الرسومية في بايثون.

حاوية العنوان label

تعد حاوية عنوان label من أسهل العناصر التي يمكن إضافتها إلى النافذة الرئيسية وتُستخدم لتوضيح عناوين صناديق المدخلات Entry أو لعرض مخرجات نصية أو صورة.

إنشاء حاوية العنوان داخل النافذة

يتم اختيار اسم الكائن المطلوب ليمثل حاوية العنوان ويستخدم الصنف Label من مكتبة Tkinter ، ويعطى الصنف أولًا المكان الذي نريد وضع الحاوية فيه وهو النافذة الرئيسية، ومن ثم النص المراد عرضه داخل الحاوية باستخدام الخاصية text على النحو التالي:

Label_name=Label(main_window, text="النص")

تنشئ الشفرة التالية حاوية عنوان تعرض عبارة (واجهات المستخدم الرسومية في بايثون) ومن ثم تضعها على النافذة الرئيسية باستخدام الدالة pack:

from tkinter import *

main_window = Tk()
main_window.title(" حاوية العنوان ")

First_Label = Label(main_window, text= "واجهات المستخدم الرسومية في بايثون ")
First_Label.pack()

main_window.mainloop()

بتشغيل الشفرة السابقة نحصل على النافذة التالية:

حاوية العنوان

خصائص حاوية العنوان label

يمكننا تعديل الكثير من خصائص مظهر حاوية العنوان، النقاط التالية تستعرض أهم الخصائص التي من الممكن استخدامها:

اللون

بالإمكان تغيير لون النص والذي يعرف باسم foreground ويمكن كتابته اختصارًا fg، وكذلك تغيير لون الخلفية والذي يعرف باسم background ويكتب اختصارًا bg، ونستخدم إما صيغ نصية للألوان فنكتب اسم اللون المطلوب مثل:

"white", "black", "red", "green", "blue", "cyan", "yellow", "magenta"

أو يمكننا استخدام سلسلة تحدد نسبة الأحمر والأخضر والأزرق بالأرقام الست عشرية. على سبيل المثال:

"#FFFF00"  أصفر
"#FFFFFF" أبيض
"#00FF00" أخضر

نوع الخط

يُعرف الخط باستخدام الخاصية font وتعطى قيمة صفوف tuple مكونة من اسم الخط وحجمه، ومن الممكن تحديد ما إذا كان الخط عريضًا bold أو مائلًا italic مثال:

("Helvetica", "16") 
("Times", "24", "bold italic")

شكل مؤشر الفأرة

بالإمكان التحكم بشكل المؤشر أثناء مروره على حاوية العنوان باستخدام الخاصية cursor والتي من الممكن أن تأخذ قيمًا مختلفة مثال على بعض القيم التي من الممكن إسنادها لها:

 "circle", "clock", "cross", "dotbox", "watch", "heart"

وبطبيعة الحال قد يختلف شكل المؤشر اختلافًا طفيفًا مع اختلاف نظام التشغيل المستخدم.

الحدود الخارجية والداخلية

تترك الخاصية pad مساحة حول العنصر بمحيطه الخارجي عبر ضبط الخاصيتين التاليتين:

pady تترك مساحة حول العنصر على الإحداثي الصادي.
padx تترك مساحة حول العنصر على الإحداثي السيني.

وتوجد أيضًا الخاصية ipad التي تترك مساحة حول العنصر بمحيطة الداخلي عبر ضبط الخاصيتين التاليتين:

ipady تترك مساحة بين العنصر وحدوده الداخلية على المحور الصادي.
ipadx تترك مساحة بين العنصر وحدوده الداخلية على المحور السيني.

وتستخدم هذه الخصائص مع الدالة Pack التي ستضع الحاوية على النافذة الرئيسية.

سنقوم بتجربة الخاصيات السابقة في برنامج متكامل، سنضيف رقة تعريف مكتوب بها نص بسيط بحجم 30 ونوع خط Stencil ونجعله ثخينًا ومائلًا، ونحدد لون الخلفية إلى أزرق باستخدام الصيغة النصية، مع لون نص أبيض باستخدام نظام الأرقام الست عشرية، ومؤشر فأرة يتغير إلى شكل نجمة عند مروره على حاوية العنوان، وسنترك مساحة حول الحاوية من حدودها الداخلية والخارجية، ستكون الشفرة على النحو التالي:

from tkinter import *

main_window = Tk()
main_window.title(" حاوية العنوان ")

First_Label = Label(main_window, text="Sample text ",\
font=("Stencil", "30", "bold italic") ,\
           fg ="#FFFFFF" , bg="blue", cursor ="star",)

First_Label.pack(padx=50, pady=50 ,ipadx=100,ipady=100 ,side= TOP)

main_window.mainloop()

عند تشغيل الشفرة سنحصل على الشكل التالي:

حاوية العنوان مخصصة

تغيير النص

قمنا بتحديد النص الذي نرغب بظهوره في حاوية العنوان أثناء إنشائها من خلال خاصية text، بالإمكان كذلك جعل النص فارغًا عند الإنشاء وتحديده في خطوة لاحقة، لتنفيذ ذلك نستخدم الخاصية textvariable ونسند لها قيمة كائن من الصنف StringVar، والذي نقوم بتعريفه ونختار له اسمًا لنفترض أنه mytext فتكون الشفرة على النحو التالي:

Mytext= StringVar()
Label_name=Label(main_window, textvariable=mytext)

نستطيع إسناد قيمة له في خطوة لاحقة باستخدام الدالة set كما يلي:

Mytext.set("sample text")

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

from tkinter import *

main_window = Tk()
main_window.title(" حاوية العنوان  ")

Mytext= StringVar()
First_Label = Label(main_window, textvariable=Mytext,\
font=("Stencil", "30", "bold italic") ,\
           fg ="#FFFFFF" , bg="blue", cursor ="star",)

First_Label.pack(padx=50, pady=50 ,ipadx=100,ipady=100 ,side= TOP)
Mytext.set("sample text")

main_window.mainloop()

إدراج صورة

بالإمكان استبدال صورة بالنص الموجود في حاوية العنوان ونحتاج لفعل ذلك تعريف كائن من الصنف PhotoImage بتسميته باسم myphoto و سنعطيه باستخدام الخاصية file مسار الصورة (مكان تواجدها بالجهاز) على النحو التالي:

myphoto = PhotoImage(file='Photo\path')

ومن ثم نستخدم الخاصية image أثناء تعريف الحاوية ونسند لها قيمة الكائن الذي أنشأناه ستكون الشفرة كاملة على النحو التالي:

 from tkinter import *

main_window = Tk()
main_window.title(" إدراج صورة ")

myphoto = PhotoImage(file='Hsoub.png')
First_Label = Label(main_window,image=myphoto)
First_Label.pack(padx=50, pady=50 ,ipadx=100,ipady=100 ,side= TOP)

main_window.mainloop()

ونحصل على النتيجة التالية:

حاوية عنوان بصورة

استخدمنا في المثال السابق الصورة المسماة Hsoub.png وكانت موجودة في نفس مسار وجود ملف الشفرة، لذلك وضعنا اسمها مباشرة، ولو كانت في مكان مختلف لقمنا بتحديد مكان وجودها، للأسف الكائن PhotoImage يدعم فقط صيغ محدودة وهي: GIF, PGM, PPM, PNG

ولو أردنا أن نعرض نصًا وصورة في نفس الحاوية يجب علينا أن نستعين بالخاصية compound والتي تحدد مكان ظهور الصورة بالنسبة للنص وتأخذ قيمة من الاحتمالات التالية:

'top','bottom', 'left', 'right', 'center','none'

يعرض السطر التالي الصورة فوق النص:

First_Label = Label(main_window,image=myphoto ,
                    text='شعار شركة حسوب' ,compound='top')

وتكون النافذة بالشكل التالي:

حاوية مدمجة

صناديق المدخلات Entry

تعتبر صناديق المدخلات من العناصر الأساسية لواجهات المستخدم الرسومية، لأنها تمكننا من قراءة المدخلات التي يدخلها المستخدم عبر/من لوحة المفاتيح، وتكون على شكل صندوق يسمح للمستخدم أن يدخل فيه نصًا.

إنشاء صناديق المدخلات داخل نافذة

يجب علينا تعريف كائن من الصنف Entry من مكتبة Tkinter حتى ننشئ مُدخلًا، ويُعطى الصنف أولًا المكان الذي نريد وضع المدخل فيه وهو النافذة الرئيسية، ومن ثم بإمكاننا تحديد عدة خيارات للمدخل، ويوضح السطر التالي عملية الإنشاء:

First_Entry = Entry(main_window, option.........)

يسبق صندوق المُدخلات في الغالب حاوية عنوان لبيان الغرض منه أو ما الذي يتوجب على المستخدم إدخاله، ويتم الاستغناء في بعض الحالات عن الحاوية وتبديلها بنص يوضع داخل الصندوق نفسه يبين الغرض منه، ويتم ذلك باستخدام الدالة insert وإعطائها مكان النص المراد ظهوره (يعطى قيمة صفر كبداية المدخل) وتعطى أيضًا النص المراد كتابته على النحو التالي:

First_Entry.insert(0,’text’)

ترسم الشفرة التالية صندوق مدخلات ليدخل المستخدم اسمه فيه على سبيل المثال ومن ثم يضيفه على النافذة الرئيسية باستخدام الدالة pack:

from tkinter import *

main_window = Tk()
main_window.title(" إدراج مدخل")

First_Entry = Entry(main_window )
First_Entry.insert(0,'الاسم')
First_Entry.pack()

main_window.mainloop()

يظهر الشكل التالي عند تشغيل الشفرة:

صندوق إدخال

خصائص صندوق المدخلات

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

كما يمكننا تعديل حدود الصندوق باستخدام الخاصية bd لتكون أكثر سمكًا حيث أن القيمة الافتراضية لها هي 2، وكذلك نستطيع تغيير الحالة للصندوق باستخدام الخاصية state حيث يكون الصندوق فعالًا ويسمح بالكتابة فيه بالقيمة normal وهي الافتراضية، ويمكن تغييرها للقيمة disable والتي تجعله غير فعال ولا يسمح بالكتابة فيه.

بتطبيق ذلك، يرسم السطر التالي صندوق مدخلات بحدود عرض بقيمة 5 مع تعطيل خاصية قبول المدخلات فيه:

First_Entry = Entry(main_window, bd=10 , state="disable")

ويكون بالشكل التالي:

صندوق ادخال مخصص

تمكننا الخاصية selectforeground من تحديد لون النص والخاصية selectbackground من تحديد لون خلفية النص المدخل إذا ماتم تحديده من المستخدم.

الحصول على قيمة المُدخلات

لنحصل على قيمة المدخل من المستخدم نستخدم الدالة get والتي ترجع ما أدخل في الحقل بصيغة نص:

First_Entry.get()

تُسند قيمة مدخلات المستخدم غالبًا إلى كائن من الصنف StringVar ونقوم بإعطائه للخاصية textvariable بعد عملية تعريفه على النحو التالي:

mytext = StringVar()
First_Entry = Entry(main_window, textvariable=mytext)

ونستطيع استخدام الدالة get معه أيضًا للحصول على قيمة المدخل:

mytext.get()

يجب الانتباه إلى أن القيمة التي تعيدها الدالة get تكون على صيغة نص كما سبق وأشرنا، فعند إدخال الأرقام يجب تحويلها من نص إلى رقم باستخدام الدالة int أو الدالة float حسب نوع القيمة إذا ما أردنا استخدامها في العمليات الحسابية.

يمكننا إضافة أهمية على المدخل بزيادة التركيز عليه باستخدام الدالة focus والتي ستقوم تلقائيًا بوضع المؤشر على المُدخل ليتمكن المستخدم من الكتابة مباشرة على النحو التالي:

First_Entry.focus()

إخفاء معلومات المدخلات

تكون بعض القيم التي يدخلها المستخدم حساسة ويجب إخفائها أثناء الإدخال مثل كلمات السر مثلًا ويمكننا عمل ذلك باستخدام الخاصية show ونعطيها قيمة الرمز أو الحرف الذي نريد ظهورة، في المثال التالي سيظهر الرمز * بدلًا مما يقوم المستخدم بإدخاله:

First_Entry = Entry(main_window, textvariable=mytext, show='*')

استجابة صندوق المدخلات

نستطيع ربط صندوق المدخلات بدالة معينة تتنفذ عندما يقوم المستخدم بالنقر على زر الإدخال Enter ونستخدم الدالة bind لنربط صندوق المدخلات بالنقر على Enter كالتالي:

First_Entry.bind('<Return>',handler)

حيث أن handler هو اسم الدالة التي سيتم تنفيذها، ونستطيع كذلك ربط العديد من الأزرار بنفس الطريقة مع الدالة باستخدام اسم الزر المناسب، مثل زر المسافة Space وزر الهروب Escape وزر المسح Delete.

لنكتب الشيفرة التالية حيث سننشئ صندوق مدخلات وعند نقر المستخدم على زر الإدخال Enter نقوم بطباعة عدد الأحرف التي تم إدخالها في حاوية العنوان:

from tkinter import *

main_window = Tk()
main_window.title("Entry response ")

def handler(e):
     L=myentertext.get()
     mylabeltext.set(len(L))

myentertext = StringVar()
mylabeltext= StringVar()

First_Entry = Entry(main_window, textvariable=myentertext,bd=10 )
First_Entry. pack(side= TOP)
First_Entry.focus()

tag_label=Label(main_window,text='عدد الأحرف')
tag_label.pack(side= BOTTOM)

First_Label = Label(main_window, textvariable=mylabeltext )
First_Label.pack(side= BOTTOM)

First_Entry.bind('<Return>',handler)

main_window.mainloop()

عند تجربة الشفرة ستظهر النتيجة التالية:

استجابة المدخلات

تطبيق الآلة الحاسبة (الجزء الثالث)

لننتقل لجزئية التطبيق على مشروع آلتنا الحاسبة، كنا قد رسمنا النافذة الرئيسية للآلة و وضعنا داخلها إطارين بحاوية عنوان العلوية للمدخلات والسفلية لأزرار العمليات والأرقام، في هذا التطبيق سنضع في الإطار الأول حاوية عنوان نسميها input_label نكتب فيها عبارة "أدخل المعادلة الحسابية"، على جهة اليمين ونحددها بلون خلفية من درجات الأزرق بقيمة "‎#007CFF" ولون خط أبيض، وفي الجهة اليسرى نضع صندوق مدخلات نسميه input_field يعرض الأرقام والعمليات التي ينقر عليها المستخدم، إذ حددنا له عرضًا يتناسب مع مقاس النافذة بمقدار 18، وحددنا له نوع الخط 'arial' بمقياس 12 وجعلناه ثخينًا، وقمنا بتعريف متغير من نوع StringVar أسميناه input_text ليكون محتواه متغيرًا يختلف مع كل نقرة من المستخدم على الأزرار، تكون شفرتهما على النحو التالي:

input_label=Label(input_frame,text="أدخل المعادلة الحسابية ",
                    bg="#007CFF",fg="white")
input_field = Entry(input_frame, width=18,
                    font=('arial', 12, 'bold'),textvariable=input_text)

لوضع هذه العناصر في داخل الإطار استخدمنا خاصية grid وأضفنا حدودًا داخلية على المحور الصادي بمقدار 10، ندمج هذه الإضافات على الشفرة السابقة ونحصل على التالي:

from tkinter import *

from ctypes import windll
windll.shcore.SetProcessDpiAwareness(1)

mycalculator = Tk()
mycalculator.title("آلة حاسبة بسيطة")
mycalculator.geometry("575x740")  
mycalculator.resizable(False, False) 


input_frame = LabelFrame(mycalculator,text="المدخلات ",bd=3,width=550)
input_frame.pack(side=TOP)

btns_frame = LabelFrame(mycalculator,text=" لوحة الأرقام والعمليات ",
                        bg="white",width=550,bd=3)
btns_frame.pack()

input_text = StringVar()

input_label=Label(input_frame,text="أدخل المعادلة الحسابية ",bg="#007CFF",fg="white")
input_label.grid(row=0, column=1,ipady=10)
input_field = Entry(input_frame, width=18,
                    font=('arial', 12, 'bold'),textvariable=input_text)
input_field.grid(row=0, column=0,ipady=10)


mycalculator.mainloop()

ونحصل على النتيجة التالية:

واجهة الآلة الحاسبة الثانية

يتبقى لآلتنا جزئية الإطار السفلي والذي يحتوي على الأزرار التي تحوي الأرقام والعمليات الحسابية، وهذا ما سنتناوله في المقال القادم كيفية إدراج الأزرار وربطها بوظائف معينة تقوم بها عند النقر عليها.