1 of 34

Обробники подій, пов’язаних з елементами керування

Нова українська школа

Урок 37

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

2 of 34

Опрацювання подій

Основною рисою програм із графічним інтерфейсом є інтерактивність.

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

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

3 of 34

Клас Button

Командна кнопка — об’єкт класу Button, один із найрозповсюдженіших віджетів, який застосовується для запуску чи закінчення певного процесу.

Синтаксис створення об’єкта класу Button:

[змінна = ]Button([батьківський_віджет, ]

[атрибут = значення])

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

4 of 34

Клас Button

Під час створення об’єкта Button можна задати значення атрибутів для налаштування вигляду кнопки, які ми розглянули в ході знайомства з об’єктами класу Label.

напис

text

ширина і висота

у знакомісцях (кількість символів)

width, height

колір фону

bg

колір тексту

fg

параметри шрифту (тип, кегль)

font

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

5 of 34

Клас Button

Створимо командну кнопку:

btn = Button(root, text = 'ok', width = 10, font = 'Arial 16')

btn.pack()

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

6 of 34

Клас Button

Під час створення ігрових і навчальних програм буває доречно додати на кнопку не текст, а зображення. Для цього потрібно задати значення атрибута image. Спочатку за допомогою функції

PhotoImage(file = 'шлях до файла')

потрібно зберегти в змінній шлях до графічного файлу і після цього значення цієї змінної присвоїти атрибуту image. Засобами tkinter можна завантажувати зображення форматів:

GIF

BMP

PNG

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

7 of 34

Клас Button

Створимо командну кнопку і додамо на неї малюнок із файлу Picture.gif, що міститься в тій самій папці, що і файл програми:

my_image = PhotoImage(file = 'Picture.gif')

btn = Button(root, image = my_image)

btn.pack()

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

8 of 34

Клас Button

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

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

9 of 34

Опрацювання події Натискання на кнопку

Команди програми із графічним інтерфейсом не просто виконуються від початку до кінця, хід їх виконання залежить від втручання користувача, який взаємодіє з програмою (натискає кнопки, вводить дані тощо, тобто створює події).

Подія — зовнішній вплив на об’єкт, на який цей об’єкт може реагувати.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

10 of 34

Опрацювання події Натискання на кнопку

У графічній програмі від віджетів очікуються події, а у відповідь на них викликаються функції — обробники подій, прикріплені до цих віджетів.

Обробник події — блок програмного коду, який виконується в разі настання події, з якою він пов’язаний.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

11 of 34

Опрацювання події Натискання на кнопку

Щоб прикріпити до кнопки обробник події Натискання на кнопку, необхідно під час створення об’єкта в переліку вказати атрибут command і присвоїти йому назву функції, яку буде викликано в разі натискання.

def btn_click():

btn = Button(root, text = 'ok', command = btn_click)

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

12 of 34

Опрацювання події Натискання на кнопку

У 7 класі ви ознайомилися з правилами створення й використання функцій користувача. Згадаймо правила опису функцій:

def <назва функції>(<перелік параметрів>):

<тіло функції>

Якщо функції не треба передавати значення, після її назви ставлять порожні дужки. Ці правила дійсні і для функцій — обробників подій.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

13 of 34

Опрацювання події Натискання на кнопку

Отже, додамо обробник події:

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

14 of 34

Опрацювання події Натискання на кнопку

Тепер програма реагує на натискання кнопки — колір тла головного вікна змінюється на зелений.

Зауважте! Обробник події має бути описаний вище, ніж виклик обробника події. Найчастіше описи функцій розміщують на початку тексту програми.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

15 of 34

Опрацювання події Натискання на кнопку

Створимо кнопку, котра стрибає.

Після натискання на цю кнопку координати її розташування змінюються випадковим чином.

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

16 of 34

Опрацювання інших подій

Можна зробити так, щоб об’єкт змінював властивості у відповідь на натискання певної клавіші клавіатури або миші.

Для цього віджет із подією й функцією — обробником події пов’язують викликом методу bind()

<віджет>.bind(<подія>, <функція>)

текстова константа, системна назва події

<подія>

назва функції — обробника події

<функція>

bind()

Віджет

Подія (event)

Функція

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

17 of 34

Опрацювання інших подій

Наприклад,

об’єкт класу Label

віджет — lab

Функцію action буде викликано щоразу, коли віджет lab у фокусі й натиснуто клавішу W:

клацання лівою кнопкою миші

