Разработка web-приложения. ЛР по ВТП для ВТ (Питон). Методические указания к лабораторным работам для студентов, обучающихся в бакалавриате по направлениям

• Название: Методические указания к лабораторным работам для студентов, обучающихся в бакалавриате по направлениям
• Анкор: Разработка web-приложения
• Дата: 18.05.2022
• Размер: 2.07 Mb.
• Имя файла: ЛР по ВТП для ВТ (Питон).doc
• Тип: Методические указания; #536632
• страница: 1 из 10

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«КАЛИНИНГРАДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

ВЫСОКОУРОВНЕВЫЕ ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ (ВТП)
Методические указания к лабораторным работам для студентов, обучающихся

в бакалавриате по направлениям:

230100 – Информатика и вычислительная техника

230700 – Прикладная информатика

Калининград

2022

Лабораторная работа № 1

Основные элементы пользовательского интерфейса

Цель работы: изучение характеристик основных компонентов пользовательского графического интерфейса и закрепление на практике навыков его проектирования.
Введение

В настоящее время почти все программные приложения, которые создаются для конечного пользователя, используют графический интерфейс (graphical user interface – GUI). 

Основные компоненты графического интерфейса пользователя содержит библиотека Tk написанные на языке программирования Tcl. Tkinter – это пакет для Python, предназначенный для работы с библиотекой Tk в составе модуля tkinter. Не вдаваясь в подробности, Tkinter можно охарактеризовать как переводчик с языка Python на язык Tcl. Программа пишется на языке Python, а код модуля tkinter после этого переводит её инструкции на язык Tcl, который понимает библиотека Tk.

Tkinter импортируется стандартно для модуля Python любым из способов: import tkinter, from tkinter import *, import tkinter as tk.

Далее, чтобы написать GUI-программу, надо выполнить приблизительно следующее:

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

Шаблон листинга для создания CUI имеет вид:

from tkinter import *

root = Tk()

……..

root.mainloop()

Tk() - это функция tkinter, открывающая главное окно любого приложения

mainloop циклически получает информацию о событиях от системы окна и отправляет их обработчикам приложения.

Объект окна верхнего уровня создается от класса Tk модуля tkinter. Переменную, связываемую с этим объектом, обычно называют root (корень), хотя программист может дать ей и другое имя:

root = Tk()

Размер окна можно задать через его свойство:

root.geometry("400x220")

Запрещает реконфигурацию окна команда:

root.resizable(0,0) или root.resizable(width=False, height=False).

В этом случае из заголовка исчезают кнопки реконфигурирования окна.

С помощью команды <окно>.minsize(width=<размер>, height=<размер>) можно устанавливать минимальный размер окна, а командой maxsize - максимальный. Если они равны, то окно будет постоянного размера, т.е. его нельзя изменить во время работы программы.

Текст заголовка окна можно задать командой:

root.title("GUI на Python")

Закрывается окно командой:

root.destroy()
Наиболее часто при создании графического интерфейса используются следующие виджеты:
button (кнопка)

batton - простая кнопка для вызова некоторых действий (выполнения определенных команд).

Если в ходе работы программы параметры кнопки не будут меняться, то можно создавать кнопку без имени по синтаксису

Batton([<родитель>], [{свойство}])

В этом случае кнопка размещается на пространстве формы только с помощью менеджера pack():

Batton([<родитель>], [{свойство}]). pack()

Если предполагается, что в ходе работы программы параметры кнопки могут модифицироваться, то при создании кнопка должна быть поименована, т.е.она создается по синтаксису:

<имя> = Batton([<родитель>], [{свойство}])

При этом допускается русское имя кнопки. Ниже приводится фрагмент листинга, реализующий размещение на форме кнопки.

from tkinter import *

import time
root = Tk()

root.geometry('800x600')
б =Button()

б.place(x = 65, y = 100)
root.mainloop()
В этом примере расположение кнопки задается в абсолютных координатах окна, т.е. при таком варианте создания кнопки можно использовать и менеджер place().

