Обробники подій, пов’язаних з елементами керування
Нова українська школа
Урок 37
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Опрацювання подій
Основною рисою програм із графічним інтерфейсом є інтерактивність.
Для забезпечення інтерактивності елементи керування пов’язують із подіями, що трапляються під час користування програмою, й забезпечують обробку цих подій через відповідну функцію або метод. З’ясуємо, як примусити програму реагувати на дії користувача.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Командна кнопка — об’єкт класу Button, один із найрозповсюдженіших віджетів, який застосовується для запуску чи закінчення певного процесу.
Синтаксис створення об’єкта класу Button:
[змінна = ]Button([батьківський_віджет, ]
[атрибут = значення])
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Під час створення об’єкта Button можна задати значення атрибутів для налаштування вигляду кнопки, які ми розглянули в ході знайомства з об’єктами класу Label.
напис
text
ширина і висота
у знакомісцях (кількість символів)
width, height
колір фону
bg
колір тексту
fg
параметри шрифту (тип, кегль)
font
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Створимо командну кнопку:
btn = Button(root, text = 'ok', width = 10, font = 'Arial 16')
btn.pack()
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Під час створення ігрових і навчальних програм буває доречно додати на кнопку не текст, а зображення. Для цього потрібно задати значення атрибута image. Спочатку за допомогою функції
PhotoImage(file = 'шлях до файла')
потрібно зберегти в змінній шлях до графічного файлу і після цього значення цієї змінної присвоїти атрибуту image. Засобами tkinter можна завантажувати зображення форматів:
GIF
BMP
PNG
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Створимо командну кнопку і додамо на неї малюнок із файлу Picture.gif, що міститься в тій самій папці, що і файл програми:
my_image = PhotoImage(file = 'Picture.gif')
btn = Button(root, image = my_image)
btn.pack()
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Клас Button
Наша програма виконується — створено вікно з командною кнопкою. Але після клацання кнопки немає жодного результату, бо не створено функцію — обробник події Натискання на кнопку.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
Команди програми із графічним інтерфейсом не просто виконуються від початку до кінця, хід їх виконання залежить від втручання користувача, який взаємодіє з програмою (натискає кнопки, вводить дані тощо, тобто створює події).
Подія — зовнішній вплив на об’єкт, на який цей об’єкт може реагувати.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
У графічній програмі від віджетів очікуються події, а у відповідь на них викликаються функції — обробники подій, прикріплені до цих віджетів.
Обробник події — блок програмного коду, який виконується в разі настання події, з якою він пов’язаний.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
Щоб прикріпити до кнопки обробник події Натискання на кнопку, необхідно під час створення об’єкта в переліку вказати атрибут command і присвоїти йому назву функції, яку буде викликано в разі натискання.
def btn_click():
…
btn = Button(root, text = 'ok', command = btn_click)
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
У 7 класі ви ознайомилися з правилами створення й використання функцій користувача. Згадаймо правила опису функцій:
def <назва функції>(<перелік параметрів>):
<тіло функції>
Якщо функції не треба передавати значення, після її назви ставлять порожні дужки. Ці правила дійсні і для функцій — обробників подій.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
Отже, додамо обробник події:
from tkinter import*
def btn_click():
root['bg'] = 'green'
root = Tk()
btn = Button(root, text = 'ok', command = btn_click)
btn.pack()
root.mainloop()
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
Тепер програма реагує на натискання кнопки — колір тла головного вікна змінюється на зелений.
Зауважте! Обробник події має бути описаний вище, ніж виклик обробника події. Найчастіше описи функцій розміщують на початку тексту програми.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання події Натискання на кнопку
Створимо кнопку, котра стрибає.
Після натискання на цю кнопку координати її розташування змінюються випадковим чином.
from random import randint
from tkinter import*
def btn_click():
x1 = randint(5, 190)
y1 = randint(5, 95)
btn.place(x = x1, y = y1)
root = Tk()
root.geometry('200x100')
btn = Button(root, text = 'OK', command = btn_click)
btn.place(x = 10, y = 10)
root.mainloop()
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Можна зробити так, щоб об’єкт змінював властивості у відповідь на натискання певної клавіші клавіатури або миші.
Для цього віджет із подією й функцією — обробником події пов’язують викликом методу bind()
<віджет>.bind(<подія>, <функція>)
текстова константа, системна назва події
<подія>
назва функції — обробника події
<функція>
bind()
Віджет
Подія (event)
Функція
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Наприклад,
об’єкт класу Label
віджет — lab
Функцію action буде викликано щоразу, коли віджет lab у фокусі й натиснуто клавішу W:
клацання лівою кнопкою миші
подія — '<Button-1>'
описана в коді вище
функція — lab_click
lab.bind('W', action)
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Ознайомімося з системними назвами інших подій. Назва події розміщується в лапках і кутових дужках <>.
Дія
Системна назва події
Натискання клавіші Enter
'<Return>'
Натискання клавіш керування курсором
'<KeyPress-Up>' '<KeyPress-Down>' '<KeyPress-Left>' '<KeyPress-Right>'
Натискання будь-якої клавіші на клавіатурі
'<Key>'
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Продовження…
Дія
Системна назва події
Натиснуто ліву клавішу миші
'<Button-1>'
Натиснуто праву клавішу миші
'<Button-3>'
Рух миші
'<Motion>'
Входження вказівника миші в межі віджета
'<Enter>'
Вихід вказівника миші за межі віджета
'<Leave>'
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Функція, зазначена у виклику методу bind(), у разі настання події отримує один аргумент. Це об’єкт класу Event, що має опис подробиць події, корисних під час створення програм, наприклад, щоб змусити об’єкти рухатися вікном:
координати вказівника миші на віджеті
х і у
набраний на клавіатурі символ
char
код набраного на клавіатурі символу тощо
keysym_num
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Опрацювання інших подій
Запрограмуємо змінення кольору тла віджета lab класу Label під час наведення на нього вказівника миші.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
Як бути, коли у вікні програми є кілька віджетів, які можуть реагувати на однакові події? Щоб на подію відреагував певний об’єкт, слід надати йому фокус (зробити активним) викликом методу focus_set(). Подію потрібно прив’язати до вікна, і tkinter буде опрацьовувати події всіх віджетів вікна.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
У вікні програми розташовано два об’єкти класу Label. Запрограмуємо ЛКМ вибір віджета у вікні та його пересування за натисканням клавіш зі стрілками. Після кожного натискання віджет має зміщуватися на 5 пікселів у відповідний бік.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
Події пов’яжемо з об’єктом root — вікном програми. Під час клацання лівою кнопкою миші віджета викликається функція focus_widget, яка надає віджету фокус.
При натисканні будь-якої клавіші викликається функція move_lab. У ній з об’єкта event за допомогою атрибута widget здійснюється доступ до об’єкта, для якого обробляється подія.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
Методи winfo_x() і winfo_y() цього об’єкта повертають його координати х і у відносно вікна.
У змінних dx і dy формується величина зсуву віджета за кожною з осей після натискання на клавішу.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Надання об’єкту фокуса
Отже, програмуючи опрацювання дій користувача та описуючи функції — обробники подій, ви можете створити програми зі зручним графічним інтерфейсом.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Ознайомтесь з цікавою інформацією
Українська науковця Катерина Ющенко стояла біля витоків української школи теоретичного програмування. Вона розробила Адресну мову, одну з перших мов програмування високого рівня у світі, у якій застосовуються операції над адресами об’єктів у пам’яті комп’ютера.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Ознайомтесь з цікавою інформацією
Ґрейс Мюррей Гоппер — американська вчена в галузі комп’ютерних наук та конт-адмірал військово-морських сил США, одна з перших програмістів комп’ютера Марк І. Популяризувала ідею машинонезалежних мов програмування, що сприяло розробці мови програмування високого рівня COBOL.
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Питання для самоперевірки
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Розгадайте ребус
Подія
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Домашнє завдання
Проаналізувати
с. 170-177
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Працюємо за комп’ютером
Сторінка
176-177
Розділ 5
§ 27
© Вивчаємо інформатику teach-inf.com.ua
Успіхів�у навчанні!
Нова українська школа
Урок 37
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.