MATLAB APPbase,matlab – 如何以比官方记录更多的方式自定义App Designer数据？

为了成功完成这项任务,我们需要以下几点：

>找到HTML / CSS所在的位置(以便我们可以操作它们).

>找到我们要编辑的DOM的哪个元素.

>找出我们需要做出的改变.

>找到一种使用MATLAB操作元素的方法.

一步一步地工作：

1.找到图形的HTML / CSS存储/定位的位置

win = struct(struct(struct(app).UIFigure).Controller).Container.CEF;

URL = win.URL; % Needed only for testing in browser

2.找到我们需要编辑的DOM的哪个元素

data_tag = char(struct(app.ListBox).Controller.ProxyView.PeerNode.getId);

使用浏览器验证：

3.找出我们需要做出的改变

由于我们想要操纵文本对齐,我们会搜索一些相关的关键字并找到CSS text-align property.然后我们手动尝试查看它是否真的有效：

4.找到一种使用MATLAB操作元素的方法

win.executeJS(['dojo.style(dojo.query("[data-tag^=''' data_tag ''']")[0],"textAlign","center")']);

这个答案的完整代码：

classdef domDemo < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure % UI Figure

LabelListBox matlab.ui.control.Label % List Box

ListBox matlab.ui.control.ListBox % Item 1, Item 2, Item 3, It...

end

methods (Access = private)

% Code that executes after component creation

function startupFcn(app)

% Customizations (aka "MAGIC GOES HERE"):

drawnow; rez = [];

warning off MATLAB:HandleGraphics:ObsoletedProperty:JavaFrame

warning off MATLAB:structOnObject

while ~strcmp(rez,'"center"')

try

% 1. Get a handle to the webwindow:

win = struct(struct(struct(app).UIFigure).Controller).Container.CEF;

% 2. Find which element of the DOM we want to edit (as before):

data_tag = char(struct(app.ListBox).Controller.ProxyView.PeerNode.getId);

% 3. Manipulate the DOM via a JS command

rez = win.executeJS(['dojo.style(dojo.query("[data-tag^=''' ...

data_tag ''']")[0],"textAlign","center")']);

catch

pause(1); % Give the figure (webpage) some more time to load

end

end

end

end

% App initialization and construction

methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create UIFigure

app.UIFigure = uifigure;

app.UIFigure.Position = [100 100 260 147];

app.UIFigure.Name = 'UI Figure';

setAutoResize(app, app.UIFigure, true)

% Create LabelListBox

app.LabelListBox = uilabel(app.UIFigure);

app.LabelListBox.HorizontalAlignment = 'right';

app.LabelListBox.Position = [50 93 44 15];

app.LabelListBox.Text = 'List Box';

% Create ListBox

app.ListBox = uilistbox(app.UIFigure);

app.ListBox.Position = [109 36 100 74];

end

end

methods (Access = public)

% Construct app

function app = domDemo()

% Create and configure components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.UIFigure)

% Execute the startup function

runStartupFcn(app, @startupFcn)

if nargout == 0

clear app

end

end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

end

end