Документация

Необходимые компоненты пользовательского интерфейса

Чтобы разрешить интерактивное использование пользовательского компонента в App Designer, существует ряд требований, которые должен удовлетворять класс пользовательского компонента.

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

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

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

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

Создание папки с именем MyComponents в конкретном месте, например, C:\. Копировать ColorSelector определение класса и сохраните его с именем ColorSelector.m в папке C:\MyComponents.

classdef ColorSelector < matlab.ui.componentcontainer.ComponentContainer    
    % UI component to select colors

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

    % Events
    events (HasCallbackProperty, NotifyAccess = protected) 
        ValueChanged % ValueChangedFcn will be the generated callback property 
    end
    
    % Private properties
    properties (Access = private, Transient, NonCopyable) 
        Grid matlab.ui.container.GridLayout 
        Button matlab.ui.control.Button 
        EditField matlab.ui.control.EditField 
    end

    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 
        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

    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

Настройка метаданных App Designer

Настройте пользовательский компонент пользовательского интерфейса для использования в App Designer с помощью appdesigner.customcomponent.configureMetadata функция.

Вызовите функцию, передав ей путь к файлу класса компонентов. Функция открывает диалоговое окно «Метаданные пользовательского компонента App Designer». В этом диалоговом окне можно указать метаданные компонента. App Designer использует эти метаданные для отображения компонента в библиотеке компонентов.

appdesigner.customcomponent.configureMetadata('C:\MyComponents\ColorSelector.m');

Диалоговое окно предварительно заполняет все необходимые метаданные из определения класса компонентов. Предварительно заполненные метаданные можно редактировать с помощью формы. Выберите OK для настройки ColorSelector Компонент пользовательского интерфейса.

После нажатия кнопки ОК функция создает папку с именем resources внутри MyComponents папка. Внутри resources , функция создает файл с именем appDesigner.json. Этот файл содержит метаданные, предоставленные в диалоговом окне, а также другие метаданные MATLAB ®, необходимые для обеспечения доступности компонента в App Designer.

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

После настройки пользовательского класса компонентов пользовательского интерфейса с помощью appdesigner.customcomponent.configureMetadata ее можно просмотреть и использовать в App Designer. Чтобы компонент пользовательского интерфейса появился в библиотеке компонентов App Designer, необходимо добавить папку, содержащую файл класса и созданную resources к пути MATLAB.

Например, для использования ColorSelector Компонент пользовательского интерфейса в App Designer, добавьте MyComponents путь к папке MATLAB, следуя инструкциям в разделе Изменение папок в пути поиска. Затем откройте App Designer, введя appdesigner в командной строке MATLAB. Открыв окно, выберите Пустые приложения. ColorSelector Компонент пользовательского интерфейса отображается в нижней части библиотеки компонентов в разделе «Мои компоненты».

Перетащите экземпляр ColorSelector Компонент пользовательского интерфейса на холсте App Designer. Обратите внимание, что в инспекторе свойств отображается список общедоступных свойств Value и ValueChangedFcn обратный вызов, созданный в определении класса компонента пользовательского интерфейса.

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

Реконфигурировать ранее настроенный класс компонентов пользовательского интерфейса в следующих случаях:

Для изменения конфигурации компонента пользовательского интерфейса вызовите appdesigner.customcomponent.configureMetadata путем передачи ему пути к файлу класса компонентов пользовательского интерфейса. Функция открывает диалоговое окно «Метаданные пользовательского компонента App Designer» с предварительно заполненными существующими метаданными.

appdesigner.customcomponent.configureMetadata('C:\MyComponents\ColorSelector.m');

Обновить метаданные, изменив категорию на Color и установка имени автора в MathWorks, затем нажмите кнопку ОК.

Вернитесь в App Designer. Теперь компонент отображается в разделе «Цвет» библиотеки компонентов. Наведите курсор на компонент. Теперь появляется имя автора.

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

Чтобы удалить пользовательский компонент пользовательского интерфейса из App Designer, используйте appdesigner.customcomponent.removeMetadata функция.

Вызовите функцию, передав ей путь к файлу класса компонентов. Функция удаляет метаданные для компонента пользовательского интерфейса из appDesigner.json файл внутри resources и удаляет компонент из библиотеки компонентов App Designer.

appdesigner.customcomponent.removeMetadata('C:\MyComponents\ColorSelector.m');

После удаления метаданных App Designer для пользовательского компонента все приложения App Designer, использующие его, загружаются неправильно. Чтобы продолжить редактирование приложений, использующих компонент пользовательского интерфейса, измените его конфигурацию с помощью appdesigner.customcomponent.configureMetadata функция.

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

После настройки компонента пользовательского интерфейса можно использовать этот компонент совместно с другими пользователями в App Designer. Можно либо предоставить доступ к соответствующим файлам напрямую, либо упаковать компонент в виде панели инструментов. В любом случае необходимо также предоставить общий доступ к созданному resources папка.