Графические интерфейсы и средства их разработки. Создание графического интерфейса пользователя средствами Win32 API

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

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

1. Одно или несколько окон для вывода графических результатов расчета.

2. Несколько редактируемых окон, с помощью которых задаются и/или изменяются значения параметров задачи.

3. Управляющие кнопки, которые позволяют запускать и останавливать процесс расчета, перерисовывать результаты, выходить из задачи.

4. Поясняющие надписи (статический текст).

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

Для создания такого интерфейса можно воспользоваться функциями графического вывода, а также специальной функцией, разработанной для интерактивного взаимодействия пользователя с рисунком. Эта функция называется uicontrol . Но для упрощения работы и создания однотипных элементов интерфейса в системеMATLAB имеется специальная программа, которая позволяет на уровне визуального программирования, почти без написания кода создать требуемые элементы.

Рис. 8. Простейщий графический интерфейс пользователя для решения задачи “Биения”

9.1. Создание внешнего вида интерфейса

В этом параграфе мы рассмотрим использование MATLAB для разработки внешнего вида графического интерфейса (GUI -GraphicsUserInterface) с использованием средств графического (визуального) программирования. Для вызова визуального редактора необходимо в командном окнеMATLAB набрать командуguide . По истечении определенного времени, определяемого быстродействием вашего компьютера, появятся два новых окна, показанные на рис.9 . Одно из них – панель управления (Control Panel , на рисунке слева) и форма или область рисования (Figure , на рисунке справа). Эти окна могут перекрываться, но мы для ясности изложения расположили их рядом. Показанная выше картинка появится на экране в том случае, если перед вызовомguide отсутствует какой-либо открытый рисунок. В случае же если функцияguide вызывается после отрисовки какого-либо рисунка, то он открывается вместо пустого. Мы же рассмотрим создание графического интерфейса с самого начала.

Перед созданием графического интерфейса желательно “разработать проект” того, что вы хотите иметь в качестве интерфейса. Мы рассмотрим пример вывода трех разных сигналов в трех подокнах, что в терминах графики высокого уровня определялось бы операторами subplot(3,1,k), где k - номер графика. Кроме того,

вывода графиков (axes в терминах панели управления), три статических надписи N,R,C (text ), три окна ввода/редактирования данных (edit ) и две кнопки (push ).

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

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

Для создания редактируемых окон ввода используется кнопка edit , показанная справа. Используется она так же, как при создании подокон с осями. Сначала появляется мышь, нагруженная крестиком, с помощью которой строится прямоугольник ввода.

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

надпись, необходима работа с редактором свойств, который вызывается либо при помощи кнопки Property editor , либо с помощью двойного нажатия левой кнопкой мыши на соответствующем объекте на панели рисунка.

Для создания и размещения кнопок используется панель с надписью Push . Способ размещения кнопки и выбора ее размера полностью совпадает с методом, описанным выше для окна редактирования и окна статического текста.

Построенные таким образом окна вывода и редактирования, окна статического текста и кнопки, а также другие объекты можно выровнять и установить определенные промежутки между ними с помощью панели выравнивания (Alignment Tools ).

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

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

При работе с графическими объектами на панели рисунка желательно раскрыть (с помощью соответствующей кнопки окна Windows) панель рисунка на весь экран и выбрать размер всех объектов на панели рисунка.

Поскольку по умолчанию размеры всех объектов задаются в пикселях, это может привести к тому, что при изменении размера окна вывода кнопки и/или окна могут наехать друг на друга. Для избежания такого нежелательного явления необходимо задать единицы размера всех объектов в безразмерных переменных – долях размера окна. Этот размер называется normalized . Для этого необходимо вызвать редактор свойст щелкнув на панели управления на кнопке с над-

писью Property editor . Выделив в верхнем окне редактора свойств все введенные нами объекты (с помощью удерживаемой клавишиCtrl и выделения объектов левой кнопкой мыши), в нижнем окне редактора свойств находим свойствоUnits (единицы измерения) и выбираем его щелчком левой кнопки мыши. После этого в средней части редактора в специальном окне слева появится свойствоUnits , а справа - окно выбора значений, в котором имеется раскрывающийся список с допустимыми значениями свойства. Для свойстваUnits необходимо выбрать значениеnormalized . Анологично надо задать значение свойстваFontUnits – единицы измерения размера шрифтов. Это обеспечивает изменение размера шрифта при изменении размера окна.

