1 of 27

Урок 60��Основи графічного інтерфейсу користувача. Графічні об’єкти та їх властивості: створення вікна, створення кнопок, мітки, однорядкового текстового поля, багаторядкового текстового поля

9 клас

Підготували: вчителі інформатики Черкаської ЗОШ №33 Літвінова О.М., Максюта Л.В., вчителі інформатики Першої міської гімназії Чех О.І., Коваленко Є.О.

2 of 27

1. Загальний порядок створення графічного інтерфейсу в Python

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

Для створення графічного інтерфейсу в Python можна використовувати наступні бібліотеки:

  • Tkinter (від англ. Tk interface) — багатоплатформна графічна бібліотека інтерфейсів на основі засобів  Tk, поширювана з відкритими вихідними текстами, написана Стіном Лумхольтом (Steen Lumholt) і Гвідо ван Россумом. Бібліотека Tkinter не реалізує власний інтерфейс до бібліотеки Tk, а забезпечує конвертування звернень Python в звернення Tcl — мови, яка тісно інтегрована з Tk.
  • wxPython — оболонка бібліотеки графічного інтерфейсу користувача wxWidgets.

3 of 27

Середовище для програмування Python з модулем tkinter

ОНЛАЙН

Python – онлайн (з модулем tkinter): http://samel.ho.ua/

Посилання на середовище для програмування Python – онлайн із модулем tkinter:

https://replit.com/

Відеоінструкція по роботі з replit

​

МОБІЛЬНИЙ ПРИСТРІЙ

Посилання на додаток у Play маркет:

https://play.google.com/store/apps/details?id=ru.iiec.pydroid3&hl=uk

Відеоінструкція

​

КОМП’ЮТЕР

Посилання на сайт для завантаження і встановлення середовища Тhonny: https://thonny.org/

​

4 of 27

1. Загальний порядок створення графічного інтерфейсу в Python

  • PyQT — оболонка на мові програмування Python для бібліотеки Qt. складається з більш ніж шести сотень класів, що охоплюють ряд функцій, таких як: Графічні інтерфейси, Бази даних SQL, Веб-інструментарій, Обробка XML,мережі.
  • PySimpleGUI — новий цікавий модуль на python3 для відтворення графічних інтерфейсів. Опис елементів для форми вкрай простий, і в той же час можна зробити досить комплексні додатки, з окремими групами елементів, вкладками.

Створення вікна

Створення кнопок, текстових полів

Створення функцій для опрацювання

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

Реалізація програми

5 of 27

2. Графічні об’єкти та їх властивості

  1. Tk() - Вікно. Діалогове вікно призначене для виведення повідомлень користувачу.
  2. Button() - Кнопки. Використовують для управління програмою. Відповідає клас Button.
  3. Label() - Мітки (написи). Використовуються для інформування користувача про результати виконання програмою дій або про ті дії, які має виконати користувач.
  4. Entry() - Однорядкове текстове поле використовується користувачем для введення користувачем тексту в один рядок.
  5. Text() -Багаторядкове текстове поле. Призначено для введення великого тексту.

6 of 27

Методи розміщення об’єктів (віджетів) у вікні

  • назва об’єкта.place(х=відступ зліва, у=відступ зверху) - метод вказує на місце розташування об’єкта
  • назва об’єкта.pack(side=сторона) - метод “упакування” об’єкта у вікно, де side (сторона), приймає одне із значень: TOP, BOTTOM, LEFT, RIGHT (верх, низ, ліво, право)
  • ​

​

назва об’єкта.grid(row=номер рядка, column=номер стовпця) - метод розміщення за принципом таблиці, де вікно уявно розбивається на таблицю, в комірках якої розміщуються об’єкти, властивість row і column вказують на номер рядка і стовпця цієї уявної таблиці

7 of 27

Метод pack()

Для позиціонування елементів у вікні застосовуються різні способи, і найпростіший спосіб представляє виклик у елемента методу pack (). Цей метод приймає такі параметри:

  • expand: якщо одно True, то віджет заповнює весь простір контейнера.
  • fill: визначає, чи буде віджет розтягуватися, щоб заповнити вільний простір навколо. Цей параметр може набувати таких значень: NONE (за замовчуванням, елемент не розтягується), X (елемент розтягується тільки по горизонталі), Y (елемент розтягується тільки по вертикалі) і BOTH (елемент розтягується по вертикалі і горизонталі).
  • side: вирівнює віджет по одній зі сторін контейнера. Може приймати значення: TOP (за замовчуванням, вирівнюється по верхній стороні контейнера), BOTTOM (вирівнювання по нижньому боці), LEFT (вирівнювання по лівій стороні), RIGHT (вирівнювання по правій стороні).

