на чем писать gui под windows

Не Windows единой: как писать кроссплатформенные приложения с GUI на C#

На C# можно создавать красивые приложения, но до недавних пор — не для всех платформ. Рассказываем, как писать одно приложение для всех ОС сразу.

Пока есть Xamarin, который можно использовать только для Windows 10 и мобильных устройств. Но что делать тем, кто хочет создавать графические интерфейсы для Linux или Mac OS?

Тут помогут фреймворки от сторонних разработчиков.

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Какой фреймворк выбрать

Мне удалось найти 2 более-менее популярных фреймворка (оба основаны на Skia ):

Я попробовал оба, и второй показался мне более удобным: в нём есть язык разметки, поддержка MVVM, быстрая установка, лёгкий переход с WPF. Поэтому я выбрал его.

Как начать использовать AvaloniaUI

Для начала клонируйте себе на компьютер этот репозиторий:

В нём находятся шаблоны для создания приложения с AvaloniaUI. Если вы не умеете пользоваться git, то просто скачайте содержимое и распакуйте куда-нибудь на компьютере. Затем откройте консоль и введите следующую команду:

Она установит шаблоны для создания приложения. Чтобы проверить, добавились ли шаблоны, используйте команду:

Откройте в консоли папку, в которой хотите создать проект, и введите:

Будет создано приложение с использованием MVVM. Практически вся документация по AvaloniaUI написана с использованием этого паттерна, поэтому проще будет разрабатывать на нём.

Теперь можно приступать к работе над приложением.

Создаём калькулятор на AvaloniaUI

У вас будут созданы следующие папки

Сначала посмотрим в файл Program.cs в корневом каталоге:

Нас интересует метод AppMain(). В нём создаётся окно (MainWindow) с указанием DataContext (используется для привязки данных), а потом это окно запускается.

В этом методе можно определить свою логику инициализации приложения. Например, объявить экземпляр модели и передать его в конструктор MainWindowViewModel(). Однако перед этим нужно определить конструктор, который будет принимать такой аргумент.

У нас очень простое приложение, поэтому мы реализуем всю логику прямо в MainWindowViewModel.cs. Там будут необходимые свойства и методы.

Для начала нужно подключить пространство имён ReactiveUI, которое в AvaloniaUI используется для реализации паттерна MVVM:

Источник

5 кроссплатформенных библиотек для разработки GUI на C++

C++, как и Python и многие другие языки программирования, поставляются без встроенных инструментов построения графического интерфейса пользователя. Так было и до середины 80-х, когда операционные системы для PC разрабатывались без этого типа интерфейсов, и даже после того, как Windows и различные операционные системы от Apple стали нормой, и событийно-ориентированному программированию потребовалось несколько дополнительных лет, чтобы наверстать упущенное.

Тридцать лет назад весь ввод/вывод был сделан на символьных дисплеях. Так было до начала 90-х, когда появились первые графические библиотеки. С тех пор Mac OS (и в меньшей степени Linux) выросла по важности по сравнению с Windows, что делает более привлекательными инвестиции в создание программного обеспечения, которое может работать на всех трех платформах без необходимости переписывать код

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

Вам может никогда не понадобиться портировать ваше Windows приложение на Mac или Linux, но, по крайней мере, вы будете знать, что можете сделать это. В этом списке мы рассмотрим пять кроссплатформенных инструментов разработки GUI, которые написаны на C++ и все еще находятся в стадии активного развития. Пятерка, которую я выбрал, это Qt, wxWidgets, JUCE, CEGUI и CEF (некоторые другие, особенно GTK, MFC и Cocoa, не включены в список, так как они не полностью кроссплатформены).

Этот старый фреймворк открыл себя заново со своей новой версией, Qt 5, которая используется везде, ото мобильных приложений до автомобилей и медицинского оборудования. Одним из его преимуществ является оконная системя, которая позволяет вам создавать пользовательские интерфейсы и включает в себя дополнительные функции, такие как отображение диаграмм, визуализация данных и карт от сторонних провайдеров. Qt версии 5 теперь обрабатывает прикосновения так же, как и взаимодействие с мышью и клавиатурой, и вы можете добавить виртуальные клавиатуры на X11 и Windows. На KDE Linux Qt является нативной библиотекой GUI, поэтому, если вы разрабатываете для KDE платформ, то вам следует рассмотреть Qt.

wxWidgets

