code imported from app designer in .m reimported in .mlapp

hello i have a problemme, i developped an app in app designer and to use the code in a docment i copied all the app code into the editor to publish it. but do to unfurtunate events i lost the .mlapp file and only have the .m code so i mean it work i still have the app but i dont know if there is a way to input the code into app designer

Answer 1

[Namnendra]

Hello Jorge,

I understand that you have the .m code of your MATLAB app file and you want to regenerate the app using that code.

I'm sorry to hear about the loss of your `.mlapp` file. Unfortunately, the App Designer in MATLAB does not have a built-in feature to directly import or convert `.m` code back into an `.mlapp` file. However, you can manually recreate your app in App Designer using the `.m` code you have.

Here are the steps you can follow to recreate your app in App Designer:

1. Open App Designer

Open MATLAB and launch App Designer by typing the following command in the Command Window:

appdesigner

2. Create a New App

Create a new app by selecting "New" and then "Blank App" or any suitable template that matches your original app.

3. Recreate the UI Components

Manually add the UI components (buttons, sliders, axes, etc.) to the app's design view to match your original app. You can refer to your `.m` code to see the properties and layout of the components.

4. Copy and Paste the Code

Copy the relevant sections of your `.m` code (callbacks, functions, and property definitions) into the corresponding sections in the Code View of App Designer.

5. Adjust Component Names and Properties

Ensure that the names and properties of the UI components in the design view match those referenced in your `.m` code. You may need to adjust the component names and properties in the App Designer to ensure consistency.

6. Test the App

After copying and adjusting the code, run the app to test its functionality. Make any necessary adjustments to ensure that the app works as expected.

Example Steps

Here is a simplified example to illustrate the process:

Original `.m` Code (Simplified):

classdef MyApp < matlab.apps.AppBase
    
    % Properties
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        UIButton        matlab.ui.control.Button
    end
    
    % Callbacks
    methods (Access = private)
        
        % Button pushed function
        function ButtonPushed(app, event)
            disp('Button was pushed');
        end
    end
    
    % App initialization
    methods (Access = private)
        
        % Create UIFigure and components
        function createComponents(app)
            app.UIFigure = uifigure;
            app.UIButton = uibutton(app.UIFigure, 'push');
            app.UIButton.Position = [100, 100, 100, 22];
            app.UIButton.Text = 'Push Me';
            app.UIButton.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
        end
    end
    
    % App start
    methods (Access = public)
        
        % Construct app
        function app = MyApp
            createComponents(app)
        end
    end
end

Steps to Recreate in App Designer

1. Open App Designer and create a new blank app.

2. Add a Button to the UI in the design view.

3. Set the Button Properties:

- Position: `[100, 100, 100, 22]`

- Text: `'Push Me'`

4. Copy and Paste Code:

- Copy the `ButtonPushed` callback function and paste it into the Code View under the button's callback.

- Adjust the callback name if necessary to match the UI component in App Designer.

Resulting Code in App Designer

classdef MyApp < matlab.apps.AppBase
    
    % Properties
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        UIButton        matlab.ui.control.Button
    end
    
    % Callbacks
    methods (Access = private)
        
        % Button pushed function: UIButton
        function ButtonPushed(app, event)
            disp('Button was pushed');
        end
    end
    
    % App initialization
    methods (Access = private)
        
        % Create UIFigure and components
        function startupFcn(app)
            app.UIButton.ButtonPushedFcn = @(src,event)ButtonPushed(app, event);
        end
    end
end

Summary

- Open App Designer and create a new app.

- Manually add UI components to match your original app.

- Copy and paste the relevant code sections into the App Designer.

- Adjust component names and properties as needed.

- Test the app and make any necessary adjustments.

By following these steps, you should be able to recreate your app in App Designer using the `.m` code you have.

I hope the above steps resolve the issue.

Thank you.

Answer 2

[Ruchika Parag]

Hi Jorge,

Currently, there is no way to directly import .m code back into App Designer to recreate the .mlapp file. However, you can manually recreate the UI components and copy the relevant sections of your code into the callbacks and properties of the new App Designer app.

Answer 3

[Aditya]

Hi Jorge,

Please refer to this post: https://in.mathworks.com/matlabcentral/answers/2128456-can-we-convert-an-m-file-to-an-mlapp-file-app-designer

Since you have created a .m file from the App Designer, you need to go through the file and manually make the same changes to a new blank app in App Designer.

Steps to Recreate Your App

1. Create a New App:

• Open App Designer and create a new blank app.

2. Recreate UI Components:

• Add UI components (buttons, axes, labels, etc.) to match those in your .m file.

3. Copy and Paste Code:

• Copy callback functions and other relevant code from your .m file into the new app's callbacks and properties.

4. Adjust Properties and Callbacks:

• Ensure the properties and callbacks of UI components match those in the original app.

By following these steps, you can manually recreate your app in App Designer using the .m file as a reference.

Hope this helps!