Урок 23-24.Проєкти з вікнами.

Доброго дня, діти!
Сьогодні ми поговоримо про дуже цікаву і практичну тему – створення програм із графічним інтерфейсом. Уявіть собі, як було б незручно, якби всі програми виглядали лише як чорні консолі з текстом. Замість цього, сучасні програми мають кнопки, поля для введення тексту, мітки, випадаючі списки, і ми можемо взаємодіяти з ними за допомогою миші та клавіатури. Це все завдяки графічному інтерфейсу користувача, або GUI (від англійського Graphical User Interface).

Наприклад, коли ви запускаєте браузер, програми для перегляду відео чи чати, ви користуєтеся вікнами, кнопками та іншими елементами GUI. Наша мета сьогодні – зрозуміти, як створюються такі програми, використовуючи мови програмування Python і середовище розробки Lazarus.

Актуальність і застосування у житті

Графічний інтерфейс – це те, що ми бачимо й чим користуємося у 99% програм. Від простих калькуляторів до складних відеоігор – усі вони мають GUI. Наприклад:

1. Онлайн-банкінг: ви вводите дані в поля введення й натискаєте кнопки для виконання операцій.

2. Електронні щоденники в школах: дозволяють переглядати оцінки й домашнє завдання за допомогою кнопок, списків і міток.

3. Програми для навчання: інтерактивні симуляції, тести або навіть програми для програмування, такі як Scratch.

GUI полегшує взаємодію людини з комп’ютером, робить її більш зручною та зрозумілою. Навчитися створювати графічні програми – це перший крок до розробки реальних додатків.

Основні теоретичні відомості та терміни

Графічний інтерфейс складається з елементів, які ми можемо бачити та використовувати. Основні елементи GUI:

• Форма – основне вікно програми, яке містить усі інші елементи.

• Кнопка (Button) – викликає певну дію при натисканні.

• Поле введення (TextBox, Edit) – дозволяє вводити текст.

• Мітка (Label) – відображає текстову інформацію.

• Випадаючий список (ComboBox) – дозволяє вибирати один із варіантів.

• Панель або група елементів (Panel) – допомагає групувати елементи на формі.

У Python для створення GUI використовується бібліотека tkinter.

Це стандартна бібліотека, яка дозволяє швидко створювати прості віконні програми. У tkinter ми описуємо кожен елемент форми за допомогою коду.

У Lazarus GUI створюється у візуальному редакторі.

Ми додаємо елементи на форму за допомогою миші, а потім прописуємо їхню поведінку в обробниках подій.

Приклад пояснення у Python (tkinter)

Уявімо, що ми хочемо створити просту програму для виведення тексту. Наприклад, користувач вводить своє ім’я та натискає кнопку, щоб побачити привітання.

python

Копіювати код

import tkinter as tk

# Створюємо вікно

root = tk.Tk()

root.title("Привітання")

# Поле для введення тексту

entry = tk.Entry(root, width=30)

entry.pack(pady=10)

# Функція для обробки натискання кнопки

def greet():

    name = entry.get()  # Отримуємо текст із поля

    label_result.config(text=f"Привіт, {name}!")  # Виводимо привітання

# Кнопка

button = tk.Button(root, text="Привітати", command=greet)

button.pack(pady=5)

# Мітка для відображення результату

label_result = tk.Label(root, text="")

label_result.pack(pady=10)

# Запускаємо вікно

root.mainloop()

Приклад пояснення у Lazarus

У Lazarus ми виконуємо ті самі дії, але додаємо елементи на форму візуально.

1. Елементи на формі:

   • TEdit – поле введення для тексту.

   • TButton – кнопка для привітання.

   • TLabel – мітка для виведення результату.

2. Обробник події для кнопки:

pascal

Копіювати код

procedure TForm1.Button1Click(Sender: TObject);

begin

  Label1.Caption := 'Привіт, ' + Edit1.Text + '!';

end;

Різниця між Python і Lazarus

• У Python ви програмуєте GUI переважно за допомогою коду. Це гнучко, але вимагає більше часу для початківців.

• У Lazarus ви додаєте елементи на форму візуально, що спрощує процес створення. Але сам код для обробки подій також необхідно писати.

Домашнє завдання

1. Напишіть у Python програму, яка приймає два числа, додає їх і виводить результат у мітку.

2. У Lazarus створіть форму з кнопкою, яка змінює колір фону форми на синій.

На наступному уроці ми розглянемо складніші проєкти, такі як калькулятори або вікторини, і використаємо набуті сьогодні знання.

Тест на тему "Проєкти з вікнами"

Запитання з відповідями

