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

Чтобы создать пользовательский UIs и визуализацию, можно объединить несколько графических объектов и объектов пользовательского интерфейса, изменить их свойства или вызвать дополнительные функции. В R2020a и более ранних релизах, распространенный способ сохранить ваш код индивидуальной настройки и совместно использовать его с другими состоит в том, чтобы записать скрипт или функцию.

Начиная в R2020b, вместо скрипта или функции, можно создать реализацию класса для компонентов пользовательского интерфейса путем определения подкласса ComponentContainer базовый класс. Создание класса обладает этими преимуществами:

  • Легкая индивидуальная настройка — Когда пользователи хотят настроить аспект вашего компонента пользовательского интерфейса, они могут установить свойство вместо того, чтобы иметь необходимость изменить и повторно выполнить ваш код. Пользователи могут изменить свойства в командной строке или смотреть их в Property Inspector.

  • Инкапсуляция — Организация вашего кода таким образом позволяет вам скрывать детали реализации от своих пользователей. Вы реализуете методы, которые выполняют вычисления и управляют базовыми графическими объектами.

Структура класса компонента пользовательского интерфейса

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

В первой линии класса компонента пользовательского интерфейса задайте matlab.ui.componentcontainer.ComponentContainer класс как суперкласс. Например, первая линия класса под названием ColorSelector выглядит так:

classdef ColorSelector < matlab.ui.componentcontainer.ComponentContainer

В дополнение к определению суперкласса включайте следующие компоненты в свое определение класса. Некоторые компоненты требуются, в то время как другие компоненты или рекомендуются или дополнительные.

КомпонентОписание

Блок общественной собственности
(рекомендуемый)

Этот блок задает все свойства, к которым у пользователей есть доступ. Вместе, эти свойства составляют пользовательский интерфейс вашего компонента пользовательского интерфейса.

Блок частной собственности
(рекомендуемый)

Этот блок задает базовые графические объекты и другие детали реализации, к которым не могут получить доступ пользователи.

В этом блоке, набор эти значения атрибута:

  • Access = private

  • Transient

  • NonCopyable

Блок Событий
(дополнительный)

Этот блок задает события, которые инициирует этот компонент пользовательского интерфейса.

В этом блоке, набор эти значения атрибута:

  • HasCallbackProperty

  • NotifyAccess = protected

Когда вы устанавливаете HasCallbackProperty атрибут, MATLAB® создает общественную собственность для каждого события в блоке. Общественная собственность хранит обеспеченный пользователями коллбэк, чтобы выполниться, когда событие стреляет.

setup метод
(необходимый)

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

Задайте этот метод в защищенном блоке так, чтобы только ваш класс мог выполнить его.

update метод
(необходимый)

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

  • Во время следующего drawnow выполнение после пользователя изменяет одни или несколько значений свойств

  • Когда аспект графических изменений среды пользователя (таких как размер)

Задайте этот метод в том же защищенном блоке как setup метод.

Метод конструктора

Вы не должны писать метод конструктора для своего класса, потому что он наследовался один ComponentContainer базовый класс. Наследованный конструктор принимает дополнительные входные параметры: родительский контейнер и любое количество аргументов пары "имя-значение" для установки свойств на компоненте пользовательского интерфейса. Например, если вы задаете класс под названием ColorSelector это имеет публичные свойства Value и ValueChangedFcn, можно создать экземпляр класса с помощью этого кода:

f = uifigure; 
c = ColorSelector(f,'Value',[1 1 0],'ValueChangedFcn',@(o,e)disp('Changed'))

Если вы хотите предоставить конструктору, который имеет различный синтаксис или различное поведение, можно задать пользовательский метод конструктора. Для примера пользовательского конструктора смотрите Конструкторов Записи для Классов Графика.

Блоки публичных и частных свойств

Разделите свои свойства класса по крайней мере между двумя блоками:

  • Общедоступный блок для хранения компонентов стоящего с пользователем интерфейса

  • Частный блок для хранения деталей реализации, которые вы хотите скрыть

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

Свойства, которые входят в частный блок, хранят базовые графические объекты, которые составляют ваш компонент пользовательского интерфейса, в дополнение к любым расчетным значениям, которые вы хотите сохранить. В конечном счете ваш класс будет использовать данные в публичных свойствах, чтобы сконфигурировать основные объекты. Установите Transient и NonCopyable атрибуты для частного блока, чтобы не хранить избыточную информацию, если пользователь копирует или сохраняет экземпляр компонента пользовательского интерфейса.

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

properties
   Value {validateattributes(Value, ...
        {'double'},{'<=',1,'>=',0,'size',[1 3]})} = [1 0 0];   