подія — '<Button-1>'

описана в коді вище

функція — lab_click

lab.bind('W', action)

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

18 of 34

Опрацювання інших подій

Ознайомімося з системними назвами інших подій. Назва події розміщується в лапках і кутових дужках <>.

Дія

Системна назва події

Натискання клавіші Enter

'<Return>'

Натискання клавіш керування курсором

'<KeyPress-Up>' '<KeyPress-Down>' '<KeyPress-Left>' '<KeyPress-Right>'

Натискання будь-якої клавіші на клавіатурі

'<Key>'

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

19 of 34

Опрацювання інших подій

Продовження…

Дія

Системна назва події

Натиснуто ліву клавішу миші

'<Button-1>'

Натиснуто праву клавішу миші

'<Button-3>'

Рух миші

'<Motion>'

Входження вказівника миші в межі віджета

'<Enter>'

Вихід вказівника миші за межі віджета

'<Leave>'

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

20 of 34

Опрацювання інших подій

Функція, зазначена у виклику методу bind(), у разі настання події отримує один аргумент. Це об’єкт класу Event, що має опис подробиць події, корисних під час створення програм, наприклад, щоб змусити об’єкти рухатися вікном:

координати вказівника миші на віджеті

х і у

набраний на клавіатурі символ

char

код набраного на клавіатурі символу тощо

keysym_num

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

21 of 34

Опрацювання інших подій

Запрограмуємо змінення кольору тла віджета lab класу Label під час наведення на нього вказівника миші.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

22 of 34

Надання об’єкту фокуса

Як бути, коли у вікні програми є кілька віджетів, які можуть реагувати на однакові події? Щоб на подію відреагував певний об’єкт, слід надати йому фокус (зробити активним) викликом методу focus_set(). Подію потрібно прив’язати до вікна, і tkinter буде опрацьовувати події всіх віджетів вікна.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

23 of 34

Надання об’єкту фокуса

У вікні програми розташовано два об’єкти класу Label. Запрограмуємо ЛКМ вибір віджета у вікні та його пересування за натисканням клавіш зі стрілками. Після кожного натискання віджет має зміщуватися на 5 пікселів у відповідний бік.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

24 of 34

Надання об’єкту фокуса

Події пов’яжемо з об’єктом root  — вікном програми. Під час клацання лівою кнопкою миші віджета викликається функція focus_widget, яка надає віджету фокус.

При натисканні будь-якої клавіші викликається функція move_lab. У ній з об’єкта event за допомогою атрибута widget здійснюється доступ до об’єкта, для якого обробляється подія.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

25 of 34

Надання об’єкту фокуса

Методи winfo_x() і winfo_y() цього об’єкта повертають його координати х і у відносно вікна.

У змінних dx і dy формується величина зсуву віджета за кожною з осей після натискання на клавішу.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

26 of 34

Надання об’єкту фокуса

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

27 of 34

Надання об’єкту фокуса

Отже, програмуючи опрацювання дій користувача та описуючи функції — обробники подій, ви можете створити програми зі зручним графічним інтерфейсом.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

28 of 34

Ознайомтесь з цікавою інформацією

Українська науковця Катерина Ющенко стояла біля витоків української школи теоретичного програмування. Вона розробила Адресну мову, одну з перших мов програмування високого рівня у світі, у якій застосовуються операції над адресами об’єктів у пам’яті комп’ютера.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

29 of 34

Ознайомтесь з цікавою інформацією

Ґрейс Мюррей Гоппер — американська вчена в галузі комп’ютерних наук та конт-адмірал військово-морських сил США, одна з перших програмістів комп’ютера Марк І. Популяризувала ідею машинонезалежних мов програмування, що сприяло розробці мови програмування високого рівня COBOL.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

30 of 34

Питання для самоперевірки

  1. Побудуйте алгоритм створення програми з графічним інтерфейсом на Python.
  1. Як прикріпити до об’єкта Button обробник події Натискання на кнопку?
  1. Обговоріть у групі відмінності в застосуванні обробника натискання кнопки та обробника натискання зазначеної клавіші клавіатури або миші.

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

31 of 34

Розгадайте ребус

Подія

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

32 of 34

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

Проаналізувати

с. 170-177

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

33 of 34

Працюємо за комп’ютером

Сторінка

176-177

Розділ 5

§ 27

© Вивчаємо інформатику teach-inf.com.ua

34 of 34

Успіхів�у навчанні!

Нова українська школа

Урок 37

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.