How do I convert a 2-panel app into a 3-panel app?

The title kind of says it all.

I have made a 2-panel app with App Developer, but I want a 3rd panel. None of the code controlling the panels is editable (side note: why?), and trying to drag a new panel onto the app just leads to disaster.

How do I do this?

[Sahithi Kanumarlapudi]

Hi,

You could add the third panel to the app by usual drag and drop of componets to the design view.

Could you provide more information on what you mean by 'code controlling the panels' ?

I might be able to provide more info if you could be more specific on what your two- panel app consisted of.

[Gregory Lewin]

When I try to add a third panel, it just adds it as a floating panel to an existing panel. There is no way to add it as another panel to the right of the two existing panels.

Answer 1

[jingye wang]

https://www.mathworks.com/matlabcentral/answers/455598-in-appdesigner-is-there-any-way-to-control-which-panels-change-size-under-auto-reflow?s_tid=answers_rc1-1_p1_Topic

[Gregory Lewin]

This is for two panels. I want to add a third.

[jingye wang]

refer to https://www.mathworks.com/matlabcentral/answers/455598-in-appdesigner-is-there-any-way-to-control-which-panels-change-size-under-auto-reflow?s_tid=answers_rc1-1_p1_Topic

  function myUpdateAppLayout(app, event)
            currentFigureWidth = app.UIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 3x1 grid
                app.GridLayout.RowHeight = {678, 678, 678};
                app.GridLayout.ColumnWidth = {'1x'};
                app.CenterPanel.Layout.Row = 1;
                app.CenterPanel.Layout.Column = 1;
                app.LeftPanel.Layout.Row = 2;
                app.LeftPanel.Layout.Column = 1;
                app.RightPanel.Layout.Row = 3;
                app.RightPanel.Layout.Column = 1;
            elseif (currentFigureWidth > app.onePanelWidth && currentFigureWidth <= app.twoPanelWidth)
                % Change to a 2x2 grid
                app.GridLayout.RowHeight = {678, 678};
                app.GridLayout.ColumnWidth = {'1x', '1x'};
                app.CenterPanel.Layout.Row = 1;
                app.CenterPanel.Layout.Column = [1,2];
                app.LeftPanel.Layout.Row = 2;
                app.LeftPanel.Layout.Column = 1;
                app.RightPanel.Layout.Row = 2;
                app.RightPanel.Layout.Column = 2;
            else
                % Change to a 1x3 grid
                app.GridLayout.RowHeight = {'1x'};
                app.GridLayout.ColumnWidth = {445, 445, '1x'};
                app.LeftPanel.Layout.Row = 1;
                app.LeftPanel.Layout.Column = 1;
                app.CenterPanel.Layout.Row = 1;
                app.CenterPanel.Layout.Column = 2;
                app.RightPanel.Layout.Row = 1;
                app.RightPanel.Layout.Column = 3;
            end
         end

[Bowen Shi]

Hi,

Have you find a way to convert the app layout from 2 panel to 3 panel? I just build a new 3-Panel App and copy all the component and code into the new app. I don't think this is a proper way though :(