На самом деле все фреймворки для написания GUI — проблемные. Я полностью согласен с фразами о том, что какой фреймворк не выбери, написание кода GUI будет не добавлением, а сращиванием. Обязательно придется переделывать код так, чтобы он вписывался в GUI, а не делать GUI на основе существующего кода. Поэтому надеяться на то, что какой-то фреймворк будет лучше для моего проекта — бесполезно. И заявления о том, что какой-то фреймворк лучше подходит для каких-то задач, скорее миф чем правда.
Для подтверждения своих слов вот результат исследования фреймворков используемых в современных приложениях:
| Приложение | Фреймворк |
| acronis true image | QT |
| skype | QT |
| araxis merge | свой на основе ATL |
| teamviewer | WTL |
| EaseUS Partition Master Home Edition | GTK |
| Folder Lock | HTMLLayout |
| agnitum outpost | HTMLLayout |
| hex workshop | MFC |
| vmware | свой на основе ATL |
| trillian | свой на основе GDI+ |
| drweb | MFC + WTL |
| symantec | SymHTML |
| kaspersky | QT |
| NOD | MFC |
Я выбирал приложения где GUI — это не просто форма, две кнопки, один прогресс и список, и нужно лишь напрячь дизайнера, чтобы он это красиво оформил. Я выбирал приложения, где нужно отображать достаточно много данных, где действительно требовалась большая работа по юзабилити, где есть сложные взаимодействия элементов. Ну и где проект уже существует много лет.
Как вы видите, на любом фреймворке можно написать сложный GUI, и на любом фреймворке можно продолжать его расширять. И как видите, некоторые компании не пугает факт того, что свой делать фреймворк — это долго и сложно. Пишут.
На что же влияет выбор фреймворка?
1) Конечно же фреймворк влияет на внешний вид.
MFC, ATL, WTL и их потомки
Комментировать особо нечего. Если сильно постараться, то можно получить конфету похожую на интерфейс windows 7 (Nod), но в целом получается «классика».
Белое, но не пушистое, модное направление.
HtmlLayout и производные
Совсем новое направление, но люди используют. И получается, имхо очень даже прилично.
Экзотика
А GTK-то может быть вполне приятным глазу.
Астру cerulean studios «пилили», насколько я помню, почти 3 года. Все это время они, похоже, изобретали свой кросплатформенный фреймворк с панелями и виджетами на основе GDI+. Поражаюсь как они смогли так долго не выпускать новых версий и не помереть…
2) Фреймворк влияет на сложность поиска людей
Вот вбили вы себе в голову к примеру, что надо писать GUI только на WxWidgets. Даете объяление, находите какого человека, который думает что знает как писать на wxWidgets. Он начинает делать GUI. GUI растет, кода все больше, а потом этот человек берет и уходит. А за то время, пока вы писали GUI, ситуация изменилась, и желающих писать на wxWidgets больше не осталось. Все ушли на WPF, к примеру. Или еще есть любители wxWidgets, но неспособные разгрестись в сложном GUI, который был создан первым человеком, а профессионалов нет. И что дальше? Переписывать заново?
Поэтому стоит сделать запрос вида «резюме с++ ИМЯ_ФРЕЙМВОРКА» в гугл чтобы оценить сложность поиска человека. На момент написания статьи гугл выдавал вот такое:
MFC — 120000 результатов
WTL — 17600
ATL — 46700
QT — 112000
Htmlayout — 113 (sic!)
GTK — 7600
wxWidgets — 17500
У вас все еще есть вопросы?
Конечно же, эта статистика гугла не говорит о том, что ATL-программиста ровно в 3 раза легче найти, чем WTL-программиста. Но какая-то корреляция здесь есть: ATL-программистов все же проще будет найти, чем человека для GTK или WTL.
Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.
Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.
В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.
Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:
# для Fedora: $ sudo dnf install python3-qt5 qt-creator # для Debian/Ubuntu: $ sudo apt install python3-qt5 pyqt5-dev-tools qtcreator
После того как вы закончили с приготовлениями, откройте командную строку/терминал и убедитесь, что вы можете использовать команду pyuic5 . Вы должны увидеть следующее:
$ pyuic5 Error: one input ui-file must be specified
Если вы видите сообщение, что такой команды нет или что-то в таком роде, попробуйте загуглить решение проблемы для вашей операционной системы и версии PyQt.
Если вы используете Windows, то, скорее всего, путь C:\Python36\Scripts (измените 36 на вашу версию Python) не прописан в вашем PATH . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.
Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.
Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create .
После этого у вас должна появиться форма - шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.
Теперь давайте немного изменим размер нашего главного окна, т.к. нам не нужно, чтобы оно было таким большим. А ещё давайте уберём автоматически добавленное меню и строку состояния, поскольку в нашем приложении они не пригодятся.
Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector . Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.
В итоге мы имеем почти пустую форму. Единственный оставшийся объект - centralwidget , но он нам понадобится, поэтому с ним мы ничего не будем делать.
Теперь перетащите куда-нибудь в основную форму List Widget (не List View ) и Push Button из Widget Box .
Вместо использования фиксированных позиций и размеров элементов в приложении лучше использовать макеты. Фиксированные позиции и размеры у вас будут выглядеть хорошо (пока вы не измените размер окна), но вы никогда не можете быть уверены, что всё будет точно так же на других машинах и/или операционных системах.
Макеты представляют собой контейнеры для виджетов, которые будут удерживать их на определённой позиции относительно других элементов. Поэтому при изменении размера окна размер виджетов тоже будет меняться.
Давайте создадим нашу первую форму без использования макетов. Перетащите список и кнопку в форме и измените их размер, чтобы вышло вот так:
Теперь в меню Qt Designer нажмите Form , затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:
Наши объекты остались на тех же местах и сохранили свои размеры, несмотря на то что размер основного окна изменился и кнопку почти не видно. Вот поэтому в большинстве случаев стоит использовать макеты. Конечно, бывают случаи, когда вам, например, нужна фиксированная или минимальная/максимальная ширина объекта. Но вообще при разработке приложения лучше использовать макеты.
Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay out → Lay out vertically . Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:
Ваши элементы должны быть в том же порядке, что и до внесённых изменений, но если это не так, то просто перетащите их на нужное место.
Так как мы использовали вертикальное размещение, все элементы, которые мы добавим, будут располагаться вертикально. Можно комбинировать размещения для получения желаемого результата. Например, горизонтальное размещение двух кнопок в вертикальном будет выглядеть так:
Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector .
Теперь, благодаря вертикальному размещению, наши элементы выровнены правильно. Единственное, что осталось сделать (но не обязательно), - изменить имя элементов и их текст.
В простом приложении вроде этого с одним лишь списком и кнопкой изменение имён не обязательно, так как им в любом случае просто пользоваться. Тем не менее правильное именование элементов - то, к чему стоит привыкать с самого начала.
Свойства элементов можно изменить в разделе Property Editor .
Подсказка: вы можете менять размер, передвигать или добавлять часто используемые элементы в интерфейс Qt Designer для ускорения рабочего процесса. Вы можете добавлять скрытые/закрытые части интерфейса через пункт меню View .
Нажмите на кнопку, которую вы добавили в форму. Теперь в Property Editor вы должны видеть все свойства этого элемента. В данный момент нас интересуют objectName и text в разделе QAbstractButton . Вы можете сворачивать разделы в Property Editor нажатием по названию раздела.
Измените значение objectName на btnBrowse и text на Выберите папку .
Должно получиться так:
Именем объекта списка является listWidget , что вполне подходит в данном случае.
Сохраните дизайн как design.ui в папке проекта.
Конечно, можно использовать.ui -файлы напрямую из Python-кода, однако есть и другой путь, который может показаться легче. Можно конвертировать код.ui -файла в Python-файл, который мы потом сможем импортировать и использовать. Для этого мы используем команду pyuic5 из терминала/командной строки.
Чтобы конвертировать.ui -файл в Python-файл с названием design.py , используйте следующую команду:
$ pyuic5 path/to/design.ui -o output/path/to/design.py
Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.
Создайте файл main.py в папке, где находится design.py .
Для Python GUI приложения понадобятся следующие модули:
Import sys # sys нужен для передачи argv в QApplication from PyQt5 import QtWidgets
Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:
Import design # Это наш конвертированный файл дизайна
Так как файл с дизайном будет полностью перезаписываться каждый раз при изменении дизайна, мы не будем изменять его. Вместо этого мы создадим новый класс ExampleApp , который объединим с кодом дизайна для использования всех его функций:
Class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна
В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :
Def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение
И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:
If __name__ == "__main__": # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main()
В итоге main.py выглядит таким образом:
Import sys # sys нужен для передачи argv в QApplication from PyQt5 import QtWidgets import design # Это наш конвертированный файл дизайна class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение if __name__ == "__main__": # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main()
Если запустить этот код: $ python3 main.py , то наше приложение запустится!
Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.
Примечание Весь дальнейший код пишется внутри класса ExampleApp .
Начнём с кнопки Выберите папку . Привязать к функции событие вроде нажатия на кнопку можно следующим образом:
Self.btnBrowse.clicked.connect(self.browse_folder)
Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:
Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory:
Directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку")
Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .
Для отображения содержимого директории нам нужно импортировать os:
Import os
И получить список содержимого следующим образом:
Os.listdir(path)
Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .
В итоге функция browse_folder должна выглядеть так:
Def browse_folder(self): self.listWidget.clear() # На случай, если в списке уже есть элементы directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку") # открыть диалог выбора директории и установить значение переменной # равной пути к выбранной директории if directory: # не продолжать выполнение, если пользователь не выбрал директорию for file_name in os.listdir(directory): # для каждого файла в директории self.listWidget.addItem(file_name) # добавить файл в listWidget
Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:
Так выглядит весь код нашего Python GUI приложения:
Import sys # sys нужен для передачи argv в QApplication import os # Отсюда нам понадобятся методы для отображения содержимого директорий from PyQt5 import QtWidgets import design # Это наш конвертированный файл дизайна class ExampleApp(QtWidgets.QMainWindow, design.Ui_MainWindow): def __init__(self): # Это здесь нужно для доступа к переменным, методам # и т.д. в файле design.py super().__init__() self.setupUi(self) # Это нужно для инициализации нашего дизайна self.btnBrowse.clicked.connect(self.browse_folder) # Выполнить функцию browse_folder # при нажатии кнопки def browse_folder(self): self.listWidget.clear() # На случай, если в списке уже есть элементы directory = QtWidgets.QFileDialog.getExistingDirectory(self, "Выберите папку") # открыть диалог выбора директории и установить значение переменной # равной пути к выбранной директории if directory: # не продолжать выполнение, если пользователь не выбрал директорию for file_name in os.listdir(directory): # для каждого файла в директории self.listWidget.addItem(file_name) # добавить файл в listWidget def main(): app = QtWidgets.QApplication(sys.argv) # Новый экземпляр QApplication window = ExampleApp() # Создаём объект класса ExampleApp window.show() # Показываем окно app.exec_() # и запускаем приложение if __name__ == "__main__": # Если мы запускаем файл напрямую, а не импортируем main() # то запускаем функцию main()
Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.
В Matlab существует два способа создать графический интерфейс пользователя (Graphical user interface, GUI):
В результате создания интерфейса получим два файла: fig-файл с «фигурой» самого интерфейса и m-файл, который создается самим Matlab и содержит программный код всех элементов интерфейса.
Главное преимущество guide - легко сделать простой GUI, т.к. весь код для интерфейса генерируется самим Matlab. Для работы программной частью GUI достаточно изучить принцип обмена данными с помощью команд setappdata и getappdata (что является стандартным приемом для обмена данными между различными элементами GUI).
Но более профессиональный подход – это создавать GUI программно, не пользуясь guide.
А вот здесь и открывается другая сторона медали. Главная трудность в программном создании GUI в MATLAB то, что нужно вручную указывать расположение всех элементов интерфейса (параметр "Position" с 4-я элементами: x,y координаты + ширина и длина). Это очень неудобно. В guide это проблема решается очень просто - с помощью инструмента Tools->Align Objects .
Простые интерфейсы можно довольно просто создавать программно, а вот чем больше кнопок, боксов – тем больше усложняется эта задача.
Итак, одной из важных проблем при программном создании GUI является расположение элементов. Хороший обзор инструментов, которые помогают решить эту проблему есть по ссылке Matlab layout managers . К сожелению, только в комментариях к обзору по ссылке упомянули . Вот об этом тулбоксе и пойдет речь дальше.
С помощью полностью решается проблема с визуальным оформлением GUI (не зря попал в выборку программы недели на главном портале Matlab Pick of the Week).
Общая инструкция по работе с очень простая:
1. Создаем сетку (uiextras.Grid) (или можно этот шаг пропустить)
2. На сетку помещаем панели (uiextras.Panel),
3. На панели помещаем боксы (uiextras.Box)
4. В боксы помещаем элементы управления: кнопки, оси или еще что-нибудь.
Теперь о расположении всех элементов интерфейса заботиться .
Наглядный пример GUI с помощью с моими комментариями можно скачать по ссылке 29 .
В моем примере обмен данными между функциями и элементами интерфейса происходит с помощью приема, который называется Sharing Variables Between Parent and Nested - переменная, объявленная в главной функции, видима во всех вложенных функциях. Этот прием можно использовать вместо стандартных setappdata и getappdata.
В общем, элемент GUI создается, используя следующую процедуру:
1. Создайте элемент. Например, checkbox или label или listbox и т.д..
2. Определите его начальное появление.
3. Определите, должен ли он занимать определённую позицию или любую заданную по умолчанию.
4. Добавьте его на экран.
Abstract Windowing Toolkit (AWT) - набор классов Java, которые позволяют нам создавать графический интерфейс пользователя (GUI) и принимать пользовательский ввод через клавиатуру и мышь. AWT обеспечивает нас различными элементами, которые позволяют создавать привлекательный и эффективный GUI.
■ Контейнеры
■ Компоненты
■ Менеджеры компоновки
■ Графика и рисование
■ Шрифты
■ События
6.2.1 Контейнер
Контейнер - область, которая может содержать элементы. Контейнер подобно окну. Также как и окно, контейнер может иметь рамки, области окна, замки и зацепки, контейнер может содержать меньшие по размерам компоненты. Мы можем иметь стеклянные области окна или толстые ставни, поэтому мы и можем открыть или закрыть окно.
В пакете java.awt есть класс по имени Container , который непосредственно или косвенно получает две обычно используемых контейнера Frame (фрейм) и Panel (панель).
Фреймы и Панели - обычно наиболее используемые контейнеры. Фрейм - отдельное окно, тогда как Панель - область, находящиеся в пределах окна. Панель не имеет границ и отображается в пределах окна, отображаемого с помощью браузера или appletviewer. Appletviewer - инструмент, обеспеченный JDK, чтобы просматривать апплет. Фрейм - подкласс Окна и отображается в пределах отдельного окна, и имеет границы.
6.2.2 Фрейм
Фрейм - окно, которое является независимым от апплета и от браузера. Он может использоваться как контейнер или как компонент. Он может быть создан, используя конструкторы следующим образом:
Frame()
Создаёт фрейм, который является невидимым
Frame(String title)
Создаёт невидимый фрейм с данным заголовком Пример 1 показывает, как создавать фрейм.
Пример 1:
import j ava.awt.*;
class FrameDemo extends Frame {
public FrameDemo(String title) {
super(title);
}
public static void main (String args) {
FrameDemo f=new FrameDemo(I have been Framed!!!) ;
f.setSize(500,500);
f.setVisible(true);
}
}
Определяемый пользователем класс FrameDemo - подкласс класса Frame. Этот класс (FrameDemo) имеет конструктор, в котором мы вызываем метод super (), который в свою очередь вызовет конструктор суперкласса (в данном случае Frame). Цель super () здесь состоит в том, чтобы вызвать родительский конструктор класса, который тогда создаст объект дочернего класса для создания фрейма. Кроме того, это также позволит объекту фрейма быть доступным через возможности класса. Однако, фрейм будет невидим и не имеет никаких измерений. Чтобы позаботится об этом, мы используем два метода в методе main() - setSize ()
и setVisible ()
.
Вывод был бы как показано на рисунке 6.2.
Рисунок 6.2: Вывод примера 1
6.2.3 Панель
Панель - конкретный подкласс Container и используется, чтобы объединять различные компоненты вместе. Самый простой способ создания Панели - через ее конструктор Panel ()
.
Пример 2 показывает, как создать панель.
Пример 2:
import j ava.awt.*;
class PanelTest extends Panel {
public static void main(String args ) {
PanelTest p= new PanelTest();
Frame f=new Frame(Testing a Panel!);
f.add(p);
f.setSize (400,400) ;
f.setVisible(true);
}
}
Так как мы не можем увидеть панель непосредственно, мы должны добавить её к фрейму. Итак, мы создаем новый Фрейм и добавляем недавно созданную Панель к Фрейму. Однако, фрейм будет невидим и не имеет никаких измерений. Мы используем два метода в методе main () - setSize ()
и setVisible ()
, чтобы установить размер и отобразить фрейм соответственно.
Обзор библиотек для создания графического интерфейса пользователя (GUI).
PyQt5 имеет богатый набор готовых виджетов. Тем не менее, нет в мире инструментария, способного предоставить все виджеты, в которых программисты могут нуждаться для своих приложений. Библиотеки обычно предоставляют только самые распространенные виджеты, такие как кнопки, текстовые виджеты или ползунки. Если есть необходимость в более специализированных виджетах, мы должны создать их сами.
Система рисования PyQt5 способна обрабатывать векторную графику, изображения и шрифты. Рисование необходимо в приложениях, когда мы хотим изменить или улучшить существующий виджет, или мы создаём пользовательский виджет с нуля. Чтобы сделать рисунок, мы используем API рисования, предоставленное инструментарием PyQt5.
Виджеты – это основные строительные кирпичики приложения. PyQt5 имеет множество разнообразных виджетов, включая кнопки, чекбоксы, ползунки и списки. В этой части руководства, мы опишем несколько полезных виджетов: QCheckBox, ToggleButton, QSlider, QProgressBar и QCalendarWidget.
Диалоговые окна (диалоги) являются неотъемлемой частью большинства современных графических приложений. Диалог в обычной жизни - это беседа между двумя и более людьми. В компьютерном приложении, диалог – это окно, которое используется, чтобы «беседовать» с приложением. Диалоги используются для ввода и изменения данных, изменения настроек приложения, и так далее.