Для размещения надписей на кнопках и в области статического текста необходимо выделить соответствующий объект (либо двойным щелчком прямо в области рисунка, либо в верхнем окне редактора свойств) и в нижнем окне редактора свойств найти свойство String , и после его выделения вписать между кавычками требуемый текст (например, ’Пуск’ на соответствующей кнопке). Для задания надписей над каждым из окон вывода необходимо выделить соответствующее окно и вызвать редактор свойств8 , в нижнем окне которого надо найти свойствоTitle .

8 Редактор свойств можно вызвать не только с помощью кнопки на панели управления, но

и двойным щелчком на соответствующем объекте.

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

13.1 Виджеты (Widgets)

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

Примеры виджетов:

• Кнопка (класс QPushButton );
• Метка (класс QLabel );
• Поле ввода (класс QLineEdit );
• Числовое поле-счётчик (класс QSpinBox );
• Строка прокрутки (класс QScrollBar ).

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

Создадим пустой файл проекта. Запустим мастера проектов и выберем в разделе Projects (Проекты) пункт Other Project (Другой проект) . Далее выберем тип проекта Empty Qt Project (Пустой проект Qt) . К файлу проекта добавим содержимое:

TEMPLATE = app #Модули Qt, которые мы будем использовать QT += widgets #Добавляем модуль widgets для работы с виджетами (необходимо для Qt5). TARGET = widget#Название исполняемого файла SOURCES += \ main.cpp

Теперь создадим простую программу с окном, в котором мы будем выводить надпись. Установим размер окна и текст его заголовка, а также установим шрифт для надписи. Для этого создадим файл main.cpp со следующим содержанием:

#include #include int main (int lArgc, char * lArgv ) { //Создаём объект QApplication, который инициализирует и настраивает оконную программу, //управляет её выполнением с помощью цикла обработки событий QApplication lApplication (lArgc, lArgv); QLabel lLabel; //Создаём виджет QLabel - метка lLabel.setText (" I am widget! "); //Задаём текст для метки lLabel.setGeometry (200, 200, 300, 150); //Задаём размеры - позицию (x, y) ширину и высоту. Задаём выравнивание текста lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); //Класс QFont используют для настройки параметров шрифта. //Выбираем семейство шрифтов Arial Black и размер 12. QFont lBlackFont (" Arial Black ", 12); lLabel.setFont (lBlackFont); //Задаём шрифт для метки lLabel.show (); //Вызываем метод show() для показа метки на экране. return lApplication.exec (); //Запускаем программу на выполнение exec() выполняет //цикл обработки событий. Программа ожидает действия пользователя и выполняет их обработку. }

Как видим, элементы, из которых состоят интерфейсы в Qt , имеют собственные позицию и размер - так называемую "геометрию" - и, таким образом, занимают соответствующую прямоугольный участок на экране (см. рис. 13.1). Также каждый из элементов имеет настройки, которые определяют его поведение и вид.

Рис. 13.1.

Для создания структуры виджеты организовывают в иерархию по принципу "часть - целое". Каждый из виджетов может содержать другие виджеты. Такой визуальный элемент становится "родителем" (родительским виджетом) для элементов, которые он содержит. Отметим, что такие отношения не следует путать с наследованием в C++ - отношениями между классами в программе. Отношения между виджетами являются отношениями между объектами. Такие отношения порождают несколько последствий:

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

Виджеты, которые не имеют родителя (виджеты верхнего уровня), имеют вид отдельных окон в программе. Рассмотрим пример. Назовём новый проект ParentExample . Файл проекта будет содержать обычные для GUI -проекта настройки:

TEMPLATE = app TARGET = ParentExample QT += widgets

Для виджета, который мы будем использовать в качестве главного окна создадим новый класс. Для этого в категории Files and Classes (Файлы и классы) выберем раздел С++ и выберем С++ Class (см. рис. 13.2).