end

properties(Access = private,Transient,NonCopyable)
   Grid matlab.ui.container.GridLayout 
   Button matlab.ui.control.Button 
   EditField matlab.ui.control.EditField
end   

Блок события

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

Создайте общественную собственность для каждого события в блоке путем определения HasCallbackProperty атрибут. Общественная собственность хранит обеспеченный пользователями коллбэк, чтобы выполниться, когда событие стреляет. Имя общественной собственности является именем события, добавленного с буквами Fcn. Например, компонент пользовательского интерфейса, который позволяет пользователю выбирать значение цвета, может задать событие ValueChanged, который генерирует соответствующую общественную собственность ValueChangedFcn. Используйте notify метод, чтобы запустить событие и выполнить коллбэк в свойстве.

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

events (HasCallbackProperty, NotifyAccess = protected) 
   ValueChanged 
end 
Когда пользователь выберет значение цвета, вызовите notify метод, чтобы запустить ValueChanged событие и выполняет коллбэк в ValueChangedFcn свойство.
function getColorFromUser(obj)
    c = uisetcolor(obj.Value);
    if (isscalar(c) && (c == 0))
        return;
    end
    
    % Update the Value property
    oldValue = obj.Value;
    obj.Value = c;

    % Execute user callbacks and listeners
    notify(obj,'ValueChanged');
end
Когда пользователь создает экземпляр компонента пользовательского интерфейса, они могут задать коллбэк, чтобы выполниться когда изменения значения цвета с помощью сгенерированной общественной собственности.
f = uifigure; 
c = ColorSelector(f,'ValueChangedFcn',@(o,e)disp('Changed'))
Для получения дополнительной информации об определении коллбэков к свойствам, смотрите Запись обратных вызово для приложений, созданных программно.

Метод Setup

Задайте setup метод для вашего класса. setup метод выполняется однажды, когда MATLAB создает объект компонента пользовательского интерфейса. Любые значения свойств, переданные как аргументы пары "имя-значение" методу конструктора, присвоены после того, как этот метод выполняется.

Используйте setup метод к:

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

  • Храните объекты как частные свойства на объекте компонента.

  • Разметьте и сконфигурируйте объекты.

  • Обеспечьте электричеством объекты сделать что-то полезное в компоненте.

Гарантировать, что только ваш класс компонента пользовательского интерфейса может выполнить setup метод, задайте его в защищенном блоке.

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

Например, рассмотрите компонент пользовательского интерфейса, который имеет эти свойства:

  • Одна общественная собственность под названием Value

  • Три частных свойств под названием Grid, Button, и EditField

setup вызовы метода uigridlayout, uieditfield, и uibutton функции, чтобы создать базовый графический объект для каждой частной собственности, задавая экземпляр компонента пользовательского интерфейса (obj) как целевой родительский элемент.

function setup(obj) 
    % Create grid layout to manage building blocks 
    obj.Grid = uigridlayout(obj,[1 2],'ColumnWidth',{'1x',22},... 
       'RowHeight',{'fit'},'ColumnSpacing',2,'Padding',2); 

    % Create edit field for entering color value
    obj.EditField = uieditfield(obj.Grid,'Editable',false,... 
       'HorizontalAlignment','center'); 

    % Create button to confirm color change
    obj.Button = uibutton(obj.Grid,'Text',char(9998), ... 
       'ButtonPushedFcn',@(o,e) obj.getColorFromUser()); 
end 

Метод Update

Задайте update метод для вашего класса. Этот метод выполняется, когда ваш объект компонента пользовательского интерфейса должен изменить свой внешний вид в ответ на изменение в значениях.

Используйте update метод, чтобы реконфигурировать базовые графические объекты в вашем пользовательском интерфейсе, компонентно-ориентированном на новых значениях публичных свойств. Как правило, этот метод не определяет который из измененных публичных свойств. Это реконфигурировало все аспекты базовых графических объектов, которые зависят от публичных свойств.

Например, рассмотрите компонент пользовательского интерфейса, который имеет эти свойства:

  • Одна общественная собственность под названием Value

  • Три частных свойств под названием Grid, Button, и EditField

update метод обновляет BackgroundColor из EditField и Button объекты с цветом, сохраненным в Value. update метод также обновляет EditField объект с числовым представлением цвета. Таким образом, однако Value изменяется, изменение становится одинаково видимым везде.

function update(obj)      
    % Update edit field and button colors 
    set([obj.EditField obj.Button],'BackgroundColor',obj.Value, ... 
       'FontColor',obj.getContrastingColor(obj.Value));  

    % Update edit field display text 
    obj.EditField.Value = num2str(obj.Value,'%0.2g ');            

