Основы графического интерфейса

Вопросы:

·     Особенности современных прикладных программ.

·     RAD-среды.

·     Простейшая программа с графическим интерфейсом.

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

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

Ещё одна особенность практически всех программ, которые мы писали до этого, состоит в том, что последовательность их действий была определена от начала и до конца. Однако то, как работают современные программы практически полностью зависит от действий пользователя. Так, при работе в текстовом редакторе пользователь может нажимать любые кнопки, изменяя состояние текста. Или же работа поисковой системы начинается после того, как пользователь отправил свой запрос.  Работа таких программ зависит от событий. Событием называется изменение состояния какого-либо элемента управления. То есть изменение текста в поле ввода, изменение размера окна, нажатие на кнопку – всё это события. Помимо действий пользователя, события могут быть вызваны сигналами внешних устройств, например, работа программы для сканирования изображений изменяется в зависимости от состояния сканера. Он может находиться в процессе сканирования, тогда работа программы блокируется, или же он может находиться в состоянии готовности к сканированию, и тогда у пользователя есть возможность работать с программой. Таким образом, примерная блок-схема, описывающая работу современной программы, выглядит так.

Нормальный режим работы программы – это цикл обработки событий. Все происходящие события помещаются в очередь обработки событий операционной системы. Операционная система создаёт свою очередь сообщений о событиях для каждой открытой программы и помещает в неё сообщения о событиях, предназначенных для этой программы.

В процессе своей работы программа берёт очередное сообщение о событии и вызывает функцию для обработки этого события, если она описана в программе. Когда пользователь закрывает окно программы, то ей отправляется соответствующее сообщение, при обработке которого работа программы завершается. Таким образом, работа программиста при написании такой программы сводится к тому, чтобы описать обработчики необходимых событий.

До середины 90-х годов разработка программ с графическим интерфейсом была долгим, трудным и утомительным занятием. Сначала программист создавал форму окна пользовательского интерфейса, после чего описывал его элементы управления и размещал их на форме, описывал обработчики событий. То есть весьма значительную часть своего времени программист тратил на действия, которые были никак не связаны с решением основной задачи. Так возникла вполне логичная идея: определённым образом автоматизировать разработку пользовательского интерфейса так, чтобы программист думал о решении основной задачи – как обработать данные.

Так были созданы RAD-среды. Аббревиатура RAD – это сокращение от английского «Rapid Application Development», что в переводе означает «быстрая разработка приложения». С помощью RAD-сред пользовательский интерфейс создаётся вручную, как правило, с помощью мыши, при этом код для создания и размещения элементов управления генерируется автоматически.

Разработку приложения с помощью RAD-среды можно разделить на несколько этапов. Первый этап – это создание формы рабочего окна программы. Уже на этом этапе автоматически генерируется минимально необходимый для работы код. То есть уже после создания окна мы имеем очень простую, но при этом работающую программу. Второй этап – это расстановка на форме с помощью мыши элементов управления (кнопок, полей ввода и других…), а также их настройка. Далее следует создание обработчиков событий, и, наконец, написание алгоритмов обработки данных, которые будут выполняться при обработке событий.

Одной из первых RAD-сред стала Delphi. Она была разработана компанией Borland в 1994 году для одноимённого языка программирования. Одной из самых популярных RAD-сред на сегодняшний день является Visual Studio, разработанная компанией Microsoft. Она поддерживает несколько достаточно распространённых языков программирования. Использование RAD-сред позволяет значительно сократить время разработки графического интерфейса, однако само использование RAD-среды не означает, что у вас получится программа с хорошим графическим интерфейсом. Как и любая компьютерная программа, RAD-среда – это всего лишь инструмент, который можно использовать как грамотно, так и не очень.

К сожалению, для языка Python не создано ни одной надёжной RAD-среды, но есть целый ряд графических библиотек, например, встроенная библиотека Tkinter, а также устанавливаемые дополнительно wxPython, PyGtk, PyQt и другие... Мы будем использовать библиотеку с открытым исходным кодом PyQt, так как она наиболее актуальна на сегодняшний день. Её установочный файл можно бесплатно скачать на сайте разработчика – https://www.riverbankcomputing.com. Мы будем использовать библиотеку PyQt v5.6. Она подходит для языка Python, начиная с версии 3.5 и более поздних. Эта библиотека будет автоматически установлена в директорию среды разработки языка Python.

Теперь создадим простое приложение с графическим интерфейсом. Для этого в меню Пуск, в списке программ, найдём папку установленной библиотеки. Из этой папки запустим файл Designer. На экране у нас появилось окно программы QtDesigner. Эту программу можно использовать для создания и редактирования графических интерфейсов. Для того, чтобы создать новый интерфейс в меню Файл, выберем пункт Новый или используем сочетание клавиш Ctrl + N. Программа вывела на экран окно, в котором нам предлагается выбрать тип формы, которую необходимо создать. Как правило, разработка интерфейса начинается с главного окна. С него и начнём. Выберем пункт MainWindow и нажмём на кнопку Создать. В центре экрана у нас появилась форма главного окна программы. В левой части окна находится панель виджетов. В библиотеке PyQt виджетами называются элементы управления. Из этой панели выбираются элементы управления для размещения на форме. Справа находится редактор свойств. Он служит для настройки размещаемых элементов управления.