1. Що таке GUI (графічний інтерфейс користувача)?
a) Мова програмування
b) Набір графічних елементів для взаємодії з програмою
c) Командний рядок
d) Форма для введення тексту

Правильна відповідь: b

2. Який модуль у Python використовується для створення GUI?
a) math
b) os
c) tkinter
d) sys

Правильна відповідь: c

3. Який компонент відповідає за створення вікна в tkinter?
a) Button
b) Entry
c) Tk
d) Label

Правильна відповідь: c

4. Що таке mainloop() у tkinter?
a) Цикл для обробки подій в програмі
b) Функція для створення вікон
c) Кнопка у вікні
d) Бібліотека для обчислень

Правильна відповідь: a

5. Як у Lazarus називається основний компонент для створення вікна?
a) Form
b) Button
c) Label
d) Panel

Правильна відповідь: a

6. Для чого використовують обробники подій у віконних додатках?
a) Для запуску програми
b) Для визначення дій, що виконуються при взаємодії користувача з елементами GUI
c) Для підключення баз даних
d) Для створення списків

Правильна відповідь: b

7. Який елемент у Lazarus використовується для введення тексту користувачем?
a) Button
b) Edit
c) Panel
d) Label

Правильна відповідь: b

8. Як називається функція, що викликається після натискання кнопки у Python?
a) root.mainloop()
b) Command function
c) Button handler
d) Callback

Правильна відповідь: d

9. Що відбувається, якщо не викликати mainloop() у tkinter?
a) Програма працює швидше
b) Вікно не з'являється або програма миттєво завершується
c) Нічого не змінюється
d) Кнопки не працюють

Правильна відповідь: b

10. У чому полягає головна перевага GUI перед командним рядком?
a) Швидше виконує обчислення
b) Зрозуміліше для кінцевого користувача
c) Легше створюється
d) Не потребує програмування

Правильна відповідь: b

11. Яка бібліотека у Python дозволяє створювати веб-базовані GUI?
a) Streamlit
b) tkinter
c) math
d) random

Правильна відповідь: a

12. Як у Lazarus відкрити редактор обробників подій?
a) Натиснути на компонент правою кнопкою миші та вибрати "Events"
b) Відкрити головне меню
c) Вибрати "Проєкт"
d) Ввести команду в терміналі

Правильна відповідь: a

13. Який метод використовується в tkinter для прив'язування дії до кнопки?
a) .bind()
b) .assign()
c) .add_event()
d) .set_command()

Правильна відповідь: a

14. У Lazarus, для якого елемента задається властивість Caption?
a) Форма або кнопка
b) Тільки форма
c) Тільки кнопка
d) Тільки панель

Правильна відповідь: a

15. Як називається подія в Lazarus, яка спрацьовує при натисканні кнопки?
a) OnClick
b) OnPress
c) OnSubmit
d) OnInput

Правильна відповідь: a

16. Що виконує метод .pack() у tkinter?
a) Додає стиль до кнопки
b) Розміщує елемент у вікні
c) Відображає повідомлення про помилку
d) Видаляє елемент

Правильна відповідь: b

17. Яка подія в Lazarus дозволяє перевірити натискання клавіші?
a) OnKeyPress
b) OnMouseClick
c) OnActivate
d) OnDoubleClick

Правильна відповідь: a

18. У tkinter, яка функція створює новий елемент кнопки?
a) Button()
b) NewButton()
c) CreateButton()
d) TkButton()

Правильна відповідь: a

19. Що таке Label у tkinter?
a) Поле для введення тексту
b) Поле для відображення тексту
c) Кнопка для натискання
d) Панель для графіки

Правильна відповідь: b

20. У Lazarus, яка властивість відповідає за текст у кнопці?
a) Caption
b) Text
c) Content
d) Label

Правильна відповідь: a

21. Яка бібліотека в Python використовується для створення настільних GUI, окрім tkinter?
a) PyQt
b) os
c) math
d) pandas

Правильна відповідь: a

22. Як у Lazarus змінити колір фону форми?
a) Змінити властивість Color
b) Використати метод SetColor()
c) Змінити властивість BackgroundColor
d) Використати функцію UpdateColor()

Правильна відповідь: a

23. У чому перевага модульного підходу в створенні GUI-проєктів?
a) Полегшує підтримку та зміну коду
b) Робить програми швидшими
c) Зменшує обсяг файлу
d) Дозволяє використовувати менше пам’яті

Правильна відповідь: a

24. Що виконує команда destroy() у tkinter?
a) Видаляє елемент
b) Закриває програму
c) Очищає текстове поле
d) Приховує елемент

