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

Включить ответ на обновления свойств

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

В файле класса компонентов пользовательского интерфейса настройте свойства компонента пользовательского интерфейса. Укажите свойства, которые пользователи могут задать, определив их как общие свойства в properties блок. В update метод класса, сохранить значения общедоступных свойств как поля в struct в Data свойства компонента пользовательского интерфейса HTML. Это дает исходному файлу HTML доступ к этим значениям свойств.

В исходном файле HTML используйте значения свойств для обновления внешнего вида компонента пользовательского интерфейса HTML. Для этого в setup функция внутри <script> тег, доступ к значениям полей в Data и используйте их для изменения свойств стиля элементов HTML.

Включить ответ на взаимодействие с пользователем

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

В файле класса компонента пользовательского интерфейса сначала создайте свойства обратного вызова компонента пользовательского интерфейса. Создание events блок с HasCallbackProperty. При определении события в этом блоке MATLAB создает связанное свойство общего обратного вызова для компонента пользовательского интерфейса. Например, при создании события с именем ButtonPushed, это автоматически создаст общедоступное свойство для вашего класса с именем ButtonPushedFcn.

Для выполнения определяемой пользователем функции обратного вызова, связанной с взаимодействием пользователя, код должен сначала распознать, когда произошло взаимодействие пользователя. В файле класса компонентов пользовательского интерфейса предоставьте компоненту пользовательского интерфейса HTML способ для этого. В setup метод, установите Data свойства компонента пользовательского интерфейса HTML для struct с полем для хранения информации о том, произошло ли взаимодействие. Поскольку файл класса и исходный файл HTML совместно используют это свойство и его значение, исходный файл HTML может обновить значение для передачи состояния взаимодействия пользователя в класс компонентов пользовательского интерфейса. Для этого в исходном файле HTML в setup функция внутри <script> , создайте прослушиватель событий, который прослушивает взаимодействие с пользователем. Когда прослушиватель обнаружит взаимодействие, обновите Data свойства компонента пользовательского интерфейса HTML.

После того как файл класса компонента пользовательского интерфейса получит информацию о том, что произошло взаимодействие пользователя, он должен запустить событие, связанное с взаимодействием. Создайте метод класса для этого. В методе класса сначала вызовите встроенный notify для запуска определенного события. При этом выполняется пользовательская функция обратного вызова, связанная с событием. Затем установите Data свойство компонента HTML ожидает другого взаимодействия. В setup метода файла класса компонента пользовательского интерфейса, установите DataChangedFcn свойства HTML-компонента для определенного метода класса. Компонент пользовательского интерфейса HTML выполняет этот метод автоматически всякий раз, когда Data изменения свойств. Поэтому после обновления исходного файла HTML Data , чтобы сообщить, что произошло взаимодействие, этот метод выполняет соответствующий обратный вызов.

RoundButton.m Определение класса

classdef RoundButton < matlab.ui.componentcontainer.ComponentContainer

    properties
        Color {mustBeMember(Color, ...
            {'white','blue','red','green','yellow'})} = 'white'
        FontColor {mustBeMember(FontColor, ...
            {'black','white'})} = 'black'
        Text (1,:) char = 'Button';
    end

    properties (Access = private, Transient, NonCopyable)
        HTMLComponent matlab.ui.control.HTML
    end

    events (HasCallbackProperty, NotifyAccess = protected)
        % Generate a ButtonPushedFcn callback property
        ButtonPushed
    end

    methods (Access=protected)

        function setup(obj)
            % Set the initial position of this component
            obj.Position = [100 100 80 40];

            % Create the HTML component
            obj.HTMLComponent = uihtml(obj);
            obj.HTMLComponent.Position = [1 1 obj.Position(3:4)];
            obj.HTMLComponent.HTMLSource = fullfile(pwd,'RoundButton.html');
            obj.HTMLComponent.Data = struct('Clicked',false);
            obj.HTMLComponent.DataChangedFcn = @(s,e)notifyClick(obj);
        end

        function update(obj)
            % Update the HTML component data
            obj.HTMLComponent.Data.Color = obj.Color;
            obj.HTMLComponent.Data.FontColor = obj.FontColor;
            obj.HTMLComponent.Data.Text = obj.Text;
            obj.HTMLComponent.Position = [1 1 obj.Position(3:4)];
        end

        function notifyClick(obj)
            if obj.HTMLComponent.Data.Clicked
                obj.HTMLComponent.Data.Clicked = false;
                drawnow
                notify(obj,'ButtonPushed');
            end
        end

    end
end

RoundButton.html Определение источника

<!DOCTYPE html>
<html>
<head>

<style>
html, body {
  height: 100%;
  text-align: center;
}

button {
  width: 100%;
  height: 100%;
  border-radius: 2em;
  font-size: 1em;
  cursor: pointer;
  border: none;
}

button:focus {
  outline: 0;
}
</style>

  <script type="text/javascript">
    function setup(htmlComponent) {

    htmlComponent.addEventListener("DataChanged", function(event) {
      buttonElement = document.getElementById("roundButton");
      buttonElement.style.backgroundColor = htmlComponent.Data.Color;
      buttonElement.innerHTML = htmlComponent.Data.Text;
      buttonElement.style.color = htmlComponent.Data.FontColor;
    });

    button = document.getElementById("roundButton");  
    button.addEventListener("click", function(event) {
      htmlComponent.Data.Clicked = true;
      htmlComponent.Data = htmlComponent.Data;
    });

    }
  </script>
</head>

  <body>
    <button id="roundButton"></button><br/> 
  </body>

</html>

Создание экземпляра RoundButton

После создания и сохранения RoundButton.m и RoundButton.html, создайте экземпляр RoundButton класс в рисунке пользовательского интерфейса.

Укажите Color, FontColor, и ButtonPushedFcn свойства обратного вызова в качестве аргументов «имя-значение».

fig = uifigure('Position',[200 200 300 300]);
btn = RoundButton(fig, ...
    'Color','red', ...
    'FontColor','white', ...
    'ButtonPushedFcn',@(o,e)disp('Clicked'));

Нажмите кнопку. Отображается окно команд Clicked.