Как видим, созданная форма главного окна имеет большой размер. Уменьшим его. Для этого установим указатель мыши в угол формы, и когда он примет вид двунаправленной стрелки, протягиванием мыши уменьшим размер формы. После того, как мы изменили размер формы рассмотрим её свойства в редакторе свойств. В левой части редактора свойств располагаются названия свойств, а в правой части – их значения. Например, свойство objectName означает имя объекта, который будет соответствовать окну в программе. Свойство windowTitle хранит заголовок окна. Изменим его на «Моя первая форма». Как видим, изменился и заголовок окна.

Теперь добавим на форму кнопку. Для этого переместим указатель на панель виджетов и выберем на ней элемент PushButton. Перетащим этот элемент на форму. Теперь там появилась кнопка. Мы можем изменить её размеры так же, как делали это с самой формой. Рассмотрим свойства этой кнопки. Запомним, что имя её объекта – PushButton. Теперь изменим у неё свойство text, оно содержит текст, отображаемый на кнопке. Присвоим этому свойству значение «Выход». Таким образом мы сделали кнопку с соответствующей надписью.

Теперь мы можем посмотреть, как будет выглядеть главное окно программы. Для этого в меню Форма выберем пункт Предпросмотр или используем сочетание клавиш Ctrl+R.

Теперь мы видим, как выглядит окно нашего будущего приложения. Закроем окно предпросмотра. Сохраним созданное нами окно. Для этого в меню Файл выберем пункт Сохранить как. Сохраним файл в директории по умолчанию под именем MyFirstGUI. Теперь мы можем найти его в каталоге среды разработки, в котором установлена библиотека PyQt.

Теперь нам нужно конвертировать файл разметки в файл модуля языка Python. Для этого запустим командную строку. В ней с помощью команды cd переместимся в директорию библиотеки PyQt. Мы можем просмотреть её содержимое с помощью команды dir. Нам нужно запустить файл pyuic5.bat. Для этого запишем его имя с расширением. В качестве входных данных укажем имя файла, в котором мы сохранили наш графический интерфейс, а также параметр «-o». Если входной файл находится в другом каталоге, также указывается его местоположение. В качестве выходных данных укажем имя выходного файла с расширением *.py и параметр «-x». После исполнения команды в соответствующей директории создаётся выходной файл. При необходимости его можно переместить в другую папку.

Теперь просмотрим полученный файл в среде разработки языка Python.

# -*- coding: utf-8 -*-

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'my_first_gui.ui'

#

# Created by: PyQt5 UI code generator 5.6

#

# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):

    def setupUi(self, MainWindow):

        MainWindow.setObjectName("MainWindow")

        MainWindow.resize(437, 268)

        self.centralwidget = QtWidgets.QWidget(MainWindow)

        self.centralwidget.setObjectName("centralwidget")

        self.pushButton = QtWidgets.QPushButton(self.centralwidget)

        self.pushButton.setGeometry(QtCore.QRect(170, 80, 111, 61))

        self.pushButton.setObjectName("pushButton")

        MainWindow.setCentralWidget(self.centralwidget)

        self.menubar = QtWidgets.QMenuBar(MainWindow)

        self.menubar.setGeometry(QtCore.QRect(0, 0, 437, 21))

        self.menubar.setObjectName("menubar")

        MainWindow.setMenuBar(self.menubar)

        self.statusbar = QtWidgets.QStatusBar(MainWindow)

        self.statusbar.setObjectName("statusbar")

        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)

        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):

        _translate = QtCore.QCoreApplication.translate

        MainWindow.setWindowTitle(_translate("MainWindow", "Моя первая форма"))

        self.pushButton.setText(_translate("MainWindow", "Выход"))

if __name__ == "__main__":

    import sys

    app = QtWidgets.QApplication(sys.argv)

    MainWindow = QtWidgets.QMainWindow()

    ui = Ui_MainWindow()

    ui.setupUi(MainWindow)

    MainWindow.show()

    sys.exit(app.exec_())

Как видим, в первых семи его строках содержится описание. Далее следует некоторый объектный код. Запустим его на выполнение. На экране появилась форма, которую мы создали, однако при нажатии на кнопку «Выход» пока ничего не происходит. 

Код модуля содержит описание класса Ui_MainWindow и основную программу. В основной программе создаётся объект класса Ui_MainWindow, и у него запускается цикл обработки событий. Класс Ui_MainWindow содержит два метода. Метод setupUi отвечает за создание формы, её элементов управления и их настройку. Метод retranslateUi отвечает за размещение надписей на элементах управления. Так, выделенная строка размещает надпись «Выход» на созданной нами кнопке pushButton.

Сделаем так, чтобы при нажатии на созданную нами кнопку происходило закрытие окна программы. Для этого в конце метода setupUi добавим строку кода. На форме у кнопки pushButton событие clicked свяжем с вызовом у окна MainWindow метода close.

self.pushButton.clicked.connect (MainWindow.close)

Сохраним модуль и запустим его на выполнение. На экран была выведена созданная нами форма. Теперь при нажатии на кнопку «Выход» происходит закрытие главного окна программы.

Мы узнали:

·     Современный графический интерфейс описывается с помощью объектно-ориентированного программирования. Его элементы управления – это объекты различных классов, которые взаимодействуют, обмениваясь сообщениями о событиях.

·     Событие – это изменение состояния одного из элементов управления.

·     Порядок событий в современных компьютерных программах определяется пользователем. От него зависит работа программы.

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