К основным параметрам кнопки относятся:

• 
  bg/background: фоновый цвет кнопки;
  
• 
  fg/foreground: цвет текста кнопки;
  
• 
  font: шрифт текста, например, font="Arial 14" - шрифт Arial высотой 14px, или font=("Verdana", 13, "bold") - шрифт Verdana высотой 13px с выделением жирным;
  
• 
  height: высота кнопки (число строк);
  
• 
  width: ширина кнопки (в символах);
  
• 
  justify: устанавливает выравнивание текста. Значение LEFT выравнивает текст по левому краю, CENTER - по центру, RIGHT - по правому краю;
  
• 
  state: устанавливает состояние кнопки, может принимать значения DISABLED (кнопка дезактивирована), ACTIVE, NORMAL (по умолчанию);
  
• 
  text: устанавливает текст на кнопке;
  
• 
  image (bitmap) - ссылка на изображение, которое отображается на кнопке.
  

Свойства задаются по имени, поэтому могут задаваться в произвольном порядке:

б =Button(text = 'Пример', bg = 'red', fg = 'black')

или

б =Button(fg = 'black', bg = 'red', text = 'Пример')

Цвет можно задавать:

• 
  именем (156 цветов, указанных в табл. 1.1 – named_colors);
  
• 
  номером цвета ("#555");
  

Таблица 1.1



Кнопка исходно находится в состоянии NORMAL, при нажатии она переходит в состояние ACTIVE, при отпускании снова возвращается в состояние NORMAL, т.е. можно программно анализировать состояние кнопки. Но ее можно устанавливать и в статическое состояние DISABLED, т.е. она будет видима, но недоступна для нажатия.

Пример создания изображения:

img = PhotoImage(file = "car.png")

l = Label(image = img, fg = "#555", bg = "#ffffff", text = 'Метка')

Изображение обязательно должно предварительно загружаться в объект PhotoImage.

Кнопку можно временно сделать невидимой с помощью команды:

<имя_кнопки>.place_forget()
А чтобы вернуть видимость кнопке, ее снова нужно разместить командой:

<имя_кнопки>.place(<координаты>)

В процессе работы программы параметры кнопки можно менять двумя способами:

1. указанием модифицируемого свойства в квадратных скобках

б['text'] = "Изменено"

б['bg'] = '#000000'

2. использование метода config, что позволяет модифицировать сразу несколько свойств

б.config(text = "Изменено")

Обычно кнопки используются для запуска/останова определенных действий, реализуемых функциями. С другой стороны, у любого виджета, в отличие от языков визуального программирования, нет предопределенного обработчика событий, как и нет связанных с ним событий. Сначала создается обработчик, потом он привязывается к событию, а событие к виджету, т.е один и тот же обработчик может быть привязан к нескольким виджетам. Различают два вида привязки:

1-й вариант привязки - через его свойство кнопки 'command':

<кнопка>(…, command = <обработчик-вызываемая функция>).pack()

Такой вариант может использоваться в обоих вариантах создания кнопки.

2-й вариант привязки - использование метода bind().Структура привязки имеет вид:

< кнопка >.bind(<событие>, <обработчик-вызываемая функция>)

Пример такой привязки:

b = Button(fg = "#555", bg = "#ffffff", text = 'Пуск')

b.place(x = 50, y = 100)
b.bind('', pusk)

В данном случае клик левой клавиши мыши приводит к запуску процедуры pusk.
label (надпись)

Этот виджет предназначен для отображения какой-либо надписи без возможности редактирования её пользователем.  Может также показывать графическое изображение.

Стандартный вариант создания:

l1 = Label(text = ‘Метка’, bg = 'gainsboro', fg = 'yellow', font="Arial 16", width=6, height=1)

l1.place(x = 150, y = 250),

т.е. большинство свойств метки аналогичны свойствам кнопки. Ниже перечислены свойства, присущие только метке:

• 
  justify: устанавливает выравнивание текста относительно метки. Значение LEFT выравнивает текст по левому краю, CENTER - по центру, RIGHT - по правому краю
  