Разработчик Джулиан Смарт создал wxWidgets 24 года назад (что делает его старше, даже чем Qt) и остается его главным разработчиком. Эта библиотека во многом похожа на Qt, хотя некоторые разработчики предпочитают ее, так как она использует родные графические элементы операционной системы, на которой запущена программа. Это заставляет приложения выглядеть более «родными»; например, на Windows, она будет использовать Windows графику.

(Для сравнения, Qt отрисовывает свои собственные виджеты на каждой платформе, хотя и старается выглядеть как можно ближе к платформе, используя некоторый низкоуровневый код для отрисовки полос прокрутки и кнопок.)

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

Первоначально разрабатываемая британским разработчиком Жюлем Сторером, была приобретена компанией Raw Material Software, которая разрабатывает аудиопродукцию. В результате, JUCE обладает большим количеством функциональных возможностей при работе с аудио, поскольку она изначально разрабатывалась для создания аудиоприложений.

Библиотека JUCE также включает в себя множество графических элементов пользовательского интерфейса, графику, аудио, парсинг XML и JSON, работу с сетью, криптографию, многопоточность и встроенный интерпретатор, который работает с синтаксисом, имитирующим ECMAScript. Это уменьшает или устраняет необходимость в сторонних библиотеках и проблемы с зависимостями, которые те могут вызвать. Нет ничего ужаснее, чем обновление сторонних инструментов, которое ломает сборку проекта.

JUCE также включает в себя “introjucer”, инструмент IDE, который может генерировать проекты Xcode, проекты Visual Studio, Linux Makefile, сборки Android Ant и проекты CodeBlocks.

CEGUI

Crazy Eddie GUI (GUI сумасшедшего Эдди) разрабатывается, начиная с 2003 года, и вполне возможно, версия 1.0 выйдет уже к 2020 году, поскольку текущая версия 0.87. Как и другие в этом списке, она работает на Windows, Linux и Mac и поддерживает и 64, и 32-битные системы. В отличие от остальных GUI библиотек в этом списке, она фокусируется на разработке игр, но, как говорилось, дает разработчику пакет виджетов (кнопки, выпадающие списки и т.д.), поэтому вы не ограничены только игровыми приложениями.

Большинство игр требуют графический интерфейс для всех меню и экранов настройки, которые рендерятся на таких платформах, как DirectX или OpenGL. Они поддерживают скины, позволяя выполнять настройку, чтобы соответствовать эстетике игры.

Конфигурация CEGUI также широко использует XML файлы. Они служат не только для настройки скинов (то есть, как выглядят элементы управления, общая цветовая схема и т.д.), для всего остального, такого как анимация, изображения, компоновка и схема управления файлами данных игры. Все они опираются на XML.

Chromium Embedded Framework – это простой фреймворк для встраивания браузеров на базе Chromium в другие приложения. Это отличает его от других библиотек C++ в списке, которые предназначены для создания автономных приложений. Вы могли не слышать об этом, но согласно документации, существует более 100 миллионов экземпляров CEF, встроенных во множество продуктов. CEF уже 8 лет, и он дорос уже до версии 3.

Интеграция в браузер Chrome позволяет получить доступ к JavaScript, ускорению GPU через WebGL, рендерингу в закадровую память и, в ближайшее время, к речевому вводу

Заключение

Хотя все эти библиотеки написаны на C++, доступно множество привязок языков, поэтому стоит проверить, какие языки программирования вы можете использовать с ними. wxWidgets особенно хорош в этом отношении, как и Qt, который используется в нескольких специализированных операционных системах и автомобильном ПО. Qt кажется более популярным на предприятиях, по-видимому, из-за платной поддержки, в то время как ученые и независимые разработчики предпочитают wxWidgets, поскольку он бесплатен и соответствует Qt.

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

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

Источник

Какой язык программирования изучить новичку для написания GUI приложений?

Python весьма неплох для всяких GUI, работаеет со многими популярными фреймворками(Qt,GTK,Kivy), не проблема нагуглить нужный код. И приложение можно легко перетащить под Linux(даже под андроед можно).

После освоения Python, можно приступать к освоению C++

В свое время когда я начинал программировать с QBasic`а и TurboPascal`a, особых вариантов куда дальше развиваться не было: С++. Реальный язык для решения реальных задач.

Для работы с GUI в Win логичным продолжением было Delphi и С++Builder. MFC от M$ был настолько корявый (по моему мнению), что даже смотреть в его сторону не хотелось.

В общем, в моем случае мне сильно помогло, что я начинал с С++. Но работаю я все же в основном в C#. Как бы не получилось так, что начав с С#, как с более простого, вашему знакомому будет потом сложновато в редких задачах, где понадобиться навыки работы в С++.

