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

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

Поскольку файл класса компонента пользовательского интерфейса задает свойства, которые могут установить пользователи, но исходный файл 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 класс в фигуре пользовательского интерфейса.

Задайте ColorFontColor , и ButtonPushedFcn свойства коллбэка как аргументы name-value.

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

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