• 
  relief: определяет тип границы метки, по умолчанию значение FLAT, т.е. метка сливается фоном формы. Другие значения свойства:
  
• 
  RAISED
  
• 
  SUNKEN
  
• 
  GROOVE
  
• 
  RIDGE
  
• 
  wraplength: при положительном значении (соответствует логическому значению TRUE) текст при достижении правой границы метки будет переноситься на следующую строку.
  

entry (поле ввода)

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

• 
  get() - возвращает текст виджета;
  
• 
  delete(first, last=None) - очищает поле ввода от first и до last позиции. Если указан только 1-й параметр, то удаляется один символ на указанной позиции. Для удаления до конца можно указать в качестве 2-го параметра значение END. Индексация значений начинается с нуля;
  
• 
  icursor(index) - перемещает курсор на указанную позицию;
  
• 
  focus() - устанавливает курсор (фокус) в редактор;
  
• 
  index(index) - возвращает позицию курсора;
  
• 
  insert(index, string) - вставляет текст в поле, перед указанной позицией;
  
• 
  bd() – ширина границы в пикселях;
  
• 
  show() – символ-заменитель для сокрытия вводимой информации.
  

text (форматированный текст)

Этот прямоугольный виджет позволяет редактировать и форматировать текст с использованием различных стилей, внедрять в текст рисунки и даже окна.

По умолчанию размер виджета равен 80-ти знакоместам по горизонтали и 24-м по вертикали. Однако эти значения можно изменять с помощью свойств width и height. Есть также возможность конфигурировать шрифт, цвета и другие параметры текста.

Значение WORD свойства wrap позволяет переносить слова на новую строку целиком, а не по буквам, как предусматривает режим по умолчанию (wrap = CHAR).

Значение WORD свойства wrap позволяет переносить слова на новую строку целиком, а не по буквам. (wrap = CHAR) – режим по умолчанию. NONE – запрет переноса, пока не будет нажата клавиша Enter.

Основные методы у виджета Text такие же как у виджета Entry: get(), insert() и delete(). Однако, если в случае однострочного текстового поля было достаточно указать один индекс элемента при вставке или удалении, то в случае многострочного надо указывать два – номер строки и номер символа в этой строке (другими словами, номер столбца). При этом нумерация строк начинается с единицы, а столбцов – с нуля.

text.insert(1.0, s)

Методы get() и delete() могут принимать не два, а один аргумент. В этом случае будет обрабатываться только один символ в указанной позиции.

Особенностью текстового поля библиотеки Tk является возможность форматировать в нём текст, т.е. придавать его разным частям разное оформление. Делается это с помощью методов tag_add() и tag_config(). Первый из них добавляет тег, при этом надо указать его произвольное имя и отрезок текста, к которому он будет применяться. Метод tag_config() настраивает тегу стили оформления. Пример:

text.tag_add('title', 1.0, '1.end')

text.tag_config('title',foreground="red", background = "yellow", font=("Verdana", 24, 'bold'), justify=CENTER)

При этом для цветов текста и фона надо использовать зарезервированные слова foreground (вместо fg) и background (вместо bg).

В виджет Text можно вставлять другие виджеты помощью метода window_creat(). Ниже приведен пример вставки в текст метки, на которой размещен "смайлик". Метка расположится в конце введенного в окно текста.

label = Label(text=":)", bg="yellow")

text.window_create(INSERT, window=label)

Для вставки виджета в определенную позицию текста необходимо предварительно установить в эту позицию курсор. Для этого используется метод mark_set. Ниже приведен пример установки курсора в позицию с фиксированными координатами.

text.mark_set("insert", "2.1")

Если в ходе работы программы координаты будут меняться, то их значения можно указывать с помощью подстановки:

text.mark_set("insert", "%d.%d" % (x,y))