Совет, наверное, стоит сделать такой: изучайте С# для GUI, попробуйте для развлечения поковыряться с микроконтроллерами: там где реально нужно будет самому на С++ писать. Можно, например, для ардуино на с++ писать: и паять не нужно ничего, и стоит недорого. Не скетчи, а именно разобраться как с С++ работать.

А еще смотрите другие языки: JavaScript, Python, функциональное что-нибудь. Главное чтоб мозги не костенели в какой-нибудь одной парадигме, а могли смотреть на задачу максимально широко.

Источник

Python GUI: создаём простое приложение с PyQt и Qt Designer

Авторизуйтесь

Python GUI: создаём простое приложение с PyQt и Qt Designer

Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.

Что нам потребуется

Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.

В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.

Windows: PyQt можно скачать здесь. В комплекте с ним идёт Qt Designer.

macOS: Вы можете установить PyQt с помощью Homebrew:

$ brew install pyqt5

Скачать пакет с большинством компонентов и инструментов Qt, который содержит Qt Designer, можно по этой ссылке.

Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:

Если вы видите сообщение, что такой команды нет или что-то в таком роде, попробуйте загуглить решение проблемы для вашей операционной системы и версии PyQt.

Дизайн

Основы

Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.

27–28 ноября, Онлайн, Беcплатно

Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.

После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.

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

Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.

Теперь перетащите куда-нибудь в основную форму 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.

Измените значение objectName на btnBrowse и text на Выберите папку.

Должно получиться так:

Сохраните дизайн как design.ui в папке проекта.

Превращаем дизайн в код

Пишем код

Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.

Используем дизайн

Для Python GUI приложения понадобятся следующие модули:

Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:

В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :

И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:

В итоге main.py выглядит таким образом:

Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.

Добавляем функциональность в наше Python GUI приложение

Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:

Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :

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

И получить список содержимого следующим образом:

В итоге функция browse_folder должна выглядеть так:

Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:

Так выглядит весь код нашего Python GUI приложения:

Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.

Источник

Что такое GUI

GUI расшифровывается как graphical user interface, что по-русски переводится как графический интерфейс пользователя. Главное отличие GUI-приложения от консольного заключается в способе взаимодействия пользователя с приложением.

В консольном приложении общение с пользователем осуществляется в последовательной манере. То есть грубо говоря:

И перескочить со 2-го пункта на 5-ый, если программой этого не было предусмотрено, при всем желании невозможно. Все очень строго.

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

И доступ ко всем эти объектам осуществляется в произвольном порядке. На программном уровне, достигается это за счет реализации так называемого цикла сообщений. Когда вы запускаете приложение (хотя бы тот же самый браузер), оно тут же начинает прослушивать какие сообщения ему посылает система.

Ясное дело, что сообщения эти не простые, а имеют строго установленную форму, например, когда вы двигаете мышкой, на каждый сдвиг отправляется сообщение WM_MOUSEMOVE, которое содержит информацию о позиции мыши, если вы куда-то кликаете отправляется сообщение WM_LBUTTONDOWN. Если вы нажимаете клавишу, то отправляется WM_KEYDOWN с кодом нажатой клавиши. И так далее.

Выглядит цикл сообщений на C примерно так:

