Технология программирования. Основы графического интерфейса (GUI)

1. Технология программирования

ТЕХНОЛОГИЯ ПРОГРАММИРОВАНИЯ
Основы графического интерфейса
(GUI)
Автор: Ботвинков А.В.

2. Графический пользовательский интерфейс

ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
Интерфейс – набор методов и средств взаимодействия между
элементами системы.
Пользовательский интерфейс (graphical user interface, GUI) – способ
взаимодействия между пользователем и компьютером. Он использует
окна, значки, меню. Манипулировать GUI можно как с помощью мышки,
так и с помощью клавиатуры.
GUI-библиотека
GUI-библиотека содержит виджеты. Виджеты (widget) - это наборы
графических элементов управления (кнопки, поля ввода/вывода,
рисования, меню, и т.д.)
Автор: Ботвинков А.В.

3. Библиотеки GUI В python

БИБЛИОТЕКИ GUI В PYTHON
1. Tkinter
2. Kivy
3. PyQt
4. Flexx
5. Dabo
6. Pyforms
8. wxPython
Автор: Ботвинков А.В.

4. Знакомство с Tkinter

ЗНАКОМСТВО С TKINTER
Tkinter — графическая библиотека Python, которая предназначена для
создания программ с оконным интерфейсом. Она кроссплатформенная,
то есть с ее помощью можно писать приложения для Windows, Linux,
macOS.
Схематично работу с Tkinter можно представить в виде четырёх шагов:
1. Делаем эскиз интерфейса и продумываем логику приложения
2. Подключаем библиотеку Tkinter с помощью директивы import.
3. Создаём главное окно приложения, в котором будут размещаться все
графические элементы и создаём главный цикл событий —
он включает в себя все события, происходящие при взаимодействии
пользователя с интерфейсом.
4. Добавляем виджеты — визуальные элементы, выполняющие
определённые действия.
5. Добавляем логику обработки виджетов.
Автор: Ботвинков А.В.

5. Виджеты в Tkinter

ВИДЖЕТЫ В TKINTER
Ключевые объекты в работе с Tkinter — виджеты. Это аналоги тегов
из HTML, которые позволяют создавать интерактивные
и неинтерактивные элементы, например надписи или кнопки. Всего их
18 видов, но чаще всего используют следующие:
Button — кнопки;
Canvas — «холст», на котором рисуют графические фигуры;
Entry — виджет для создания полей ввода/вывода;
Label — контейнер для размещения текста или изображения;
Menu — виджет для создания пунктов меню.
Автор: Ботвинков А.В.

6. 1. Эскиз интерфейса

1. ЭСКИЗ ИНТЕРФЕЙСА
Прежде чем писать код, необходимо ответить на несколько вопросов:
1. Какие данные мы хотим получить от пользователя и в каком виде?
2. Какое событие будет запускать обработку: нажатие кнопки, получение
приложением всех необходимых данных или что-то другое?
3. Как будем показывать результат? (сохранение в файл)
Создаём калькулятор для расчёта индекса массы тела (ИМТ):
1. В нашем случае необходимо получить от пользователя вес и рост
в виде целых чисел. При этом вес должен быть введён в килограммах,
а рост — в сантиметрах.
2. ИМТ будет рассчитываться по нажатии кнопки
3. Результат — выводиться во всплывающем окне в виде значения ИМТ
и категории, к которой он относится.
Автор: Ботвинков А.В.

7. 1 Эскиз интерфейса

1 ЭСКИЗ ИНТЕРФЕЙСА
Схематично графический интерфейс нашего калькулятора можно
нарисовать следующим образом:
Автор: Ботвинков А.В.

8. 2 Подключаем библиотеку Tkinter

2 ПОДКЛЮЧАЕМ БИБЛИОТЕКУ TKINTER
Библиотека Tkinter предустановлена в Python. Поэтому её нужно только
импортировать:
Благодаря данной записи можно обращаться к библиотеке используя
краткое именование tk
Первая строка позволяет нам загрузить все методы Tkinter
и использовать их в коде без ссылки на их наименование. Второй
строкой мы явно импортируем метод messagebox, который будем
использовать для вывода всплывающего окна с результатом.
Автор: Ботвинков А.В.

9. 3 Создаём окно приложения

3 СОЗДАЁМ ОКНО ПРИЛОЖЕНИЯ
Библиотека Tkinter предустановлена в Python. Поэтому её нужно только
импортировать:
window.mainloop() указывает на запуск бесконечного цикла событий, без
этой строчки приложение будем сразу закрываться после запуска.
Результат запуска приложения
Автор: Ботвинков А.В.

