الدرس الثالث: - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

📚 بناء الواجهات الرسومية بلغة البايثون

المفاهيم الأساسية

واجهة المستخدم الرسومية (GUI): نوع من واجهات الحاسوب تسمح بالتفاعل باستخدام الصور والرموز والعناصر الرسومية، بدلاً من النص فقط.

النموذج البرمجي تيكينتر (tkinter): مقطع برمجي جاهز في مكتبة بايثون يستخدم لبناء واجهات المستخدم الرسومية.

لوحة الرسم القماشية (Canvas): منطقة مستطيلة في تيكينتر مخصصة لرسم الصور أو الخطوط أو الأشكال الهندسية.

خريطة المفاهيم

```markmap

بناء واجهات المستخدم الرسومية (GUI) بلغة بايثون

النموذج البرمجي تيكينتر (tkinter)

وظيفته

• يحتوي على نصوص برمجية جاهزة
• يستخدم لرسم أشكال ورسومات على نافذة

المكون الأساسي: لوحة الرسم (Canvas)

• منطقة مستطيلة للرسم
• يمكن وضع رسومات أو نصوص أو عناصر واجهة فيها

خطوات إنشاء نافذة الرسم

1. استيراد النموذج

2. إنشاء النافذة الأساسية

3. ضبط لوحة الرسم (الحجم واللون)

4. وضع العناصر على النافذة

```

نقاط مهمة

• يتم الرسم في تيكينتر على أداة تسمى لوحة الرسم القماشية (Canvas).
• قبل البدء بالرسم، يجب تحديد اللوحة واختيار حجمها ولون خلفيتها وعنوانها.
• الأوامر الأساسية لإنشاء نافذة:

- `from tkinter import *` (لاستيراد المكتبة)

- `window=Tk()` (لإنشاء نافذة جديدة)

- `canvas=Canvas(bg="color", width=500, height=350)` (لضبط اللوحة)

- `canvas.pack()` (لوضع العناصر على النافذة)

الدرس الثالث:

بناء الواجهات الرسومية بلغة البايثون

هناك العديد من الأمور الشيقة التي يمكنك القيام بها من خلال البرمجة، على سبيل المثال، يمكنك رسم أشكال ورسومات رائعة على نافذة واجهة المستخدم. تقدم لك لغة برمجة بايثون عددًا من المقاطع البرمجية الجاهزة التي تسمى النماذج البرمجية، وواحد منها النموذج البرمجي تيكينتر (tkinter).

واجهة المستخدم الرسومية (GUI) القصيرة، هي نوع من أنواع واجهة جهاز الحاسوب التي تسمح لك بالتفاعل مع جهاز حاسب أو جهاز آخر باستخدام الصور والرموز والعناصر الرسومية الأخرى، بدلاً من النص فقط.

النموذج البرمجي تيكينتر

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

إنشاء نافذة الرسم

يستورد نموذج تيكينتر البرمجي

هذه هي نافذة واجهة المستخدم التي سترسم فيها.

from tkinter import * window=Tk() canvas=Canvas(bg="teal", width=400, height=400) canvas.pack() window.mainloop()

لون الخلفية.

أبعاد لوحة الرسم القماشية.

رابط الدرس الرقمي www.ien.edu.sa

وزارة التعليم Ministry of Education 2025 - 1447

171

--- SECTION: الدرس الثالث: --- الدرس الثالث: بناء الواجهات الرسومية بلغة البايثون هناك العديد من الأمور الشيقة التي يمكنك القيام بها من خلال البرمجة، على سبيل المثال، يمكنك رسم أشكال ورسومات رائعة على نافذة واجهة المستخدم. تقدم لك لغة برمجة بايثون عددًا من المقاطع البرمجية الجاهزة التي تسمى النماذج البرمجية، وواحد منها النموذج البرمجي تيكينتر (tkinter). واجهة المستخدم الرسومية (GUI) القصيرة، هي نوع من أنواع واجهة جهاز الحاسوب التي تسمح لك بالتفاعل مع جهاز حاسب أو جهاز آخر باستخدام الصور والرموز والعناصر الرسومية الأخرى، بدلاً من النص فقط. --- SECTION: النموذج البرمجي تيكينتر --- النموذج البرمجي تيكينتر يحتوي النموذج البرمجي النمطي تيكينتر (tkinter) على نصوص برمجية جاهزة يمكن استخدامها من مكتبة بايثون، لبدء العمل بواسطة دوال تيكينتر، عليك استخدام مجموعة محددة من الأوامر. يتم الرسم في تيكينتر على أداة لوحة الرسم القماشية (Canvas) والتي تتمثل بمنطقة مستطيلة مخصصة لرسم الصور أو الخطوط أو الأشكال الهندسية الأخرى، ويمكنك وضع رسومات أو نصوص أو عناصر واجهة مستخدم أو إطارات في هذه اللوحة، ولكن قبل البدء بالرسم، يجب عليك تحديدها، ثم يمكنك اختيار حجمها ولون خلفيتها وعنوانها. --- SECTION: إنشاء نافذة الرسم --- إنشاء نافذة الرسم يستورد نموذج تيكينتر البرمجي هذه هي نافذة واجهة المستخدم التي سترسم فيها. from tkinter import * window=Tk() canvas=Canvas(bg="teal", width=400, height=400) canvas.pack() window.mainloop() --- SECTION: لون الخلفية. --- لون الخلفية. --- SECTION: أبعاد لوحة الرسم القماشية. --- أبعاد لوحة الرسم القماشية. رابط الدرس الرقمي www.ien.edu.sa وزارة التعليم Ministry of Education 2025 - 1447 171 --- VISUAL CONTEXT --- **TABLE**: Untitled Description: A two-column table with headers 'الوصف' (Description) and 'الأمر' (Command). It lists Python Tkinter commands and their descriptions. Table Structure: Headers: الوصف | الأمر Rows: Row 1: يستورد نموذج تيكينتر البرمجي. | from tkinter import * Row 2: ينشئ نافذة أساسية جديدة على شاشتك حيث سيتم عرض رسوماتك. | window=Tk() Row 3: يضبط حجم ولون الخلفية لنافذة الرسم القماشية. | canvas=Canvas(bg="color", width=500, height=350) Row 4: يضع كل العناصر على النافذة. | canvas.pack() Data: The table maps specific Tkinter commands to their functions in creating GUI elements. Context: Explains the basic commands used to set up a Tkinter window and canvas. **IMAGE**: Untitled Description: A visual representation of a graphical user interface window created with Tkinter. It shows a teal-colored canvas area within a window frame that has standard minimize, maximize, and close buttons. Data: Illustrates the output of the Tkinter code, showing the created window with a teal background. Context: Provides a visual example of the GUI window that the preceding code creates.