Все эти события отправляются главному окну приложения, которое в свою очередь распределяет эти сообщения между своими кнопками, полями для ввода и т.д. (именуемые в простонародье контр`олами). По приходу сообщения тому или иному контролу, можно выполнить какой-нибудь код. Например, который отобразит какое-нибудь сообщение.

К счастью, в наши развитые времена, заботиться об обработки сообщений не надо. И чтобы добавить реакцию на какое-нибудь сообщение, надо просто добавить соответствующий метод и особым образом привязать его к контролу.

Создаем интерфейс для задачи

Необходимо: разработать интерфейс для задачи: “Студенты Иванов и Петров за время практики заработали определенную сумму. Кто из них заработал большую сумму? Определить средний заработок”.

Создаем проект

Выбираем Файл/Создать/Проект, затем Приложение Windows Forms, жмем Ok

Откроется редактор формы:

Добавляем поля для ввода

На форму надо чего-то добавить. По задаче у нас два параметра, значит придется добавить два поля для ввода. Откроем панель с элементами и для удобства зафиксируем ее с помощью пипки в верхнем правом углу.

Если у вас вдруг не видно панели с элементами, включите ее через пункт меню Вид/Панель элементов

Теперь добавим элементы на форму, нам потребуется два элемента вида TextBox (поля для ввода текста)

Чтобы было понятно чего в них вводить добавим подписи (элементы типа Label)

Но у этих подписей вместо текста написано label1 и label2, поменяем их свойства. У всех элементов типа Label есть свойство Text, которое определяет чего в них писать. Выделим label1 кликнув на него, он обведется пунктирной рамкой

в правом нижнем углу найдем панель свойств (если ее не видно нажмите F4). Среди множества свойств найдем то что называется Text и введем в него корректный текст.

Закончив вводить переключимся на форму, кликнув на нее, если все было сделано корректно текст label1 заменится на руб. заработал Петров

Повторим ту же процедуру для label2

Работаем с кнопкой

Теперь давайте добавим кнопку, и изменим размеры формы, а то что-то сильно много пустого места:

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

Нас перекинет в редактор кода, который будет выглядеть как-то так:

Мы только что создали обработчик события щелчка мыши по кнопке. В который можно добавить какую-нибудь реакцию на щелчок.

[Как работает обработчик]

Если вам не интересно как, смело пропускайте данный раздел =)

Что же тут произошло? А произошло тут создание функции (то есть Visual Studio за нас написала код, нам никто не мешает его ручками писать) с сигнатурой обработчика системного события. У функции два аргумента:

Далее студия привязала данную функцию к кнопке. Если смотреть через интерфейс (переключимся на форму нажав Shift+F7), то эта функция будет указана в качестве значения свойства Click в разделе Событий.

Если же смотреть еще глубже можно открыть, автогенерируемый файлик для формы Form1.Designer.cs

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

но ладно, вернемся к нашему обработчику.

Пишем обработчик

Если в какой-то момент времени вы потеряетесь среди файлов, то вы всегда можете дважды кликнуть на файл Form1.cs в обозревателе решений

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

И так, у нас там имеется код:

Нам по заданию надо будет вывести сообщение с решением задачи. Пока мы еще решатель не реализовали (точнее реализовывали, но еще сюда к новому коду не подцепили). А вот что-нибудь вывести уже можем. Правим обработчик:

Запустим приложение и проверим кнопку

Читаем значения из TextBox

Давайте теперь попробуем немного расширить функциональность, и будем выводить по нажатию на кнопки не простое сообщение а содержимое которое ввели в качестве зарплаты Петрова.

Переключимся на форму, нажав Shift+F7. Выберем первое поле для ввода.

Чтобы получить содержимое TextBox надо сначала узнать имя элемента. Заглянем в панель Свойств, и найдем там свойство (Name). Это и есть его имя. По умолчанию там стот textBox1, поменяем его на что-то более осознанное (txtPetrovSum):

Теперь мы сможем обратиться к элементу по этому имени. Давайте теперь еще и поменяем свойство Name у второго textBox2. Поменяем его на txtIvanovSum. По итогу будем иметь следующие названия у элементов:

переключимся обратно на код, нажмем F7, либо два раза щелкнем на кнопку.

Запускаем и проверяем:

Можно собрать какую-нибудь фразу:

Добавив “\n” мы сможем вывести текст в две строки. Получится:

Но это мы все в игрушки играемся, давайте все таки уже задачу решим

Подключаем старый код

Для лучше переносимости, рекомендую уже реализованное решение исходной задачи сначала декомпозировать, и тогда вам будет достаточно скопировать класс с логикой. Я это уже сделал с задачей про студентов еще пару статей назад, поэтому я возьму код класса Logic

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

Очень важно вставить код класса ПОСЛЕ класса Form1, иначе получите страшную ошибку:

Внедряем логику

правим наш обработчик клика на кнопку:

Запускаем и проверяем:

А! Нам же еще среднее арифметическое надо вывести:

Обработка ошибок

Может вы уже столкнулись с этим, но если запустить приложение, ничего не ввести и просто нажать кнопку, программа выдаст ошибку:

появление ее закономерно, программа пытается с помощью метода int.Parse преобразовать строку в число, но в строке пусто и преобразовывать нечего. Аналогичная ошибка появится если ввести буквы вместо цифр.

Наверное было бы здорово, просто проигнорировать нажатие кнопки с некорректными данными, для этого нам надо заставить программу не падать. Делается это не сильно сложно, путем добавления конструкции для перехвата ошибок, Именуется она try-catch, и выглядит так:

правда если просто вставить код в таком виде то он будет ругаться на переменные ivanovSum и petrovSum, после блока try/catch. Это происходит потому что переменные инициализируются внутри блока try, надо их вынести вовне. Придется указать тип явно.

Красота! Можно сообщение выдавать об ошибке (но лучше не надо):

Это в принципе должно хватить для выполнения первого задания в лабе 4.

Источник