10. 3 Создаём окно приложения

3 СОЗДАЁМ ОКНО ПРИЛОЖЕНИЯ
Данный метод изменит окно по ширине и высоте соответственно.
Автор: Ботвинков А.В.

11. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Наиболее часто используемые виджеты:
Класс виджета
Описание
Label
Используется для отображения текста или вставки
изображения на окне приложения.
Button
Кнопка, на которой может быть текст, совершает
определенные действия при нажатии на нее.
Entry
Виджет для ввода одной строчки текста. Эквивалент <input
type="text"> в HTML.
Text
Виджет для ввода большого текста. Эквивалент <textarea> в
HTML.
Frame
Прямоугольная область, что используется для группировки
виджетов или для добавления расстояния между виджетами.
Автор: Ботвинков А.В.

12. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Использование виджета Frame в Tkinter
Виджеты рамок важны для организации макета виджетов в приложении.
Рамки лучше всего рассматривать как контейнеры для других виджетов.
Рассмотрим, как работает виджет рамки, и как вы можете вставить в них
другие виджеты.
Следующий скрипт создает пустой виджет рамки и добавляет его на
главное окно приложения:
Автор: Ботвинков А.В.

13. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
В окне приложения необходимо разместить несколько элементов
с нашего эскиза: два поля ввода информации с подписями и одну кнопку.
Важно, чтобы поля не накладывались друг на друга и не уходили
за пределы окна. В Tkinter для этого есть несколько методов:
pack — используется, когда мы работаем с контейнерами для элементов.
Позволяет позиционировать кнопки, надписи или другие элементы внутри
контейнеров.
place — позволяет позиционировать элементы, указывая точные
координаты.
grid — размещает элементы по ячейкам условной сетки, разделяющей
окно приложения.
Автор: Ботвинков А.В.

14. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
В окне приложения нам необходимо добавить три вида виджетов: поле
для ввода информации (Entry), текстовые надписи (Label) и кнопку
(Button).
Начнём с надписей. Воспользуемся виджетом Label:
Автор: Ботвинков А.В.

15. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Добавим вторую надпись о весе аналогичным образом, но при
позиционировании в grid укажем следующую, четвёртую строку:
Автор: Ботвинков А.В.

16. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Теперь добавим поля для ввода пользовательской информации,
используя виджет Entry: :
Автор: Ботвинков А.В.

17. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Аналогично добавляем поля для веса, используя виджет Entry: :
Автор: Ботвинков А.В.

18. 4 Добавляет виджеты

4 ДОБАВЛЯЕТ ВИДЖЕТЫ
Осталось добавить кнопку, которая будет запускать расчёт ИМТ. Сделаем
это с помощью виджета Button: :
Автор: Ботвинков А.В.

19. 5 Добавляем логику обработки виджетов

5 ДОБАВЛЯЕМ ЛОГИКУ ОБРАБОТКИ ВИДЖЕТОВ
Пишем функцию по расчёта индекса массы тела(bmi) - получаем из полей
ввода информацию и обрабатываем её:
Автор: Ботвинков А.В.

20. 5 Добавляем логику обработки виджетов

5 ДОБАВЛЯЕМ ЛОГИКУ ОБРАБОТКИ ВИДЖЕТОВ
Добавляем логику для анализа ИМТ и выводим результат для
пользоваталя с помощью messagebox:
Автор: Ботвинков А.В.

21. 5 Добавляем логику обработки виджетов

5 ДОБАВЛЯЕМ ЛОГИКУ ОБРАБОТКИ ВИДЖЕТОВ
Остаётся последний шаг — наша функция должна запускаться при
нажатии на кнопку «Рассчитать ИМТ». Для этого добавим
свойство command в виджет Button:
Автор: Ботвинков А.В.

22. 5 Добавляем логику обработки виджетов

5 ДОБАВЛЯЕМ ЛОГИКУ ОБРАБОТКИ ВИДЖЕТОВ
Результат:
Автор: Ботвинков А.В.

23. 5 Добавляем логику обработки виджетов

5 ДОБАВЛЯЕМ ЛОГИКУ ОБРАБОТКИ ВИДЖЕТОВ
Правило именования переменных в Tkinter:
Класс
виджета
Префикс
названия
переменной
Пример
Label
lbl
lbl_name
Button
btn
btn_submit
Entry
ent
ent_age
Text
txt
txt_notes
frm
frm_addres
s
Frame
Автор: Ботвинков А.В.