end

Может быть задержка между изменением значений свойств и наблюдением результатов тех изменений. update метод запускается впервые после setup запуски метода и затем это запускается каждый раз drawnow выполняется. drawnow функция автоматически периодически выполняется, на основе состояния графической среды в сеансе работы с MATLAB пользователя. Это периодическое выполнение может привести к потенциальной задержке.

Пример: выбор цвета компонент пользовательского интерфейса

В этом примере показано, как создать компонент пользовательского интерфейса для выбора цвета, с помощью кода, обсужденного в других разделах этой страницы. Создайте файл с именем определения класса ColorSelectorComponent.m в папке, которая находится на пути MATLAB. Задайте класс путем выполнения этих шагов.

ШагРеализация

Выведите из ComponentContainer базовый класс.

classdef ColorSelector < matlab.ui.componentcontainer.ComponentContainer

Задайте публичные свойства.

    properties
        Value {validateattributes(Value, ...
            {'double'},{'<=',1,'>=',0,'size',[1 3]})} = [1 0 0]; 
    end

Задайте общественные мероприятия.

    events (HasCallbackProperty, NotifyAccess = protected) 
        ValueChanged % ValueChangedFcn will be the generated callback property 
    end

Задайте частные свойства.

    properties (Access = private, Transient, NonCopyable) 
        Grid matlab.ui.container.GridLayout 
        Button matlab.ui.control.Button 
        EditField matlab.ui.control.EditField 
    end

Реализуйте setup метод. В этом случае вызовите uigridlayout, uieditfield, и uibutton функции, чтобы создать GridLayout, EditField, и Button объекты. Храните те объекты в соответствующих частных свойствах.

Задайте getColorFromUser метод как ButtonPushedFcn коллбэк, который называется, когда кнопка нажимается.

    methods (Access = protected) 
        function setup(obj) 
            % Grid layout to manage building blocks 
            obj.Grid = uigridlayout(obj,[1,2],'ColumnWidth',{'1x',22}, ... 
                'RowHeight',{'fit'},'ColumnSpacing',2,'Padding',2);              

            % Edit field for value display and button to launch uisetcolor 
            obj.EditField = uieditfield(obj.Grid,'Editable',false, ... 
                'HorizontalAlignment','center'); 
            obj.Button = uibutton(obj.Grid,'Text',char(9998), ... 
                'ButtonPushedFcn',@(o,e) obj.getColorFromUser()); 

        end 

Реализуйте update метод. В этом случае обновите цвет фона основных объектов и текста в поле редактирования, чтобы показать значение цвета.

        function update(obj)     
            % Update edit field and button colors 
            set([obj.EditField obj.Button],'BackgroundColor',obj.Value, ... 
                'FontColor',obj.getContrastingColor(obj.Value));  

            % Update the display text 
            obj.EditField.Value = num2str(obj.Value,'%0.2g ');            
        end 
    end 

Соедините коллбэки, и другой соединяет закрытые методы использования.

Когда getColorFromUser метод инициирован нажатием кнопки, вызовите uisetcolor функционируйте, чтобы открыть палитру цветов и затем вызвать notify функция, чтобы выполнить пользовательский коллбэк и функции прослушивателя.

Когда getContrastingColor метод вызван update метод, вычислите, или черный или белый текст более читаем на новом цвете фона.

    methods (Access = private) 
        function getColorFromUser(obj) 
            c = uisetcolor(obj.Value); 
            if (isscalar(c) && (c == 0)) 
                return; 
            end 
            
            % Update the Value property 
            obj.Value = c;              

            % Execute user callbacks and listeners
            notify(obj,'ValueChanged'); 
        end         
        function contrastColor = getContrastingColor(~,color) 
            % Calculate opposite color 
            c = color * 255; 
            contrastColor = [1 1 1]; 
            if (c(1)*.299 + c(2)*.587 + c(3)*.114) > 186 
                contrastColor = [0 0 0]; 
            end 
        end 
    end 
end

Затем создайте экземпляр компонента пользовательского интерфейса путем вызова неявного метода конструктора с несколькими публичных свойств. Задайте коллбэк, чтобы отобразить слова Color changed когда значение цвета изменяется.

h = ColorSelector('Value', [1 1 0]); 
h.ValueChangedFcn = @(o,e) disp('Color changed');

Instance of the color selector UI component displaying the color yellow.

Нажмите кнопку и выберите цвет с помощью палитры цветов. Внешний вид изменений компонента и MATLAB отображают слова Color changed в Командном окне.

Instance of the color selector UI component displaying the color blue.

Смотрите также

Классы

Функции

Похожие темы