Создание графического интерфейса пользователя (стр. 1 из 5)
Кафедра: ИТ
СОЗДАНИЕ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА ПОЛЬЗОВАТЕЛЯ В MATLAB
Екатеринбург
2006
Принципы создания приложений с GUI
Приложения MATLAB являются графическими окнами, содержащими элементы управления (кнопки, списки, переключатели, флаги, полосы скроллинга, области ввода, меню), а также оси и текстовые области для вывода результатов работы. Создание приложений включает следующие основные этапы - расположение нужных элементов интерфейса в пределах графического окна и определение действий (команд MATLAB), которые выполняются при обращении пользователя к данным объектам, например при нажатии кнопки. Процесс работы над приложением допускает постепенное добавление элементов в графическое окно, запуск и тестирование приложения и возврат в режим редактирования. Конечным результатом является программа с графическим интерфейсом пользователя (GUI), содержащаяся в нескольких файлах, запуск которой производится указанием ее имени в командной строке MATLAB или в другом приложении.
Рассмотрим основные принципы создания приложений в MATLAB 6.x.
Среда GUIDE
Перейдите в среду GUIDE, выполнив guide в командной строке. В появившемся окне выберите Blank GUI и нажмите OK. Появится редактор окна приложения (рис. 1.), заголовок которого untitled.fig означает, что в нем открыт новый файл.
Рис. 1 Редактор приложения
Редактор приложения содержит:
· строку меню;
· панель инструментов управления приложением;
· заготовку окна приложения с нанесенной сеткой;
· вертикальную и горизонтальную линейки;
· панель инструментов для добавления элементов интерфейса на окно приложения.
Редактор приложения MATLAB 6.x позволяет разместить различные элементы интерфейса (рис. 2). Требуется нажать соответствующую кнопку на панели инструментов и поместить выбранный объект щелчком мыши в требуемое место заготовки окна приложения. Другой способ состоит в задании прямоугольной области объекта перемещением мыши по области заготовки окна с удержанием левой кнопки. Размер и положение добавленных объектов изменяются при помощи мыши. Перед изменением размера следует выбрать режим выделения объектов и сделать объект текущим, щелкнув по нему клавишей мыши.
Рис. 2. Панель инструментов для добавления элементов интерфейса
Приложение в данный момент находится в режиме редактирования. Любой объект можно удалить из окна при помощи <Delete>, предварительно его выделив. Запуск приложения производится при помощи кнопки Run либо выбором соответствующего пункта меню Tools. Появляется диалоговое окно GUIDE, которое сообщает о необходимости сохранить приложение. Нажмите Yes и сохраните приложение в файле с расширением fig.
Приложение запускается в отдельном окне с заголовком Untitled. Пользователь может нажимать на кнопки, устанавливать флаги, переключатели, обращаться к спискам. При этом ничего полезного пока не происходит.
Недостаточно разместить элементы интерфейса в окне приложения, следует позаботиться о том, чтобы каждый элемент выполнял нужные функции при обращении к нему пользователя. Например, при нажатии на кнопку производятся вычисления и строятся графики полученных результатов, переключатели позволяют установить цвет линий, полоса скроллинга изменяет толщину линии, в области ввода пользователь указывает некоторые параметры, управляющие ходом вычислений.
Программирование событий
Приложение в MATLAB 6.x хранится в двух файлах с расширениями fig и m, первый из них содержит информацию о размещенных в окне приложения объектах, а второй является М-файлом с основной функцией и подфункциями. Добавление элемента интерфейса из редактора приложения приводит к автоматическому созданию соответствующей подфункции. Данную подфункцию следует наполнить содержимым - операторами, которые выполняют обработку события, возникающего при обращении пользователя к элементу интерфейса.
Создадим приложение, окно которого содержит оси и две кнопки, предназначенные для построения графика функции и очистки осей.
Перейдите в среду создания приложения командой guide.
Расположите на форме кнопку и оси так, как показано на рис. 3. На кнопке автоматически размещается надпись PushButton. Кнопка является элементом интерфейса, ей следует дать имя, которое уникальным образом идентифицировало бы ее среди всех объектов окна приложения.
Рис. 3. Расположение кнопки и осей в окне приложения
Выделите кнопку PushButton и вызовите редактор свойств Property Inspector при помощи панели инструментов управления приложением. Появляется окно редактора свойств, в котором содержится таблица названий свойств кнопки и их значений. Занесите в свойство Tag значение btnPlot, щелкните мышью по строке справа от названия свойства, наберите требуемое значение и нажмите <Enter>. btnPlot теперь является именем кнопки PushButton. Удобно задавать имена, часть которых определяет тип элемента управления (btn соответствует button - кнопке). Аналогичным образом дайте осям имя axMain. Выберите в меню File редактора приложения пункт Save as, создайте папку MyFirstGui и сохраните приложение в файле mygui.fig. При этом открывается редактор М-файлов, содержащий файл mygui.m. Данный файл имеет структуру, схематично представленную в листинге 1.
Листинг 1. Структура М-файла приложения с графическим интерфейсом
function varargout = mygui (varargin)
% Операторы инициализации приложения
% ABOUT CALLBACKS :
% Краткая информация о программировании событий
function btnPlot_Callback(hObject, eventdata, handles)
% Подфункция обработки события Callback кнопки с именем btnPlot
Приложение mygui содержит одну кнопку PushButton. Когда пользователь нажимает на Push Button в работающем приложении, то происходит событие Callback данного элемента управления. Вызывается подфункция btnPlot_Callback. Сейчас она не содержит операторов. Имя подфункции образовано названием кнопки и события. Очень важно задавать имена объектам в свойстве Tag сразу после их добавления на окно приложения в редакторе приложений, иначе генерируемая подфункция получит имя, которое сохранится при последующем изменении значения Tag и повлечет ошибки при выполнении приложения. Завершающий этап состоит в программировании действий, которые выполняются при нажатии пользователем на кнопку PushButton. Измените функцию обработки события нажатия на PushButton в соответствии с листингом 2.
Листинг 2. Обработка события Callback кнопки с именем btnPlot
function btnPlot_Callback(hObject, eventdata, handles)
x=[-2:0.2:2];
y=exp(-x.^2);
plot (x,y)
Сохраните файл mygui.m в редакторе М-файлов и запустите приложение из редактора приложений, нажав кнопку Run. Нажатие на PushButton в запущенном приложении приводит к отображению графика функции на осях. Закройте окно приложения при помощи кнопки с крестиком в правом верхнем углу и продолжите работу над mygui в редакторе приложений.
Добавьте кнопку так, как показано на рис. 4, задайте ей имя btnСlear в редакторе свойств. Быстрый доступ к свойствам выделенного объекта в редакторе приложений производится из пункта Inspect Properties всплывающего меню при нажатии правой кнопки мыши на объекте. Перейдите к подфункции обработки события Callback добавленной кнопки, для чего следует выбрать пункт View Callbacks->Callback всплывающего меню. Выбор данного пункта делает активным редактор М-файлов. Разместите единственный оператор очистки осей cla в подфункции (листинг 3).
Листинг 3. Обработка события кнопки с именем btnClear
function btnClear_Callback(hObject, eventdata, handles)
cla
Запустите приложение и убедитесь, что нажатие на левую кнопку приводит к отображению графика функции, а правая служит для очистки осей.
Рис.4. Окно приложения с двумя кнопками
Управление свойствами объектов
Разработка приложения сопряжена с изменением свойств объектов, которые они получают по умолчанию при размещении их на заготовке окна. Некоторые из свойств, например надпись на кнопке или ее размер, устанавливаются при создании объекта в режиме редактирования. Другие свойства могут изменяться программно в работающем приложении.
Установка свойств при редактировании
Продолжите работу над приложением mygui, окно которого было изображено на рис. 4. Очевидно, что следует подписать кнопки, например Построить и Очистить. Кнопки являются графическими объектами с определенными свойствами, среди которых имеется свойство, отвечающее за надпись на кнопке. Сделайте левую кнопку приложения mygui текущей и вызовите редактор свойств Property Inspector. Установите свойство String левой кнопки в значение Построить (см рис.5.)
Рис.5 Окно свойств Property Inspector
Значение свойства string соответствует надписи на кнопке, a Tag - имени или тегу кнопки, как объекта. Имена объектов используются для изменения их свойств в ходе работы приложения при выполнении блоков обработки событий от других элементов интерфейса. Перейдите теперь к свойствам правой кнопки и установите String в Очистить.
Доступ к редактору свойств выделенного объекта производится либо из панели инструментов управления приложением, либо из меню View редактора приложений, либо при помощи пункта Property Inspector всплывающего меню.
Значение свойства string сразу отображается на кнопке приложения, находящегося в режиме редактирования. Запустите приложение.
Программное изменение свойств
Большинство свойств объектов можно устанавливать программно прямо в ходе работы приложения. Усовершенствуйте приложение mygui следующим образом. Пусть при запуске доступной является только кнопка Построить, при нажатии на кнопку Построить выводится график и она становится недоступной, зато пользователь может нажать кнопку Очистить для очистки осей, и наоборот.