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

Ти коли-небудь замислювався, звідки програма знає, що ти натиснув саме "Хрестик" для закриття, або клікнув мишкою по кнопці? Сьогодні ми розберемо цей механізм "спілкування" і навчимо твоє вікно відповідати тобі.

Уяви дверний дзвінок.

1. Хтось натискає кнопку дзвінка — це подія (event).

2. Дзвінок починає голосно грати мелодію — це обробник події (event handler).

У програмуванні вікон все працює так само! З вікном постійно щось відбувається: миша рухається, кнопки натискаються. Наше завдання — навчити програму реагувати на це.

Запам'ятай:
Подія (event) - це сигнал від системи (клік, рух миші, натискання клавіші).

Обробник події (handler) - це звичайна функція (підпрограма), яка запускається автоматично, коли стається подія.

Метод bind вказує яка функція станеться при настанні якої події. Це ніби "клей", який прив'язує подію до обробника.

Як це виглядає в Python?

root.bind("<Подія>", назва_функції)

Зверніть увагу, назва функції пишеться без дужок і не в лапках!

Ось список назв подій для Python:

• <Button-1> або <1> — клік лівою кнопкою миші.

• <Double-Button-1> або <Double-1> — подвійний клік.

• <KeyPress> — натискання будь-якої клавіші.

• <Motion> — рух мишкою.

• <Expose> — вікдриття вікна.

• <Destroy> — закриття вікна.

Програма "Багатозадачне вікно"

Створимо програму, яка по-різному реагує на мишку і на клавіатуру. Це одна з вимог твоїх очікуваних результатів!

Завдання:

1. На клік мишкою — вікно змінює колір і розмір.

2. На натискання будь-якої клавіші на клавіатурі — з'являється вікно повідомлення.

Крок 1. Створення базового коду з вікном

Створимо вікно, у якому будуть відбуватися наші події. Не будемо вказувати його колір та заголовок, але вкажемо розміри вікна:

# Підключимо бібліотеку tkinter
from tkinter import *

# Створимо вікно
root = Tk()
root.geometry("300x200")

# Запустимо вікно
root.mainloop()

Крок 2. Зміна властивостей вікна (обробка кліку миші)

Щоб змінити вікно, ми звертаємось до його властивостей.

• Змінити колір фону: root['bg'] = 'якийсь колір'.

• Змінити розмір: root.geometry('ШиринаxВисота').

Спершу створимо підпрограму з назвою mouse_click, яка змінює колір:

from random import randint

def mouse_click(event):
    new_color = "#{:06x}".format(randint(0, 0xFFFFFF))
    root['bg'] = new_color

Зверни увагу: у дужках функції ми обов'язково пишемо слово event: def change_color(event):. Це правило створення обробників.

Також у цьому фрагменті є дуже цікавий код "#{:06x}".format(random.randint(0, 0xFFFFFF)) . Ми не будемо заглиблюватися у його деталі поки що, щоб не навантажувати тебе, але цей код згенерує якесь випадкове значення кольору, яке буде записано у змінну new_color. Проте варто звернути увагу, що у цьому фрагменті використовується функція randint із модуля random, яка повертає випадкові числа у межах певного діапазону, який записується як аргументи цієї функції. Оскільки ця функція належить певному модулю, ми повинні її підключити. Для цього використовується перший рядок. У якому замість * ми напряму прописали назву функції randint, яку підключаємо до програми (щоб не підключати усе, що там є і не засмічувати наш код).

Далі маємо додати зміну розмірів екрану. За допомогою тієї ж функції randint випадковим чином згенеруємо ширину та висоту:

width = randint(150, 400)   # ширина, випадкове число від 150 до 400
height = randint(150, 500)  # висота, випадкове число від 150 до 500

Додамо це до нашої функції разом зі зміною розмірів вікна:

from random import randint

def mouse_click(event):
    new_color = "#{:06x}".format(randint(0, 0xFFFFFF))
    root['bg'] = new_color
    width = randint(150, 400)
    height = randint(150, 500) 
    root.geometry(f"{width}x{height}")

Тут варто звернути увагу на фрагмент f"{width}x{height}". Це f-рядок у Python (перед лапками ж записана літера "f"). Особливий цей рядок тим, що на місці тексту у фігурних дужках {} у сам рядок будуть підставлені значення змінних width та height. Наприклад, якщо width = 230, а height = 180, тоді цей рядок для програми під час її виконання виглядатиме так: "230x180".

