Урок 22. Поле: створення, властивості, події, обробники подій.

Добрий день, діти! Сьогодні ми продовжуємо працювати з візуальним програмуванням у середовищі Lazarus. Ми вже вміємо створювати прості форми, розміщувати на них кнопки, мітки, картинки. Сьогодні вивчаємо один з найважливіших елементів інтерфейсу — поле введення (TEdit) і багатострокове поле (TMemo). Без них неможливо зробити жодну серйозну програму: реєстрацію, калькулятор, чат, гру з введенням імені тощо.

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

Поля введення є скрізь:

• коли ви вводите логін і пароль у Google, Discord

• коли пишете повідомлення в Telegram чи Viber

• коли заповнюєте анкету на сайті

• коли вводите свій нікнейм у грі Саме тому сьогоднішня тема — це фундамент для створення справжніх корисних програм.

• Поля введення в Python використовуються для створення десктопних програм, ігор, інструментів для обробки даних, простих чатів, калькуляторів тощо. Великі компанії (Google, Instagram, Netflix) використовують Python, і знання tkinter допоможе вам створювати власні корисні програми.

Актуалізація опорних знань (4–5 хв)

1. Як називається головне вікно програми в Lazarus? (Form1, TForm)

2. Як додати новий компонент на форму? (Вибрати на палітрі інструментів і клацнути на формі)

3. Яка властивість кнопки змінює напис на ній? (Caption)

4. Яка подія кнопки виконується при натисканні? (OnClick)

5. Де пишемо код обробника події? (У вікні Object Inspector → Events → подвійний клік по події) 

6. Як імпортувати бібліотеку для створення вікна в Python? (import tkinter)

7. Як створити головне вікно програми? (root = tkinter.Tk())

8. Як розмістити кнопку на формі? (Button(root, text="...", command=...).pack())

9. Як запустити цикл програми? (root.mainloop())

10. Як вивести повідомлення в діалоговому вікні? (messagebox.showinfo(...)) Чудово, ви готові!

Основна частина. Теоретичні відомості Лазарус (12–15 хв)

1. Основні компоненти-поле

   • TEdit — однострокове поле введення (логіни, паролі, числа)

   • TMemo — багатострокове поле (великі тексти, чати, нотатки)

2. Важливі властивості TEdit

   • Text — те, що введено користувачем

   • PasswordChar = * — приховує символи (для паролів)

   • MaxLength — максимальна кількість символів

   • ReadOnly = True — забороняє редагування

   • Font → Size, Name, Color — зовнішній вигляд тексту

3. Важливі властивості TMemo

   • Lines — набір рядків тексту

   • ScrollBars — смуги прокрутки

   • WordWrap = True — автоматичний перенос слів

   • Font — шрифт

4. Основні події полів

   • OnChange — спрацьовує при кожній зміні тексту

   • OnKeyPress — при натисканні будь-якої клавіші

   • OnKeyDown / OnKeyUp — при натисканні/відпусканні клавіші

   • OnEnter — коли поле отримує фокус

   • OnExit — коли поле втрачає фокус

5. Як отримати текст з поля в коді Edit1.Text → рядок з TEdit Memo1.Lines.Text → весь текст з TMemo Memo1.Lines[0] → перший рядок TMemo

Основна частина. Теоретичні відомості Пайтон (12–15 хв)

1. Основні віджети для введення тексту в tkinter

   • Entry — однострокове поле введення (аналог TEdit)

   • Text — багатострокове поле (аналог TMemo)

2. Важливі властивості та методи Entry

   • textvariable = змінна StringVar() — зв’язує поле зі змінною

   • get() — отримати текст

   • insert(0, "текст") — вставити текст

   • delete(0, END) — очистити поле

   • state='disabled' — зробити поле тільки для читання

   • show='*' — приховати символи (для паролів)