8 of 27

Метод place()

  • height і width: встановлюють відповідно висоту та ширину елемента в пікселях
  • relheight і relwidth:задають висоту та ширину елемента, але як значення використовується число float в проміжку між 0.0 та 1.0, яке вказує на частку від висоти та ширини батьківського контейнера
  • x та y: встановлюють зміщення елемента по горизонталі та вертикалі в пікселях відповідно щодо верхнього лівого кута контейнера
  • relx і rely:задають зміщення елемента по горизонталі та вертикалі, але як значення використовується число float у проміжку між 0.0 та 1.0, яке вказує на частку від висоти та ширини батьківського контейнера
  • bordermode: визначає формат межі елемента. Може приймати значення INSIDE (за замовчуванням) та OUTSIDE
  • anchor: встановлює опції розтягування елемента. Може приймати значення n, e, s, w, ne, nw, se, sw, c, які є скороченнями від North (північ – вгору), South (південь – низ), East (схід – права сторона), West (захід) - ліва сторона) та Center (по центру). Наприклад, значення nw вказує на лівий верхній кут
  • ​

9 of 27

Приклад №1. Вікно - Tk()

Бібліотека tkinter застосовується для створення зручних вікон користувацького інтерфейсу.

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

Для створення найпростішого вікна використовуємо наступний скрипт:

​

�

Код програми

Результати виконання

from tkinter import *

window = Tk()

window.title("Графічна програма на Python")

window.geometry("400x300")

window.mainloop()

​

​

10 of 27

Приклад №2. Кнопки - Button()

Бібліотека tkinter містить набір компонентів або віджетів (об’єктів), одним з яких є кнопка. Додавання кнопки в вікно:

​

​

​

​

​

​

Для створення кнопки використовується конструктор Button (). У цьому конструкторі за допомогою параметра text можна встановити текст кнопки.

Щоб зробити елемент видимим, у нього викликається метод pack ().

Код програми

Результати виконання

from tkinter import *

root = Tk()

root.title("Програмую на Python")

root.geometry("300x300")

btn = Button(text="Hello")

btn.pack()

root.mainloop()

​

​

11 of 27

Приклад №3. Кнопки - Button()

Кожен віджет, в тому числі кнопка, має ряд атрибутів, які впливають на її візуалізацію, і які ми можемо налаштувати через конструктор:

​

Код програми

Результати виконання

​

​

​

12 of 27

2. Графічні об’єкти та їх властивості. Мітки (написи) - Label()

Текстові мітки (написи) в Python представлені елементом Label.

Цей елемент дозволяє виводити статичний текст без можливості редагування. �Для створення елемента Label застосовується конструктор, який приймає два параметри:

Label(master, options)

Параметр master представляє посилання на батьківський контейнер (вікно до якого належить),

а параметр options подає такі іменовані параметри:

  • anchor: встановлює позиціонування тексту;
  • bg / background: фоновий колір;
  • bitmap: посилання на зображення, яке відображається на мітці;
  • bd: товщина кордону мітки;
  • fg / foreground: колір тексту;
  • font: шрифт тексту, наприклад, font = "Arial 14" - шрифт Arial висотою 14px height: висота елемента)

​

13 of 27

Приклад №4. Мітки (Написи) - Label()

Код програми

Результати виконання

​

​

14 of 27

3. Графічні об’єкти та їх властивості. Однорядкове текстове поле - Entry()�

Елемент Entry представляє поле для введення тексту. Конструктор Entry приймає такі параметри:

  • bg: фоновий колір
  • bd: товщина межі
  • cursor: курсор покажчика миші при наведенні на текстове поле
  • fg: колір тексту
  • font: шрифт тексту
  • justify: встановлює вирівнювання тексту. Значення LEFT вирівнює текст по лівому краю, CENTER - по центру, RIGHT - по правому краю.
  • relief: визначає тип межі, за замовчуванням значення FLAT
  • selectbackground: фоновий колір виділеної частини тексту

15 of 27

3. Графічні об’єкти та їх властивості. Однорядкове текстове поле - Entry()�

  • selectforeground: колір виділеного тексту
  • show: задає маску для символів, що вводять
  • state: стан елемента, може приймати значення NORMAL (за замовчуванням) і DISABLED
  • textvariable: встановлює прив'язку до елементу StringVar
  • width: ширина елемента

16 of 27

Приклад №5.1. Однорядкове текстове поле - Entry()�

Спосіб 1. Визначимо елемент Entry і після натискання на кнопку виведемо його текст в окреме вікно з повідомленням:

​

​

Код програми

Результати виконання

​

​

17 of 27

Приклад №5.2. Однорядкове текстове поле - Entry()�

Спосіб 2. Визначимо елемент Entry і після натискання на кнопку виведемо його текст в окреме вікно з повідомленням:

​

​

Код програми

Результати виконання

​

​

18 of 27

Приклад №6.1 (метод grid() розміщення по таблиці)�

Для виведення повідомлення у прикладі застосовується додатковий модуль messagebox, що містить функцію showinfo (), яка власне і виводить введений в текстове поле текст. Для отримання введеного тексту використовується компонент StringVar.

​

​

19 of 27

Приклад №6.2 (метод place() довільне розміщення)�

Для виведення повідомлення у прикладі застосовується додатковий модуль messagebox, що містить функцію showinfo (), яка власне і виводить введений в текстове поле текст. Для отримання введеного тексту використовується метод bid() для створення події

​

​

20 of 27

Однорядкове текстове поле - Entry(). Методи.

Елемент Entry має ряд методів. Основні з них:

  • insert (index, str): вставляє в текстове поле рядок за певним індексом
  • get (): повертає введений в текстове поле текст
  • delete (first, last = None): видаляє символ за індексом first. Якщо вказано параметр last, то видалення проводиться до індексу last. Щоб видалити до кінця, як другий параметр можна використовувати значення END.

​

�

21 of 27

Приклад №7. Однорядкове текстове поле - Entry(). Методи.

22 of 27

4. Створення багаторядкового текстового поля - Text()

Text - багаторядкове текстове поле. Цей віджет часто зустрічається

при заповненні веб-форм.

У tkinter багаторядкове текстове поле створюється від класу Text. За замовчуванням його розмір дорівнює 80 символів по горизонталі і 24 символи по вертикалі.

from tkinter import *

root = Tk()

text = Text(width=25, height=5, bg="white", fg='red', wrap=WORD)

text.pack()

root.mainloop()

Значення WORD опції wrap дозволяє переносити слова на новий рядок цілком, а не по буквах.

Text і Scrollbar якщо в текстове поле вводиться більше ліній тексту, ніж його висота, то воно саме буде прокручуватися вниз. При перегляді прокручувати вгору-вниз можна за допомогою колеса миші і стрілками на клавіатурі. Однак буває зручніше користуватися скроллером - смугою прокрутки. У tkinter скролери виробляються від класу Scrollbar. Об'єкт-скроллер пов'язують з віджетом, якому він потрібен.

23 of 27

Приклад №8. Багаторядкове текстове поле. Text і Scrollbar

У прикладі створюється скроллер, до якого за допомогою опції command прив'язується прокрутка текстового поля по осі y - text.yview. У свою чергу текстовому полю опцією yscrollcommand встановлюється раніше створений скроллер - sc.set.

24 of 27

Приклад №9. Приклад використання методу pack

25 of 27

Практичне завдання до уроку №60 (7-11балів)

Увага! все можна написати в зошиті, але оцінка буде менша на 3 бали.

  1. Оберіть будь-який приклад (кілька прикладів) із даного уроку.
  2. Створіть свою програму згідно з обраним прикладом (можна просто перенабрати приклад), але за ваші зміни в коді можете отримати +2 бали.
  3. Запустіть на виконання вашу програму (за необхідності виправте помилки, аж поки програма не запрацює правильно)
  4. Зробіть фото або скріншот коду програми та результату його виконання.
  5. Здайте все в класрум.

​

​

​

​

26 of 27

Завдання на 12 балів

  1. Створити форму блакитного кольору з чотирма різнокольоровими кнопками(значення x і y) і міткою (завдання) для лінійної функції 2⋅x+3⋅y=. У формі виконується розв’язування прикладу для чотирьох пар x і y.
  2. Створити користувацький інтерфейс з використанням однорядкового текстового поля і кнопок для розв’язання квадратного рівняння.
  3. Створити користувацький інтерфейс з використанням багаторядкового текстового поля і скролінгу для прогнозу погоди.

27 of 27

Використані джерела:

  1. Руденко В.Д., Жугастров О.О. Інформатика. Основи алгоритмізації і програмування мовою Python. – Харків: «Ранок», 2019
  2. Морзе Н.В.. Барна О.В., Вембер В.П. Інформатика. Підручник для 8 класу. – К.: «Оріон», 2016
  3. Морзе Н.В.. Барна О.В., Вембер В.П. Інформатика. Підручник для 9 класу. – К.: «Оріон», 2017
  4. METANIT.COM. Сайт о программировании
  5. Програмування в школі. Блог
  6. ВІКІ ЦДПУ. Програмуємо разом.
  7. Лаборатория линуксоида
  8. Путівник мовою програмування Python
  9. https://www.delftstack.com

​