Правильна відповідь: b

25. У Lazarus, що означає властивість Enabled у кнопки?
a) Дозволяє натискання або блокує кнопку
b) Змінює текст кнопки
c) Задає колір кнопки
d) Додає події

Правильна відповідь: a

26. Що таке подія onClose у Lazarus?
a) Спрацьовує, коли закривається форма
b) Викликається при відкритті форми
c) Використовується для створення кнопки
d) Застосовується для змінення кольору

Правильна відповідь: a

27. Яка функція у Python tkinter використовується для отримання тексту з поля вводу?
a) .get()
b) .text()
c) .fetch()
d) .receive()

Правильна відповідь: a

28. Як називається основний файл проєкту в Lazarus?
a) .lpr
b) .cpp
c) .py
d) .exe

Правильна відповідь: a

29. Що таке Entry у tkinter?
a) Поле для введення тексту
b) Поле для відображення тексту
c) Кнопка для натискання
d) Графічна панель

Правильна відповідь: a

30. Який компонент у Lazarus використовується для виведення результату?
a) Label
b) Edit
c) Button
d) ComboBox

Правильна відповідь: a

Розподіл питань за критеріями оцінювання з урахуванням можливості використання одного питання для різних критеріїв

1. Група результатів 1 (ГР1): Працює з інформацією, даними, моделями
   Питання: 1, 4, 9, 10, 14, 23, 24, 26

2. Група результатів 2 (ГР2): Створює інформаційні продукти
   Питання: 6, 7, 8, 12, 13, 15, 18, 19, 20, 21, 27, 30

3. Група результатів 3 (ГР3): Працює в цифровому середовищі
   Питання: 2, 3, 5, 7, 8, 12, 16, 18, 21, 22, 27, 28

4. Група результатів 4 (ГР4): Безпечно та відповідально працює з інформаційними технологіями
   Питання: 10, 14, 20, 24, 25, 26, 30

Практична робота 

Тема: Проєкти з вікнами

У цій темі розглядаються програми з графічним інтерфейсом, де користувач може взаємодіяти з елементами форм, такими як кнопки, поля введення, мітки тощо. У Python для створення GUI використовується бібліотека tkinter, а в Lazarus – стандартні форми та елементи управління.

Задача 1. Виведення привітання

Формулювання: Створіть вікно, де користувач вводить своє ім’я, натискає кнопку, і програма виводить привітання з цим ім’ям.

Розв’язок на Python (tkinter):

python

Копіювати код

import tkinter as tk

# Функція для привітання

def greet():

    name = entry.get()  # Зчитування тексту з поля введення

    label_result.config(text=f"Привіт, {name}!")

# Створення вікна

root = tk.Tk()

root.title("Привітання")

# Поле для введення імені

entry = tk.Entry(root, width=30)

entry.pack(pady=10)

# Кнопка для привітання

button = tk.Button(root, text="Привітати", command=greet)

button.pack(pady=5)

# Поле для відображення результату

label_result = tk.Label(root, text="")

label_result.pack(pady=10)

# Запуск програми

root.mainloop()

Розв’язок на Lazarus:

Алгоритм створення проекту:

1. Елементи на формі:

   • Поле введення (TEdit) для імені.

   • Кнопка (TButton) для запуску виведення привітання.

   • Мітка (TLabel) для виведення привітання.

2. Події та обробники подій:

   • Подія OnClick кнопки для виведення тексту на мітку.

pascal

Копіювати код

procedure TForm1.Button1Click(Sender: TObject);

begin

  Label1.Caption := 'Привіт, ' + Edit1.Text + '!'; // Виведення привітання

end;

Задача 2. Додавання двох чисел

Формулювання: Створіть програму, де користувач вводить два числа, натискає кнопку, і програма виводить їхню суму.

Розв’язок на Python (tkinter):

python

Копіювати код

import tkinter as tk

# Функція для обчислення суми

def calculate_sum():

    try:

        num1 = float(entry1.get())

        num2 = float(entry2.get())

        label_result.config(text=f"Сума: {num1 + num2}")

    except ValueError:

        label_result.config(text="Помилка: Введіть числа")

# Створення вікна

root = tk.Tk()

root.title("Сума чисел")

# Поля для введення чисел

entry1 = tk.Entry(root, width=20)

entry1.pack(pady=5)

entry2 = tk.Entry(root, width=20)

entry2.pack(pady=5)

# Кнопка для обчислення суми

button = tk.Button(root, text="Обчислити", command=calculate_sum)

button.pack(pady=10)

# Поле для відображення результату

label_result = tk.Label(root, text="")

label_result.pack(pady=10)

