4.在 App 設計工具中創建多窗口 App
多窗口 App 由兩個或多個共享數據的 App 構成。App 之間共享數據的方式取決於設計。
一種常見的設計包含兩個 App：一個主 App 和一個對話框。通常，主 App 中有一個按鈕用於打開該對話框。當用戶關閉對話框時，對話框將用戶的選擇發送給主窗口，主窗口執行計算並更新 UI。
這兩個 App 在不同的時間通過不同的方式共享信息：
-
當對話框打開時，主 App 將使用輸入參數調用對話框 App，將信息傳遞給對話框。
-
當用戶點擊對話框中的
要創建多窗口的 App，必須創建兩個單獨的 App（主 App 和對話框 App）。然后執行以下高級任務，每個任務都包含多個步驟。
-
將信息發送給對話框 - 在接受輸入參數的對話框 App 中編寫一個
StartupFcn回調。必須有一個輸入參數是主 App 對象。然后在主 App 中使用輸入參數調用對話框 App。 -
將信息返回給主 App - 在主 App 中編寫一個公共函數，以根據用戶在對話框中的選擇來更新 UI。由於它是公共函數，因此對話框可以調用它並將值傳遞給它。
-
關閉窗口時的管理任務 - 在兩個 App 中各編寫一個
CloseRequest回調，在窗口關閉時執行維護任務。
4.2 實例先行
此 App 由一個主繪圖 App 構成，主繪圖 App 中有一個按鈕，用於在對話框中選擇選項。選項按鈕使用輸入參數調用對話框 App。在對話框中，確定按鈕的回調通過調用主 App 中的公共函數，將用戶的選擇發送回主 App。
將信息發送給對話框
執行以下步驟，將值從主 App 傳遞給對話框 App。
設計內容：
新建一個主app，按照下圖安放控件
代碼：
classdef MainAppExample < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes matlab.ui.control.UIAxes
OptionsButton matlab.ui.control.Button
end
properties (Access = private)
DialogApp % Dialog box app
CurrentSize = 35; % Surface sample size
CurrentColormap = 'Parula'; % Colormap
end
methods (Access = public)
function updateplot(app, sz, c)
% Store inputs as properties
app.CurrentSize = sz;
app.CurrentColormap = c;
% Update plot
Z = peaks(sz);
surf(app.UIAxes,Z);
colormap(app.UIAxes,c);
% Re-enable the Plot Options button
app.OptionsButton.Enable = 'on';
end
end
% Callbacks that handle component events
methods (Access = private)
% Code that executes after component creation
function startupFcn(app)
% Call updateplot to display an initial plot
updateplot(app, app.CurrentSize, app.CurrentColormap)
end
% Button pushed function: OptionsButton
function OptionsButtonPushed(app, event)
% Disable Plot Options button while dialog is open
app.OptionsButton.Enable = 'off';
% Open the options dialog and pass inputs
app.DialogApp = DialogAppExample(app, app.CurrentSize, app.CurrentColormap);
end
% Close request function: UIFigure
function MainAppCloseRequest(app, event)
% Delete both apps
delete(app.DialogApp)
delete(app)
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [100 100 449 370];
app.UIFigure.Name = 'Display Plot';
app.UIFigure.CloseRequestFcn = createCallbackFcn(app, @MainAppCloseRequest, true);
% Create UIAxes
app.UIAxes = uiaxes(app.UIFigure);
app.UIAxes.Position = [68 68 341 267];
% Create OptionsButton
app.OptionsButton = uibutton(app.UIFigure, 'push');
app.OptionsButton.ButtonPushedFcn = createCallbackFcn(app, @OptionsButtonPushed, true);
app.OptionsButton.Position = [189 23 100 22];
app.OptionsButton.Text = 'Options';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = MainAppExample
% Create UIFigure and 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
再建第二個對話框app，控件安放如下圖
代碼：
classdef DialogAppExample < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
SampleSizeEditFieldLabel matlab.ui.control.Label
EditField matlab.ui.control.NumericEditField
ColormapDropDownLabel matlab.ui.control.Label
DropDown matlab.ui.control.DropDown
Button matlab.ui.control.Button
end
properties (Access = private)
CallingApp % Main app object
end
% Callbacks that handle component events
methods (Access = private)
% Code that executes after component creation
function StartupFcn(app, mainapp, sz, c)
% Store main app in property for CloseRequestFcn to use
app.CallingApp = mainapp;
% Update UI with input values
app.EditField.Value = sz;
app.DropDown.Value = c;
end
% Button pushed function: Button
function ButtonPushed(app, event)
% Call main app's public function
updateplot(app.CallingApp, app.EditField.Value, app.DropDown.Value);
% Delete the dialog box
delete(app)
end
% Close request function: UIFigure
function DialogAppCloseRequest(app, event)
% Enable the Plot Opions button in main app
app.CallingApp.OptionsButton.Enable = 'on';
% Delete the dialog box
delete(app)
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [600 100 392 248];
app.UIFigure.Name = 'Options';
app.UIFigure.CloseRequestFcn = createCallbackFcn(app, @DialogAppCloseRequest, true);
% Create SampleSizeEditFieldLabel
app.SampleSizeEditFieldLabel = uilabel(app.UIFigure);
app.SampleSizeEditFieldLabel.HorizontalAlignment = 'right';
app.SampleSizeEditFieldLabel.VerticalAlignment = 'top';
app.SampleSizeEditFieldLabel.Position = [102 160 74 15];
app.SampleSizeEditFieldLabel.Text = 'Sample Size';
% Create EditField
app.EditField = uieditfield(app.UIFigure, 'numeric');
app.EditField.Limits = [2 1000];
app.EditField.Position = [191 156 100 22];
app.EditField.Value = 35;
% Create ColormapDropDownLabel
app.ColormapDropDownLabel = uilabel(app.UIFigure);
app.ColormapDropDownLabel.HorizontalAlignment = 'right';
app.ColormapDropDownLabel.VerticalAlignment = 'top';
app.ColormapDropDownLabel.Position = [117 106 59 15];
app.ColormapDropDownLabel.Text = 'Colormap';
% Create DropDown
app.DropDown = uidropdown(app.UIFigure);
app.DropDown.Items = {'Parula', 'Jet', 'Winter', 'Cool'};
app.DropDown.Position = [191 102 100 22];
app.DropDown.Value = 'Parula';
% Create Button
app.Button = uibutton(app.UIFigure, 'push');
app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
app.Button.Position = [116 43 174 22];
app.Button.Text = 'OK';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = DialogAppExample(varargin)
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
% Execute the startup function
runStartupFcn(app, @(app)StartupFcn(app, varargin{:}))
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
4.3 重點內容
4.3.1 將信息發送給對話框
執行以下步驟，將值從主 App 傳遞給對話框 App
（1）在對話框 App 中，為 StartupFcn 回調定義輸入參數，然后將代碼添加到回調中。
打開對話框 App 的
將代碼添加到 StartupFcn 回調中，以存儲 mainapp 的值。
function StartupFcn(app,mainapp,sz,c)
% Store main app object
app.CallingApp = mainapp;
% Process sz and c inputs
...
end
2.從主 App 的回調中調用對話框 App。打開主 App 的代碼視圖，然后為
function OptionsButtonPushed(app,event)
% Disable Plot Options button while dialog is open
app.OptionsButton.Enable = 'off';
% Get szvalue and cvalue
% ....
% Call dialog box with input values
app.DialogApp = DialogAppExample(app,szvalue,cvalue);
end
3.在主 App 中定義一個屬性，以存儲對話框 App。在主 App 保持打開的情況下，創建一個名為 DialogApp 的私有屬性。在編輯器選項卡上選擇
properties (Access = private)
DialogApp % Dialog box app
end
4.3.2 將信息返回給主App
執行以下步驟，將用戶的選擇返回給主 App
1.在主 App 中創建一個公共函數，以更新 UI。打開主 App 的代碼視圖，然后在編輯器選項卡上選擇
將默認函數名稱更改為所需的名稱，即你所希望從對話框傳遞給主 App 的每個選項添加輸入參數。app 參數必須是第一個，因此請在此參數后指定其他參數。然后將代碼添加到處理輸入並更新主 App 的函數中。
function updateplot(app,sz,c)
% Process sz and c
...
end
2.在對話框 App 中創建一個屬性，以存儲主 App。打開對話框 App 的
properties (Access = private)
CallingApp % Main app object
end
3.從對話框 App 的回調中調用公共函數。在對話框 App 保持打開的情況下，為
在此回調中，將 CallingApp 屬性和用戶的選擇傳遞給公共函數。然后調用 delete 函數以關閉對話框。
function ButtonPushed(app,event) % Call main app's public function updateplot(app.CallingApp,app.EditField.Value,app.DropDown.Value); % Delete the dialog box delete(app) end
4.3.3 關閉窗口時的管理任務
兩個 App 都必須在用戶關閉它們時執行某些任務。在對話框關閉之前，它必須重新啟用主 App 中的
1.打開對話框 App 的代碼視圖，右鍵點擊組件瀏覽器中的 app.UIFigure 對象，然后選擇
function DialogAppCloseRequest(app,event)
% Enable the Plot Options button in main app
app.CallingApp.OptionsButton.Enable = 'on';
% Delete the dialog box
delete(app)
end
2.打開主 App 的代碼視圖，右鍵點擊組件瀏覽器中的 app.UIFigure 對象，然后選擇
function MainAppCloseRequest(app,event) % Delete both apps delete(app.DialogApp) delete(app) end
Dialog