How to generate new data in the existing Tabs using app design from MATLAB.

I have designed an app where i can generate 'N' number of tabs for the given input value. I have to give new command in the generated tabs, such that the new data should include in the tabs. Example: I designed an app, if i give Number of classes as 3, I'm able to generate 3 tabs and in the generated app i have class 1 strength : 78; Now I need to add enter button in the every tab and after clicking the enter button, the Tab should give Number of boys: ' enter numeric value'; Number of girls : 'enter numeric value'.

Answer 1

[Ishu]

Hi Vaseema,

I understand that you want to create a "Enter" button in every tab using which you can display "Number of boys" and "Number of girls" in a class.

To do this dynamically you can add the callback functions(startupFcn) and in the callback function you can create a "Submit" button which will create class tabs in the "uitabgroup" and then in each tab you can add a "Enter" button and clicking on this "Enter" button you can enter "Number of boys" and "Number of girls" and that numbers can be displayed in each class tab.

    properties (Access = public)
        NumberOfClassesEditField  matlab.ui.control.NumericEditField
        SubmitButton      matlab.ui.control.Button
        TabGroup          matlab.ui.container.TabGroup

    end
    
    methods (Access = private)
        

        % Button pushed function: SubmitButton
        function SubmitButtonPushed(app, event)
            numberOfClasses = app.NumberOfClassesEditField.Value;
            delete(app.TabGroup.Children);
            
            for i = 1:numberOfClasses
                tab = uitab(app.TabGroup, 'Title', ['Class ' num2str(i)]);
                addComponentsToTab(app, tab, i);
            end
        end

        % Helper function to add components to each tab
        function addComponentsToTab(app, tab, classNumber)
            enterButton = uibutton(tab, 'push');
            enterButton.Position = [20, 150, 100, 22];
            enterButton.Text = 'Enter';
            enterButton.ButtonPushedFcn = @(btn,event) enterButtonPushed(app, classNumber, tab);
            
            boysLabel = uilabel(tab);
            boysLabel.Position = [20, 120, 280, 22];
            boysLabel.Text = 'Number of boys: ';
            boysLabel.Tag = ['BoysLabel', num2str(classNumber)]; % Tag to identify the label
            
            % Label for displaying the number of girls
            girlsLabel = uilabel(tab);
            girlsLabel.Position = [20, 90, 280, 22];
            girlsLabel.Text = 'Number of girls: ';
            girlsLabel.Tag = ['GirlsLabel', num2str(classNumber)];
        end

        % 'Enter' Button callback
        function enterButtonPushed(app, classNumber, tab)
            prompt = {'Enter number of boys:', 'Enter number of girls:'};
            title = ['Class ' num2str(classNumber) ' Info'];
            dims = [1 35];
            definput = {'0','0'};
            answer = inputdlg(prompt, title, dims, definput);
            
            if ~isempty(answer)
                boysLabel = findobj(tab, 'Tag', ['BoysLabel', num2str(classNumber)]);
                girlsLabel = findobj(tab, 'Tag', ['GirlsLabel', num2str(classNumber)]);
                
                boysLabel.Text = ['Number of boys: ', answer{1}];
                girlsLabel.Text = ['Number of girls: ', answer{2}];
                % Update UI or variables as needed
            end
        end
    end
    

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)
            app.NumberOfClassesEditField = uieditfield(app.UIFigure, 'numeric');
            app.NumberOfClassesEditField.Position = [100 400 100 22];

            app.SubmitButton = uibutton(app.UIFigure, 'push');
            app.SubmitButton.Position = [230 400 100 22];
            app.SubmitButton.Text = 'Submit';
            app.SubmitButton.ButtonPushedFcn = createCallbackFcn(app, @SubmitButtonPushed, true);

            app.TabGroup = uitabgroup(app.UIFigure);
            app.TabGroup.Position = [100 120 320 230]; % Adjust size as needed
        end
    end
        
          

For more information on "App Designer" you can refer below documentation:

https://www.mathworks.com/help/matlab/app-designer.html

Hope it helps.

[Vaibhavi Pallavaneni]

Thank u very much Ishu.

[Vaibhavi Pallavaneni]

Hi Ishu,

I run the code, it's running without any errors. Thanks for the code