# Запуск програми

root.mainloop()

Розв’язок на Lazarus:

Алгоритм створення проекту:

1. Елементи на формі:

   • Два поля введення (TEdit) для чисел.

   • Кнопка (TButton) для запуску обчислення суми.

   • Мітка (TLabel) для відображення результату.

2. Події та обробники подій:

   • Подія OnClick кнопки для обчислення суми та виведення результату.

pascal

Копіювати код

procedure TForm1.Button1Click(Sender: TObject);

var

  num1, num2, sum: Real;

begin

  num1 := StrToFloat(Edit1.Text);

  num2 := StrToFloat(Edit2.Text);

  sum := num1 + num2;

  Label1.Caption := 'Сума: ' + FloatToStr(sum);

end;

Задача 3. Зміна кольору фону

Формулювання: Створіть програму, де користувач натискає кнопки для зміни кольору фону вікна.

Розв’язок на Python (tkinter):

python

Копіювати код

import tkinter as tk

# Функція для зміни кольору

def change_color(color):

    root.config(bg=color)

# Створення вікна

root = tk.Tk()

root.title("Зміна кольору")

root.geometry("300x200")

# Кнопки для зміни кольору

button_red = tk.Button(root, text="Червоний", command=lambda: change_color("red"))

button_red.pack(pady=5)

button_green = tk.Button(root, text="Зелений", command=lambda: change_color("green"))

button_green.pack(pady=5)

button_blue = tk.Button(root, text="Синій", command=lambda: change_color("blue"))

button_blue.pack(pady=5)

# Запуск програми

root.mainloop()

Розв’язок на Lazarus:

Алгоритм створення проекту:

1. Елементи на формі:

   • Три кнопки (TButton) для вибору кольору.

2. Події та обробники подій:

   • Подія OnClick для кожної кнопки змінює колір фону форми.

pascal

Копіювати код

procedure TForm1.ButtonRedClick(Sender: TObject);

begin

  Form1.Color := clRed;

end;

procedure TForm1.ButtonGreenClick(Sender: TObject);

begin

  Form1.Color := clGreen;

end;

procedure TForm1.ButtonBlueClick(Sender: TObject);

begin

  Form1.Color := clBlue;

end;

Задача 4. Визначення чотирикутника за сторонами

Формулювання: Програма приймає довжини чотирьох сторін і визначає, чи є фігура квадратом, прямокутником чи довільним чотирикутником.

Розв’язок на Python (tkinter):

python

Копіювати код

import tkinter as tk

# Функція для визначення фігури

def determine_shape():

    try:

        a = float(entry1.get())

        b = float(entry2.get())

        c = float(entry3.get())

        d = float(entry4.get())

        if a == b == c == d:

            result = "Квадрат"

        elif a == c and b == d:

            result = "Прямокутник"

        else:

            result = "Довільний чотирикутник"

        label_result.config(text=f"Фігура: {result}")

    except ValueError:

        label_result.config(text="Помилка: Введіть коректні значення")

# Створення вікна

root = tk.Tk()

root.title("Чотирикутник")

# Поля для введення сторін

entry1 = tk.Entry(root, width=20)

entry1.pack(pady=5)

entry2 = tk.Entry(root, width=20)

entry2.pack(pady=5)

entry3 = tk.Entry(root, width=20)

entry3.pack(pady=5)

entry4 = tk.Entry(root, width=20)

entry4.pack(pady=5)

# Кнопка для визначення

button = tk.Button(root, text="Визначити", command=determine_shape)

button.pack(pady=10)

# Поле для відображення результату

label_result = tk.Label(root, text="")

label_result.pack(pady=10)

# Запуск програми

root.mainloop()

Розв’язок на Lazarus:

Алгоритм створення проекту:

1. Елементи на формі:

   • Чотири поля введення (TEdit) для сторін.

   • Кнопка (TButton) для запуску визначення фігури.

   • Мітка (TLabel) для відображення результату.

2. Події та обробники подій:

   • Подія OnClick обчислює тип чотирикутника.

pascal

Копіювати код

procedure TForm1.Button1Click(Sender: TObject);

var

  a, b, c, d: Real;

  result: String;

begin

  a := StrToFloat(Edit1.Text);

  b := StrToFloat(Edit2.Text);

  c := StrToFloat(Edit3.Text);

  d := StrToFloat(Edit4.Text);

  if (a = b) and (b = c) and (c = d) then

    result := 'Квадрат'

  else if (a = c) and (b = d) then

    result := 'Прямокутник'

  else

    result := 'Довільний чотирикутник';

  Label1.Caption := 'Фігура: ' + result;

end;