Следующим шагом будет создание нескольких элементов на окне. Для этого откроем файл parentwidget.cpp и изменим код конструктора класса. Для отображения элементов достаточно создать их в конструкторе класса и задать ParentWidget как отца для них. Код parentwidget.cpp выглядит так:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget (QWidget * parent) : QWidget (parent) { //Создаём метку, указывая родительский виджет - this, то есть экземпляр класса ParentWidget. QLabel * lLabel=new QLabel (this); //Позиция относительно левого верхнего угла родительского виджета. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText (" TextLabel "); //Текст на метке. //Создаём кнопку, задаём "родителя", геометрию и текст QPushButton * lPushButton = new QPushButton (this); lPushButton->setGeometry (50, 50, 100, 30); lPushButton->setText (" PushButton "); //Создаём поле ввода, задаём "родителя", геометрию и текст QLineEdit * lLineEdit = new QLineEdit (this); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ->setText (" LineEdit "); lLineEdit ->selectAll (); //Выделяем текст в поле ввода (просто для примера) //Наконец изменяем размер родительского виджета setGeometry (x (), y (), 300, 150); //и задаём текст заголовка окна setWindowTitle (" parent widgetExample "); }

Поскольку родительским элементом является ParentWidget , то метка (QLabel ), кнопка (QPushButton ) и текстовое поле (QLineEdit) находятся в его пределах. Позицию дочерних виджетов задают относительно левого верхнего угла отца. В этом легко убедиться изменив размеры и позицию окна нашей программы. Обратите внимание на то, как мы создавали элементы пользовательского интерфейса в динамической памяти используя оператор new . Это гарантирует, что элементы не будут удалены после завершения работы конструктора ParentWidget .

yadobr 14 января 2014 в 09:10

Проектирование графического интерфейса пользователя

• Интерфейсы

Введение

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

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

Общие принципы

Какие ЭИ создать?

Какой должен быть дизайн ЭИ?

Как правильно расположить ЭИ на экране?

Как ЭИ должны себя вести?

В заключении

Литература

Стандарт GUI.

Одно из важнейших изменений в компьютерной индустрии – появление графического интерфейса. Поэтому возникла необходимость принять стандарты GUI, которые определяют, как должны выглядеть приложения под Windows? Macintosh и т.д. Существуют даже сертификационные программы к требованbям которых продавцы приспосабливают свои приложения, чтобы получить значок Windows. Это делается по нескольким причинам.

Одно из достоинств Windows или Mac – их стандартный вид. Когда вы научились работать в одном из них, считайте, что владеете и остальными. Большинство приложений под Windows используют одни и те же соглашения, поэтому вы знаете как открыть, сохранить, распечатать, закрыть и скопировать файл в любом из них. Стандартный интерфейс очень удобен для пользователей. Нужно стараться, чтобы ваши приложения были похожи на другие приложения под Windows с которыми пользователи уже научились работать. Есть семь общих принципов разработки GUI. Если вы изучите их и будете им следовать, с дизайном ваших приложений будет все в порядке.

Семь принципов разработки GUI.

Семь общих принципов разработки GUI взяты из руководства по интерфейсу Micrisoft Windows. Они формируют схему, на основании которой вы можете создавать собственные стандарты. Эта схема дает разработчикам и пользователям два существенных преимущества. Во-первых, приложения выглядят профессионально. Во-вторых, они функциональны, согласуются с другими приложениями и легко осваиваются пользователями.

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

1. Позволяйте пользователю контролировать приложение.

2. Следуйте парадигме объект/действие.

3. Будьте последовательны.

4. Сделайте работу с приложениями простой и очевидной.

5. Стремитесь к гармонии.

6. Обеспечьте пользователю обратную связь.

7. Будьте снисходительны

Принцип первый: дайте возможность пользователю контролировать приложение.

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

Допустим пользователь хочет добавить нового клиента В примере, пользователь должен для этого перейти в модуль ACCOUNTS RECCIEVAble и затем добавить откуда нового клиента. Откуда ему знать, что нужно делать? Вероятно, из своего опыта работы с этим приложением. А в мире GUI пользователь просто выбирает в меню сначала команду New (Новый), потом Customer (Клиент), как показано на рис. В этой современной системе можно добавить нового клиента, продавца или пункт инвентаризационной записи посредством меню File (Файл). Это позволяет изменить запись клиента, находясь в экране продавца, и наоборот. Пользователю не нужно больше разбираться в сложном и запутанном иерархическом меню.

Принцип второй: следуйте парадигме объект/действие.

Парадигма объект/действие гласит, что над всеми объектами системы можно выполнить какую-либо операцию. Наиболее простой и очевидный пример – экран поддержки базы клиентов (рис). Экран содержит набор кнопок и каждая из низ позволяет произвести некоторое действие над информацией о выбранном клиенте. Можно удалить ее, отредактировать, распечатать и т.д. Действия, которые можно выполнить над определенным клиентом, должны быть доступны или недоступны в соответствующие моменты времени. Например, когда запись покупателя находится в режиме редактирования, кнопки Delete (Удалить) и New (Новый) следует деактивировать.

Принцип третий: будьте последовательны.

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

Таким образом, создавая новые приложения, будьте последовательны. Если для добавления новой записи употреблена команда New (Новый), используйте ее везде. Не следует заменять это слово другими – например, словом Add 9добавить). Благодаря вашей последовательности пользователи будут знать: где им ни встретилась команда New (Новый), е можно использовать для добавления новой записи.

