1 of 20

Віконні проєкти. Вікно, його властивості

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

Урок 24

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

teach-inf.com.ua

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

Ривкінд Й.Я. та ін.

2 of 20

Готуємось до вивчення нового матеріалу

  1. Що таке вікно програми?
  1. З вікнами яких програм ви працювали?
  1. Які елементи керування ви використовували у вікнах програм?

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

Розділ 2

§ 2.5

3 of 20

Проєкти з вікнами

У цьому пункті йтиметься про:

    • створення проєктів з вікнами;
    • форми та вікна;
    • властивості вікон та їх значення.

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

Розділ 2

§ 2.5

4 of 20

Поміркуйте

Порівняйте проєкти з використанням вікна введення-виведення, які ви створювали на попередніх уроках, з проєктами з використанням вікон, на яких розміщено елементи керування (кнопки, поля, прапорці та ін.). Які їх переваги та недоліки?

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

Розділ 2

§ 2.5

5 of 20

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

Розпочинаємо навчання зі створення проєктів з вікнами, на яких можна розмістити елементи керування (кнопки, поля, прапорці та ін.) і використовувати їх під час виконання проєкту.

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

Розділ 2

§ 2.5

6 of 20

Проєкти з вікнами

Для створення проєкту з вікнами мовою Python потрібно приєднати до проєкту модуль tkinter, що входить до стандартної бібліотеки модулів Python. Модуль приєднується до проєкту виконанням команди:

from tkinter import *

Англ. from – з, import – імпортувати.

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

Розділ 2

§ 2.5

7 of 20

Проєкти з вікнами

Для створення вікна потрібно вибрати для нього ім’я та виконати команду:

<ім’я_вікна> = Тк()

Головному вікну проєкту часто надають ім’я root (англ. root – корінь). Далі в командах будемо використовувати саме це ім'я для вікна.

Команда створення вікна з іменем root повинна бути такою:

root = Tk()

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

Розділ 2

§ 2.5

8 of 20

Проєкти з вікнами

Звертаємо вашу увагу!

Для виконання віконних проєктів у онлайн-середовищах, наприклад на сайтах Replit (replit.com) або CodeHS (codehs.com), останньою у проєкті повинна бути команда очікування подій у вікні:

root.mainloop()

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

Розділ 2

§ 2.5

9 of 20

Проєкти з вікнами

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

200 на 200 пікселів

Рядок заголовка вікна

містить напис tk

Колір фону – світло-сірий

Піксель – точка графічного зображення на екрані

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

Розділ 2

§ 2.5

10 of 20

Проєкти з вікнами

Значення всіх властивостей вікна можна змінити.

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

(англ. title – заголовок, назва). Наприклад, команда:

root.title('<текст>')

root.title('Мій перший проєкт')

виводить у рядок заголовка вікна напис Мій перший проєкт.

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

Розділ 2

§ 2.5

11 of 20

Проєкти з вікнами

Для змінення розмірів і положення вікна потрібно використати команду:

root.geometry('<рядок параметрів>')

У рядку параметрів можна вказати:

  • ширину та висоту вікна, між якими стоїть символ «х»,
  • відстань лівої межі вікна від лівої межі екрана та відстань верхньої межі вікна від верхньої межі екрана, перед якими стоять символи «+».

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

Розділ 2

§ 2.5

12 of 20

Проєкти з вікнами

Так, команда:

root.geometry('600x400+200+100')

установить ширину вікна 600 пікселів, висоту вікна – 400 пікселів, відстань лівої межі вікна від лівої межі екрана – 200 пікселів, відстань верхньої межі вікна від верхньої межі екрана –

100 пікселів.

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

Розділ 2

§ 2.5

13 of 20

Проєкти з вікнами

Команда:

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

root.geometry('400x250')

Установить ширину вікна – 400 пікселів і висоту вікна – 250 пікселів, а положення вікна не змінить.

А якщо виконати команду:

То розміри вікна не зміняться, а зміняться лише відстані вікна від лівої та верхньої меж екрана.

root.geometry('+300+200')

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

Розділ 2

§ 2.5

14 of 20

Проєкти з вікнами

Для змінення кольору фону вікна потрібно вказати назву кольору в команді:

root['bg']='<Koлip>'

Наприклад, після виконання:

root['bg']='yellow'

Колір фону вікна стане жовтим.

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

Розділ 2

§ 2.5

15 of 20

Проєкти з вікнами

На малюнку наведено вигляд вікна після виконання команд:

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

Розділ 2

§ 2.5

16 of 20

Для тих, хто хоче знати більше

Якщо команда root.mainloop() буде використана у проєктах, створених у середовищі розробки проєктів IDLE, то вікно виконання проєкту можна буде відкрити, двічі клацнувши у вікні Провідник на файлі, у якому зберігається проєкт.

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

Розділ 2

§ 2.5

17 of 20

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

«Ребуси українською» © rebus1.com

Вікно

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

Розділ 2

§ 2.5

18 of 20

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

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

§ 2.5, с. 96-100

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

Розділ 2

§ 2.5

19 of 20

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

Сторінка

99

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

Розділ 2

§ 2.5

20 of 20

Дякую за увагу!

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

Урок 24

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

teach-inf.com.ua

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

Ривкінд Й.Я. та ін.