3. Важливі властивості та методи Text

   • get("1.0", END) — отримати весь текст

   • insert(END, "текст") — додати текст у кінець

   • delete("1.0", END) — очистити

   • config(state='disabled') — тільки для читання

4. Основні події

   • <KeyRelease> — після відпускання клавіші

   • <Return> — при натисканні Enter

   • bind("<Key>", функція) — прив’язка події до віджета

   • command=функція — для кнопок

Практична робота № __ «Робота з полями введення» Лазарус (20–25 хв)

Завдання

Створіть програму-анкету «Мій профіль», яка:

1. Просить ввести ПІБ, вік, місто, улюблений предмет і коротко про себе.

2. При натисканні кнопки «Зберегти» — виводить усі дані в TMemo праворуч.

3. Якщо поле ПІБ порожнє — видає повідомлення «Введіть прізвище та ім’я!».

4. Вік має приймати тільки цифри (використовуйте подію OnKeyPress).

Покрокова інструкція виконання (розміщуйте на сайті уроків)

Запуск Lazarus

1. Пуск → Всі програми → Lazarus → Lazarus (або ярлик на робочому столі)

Створення нового проекту

2. Project → New Project → Application → OK

3. Налаштування форми

   • Caption форми = «Моя анкета»

   • Color = clWhite або clCream

4. Розміщення компонентів (з палітри Standard та Additional)

   • 5 × TLabel (підписи)

   • 3 × TEdit (ПІБ, Вік, Місто)

   • 1 × TEdit для улюбленого предмета

   • 1 × TMemo (велике, праворуч)

   • 1 × TButton (Caption = «Зберегти в профіль»)

Name компонентів (обов’язково!):

5. EditFIO, EditAge, EditCity, EditSubject, MemoInfo, ButtonSave

Налаштування властивостей

EditAge → MaxLength = 3

EditAge → Text = '' (порожнє)

MemoInfo → ScrollBars = ssVertical

6. MemoInfo → ReadOnly = True

7. Код програми (подвійний клік по ButtonSave)

pascal

procedure TForm1.ButtonSaveClick(Sender: TObject);

begin

  if Trim(EditFIO.Text) = '' then

  begin

    ShowMessage('Введіть прізвище та ім''я!');

    EditFIO.SetFocus;

    Exit;

  end;

  MemoInfo.Lines.Clear;

  MemoInfo.Lines.Add('ПІБ: ' + EditFIO.Text);

  MemoInfo.Lines.Add('Вік: ' + EditAge.Text);

  MemoInfo.Lines.Add('Місто: ' + EditCity.Text);

  MemoInfo.Lines.Add('Улюблений предмет: ' + EditSubject.Text);

  MemoInfo.Lines.Add('');

  MemoInfo.Lines.Add('Про себе:');

  MemoInfo.Lines.Add(MemoAbout.Lines.Text);  // якщо є окреме TMemo для «Про себе»

end;

7. Заборона введення букв у поле Вік (подвійний клік по EditAge → Events → OnKeyPress)

pascal

procedure TForm1.EditAgeKeyPress(Sender: TObject; var Key: Char);