Принцип четвертый: сделайте работу с приложением простой и очевидной.

Можно выразить эту мысль и так: не употребляйте жаргона. Есть экран с двумя кнопками. На одной из них написано «Упаковать базу данных», а на другой – «Убрать записи с пометкой на удаление». Вторая запись наверняка будет более понятна пользователю.

При разработке приложений часто возникает соблазн применить в интерфейсе программистский сленг. Старайтесь по возможности избегать этого.

Принцип пятый: стремитесь к гармонии

Даже в черно белом виде этот экран имеет существенный эстетический недостаток: белый фон и на нем контрастные объекты. На рис. Тот же самый экран выглядит хорошо сбалансированным в цветовом отношении.

В Windows можно передать миллионы цветовых комбинаций. Означает ли это, что их все нужно использовать? Разумеется, нет. Следует выбирать простые, спокойные цвета и избегать их беспорядочного смешения, которое почему-то нравится некоторым программистам.

Принцип шестой. Обеспечивайте пользователю обратную связь.

Представьте себе, что в вашем приложении есть процесс, который долго выполняется. В течение этого времени на экран можно выводить сообщение примерно такого содержания: «Программа работает, подождите пожалуйста». Удобное решение; но откуда пользователю знать, что она не зависла? Поэтому весьма вероятно, что он отдаст приложению «салют тремя пальцами» (Ctrl+Alt+Del), хотя с программой все будет в порядке.

Лучше показать пользователю, какая часть процесса выполнена. Тогда он не прервет программу понапрасну, сможет оценить, как далеко продвинулась работа, и заняться другими делами, пока процесс не завершится. Таким образом, производительность труда пользователя повысится примерно на 25 процентов. Этого результата можно достичь простым выводом измерителя на экран. Обычно выводятся сообщения типа «10 из 100 записей обработано» или «40% завершено». Еще лучше показать как число обработанных записей, так и их процент»

Принцип седьмой: будьте снисходительны

Каждый из нас иногда удалял запись, нечаянно нажав не ту кнопку. Поэтому оставьте пользователю возможность передумать или отменить только что произведенные действия. Если процесс занимает длительное время, изменяет большой объем данных или требует, чтобы пользователь создал резервную копию данных перед выполнением действия, необходимо выдать соответствующее предупреждение, Мне приходилось видеть приложения, которые требуют подтверждения дважды, а потом еще спрашивают пароль. Нужны ли вашим программам защиты такого уровня? Возможно. Задача разработчика – помочь пользователю, если тот сделал ошибку на любом этапе работе.

Важность соглашений по стандарту GUI.

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