1 of 26

Графічний інтерфейс користувача

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

Урок 36

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

teach-inf.com.ua

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

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

2 of 26

Графічний інтерфейс користувача

Ознайомімося із тим, як організувати взаємодію людини і комп’ютера з використанням графічних елементів керування.

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

Розділ 5

§ 26

3 of 26

Графічний інтерфейс користувача

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

Розділ 5

§ 26

4 of 26

Графічний інтерфейс користувача

from tkinter import*

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

Для створення програм із ГІК мовою Python застосовують модуль tkinter. Він містить багатоплатформну подійно-орієнтовану бібліотеку класів популярних елементів керування.

Розділ 5

§ 26

5 of 26

Створення вікна програми

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

Створимо порожнє вікно:

from tkinter import*

root = Tk()

root.title('Графічна програма')

root.geometry('300x150')

root.mainloop()

Розділ 5

§ 26

6 of 26

Створення вікна програми

Проаналізуємо наведений код.

Створюється об’єкт root як новий об’єкт класу Тк(), який визначено в модулі tkinter; через змінну root можна керувати виглядом і «поведінкою» вікна.

root = Tk()

установлює заголовок вікна

Метод title

Розділ 5

§ 26

7 of 26

Створення вікна програми

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

запускає головний цикл обробки подій. Рядок root.mainloop() має бути останнім у програмному коді.

Метод mainloop

установлює розміри вікна (в пікселях). Як аргумент методу передається рядок у форматі «ширина х висота». Якщо під час створення вікна програми не викликати метод geometry(), то вікно займе простір, необхідний для розміщення елементів керування.

Метод geometry()

Розділ 5

§ 26

8 of 26

Створення вікна програми

За замовчуванням вікно розміщуєтьсяу верхньому лівому куті екрана. Але ми можемо змінити його положення, передавши потрібні значення в метод geometry():

root.geometry('250x150+300+250')

Тепер рядок у методі geometry має таку структуру:

ширина х висота + координата X + координата Y

Тобто під час запуску вікно розміститься на 300 пікселів праворуч і 250 пікселів униз від верхнього лівого кута екрана.

Розділ 5

§ 26

9 of 26

Додавання віджета

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

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

Розділ 5

§ 26

10 of 26

Додавання віджета

Властивості віджета визначають, як він виглядає на екрані (наприклад, ширину і висоту, колір тощо). Початкові значення властивостей установлюють під час створення об’єкта.

Атрибути об'єкта — це імена змінних, у яких зберігаються значення його властивостей.

Розділ 5

§ 26

11 of 26

Додавання віджета

Віджети створюються викликом конструктора відповідного класу:

[<змінна> = ]<клас>([<батьківський_віджет>,] [<атрибут> = <значення>])

Тут і далі елементи, зазначені в квадратних дужках, задавати не обов’язково. Значення властивостей можуть задаватися (змінюватися) пізніше.

Розділ 5

§ 26

12 of 26

Додавання віджета

Батьківський віджет — це елемент керування, до якого буде поміщено новостворений віджет.

Якщо батьківський віджет не задано, то новий віджет буде розміщено в головному вікні. Далі можуть задаватися значення атрибутів.

Більшість віджетів у Tkinter мають такі властивості, як:

висота (height)

ширина (width)

шрифт (font)

колір віджета (bg — від англ. background)

колір шрифту (fg — від англ. foreground) тощо

Розділ 5

§ 26

13 of 26

Додавання віджета

Розглянемо створення елемента керування на прикладі напису — об’єкта класу Label. Віджет Label містить рядок тексту й застосовується для виведення заголовків, підписів інших елементів інтерфейсу, результатів обчислень тощо.

Синтаксис створення віджета:

[змінна = ]Label([бaтькiвcький_вiджeт, ]

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

Розділ 5

§ 26

14 of 26

Додавання віджета

Під час створення об’єкта Label можна задати такі атрибути:

текстовий рядок

text

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

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

width, height

колір фону

bg

колір символів

fg

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

font

font = 'Arial 18'

Наприклад, шрифт Arial, кегль 18

Розділ 5

§ 26

15 of 26

Додавання віджета

Створений об’єкт потрібно відобразити у вікні. Для задання розташування віджета використовують методи-пакувальники:

де параметри х і у установлюють зміщення елемента по горизонталі й вертикалі відносно верхнього лівого кута вікна;

place(x, y)

виклик якого розташовує віджети один біля одного

pack()

Зверніть увагу: якщо метод-пакувальник не використати, то напис у вікні так і не з’явиться, хоча він є в програмі.

Розділ 5

§ 26

16 of 26

Додавання віджета

Додамо у вікно напис Hello World!,

lab = Labelfroot, text = 'Hello World!', font = 'Arial 18', bg = 'blue', fg = 'yellow')

lab.pack()

Напис у вікні «прилип» до верхнього краю вікна. Але в будь-якому застосунку віджети не розкидані по вікну, а розміщені на визначених місцях.

Розділ 5

§ 26

17 of 26

Додавання віджета

Замінимо команду виклику методу lab.pack() викликом методу place():

lab.place(x = 80, у = 30)

Розділ 5

§ 26

18 of 26

Додавання віджета

Змінити властивість напису або будь-якого іншого віджета можна так:

ім'я_віджета ["атрибут"] = значення

Змінити для створеного об’єкта lab текст напису,

lab["text"] = 'Я вивчаю Python'

Розділ 5

§ 26

19 of 26

Загальні методи віджетів

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

Запис команди для виклику методу складається з назви об’єкта та назви методу, що розділені крапкою:

назва об'єкта, назва методу()

Розділ 5

§ 26

20 of 26

Загальні методи віджетів

Хоча у кожного класу графічних компонентів свій набір методів, деякі:

Метод config() призначений для зміни властивостей раніше створеного віджета:

pack()

place()

config()

destroy()

Є загальними для всіх віджетів.

ім'я_віджета.config(атрибут = значення)

Метод destroy() викликається для знищення віджета.

Розділ 5

§ 26

21 of 26

Загальні методи віджетів

Змінити для створеного об’єкта lab колір тла й символів:

lab.config(bg = 'grey', fg = 'white')

Розділ 5

§ 26

22 of 26

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

Із чого починається побудова графічної програми?

Опишіть порядок дій під час створення вікна програми.

Як створити об’єкт класу Label?

Як змінити властивості вже створеного віджета Label?

Змініть у вже створеного віджета Label значення атрибута text на 'Погода на завтра'.

Розділ 5

§ 26

23 of 26

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

Інтерфейс

Розділ 5

§ 26

24 of 26

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

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

с. 165-169

Розділ 5

§ 26

25 of 26

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

Сторінка

169

Розділ 5

§ 26

26 of 26

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

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

Урок 36

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

teach-inf.com.ua

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

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