begin

  if not (Key in ['0'..'9', #8]) then  // #8 = BackSpace

    Key := #0;  // ігноруємо всі інші символи

end;

8. Збереження звіту в Word

   • Відкрийте Microsoft Word

   • Введіть у першому рядку: Прізвище Ім’я 8-А Практична робота (шрифт 28)

   • Далі: Дата, Практична робота, Тема: Поле: створення, властивості, події (шрифт 14)

   • Зробіть 3–4 скріншоти своєї програми (Alt+PrintScreen → Вставити в Word)

   • Збережіть: Файл → Зберегти як → Цей ПК → D:\Work\Ваше_прізвище\ Назва файлу: Анкета_Поле_Іванов.docx

Практична робота № __ «Робота з полями введення в Python» (20–25 хв)

Завдання

Створіть програму-анкету «Мій профіль» українською мовою, яка:

1. Містить поля для введення ПІБ, віку, міста, улюбленого предмета.

2. Кнопка «Зберегти» виводить усі дані в багатострокове поле Text праворуч.

3. Якщо поле ПІБ порожнє — видає повідомлення помилки.

4. У поле «Вік» дозволяється вводити тільки цифри.

Покрокова інструкція виконання (розміщуйте на сайті уроків)

1. Запуск середовища Python Пуск → Всі програми → Python → IDLE (Python GUI) або ярлик на робочому столі.

2. Створення нового файлу У IDLE: File → New File (Ctrl+N)

3. Написання коду програми Скопіюйте або введіть наступний код, змінюючи тільки назви змінних за потребою:

Python

import tkinter as tk

from tkinter import messagebox

root = tk.Tk()

root.title("Моя анкета")

root.geometry("600x400")

root.configure(bg="lightblue")

# Змінні для полів

fio_var = tk.StringVar()

age_var = tk.StringVar()

city_var = tk.StringVar()

subject_var = tk.StringVar()

# Підписи та поля введення

tk.Label(root, text="ПІБ:", bg="lightblue").grid(row=0, column=0, sticky="e", pady=5, padx=10)

tk.Entry(root, textvariable=fio_var, width=30).grid(row=0, column=1, pady=5)

tk.Label(root, text="Вік:", bg="lightblue").grid(row=1, column=0, sticky="e", pady=5, padx=10)

age_entry = tk.Entry(root, textvariable=age_var, width=30)

age_entry.grid(row=1, column=1, pady=5)

tk.Label(root, text="Місто:", bg="lightblue").grid(row=2, column=0, sticky="e", pady=5, padx=10)

tk.Entry(root, textvariable=city_var, width=30).grid(row=2, column=1, pady=5)

tk.Label(root, text="Улюблений предмет:", bg="lightblue").grid(row=3, column=0, sticky="e", pady=5, padx=10)

tk.Entry(root, textvariable=subject_var, width=30).grid(row=3, column=1, pady=5)

# Багатострокове поле для результату

result_text = tk.Text(root, width=40, height=15, state='disabled')

result_text.grid(row=0, column=2, rowspan=5, padx=20, pady=10)

def save_profile():

    fio = fio_var.get().strip()

    if fio == "":

        messagebox.showerror("Помилка", "Введіть прізвище та ім'я!")

        return

    result_text.config(state='normal')

    result_text.delete("1.0", tk.END)

    result_text.insert(tk.END, "ПІБ: " + fio + "\n")

    result_text.insert(tk.END, "Вік: " + age_var.get() + "\n")

    result_text.insert(tk.END, "Місто: " + city_var.get() + "\n")

    result_text.insert(tk.END, "Улюблений предмет: " + subject_var.get() + "\n")

    result_text.config(state='disabled')

# Кнопка збереження

tk.Button(root, text="Зберегти в профіль", command=save_profile, width=20).grid(row=4, column=0, columnspan=2, pady=20)

# Заборона введення нецифр у поле Вік

def only_numbers(event):

    if event.keysym not in ('BackSpace', 'Delete', 'Left', 'Right'):

        if not event.char.isdigit():

            return "break"

age_entry.bind("<Key>", only_numbers)

root.mainloop()

4. Збереження файлу File → Save As → Цей ПК → D:\Work\Ваше_прізвище\ Назва файлу: anketa_python_Ваше_Прізвище.py

5. Запуск програми Run → Run Module (F5). Перевірте роботу всіх функцій.

6. Звіт у Microsoft Word

   • Відкрийте Microsoft Word

   • В першому рядку: Прізвище Ім’я 8 клас Підгрупа Практична робота (шрифт 28)

   • Далі: Дата уроку, Практична робота, Тема: Поле введення в Python (шрифт 14)

   • Зробіть 3–4 скріншоти вікна програми (Alt+PrintScreen → Вставити)

   • Збережіть файл: Файл → Зберегти як → D:\Work\Ваше_прізвище\ Назва: Анкета_Python_Прізвище.docx

Критерії оцінювання практичної роботи Лазарус (12-бальна шкала)

ГР1 Працює з інформацією, даними, моделями (0–3 б)

3 б — всі поля правильно передають дані в Memo, перевірка на порожнє ПІБ

2 б — дані передаються, але перевірка відсутня або з помилками

1 б — дані передаються частково

ГР2 Створює інформаційні продукти (0–3 б)

3 б — інтерфейс акуратний, підписи українською, компоненти вирівняні

2 б — інтерфейс зрозумілий, але є недоліки у зовнішньому вигляді

1 б — інтерфейс працює, але виглядає неохайно

ГР3 Працює в цифровому середовищі (0–3 б)

3 б — код написаний правильно, без помилок компіляції, проект збережений

2 б — дрібні синтаксичні помилки, але програма запускається

1 б — багато помилок, програма не запускається

ГР4 Безпечно та відповідально працює з ІТ (0–3 б)

3 б — файл Word збережений правильно на D:\Work\Прізвище, назва за зразком, скріншоти чіткі

2 б — файл збережений, але назва не за зразком або скріншоти неякісні

1 б — файл не збережений або збережено не в свою папку

Критерії оцінювання практичної роботи Пайтон (12-бальна шкала)

ГР1 Працює з інформацією, даними, моделями (0–3 б)

3 б — всі дані правильно передаються в Text, перевірка порожнього ПІБ працює

2 б — дані передаються, але перевірка відсутня або з помилками

1 б — часткове передавання даних

ГР2 Створює інформаційні продукти (0–3 б)

3 б — інтерфейс акуратний, українська мова, вирівнювання, колір фону

2 б — інтерфейс зрозумілий, але є недоліки оформлення

1 б — програма працює, але виглядає неохайно

ГР3 Працює в цифровому середовищі (0–3 б)

3 б — код без помилок, файл збережений і запускається

2 б — дрібні помилки, але програма працює

1 б — багато помилок, програма не запускається

ГР4 Безпечно та відповідально працює з ІТ (0–3 б)

3 б — файли (py і docx) збережені правильно за шляхом і назвою, скріншоти чіткі

2 б — збережено, але назва або шлях не за зразком

1 б — файли не збережені в потрібну папку

Домашнє завдання Лазарус

1. Додайте до своєї анкети поле пароля (TEdit з PasswordChar = *) і перевірку: пароль має бути не менше 6 символів.

2. При правильному введенні всіх даних — змінюйте колір форми на зелений (Form1.Color := clGreen).

Домашнє завдання Пайтон

1. Додайте до анкети поле «Пароль» (Entry з show="*") і перевірку: довжина не менше 6 символів.

2. При успішному збереженні змінюйте колір фону вікна на зелений (root.configure(bg="lightgreen")).

Безмашинний варіант Лазарус (30 хв, при відключенні світла)

Завдання на аркуші А4:

1. Намалюйте ескіз вікна програми-анкети (форма + 5 полів + кнопка).

2. Напишіть алгоритм роботи кнопки «Зберегти» українською мовою у вигляді покрокового плану (8–10 кроків).

3. Напишіть, які властивості ви зміните для поля «Пароль» і чому.

4. Намалюйте таблицю «Подія – коли спрацьовує – що робимо» для OnChange, OnKeyPress, OnClick.

Безмашинний варіант Пайтон (30 хв, при відключенні світла)

На аркуші А4:

1. Намалюйте схему вікна програми (розташування 4 Entry, 1 Text, кнопка).

2. Напишіть українською покроковий алгоритм функції save_profile() (8–10 кроків).

3. Напишіть, які методи використовуються для отримання тексту з Entry і Text.

4. Заповніть таблицю: | Віджет | Метод отримання тексту | Метод вставки тексту | (додайте приклади для Entry і Text).

Бажаю всім успіхів! Урок завершено. До наступної зустрічі!