Далі маємо "привʼязати" до натискання лівої кнопки миші у вікні виконання цієї функції, тобто до настання події <Button-1>. Із цим допоможе рядок:

root.bind('<Button-1>', mouse_click)

Загалом твій код зараз повинен мати вигляд:

from random import randint               # не забуваємо підключити модуль random
from tkinter import *

def mouse_click(event):                  # створюємо обробник події
    new_color = "#{:06x}".format(randint(0, 0xFFFFFF))
    root['bg'] = new_color
    width = randint(150, 400)
    height = randint(150, 500) 
    root.geometry(f"{width}x{height}")

root = Tk()
root.geometry("300x200")

root.bind('<Button-1>', mouse_click)     # привʼязуємо обробник до самої події

root.mainloop()

Спробуй самостійно запустити цей код у середовищі ЄPython.

Крок 3. Відображення вікна повідомлень (обробка натискання клавіші на клавіатурі)

Іноді програма має щось сказати користувачеві або попередити його. Як ти памʼятаєш, для цього є вікна повідомлень. Щоб вони працювали, треба підключити messagebox з модуля tkinter за допомогою коду: from tkinter.messagebox import *.

Типи повідомлень, які ми можемо показувати:

• showinfo('Заголовок', 'Текст') — інформація.

• showwarning('Заголовок', 'Текст') — попередження.

• showerror('Заголовок', 'Текст') — помилка.

Додамо відображення повідомлення з інформацією при натисканні на будь-яку кнопку на клавіатурі. Для цього спершу створимо обробник події (функцію key_press):

from tkinter.messagebox import *

def key_press(event):
    showinfo('Повідомлення', 'Ти натиснув клавішу на клавіатурі!')

Не забуваємо підключити відповідний модуль, щоб мати можливість скористатися функцією showinfo.

А далі вкажемо, що ця функція буде запускатися при натисканні будь-якої кнопки на клавіатурі, тобто при настанні події <KeyPress>:

root.bind('<KeyPress>', key_press)

Після додавання нового обробника події загалом твій код повинен мати наступний вигляд:

from random import randint
from tkinter import *
from tkinter.messagebox import *         # підключаємо модуль messagebox

def mouse_click(event):                  
    new_color = "#{:06x}".format(randint(0, 0xFFFFFF))
    root['bg'] = new_color
    width = randint(150, 400)
    height = randint(150, 500) 
    root.geometry(f"{width}x{height}")

def key_press(event):                    # створюємо обробник події
    showinfo('Повідомлення', 'Ти натиснув клавішу на клавіатурі!')

root = Tk()
root.geometry("300x200")

root.bind('<Button-1>', mouse_click)
root.bind('<KeyPress>', key_press)       # привʼязуємо обробник до самої події

root.mainloop()

Спробуй самостійно запустити цей код у середовищі ЄPython.

Фінальний код програми "Багатозадачне вікно"

from random import randint
from tkinter import *
from tkinter.messagebox import *

# Функція для миші (з попереднього кроку)
def mouse_click(event):                  
    new_color = "#{:06x}".format(randint(0, 0xFFFFFF))
    root['bg'] = new_color
    width = randint(150, 400)
    height = randint(150, 500) 
    root.geometry(f"{width}x{height}")

# Функція для клавіатури
def key_press(event): 
    showinfo('Повідомлення', 'Ти натиснув клавішу на клавіатурі!')

root = Tk()
root.geometry("300x200")

# Прив'язуємо події
root.bind('<Button-1>', mouse_click)   # Лівий клік
root.bind('<KeyPress>', key_press)      # Будь-яка клавіша

root.mainloop()

Як дізнатися, де ми натиснули у вікні?

Параметр event містить у собі відомості про подію, яка сталася. Наприклад, там можна дізнатися, яку саме кнопку було натиснуто або у якому місці ми клікнули мишкою. Для різних подій ми можемо дізнатися зовсім різні відомості.

Координати місця, де ми натиснули мишкою можна отримати так:

• event.x — відступ зліва.

• event.y — відступ зверху.

Але це можна дізнатися тільки всередині функції-обробника події. Як, наприклад, це робиться всередині f-рядка у програмі з наступного завдання.

Підсумок

Сьогодні ти навчився/навчилася:

1. Розпізнавати події: натискання лівої кнопки миші <Button-1>, натискання клавіші на клавіатурі <KeyPress>.

2. Створювати обробники: функції def, які приймають event.

3. Використовувати messagebox для діалогу з користувачем.

4. Генерувати випадкові числа за допомогою функції randint з модуля random.