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

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

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

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

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

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

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

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

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

После того, как файл класса компонента пользовательского интерфейса получит информацию о том, что произошло взаимодействие с пользователем, он должен затем инициировать событие, связанное с взаимодействием. Создайте метод класса для этого. В методе класса сначала вызовите встроенный notify метод, чтобы вызвать событие, которое вы определили. Это выполняет пользовательскую функцию обратного вызова, связанную с событием. Затем установите Data свойство компонента HTML, чтобы дождаться другого взаимодействия. В setup метод файла класса UI компонента, установите 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.