В основном я бэкенд-разработчик и не люблю тратить время на фронтенд и интерфейсы. У меня также не так много навыков в дизайне и пользовательском интерфейсе, поэтому я обычно делегирую эту часть работы другим коллегам, которые являются графическим дизайнером или разработчиком внешнего интерфейса. Но когда в моей карьере мне пришлось работать над WinForms, чтобы создать приложение Windows для моих клиентов, мне нужно было найти быстрое решение.
Я нашел различные фреймворки, созданные для WinForms, чтобы разработчикам было легко создавать интерфейс пользовательского интерфейса всего за несколько щелчков мышью, и я протестировал их все.
Сегодня я расскажу о Bunifu Framework, и мы вместе создадим базовое погодное приложение для тестирования некоторых элементов управления этой мощной библиотеки.
Начиная
Прежде всего, давайте загрузим пробную версию Bunifu Framework ЗДЕСЬ или купим версию UI WinForms ЗДЕСЬ. В образовательных целях студенты и учителя могут воспользоваться Студенческим планом с огромной скидкой.
ТОП 5 Лучших графических (GUI) фреймворков Python / Графический интерфейс python
Затем создайте новый проект WinForms, я назову его «WeatherApp».
Откройте диспетчер пакетов NuGet и установите пакет Bunifu.UI.WinForms.
Теперь в вашем наборе инструментов создайте новую вкладку, которую я назвал «Bunifu UI».
Выберите «Выбрать элементы», а затем «Обзор».
Перейдите в каталог своего проекта и выберите все Bunifu.WinForms dll, которые вы там найдете.
Теперь вы должны увидеть все доступные элементы управления на новой вкладке.
В этом руководстве мы будем использовать всего несколько элементов управления, но мы можем найти много подробностей обо всех элементах управления в официальной документации.
Реализация пользовательского интерфейса
Перетащите элемент управления SplitContainer, чтобы отделить раздел фильтра от основного раздела приложения. Затем установите для свойства IsSplitterFixed значение true, чтобы пользователь не мог изменять размеры двух панелей.
Добавьте по одной панели BunifuShadowPanel на каждую панель и установите для свойства Dock значение Fill. Я также изменил ShadowStyle второй панели на Dropped, чтобы сделать ее более стильной.
На верхней панели добавьте групповое поле, которое будет содержать текстовое поле и кнопку «Найти» .
Затем добавьте BunifuTextBox и измените свойство Placeholder по своему усмотрению.
Наконец, добавьте BunifuButton, изменив свойство Text на «Найти» и IdleBorderRadius на 25, чтобы границы округлились.
Создание приложения с интерфейсом C#
Теперь добавьте информацию о текущей погоде. Например, я помещаю выбранное местоположение, скорость ветра, процент влажности, давление и текущую температуру на BunifuLabel. Я также использовал BunifuPictureBox, чтобы показать простой значок текущей погодной ситуации.
Наконец то же самое на следующие 5 дней. Конечно, это будет всего лишь краткий прогноз, поэтому я покажу только прогнозируемый день, значок и температуру. Я использовал здесь те же элементы управления Bunifu, что и раньше.
Затем нам нужно связать кнопку с событием кода, выполнить два вызова API и установить возвращаемые данные в интерфейс приложения. Ниже вы можете найти простой пример того, как это сделать:
Реализация API
Поскольку мы хотим создать погодное приложение, первое, что нам нужно, — это общедоступный API, который мог бы предоставлять нам такие данные.
Раньше я уже пользовался MetaWeather и рекомендую его, потому что он бесплатный и не требует даже авторизации с логином / токеном. Это делает этот сервис идеальным для таких небольших проектов, как этот.
Для создания нашего приложения нам понадобится всего два вызова API:
- Горе для конкретного места
- Данные о погоде в этом месте
Теперь нам нужно создать два новых класса для объекта ответа API. Вы можете создать эти два класса вручную или с помощью онлайн-инструмента, такого как QuickType. Во втором случае этот инструмент также создаст несколько методов, упрощающих сериализацию и десериализацию.
Ниже вы можете найти два класса для обоих ответов API:
Создайте новую папку «API» и новый класс с именем Weather, который будет содержать два наших вызова службы MetaWeather и еще один метод для получения изображения.
Дальнейшие улучшения
Теперь у нас есть приложение, которое показывает текущую погоду и прогноз на ближайшие 5 дней. Что, если мы хотим также увидеть график с минимальной и максимальной температурой?
Откройте диспетчер пакетов NuGet и установите пакет Bunifu.Dataviz.WinForms. Это библиотека, которая содержит типы Базовый и Расширенный, и она поможет нам легко создавать графики.
Давайте создадим разделенный контейнер, чтобы отделить левое меню от основного раздела, и добавим в меню два элемента BunifuTileButton.
Добавьте новую панель с именем «graphPanel» под существующей, просто перетащите внутри нее элемент управления BunifuDataVizAdvanced.
Вернитесь к файлу MainForm.cs и обновите код следующим образом:
Тестовое задание
Как создать интерфейс программы для windows
Доброго времени суток! В этом уроке мы создадим Ваше первое приложение с графическим интерфейсом в MS Visual Studio. Это будет своего рода «Hello World» для графических приложений. Скажу сразу, что использование Windows Forms — не единственный способ создания графических приложений (приложения с графическим интерфейсом пользователя) для C# программистов, но начать изучение лучше именно с этого. И так, запускаем Visual Studio.
Запустили? Тогда к делу! Идем в главное меню и выбираем пункт «Файл — Создать — Проект», как показано на рисунке ниже.
Создание нового проекта
В появившемся окне:
- в левой части выбираем «Шаблоны — Visual C# — Windows»;
- в основной области выбираем элемент «Приложение Windows Forms»;
- в нижней части окна вводим имя проекта и указываем его расположение на диске.
В общем, как показано на рисунке ниже.
Опции создания проекта
Указали что нужно? Тогда нажимайте на кнопку «OK». Теперь вы должны увидеть примерно следующее (основные области выделены прямоугольниками):
Только что созданный проект
На рисунке выше, я обозначил основные области: область дизайнера (слева вверху), область обозревателя решений (справа вверху) и область свойств (справа внизу). С этими областями, мы будем работать чаще всего.
В области дизайнера, сейчас располагается пустая «форма», это так называемое окно, в данном случае, главное окно нашей программы. В области свойств, отображаются свойства выделенного в дизайнере элемента, в данном случае, нашей формы, ну а область обозревателя решений, содержит файлы проекта, в том числи, относящиеся и к формам (окнам) программы. А теперь, давайте немного изменим нашу форму, и запустим это первое приложение.
Для этого, выделим в дизайнере форму (для этого, можно просто кликнуть левой кнопкой мыши по форме) и перейдем в блок свойств, в котором найдем строку «Text» (слово текст, ищем в левом столбце), как показано на рисунке ниже.
Свойство «Text» основной формы приложения
Обратите внимание, в левом столбце указано имя (название свойства), а в правом — его значение.
В данном случае, мы имеем дело с текстовым свойством, и его значение, отображается в заголовке окна, так что, давайте теперь укажем там что-то свое, например, что-то вроде: «Главное окно», как показано на рисунке ниже:
Установка свойства формы
Теперь, можно собрать проект и запустить. Для этого идем в главное меню и выбираем пункт «Сборка — Собрать решение». А потом запускаем приложение, для этого выбираем пункт «Отладка — Запуск без отладки» в главном меню. В результате Вы должны увидеть окно следующее окно.
Окно первого графического приложения
В следующем уроке, мы рассмотрим простую работу с дизайнером форм, и настройку элементов графического интерфейса, а на этот урок подошел к концу, мы создали первое графическое приложение, собрали и запустили его.
Источник: plssite.ru
Универсальный GUI
Меня зовут Халитов Кирилл, я аспирант из МГУДТ (Московский государственный университет дизайна и технологии (МГУДТ) ). В моей диссертации возникла задача упростить процесс создания интерфейса для локального и веб-приложения и в итоге получился сабж.
Введение
В настоящее время любая современная мониторинговая система включает в себя прикладное программное обеспечение (ПО) для визуализации данных. Как правило, запуск этого ПО предполагает наличие рекомендуемой операционной системы (ОС), в большинстве своих случаев ОС компании Microsoft. Однако сейчас наблюдается тенденция использования кроссплатформенных средств для разработки ПО. В результате этого появляется возможность запуска готового программного продукта на разных ОС, включая и мобильные ОС.
Кроме того, в связи с бурным распространением интернета популярным направлением разработки ПО стала разработка веб-приложений или веб-сервисов. Веб-приложение является полезным дополнением к клиентской прикладной программе (приложению). Обычно веб-приложение даёт возможность удалённого использования мониторинговой системы.
Это означает, что пользователь не привязан к месту расположения аппаратной части мониторинговой системы и может использовать её из любой точки мира, где есть рекомендуемое интернет-соединение. Важно заметить, что разработка веб-приложений в значительной степени отличается от разработки клиентских приложений и это в свою очередь создаёт некоторые проблемы. В частности, это проблема создания универсального графического интерфейса пользователя (GUI). Чтобы клиентское приложение и веб-приложение были реализованы в едином графическом стиле, необходимо приложить достаточно усилий как разработчику интерфейса клиентского приложения, так и разработчику интерфейса веб-приложения. В конечном счёте величина усилий одного или другого разработчика будет зависеть от того, интерфейс какого приложения будет задавать общий стиль.
Современные способы построения интерфейсов
Рассмотрим наиболее популярные в настоящий момент способы построения интерфейсов клиентских приложений на языке C++, как наиболее используемом для разработки ПО, для ОС Microsoft Windows (MS Windows) и ОС Linux. Главным средством разработки ПО для MS Windows является MS Visual Studio [1].
Эта интегрированная среда разработки (IDE) позволяет разрабатывать ПО на разных языках программирования, но основными языками, конечно, являются C++ и C#. Для разработки интерфейса приложения имеются два основных средства — Windows Forms (WinForms) и Windows Presentation Foundation (WPF). Большая часть существующих приложений для MS Windows разработана с использованием WinForms, однако с появлением более современных версий ОС (MS Windows 7, 8), система WPF становится более популярной. Кроме того, последние версии MS Visual Studio позволяют использовать язык разметки HTML5 для построения интерфейсов, близких по стилю к нативным веб-приложениям. Однако стоит заметить, что коммерческая лицензия MS Visual Studio является платной, как и лицензия MS Windows, что несомненно является недостатком для низкобюджетных проектах.
Если говорить о низкобюджетных проектах, то тут наиболее подходящим вариантом является ОС Linux. Помимо того, что большинство дистрибутивов этой ОС являются абсолютно бесплатными, в том числе и для коммерческого использования, также имеется ряд бесплатных средств для разработки качественного ПО для ОС Linux.
Самым распространённым средством для разработки ПО на языке С++ является кроссплатформенный инструментарий Qt [2]. Важно подчеркнуть, что Qt позволяет разрабатывать приложения не только для ОС Linux, но и для MS Windows, Mac OS X, Android и других UNIX-подобных ОС. Разработчики Qt предлагают как бесплатную для коммерческого использования, так и платную лицензию с дополнительными возможностями. Но исходя из современной практики разработки ПО с помощью этого инструментария, бесплатной лицензии оказывается больше чем достаточно.
Если проводить аналогию с MS Visual Studio, то в Qt мы имеем IDE Qt Creator. Здесь альтернативой WinForms являются так называемые виджеты (Qt Widgets), а альтернатива для WPF — Qt Quick. Также в Qt Creator имеется возможность создания интерфейсов на основе HTML5. Но наиболее интересным модулем инструментария является встраиваемый веб-движок WebKit, который лежит в основе всех современных веб-браузеров.
Подобный модуль имеется и в MS Visual Studio, но он имеет ряд ограничений, и тем более нас больше интересуют низкобюджетные средства, которые позволяют уменьшить издержки при создания программного продукта. Веб-движок — это ядро браузера, он отвечает за правильное отображения веб-страниц.
Модуль Qt WebKit позволяет создавать интерфейс клиентского приложения с использованием техники разработки интерфейсов веб-приложений. В основе создания интерфейса веб-приложения лежит устоявшийся стек технологий. Он включает язык разметки HTML (HTML 4, 5), каскадные таблицы стилей (CSS 2, 3) и скриптовый язык JavaScript с богатым выбором дополнительных библиотек (каркасов). Отдельного внимания заслуживает тот факт, что скорость появления новых полезных каркасов для языка JavaScript стремительно растёт, а это делает разработку, насыщенных функционалом приложений, более быстрой и удобной.
Теперь решение проблемы создания универсального GUI лежит на поверхности, но это только на первый взгляд.
Традиционный способ: Qt WebKit + Qt-костыли
Рассмотрим традиционный способ создания универсального GUI с помощью модуля Qt WebKit на примере модуля визуализации данных системы акустического мониторинга, разрабатываемой в рамках кандидатской диссертационной работы [3]. Под системой акустического мониторинга подразумевается система, включающая аппаратную и программную части. Аппаратная часть системы состоит из сенсорной сети акустических датчиков, данные с которых обрабатываются на микроконтроллере и отправляются по какому-либо интерфейсу (UART, IEEE 802.X и др.) на персональный компьютер (ПК). Программная часть состоит из набора прикладных программ, работающих как на локальном ПК (клиентское ПО), так и на удалённом сервере (серверное ПО).
Традиционный метод подразумевает использование межпроцессного
Рис. 1. Традиционный метод реализации универсального GUI
взаимодействия по средствам встроенного механизма Qt. Здесь подразумевается взаимодействие между основной логикой клиентского приложения, изображённой на рис.1 как Обработчик данных, и GUI-элементом.
Одним из недостатков такого подхода является то, что код для реализации GUI на языке JavaScript будет иметь специфические функции, которые будут актуальны только для клиентского Qt-приложения. Для серверного приложения, отвечающего за GUI, нужен будет другой, специфичный для серверной реализации, код. Например, в случае использования PHP-скрипта для реализации основной логики серверного приложения, понадобится реализация межпроцессного взаимодействия с помощью какой-либо другой технологии (AJAX или WebSocket). Отсюда следует ещё один недостаток, а именно использование дополнительного языка программирования для реализации основной логики серверного приложения и разработка нового алгоритма межпроцессного взаимодействия.
Более интересный подход: Qt WebKit + WebSocket
Для решения этих проблем предлагается новый метод, основанный на использования упомянутой выше технологии WebSocket. Суть метода заключается в том, чтобы унифицировать метод межпроцессного взаимодействия между основной логикой приложения и GUI, как на клиентской стороне, так и на серверной. В этом случае появляется возможность использования JavaScript кода для реализации универсального для обеих сторон GUI.
Рис. 2. Новый метод реализации универсального GUI
На рис. 2. видно, что теперь для межпроцессного взаимодействия, как для клиентской, так и для серверной части используется технология WebSocket. То есть теперь мы имеем один универсальный JavaScript код для разных приложений.
В этом случае необходимым условием является серверное приложение, основная логика которого реализована с помощью Qt, на не совсем привычном для веб-разработчиков, языке C++. С одной стороны такой подход к реализации серверного приложения усложняет задачу для узкоспециализированного веб-разработчика. Но с другой стороны мы имеем универсальные части кода, которые позволяют нам сэкономить время на дублировании одних и тех по смыслу алгоритмов на разных языках. Важно также подчеркнуть, что для использования технологии WebSocket необходима дополнительная библиотека, которая имеется в интернете в свободном доступе или включается по умолчанию в более поздние версии Qt.
Рис. 3. Локальное (справа) и серверное (слева) приложения, запущенные на ОС Ubuntu 14.04
На рис. 3 приведён пример реализации нового метода создания универсального GUI для ОС Ubuntu 14.04. Как видно на рисунке, в конечном итоге мы получаем универсальный интерфейс, как для локального приложения, запущенного в качестве исполняемого файла ОС, так и для серверного приложения, запущенного в современном веб-браузере. Так как для разработки ПО используются кроссплатформенные инструменты, это позволяет говорить о простой переносимости программного продукта на другие ОС в будущем.
Список литературы
P.S. Единственное, что на картинке бросается в глаза — это разные шрифты, но мне, честно говоря, тогда было не до них.
P.P.S. Можно ли запатентовать этот способ, чтобы на защите было чем козырнуть кроме свидетельства о регистрации ПО?
- Разработка веб-сайтов
- Анализ и проектирование систем
Источник: habr.com