Если в текстовое поле вводится больше строк текста, чем его высота, то оно само будет прокручиваться вниз. При просмотре прокручивать вверх-вниз можно с помощью колеса мыши и стрелками на клавиатуре. Однако бывает удобнее пользоваться скроллером – полосой прокрутки (ScrollBar). Её можно создать как отдельный виджет и привязать к компоненту text. Однако существует отдельный вариант этого виджета с уже привязанной вертикальной линейкой прокрутки. Он является объектом класса ScrolledText. Поэтому этот класс предварительно надо импортировать

from tkinter import scrolledtext,

а далее создается окно этого класса с указанием его параметров:

text = scrolledtext.ScrolledText(root, width=40, height=10
checkbutton (флажок)

Виджет, которой умеет переключаться между двумя состояниями при нажатии на него, т.е. используется для бинарного выбора.

У каждого флажка должна быть своя переменная Tkinter, которая может принимать только два значения, соответствующие включенному и выключенному состояниям флажка. Она может быть логического (BooleanVar)или целого (IntVar) типа.В пером случае переменная может принимать значения True или False. Во втором случае соответствующими значениями являются 1 и 0. Какому значению переменной соответствует установка или сброс флажка задается параметрами onvalue и offvalue. С помощью опции onvalue устанавливается значение, которое принимает связанная переменная при включенном флажке. С помощью свойства offvalue – при выключенном.

c1 = Checkbutton(text="Выбор", variable=cvar1, onvalue=1, offvalue=0)

Параметр text представляет комментарий, поясняющий назначение флажка.

С помощью методов select() и deselect() флажкb можно программно включать и выключать. Например:

c1.deselect() или c1.select()
radiobutton (селекторная кнопка)

Данная кнопка используется для представления одного из альтернативных значений. Такие кнопки, как правило, действует в группе, т.е. они не создаются по одной. При нажатии на одну из них кнопка группы, выбранная ранее, "отскакивает".

Объединение кнопок в одну группу устанавливается через общую переменную, разные значения которой соответствуют включению разных радиокнопок группы. У всех кнопок одной группы свойство variable устанавливается в одно и то же значение – связанную с группой переменную. А свойству value присваиваются разные значения этой переменной.

r_var = BooleanVar()

r_var.set(0)
r1 = Radiobutton(text='Первая', variable=r_var, value=0)

r2 = Radiobutton(text='Вторая', variable=r_var, value=1)

В данном случае объединяет обе кнопки в одну группу логическая переменная r_var, которая будет принимать значение 0 или 1.

В программном коде обычно требуется "снять" данные о том, какая из двух кнопок включена. Делается это с помощью метода get() для связывающей переменной Tkinter, например:

vybor = r_var.get()

К основным параметрам радиокнопки относятся:

• 
  activebackground: фоновый цвет переключателя в нажатом состоянии
  
• 
  activeforeground: цвет текста переключателя в нажатом состоянии
  
• 
  bg: фоновый цвет переключателя
  
• 
  bitmap: монохромное изображение для переключателя
  
• 
  borderwidth: граница вокруг переключателя
  
• 
  command: ссылка на функцию, которая вызывается при нажатии на переключатель
  
• 
  cursor: курсор при наведении на элемент
  
• 
  font: шрифт
  
• 
  fg: цвет текста
  
• 
  height: высота элемента в строках текста. По умолчанию равно 1
  
• 
  image: графическое изображение, отображаемое на элементе
  
• 
  justify: выравнивание текста, принимает значения CENTER, LEFT, RIGHT
  
• 
  padx: отступы справа и слева от текста до границы переключателя
  
• 
  pady: отступы сверху и снизу от текста до границы переключателя
  
• 
  relief: стиль переключателя, по умолчанию имеет значение FLAT
  
• 
  selectcolor: цвет кружка переключателя
  
• 
  selectimage: изображение на переключателе, когда он находится в отмеченном состоянии
  
• 
  state: состояние элемента, может принимать значения NORMAL (по умолчанию), DISABLED и ACTIVE
  
• 
  text: текст элемента
  
• 
  textvariable: устанавливает привязку к переменной StringVar, которая задает текст переключателя