Что такое 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.
Универсальный 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. Как видно на рисунке, в конечном итоге мы получаем универсальный интерфейс, как для локального приложения, запущенного в качестве исполняемого файла ОС, так и для серверного приложения, запущенного в современном веб-браузере. Так как для разработки ПО используются кроссплатформенные инструменты, это позволяет говорить о простой переносимости программного продукта на другие ОС в будущем.
GUI обертка для консольного приложения на C#
Для тех кто не в курсе, GUI (Graphical user interface) — графический интерфейс пользователя. То есть это интерфейс в котором элементы управления представлены в виде изображений, анимации и так далее. Но существуют программы, которые не используют GUI. Обычно их называют «консольные приложения».
Сегодня я расскажу вам как создать GUI оболочку для консольного приложения. В этом нет ничего сложного, главное знать аргументы командной строки, которые принимает приложение.
Заинтересованных прошу под кат.
И так, для начала напишем маленький класс, со статистической функцией, которая будет запускать наше приложение. Я буду использовать Visual Studio 2010, C# и .NET 4.0. Создадим отдельный файл и в нем напишем каркас класса.
В .NET есть классы для запуска *.exe файлов. Что бы их использовать, необходимо подключить пространство имен System.Diagnostics. Допишем в начало файла:
Для запуска любого *.exe файла я использовал класс Process. Простой запуск *.exe файла можно сделать так:
Что произойдет во время MyProc.Start()? Наша программа запустит *.exe файл указанный в filename, и продолжит выполнение. Есть и другие варианты, но я использовал такой, так как далее, с помощью свойства StartInfo удобно задавать другие параметры запуска.
А что если нужно, что бы управляющая программа(программа которая запускает) дождалась завершения запускаемой программы? Для этого есть метод у класса Process, который называется WaitForExit. Он не возвращает управление, пока запущенное приложение не завершиться. Его недостаток проявиться, если запущенное приложение зависнет — из-за него зависнет управляющая программа, или поток который ее запустил в случае использования многопоточности. WaitForExit можно использовать после вызова Start, например вот так:
Для удобства, необходимо изменить метод Start нашего класса EXEStarter так, что бы программист мог сам задать «ждать завершение процесса или нет». Это совсем не трудно:
Как видно из фрагмента кода, если waitforexit равно true, значит метод будет ждать завершения процесса, ну и наоборот. Идем дальше. Для задания параметров консольному приложению, нам нужно использовать аргументы командной строки. У свойства StartInfo класса Process, есть свойство Arguments, которое принимает строку содержащую все аргументы командной строки, для этого приложения. снова допишем наш метод Start.
Неплохо было бы еще скрыть окно, которое открывается при запуске приложения, так как оно не несет никакой полезной нагрузки в данном случае. Для этого в StartInfo есть булевое свойство CreateNoWindow. Как вы уже догадались, если присвоить ему true — окно открываться не будет. Добавим перед запуском приложения строчку:
Теперь консольное окошко не будет открываться. Можно так же добавить строку:
Свойство UseShellExecute как вы уже догадались булевое и отвечает за то, будет ли при запуске использоваться оболочка ОС. Если поставить его в true, то можно в FileName задать не только *.exe файл, а и любой другой, или даже ссылку, при этом будет запущенно приложение, которое установлено по умолчанию в ОС для этого типа файлов.
Опять для удобства, можно перегрузить метод Start нашего класса, что бы он мог принимать меньше аргументов. Например вот так:
Работа с аргументами командной строки все еще остается не очень удобной. Я решил написать маленький класс, который стал бы для меня удобным средством создания аргументов командной строки. Из чего состоит аргумент командной строки? Из имени и значения. Обычно это выглядит например так: «-t 60», то есть «-t» имя, а «60» — значения. Много аргументов могут не принимать значения. Начнем написание класса.
Но в таком состоянии это не класс, а лишний код. Добавим метод ToString. Кстати, очень часто консольные утилиты в качестве аргументом принимают путь к какому-либо файлу. Если в этом пути есть пробелы, нужно ставить кавычки. Необходимо это учесть.
Я перегрузил метод ToString, который достался классу от Object. Если Value существует, добавляю кавычки и возвращаю строку. Допишем ему еще 2 конструктора, один принимает только имя, другой имя и значение.
Теперь класс закончен. Но его все равно будет не достаточно, ведь для добавления 10 аргументов в запуск *.exe придется создать 10 объектов этого класса и для каждого вызвать ToString. Напишем еще один класс на основе List из System.Collections.Generic. Вот что у меня получилось:
Методы List будут служить для добавления элементов, а перегруженный ToString вернет правильную строку с пробелами.
С классами все. Напишем маленький пример, что бы понять, как это работает. Для примера я использовал архиватор 7zip. Что бы за архивировать файл необходимо выполнить следующую команду:
Где %7zip Path% — путь к 7z.exe, «a» — опция, которая означает добавления файлов в архив, %Output Path% — путь результата, %Input Path% — путь для входного файла. Список всех аргументов командной строки для 7zip вы можете получит, запустив 7zip через консоль. Я создал небольшую форму с помощью WinForms. 
Поместил на нее 1 кнопку. Подключил к проекту свои файлы с классами EXEStarter, ComanLineArgument и ComandLineArgumentsList. После этого написал обработчик нажатия кнопки. Он вызывает сначала диалоги выбора файлов, а потом с помощью только что написанных классов архивирует выбранный файл. Код получился вот такой:
Вот собственно и все. Задавайте свои ответы. Пишите пожелания, критику и сообщайте о моих орфографических ошибках.