How to create a GUI in App Designer starting from existing code

I am attempting to use AI to generate an initial design for a GUI. I would like to copy the code that is generated and input it directly into the Code View of the App Designer. I would then like to make further adjustments using some of the App Designer tools (i.e. Design View). However, I cannot copy the code directly over, as App Designer doesn't let the user edit portions of the code. Is there a way to edit the grayed-out code? Or a way to easily integrate the generated code into an .mlapp file?

Answer 1

[Jacob Mathew]

Hi @Michael,

I tried to edit the greyed out parts of the App Designer Code. Unfortunately even MATLAB Documentation regarding Manage Code in App Designer Code View also notes that some sections of the code are not editable which are generated and managed by App Designer. You can cross reference the documentation below:

https://www.mathworks.com/help/releases/R2024b/matlab/creating_guis/app-designer-code-generation.html

A workaround would be to first setup the UI to your liking with the neccessary components. Then to prompt the AI tool you are using to give the code broken down into various callback functions. You can create those callbacks and then copy paste the code into them.

[Michael]

Yeah, I was hoping there would be an easier way, but this sounds like the best option available.

Answer 2

[Image Analyst]

Are you saying that you used some AI tool to build an .mlapp file that had all the buttons, listboxes, etc. made to your liking? (The .mlapp file is a binary file, by the way, not a text file, until it's brought into appdesigner) And that .mlapp file had code in the gray, uneditable portions that specified properties for components like size, location, color, value, items, etc.?

Well, if it's a valid .mlapp file that your AI tool made, then you can open it up with AppDesigner and then change the properties that you want to change in the properties panel (below the list of components in the upper right). The callback code of those components can be edited directly in the Code View window (they'll be white) but the properties (that code will have a gray background) must be edited in the properties panel in the lower right of your screen.

[Michael]

The AI tool did not create a .mlapp file. It generated code that I can copy into another file. I could copy it into a .m file, but then I wouldn't be able to use the App Designer tools. I would like to copy the code into the App Designer code view, but, as has been mentioned, certain sections are uneditable.

[Image Analyst]

You build the app as you like it in appdesigner, with all the buttons, etc. Then copy and paste the code that your AI tool generated into the callbacks. Right click on a component (like a button) and tell it to create a callback and then paste your code into it. If you want non-callback functions then you can use the Code panel on the left side to create a new private function and then paste your AI code into that. Neither of those two situations will have grayed out code that you can't paste into.

[Michael]

Makes sense. Thanks.