Loren on the Art of MATLAB

Turn ideas into MATLAB

The State of App Building in MATLAB 23

Posted by Loren Shure,

In my travels, I meet with many customers and they are always interested in learning about new MATLAB features and capabilities. One area that has a lot of interest is MATLAB app building. Many MATLAB users are interested in App Designer, GUIDE, and the future of the two app building platforms. So for this blog, I thought I would put some of those questions to Chris Portal, Development Manager for MATLAB Graphics & App Building, and David Garrison, MATLAB Product Manager.


What is the current state of app building in MATLAB?

CP: Currently MATLAB offers two platforms for building apps – GUIDE and App Designer. GUIDE is an older platform that MATLAB users have been using for many years. Although users have been able to build apps of varying levels of sophistication with GUIDE, it has suffered from a number of workflow and usability issues we’ve been wanting to address for our users. Similarly, the component set it supports, which is predominantly the uicontrol set, is also very limited and based on some legacy technologies.

DG: In R2016a we introduced App Designer as our new app building platform. App Designer integrates the two tasks of building an app – laying out the visual components and programming the behavior. It has a new design canvas that makes it easier to add components and to organize them using tabs and panels. It includes a built-in editor that manages generated code for components in read-only sections and provides editable sections for user-written callback code. It also supports a new family of standard components such as edit fields, buttons, and spinners, as well as gauges, knobs, switches, and lamps for creating instrument panels.

Why did MathWorks develop a whole new app building platform?

CP: A major difference between GUIDE and App Designer is the technology used. GUIDE is based on Java Swing which is no longer being actively developed by Oracle. Building on it would have allowed some short-term wins, but it would not have scaled in the long-term or allowed us to offer web-based workflows for our users. App Designer is built on modern, web-based technologies such as JavaScript, HTML, and CSS, giving us a platform with the flexibility to keep up with the demands of our users and allowing apps to run on the web. Users can keep their existing Java-based apps running and choose to opt into the new platform when the time is right for them.

How does App Designer compare to GUIDE?

DG: When we introduced App Designer in R2016a, it offered a modern and user-friendly environment for laying out your app, which addressed several usability issues GUIDE has. However, for the first few releases, App Designer had some functional gaps with respect to GUIDE. Common components were missing, MATLAB graphics support was limited, and performance didn’t scale for large apps. With each release, we have been closing these gaps and addressing performance. As of R2018a, App Designer supports nearly all MATLAB 2D and 3D visualizations with pan, zoom, and rotate interactivity; menu support has been added as well as new tree and date picker components; and the code editor is able to scale to build large apps.

CP: Another notable difference is the coding model. App Designer generates a MATLAB class for the app, making it easier to program callbacks and share data between different parts of the app in a way that is less error prone than GUIDE. What this means is you no longer need to update a handles structure, or understand the subtleties of when to use guidata vs. appdata vs. UserData. New MATLAB interfaces have also been introduced which are designed specifically for each component. These new interfaces are easier to program to and improve on the older uicontrol component used by GUIDE.

What does that mean for the future of GUIDE and the apps users have built with it?

DG: We know that many MATLAB users have time and intellectual property invested in GUIDE-based apps or in apps they've created programmatically. We will continue to support GUIDE and its associated components and have no current plans to deprecate or remove any of that functionality. Unlike other MATLAB transitions, GUIDE and App Designer can co-exist, which allows us and our users to work through the transition over a series of releases. Our focus right now is on enhancing App Designer to ensure it can serve the needs of MATLAB app builders and helping GUIDE users adopt it.

CP: Towards that end, we have released the GUIDE to App Designer Migration Tool for MATLAB in R2018a which eases the process of converting a GUIDE-based app to App Designer. The tool automatically creates an App Designer app with the same layout as your GUIDE app, applies the necessary component configurations, and copies the GUIDE callback code over. From there, you update the callback code to make it compatible with the new App Designer code format. To help users with this step, the tool generates a report that describes how to do the code updates and provides workarounds for some limitations. You can download the tool from the File Exchange on MATLAB Central or from the Add-On Explorer in the MATLAB desktop.

What about users who create their apps programmatically?

DG: We know some users choose not to use an interactive environment like GUIDE or App Designer – they prefer to create their apps programmatically in MATLAB. You can continue to hand-code your apps regardless of which component set you use, whether it’s the older uicontrol function, or the newer component set we’ve been expanding since R2016a.

What about apps that use Java extensions?

CP: Some of these users have used Java Swing to extend the capabilities of their apps including the use of the javacomponent function to add custom components. They needed to do this to integrate components we did not support like tabs, trees, and date pickers, and to customize components beyond what was documented, including richer cell level formatting for tables. Other have used the undocumented JavaFrame property to do things like maximize or minimize the figure window. And in a few cases, users have leveraged Java Swing directly in order to take advantage of things like Java layout managers to build IDE-like apps. App Designer gives us a foundation to address these long-standing gaps for our users. App Designer has been adding support for missing components and enhancing existing ones. We have a number of features lined up that will help bridge the Java Swing gap, and enable all of our MATLAB users to build more sophisticated apps.

DG: We have been actively surveying users to understand how they are using Java to extend their apps. The feedback we hear directly impacts the team’s work. For example, in our survey on JavaFrame use, we discovered the number one reason for its use was to programmatically maximize or minimize the figure window. We added documented support for this in R2018a. We also added uitree in response to feedback from our survey on javacomponent use. Our plan is to have each release of MATLAB address some gap that has led users to go to Java, so we encourage users to fill out these surveys. Finally, we recognize some users may require specialized components that may be of lower priority for most app builders. In order to address this, we are also investigating ways to provide a documented solution for integrating 3rd party JavaScript components in MATLAB apps.

How do users take their apps to the Web?

DG: There are a couple of ways to do this. One is by using MATLAB Online. MATLAB Online lets you run MATLAB in a desktop web browser from any computer that has access to the internet. MATLAB Online is available with select licenses. Check your eligibility here. You create an app using the desktop version of MATLAB and save it to your MATLAB Drive. To run the app in a web browser, use your MathWorks account to log onto MATLAB Online at matlab.mathworks.com . You can use MATLAB Drive to easily share your app with anybody else who has access to MATLAB Online.

CP: The other way is to use MATLAB Compiler. In R2018a, MATLAB Compiler introduced a new feature that allows you to package App Designer apps as a web app. You create your app on the desktop, package it for the web using MATLAB Compiler, and copy the compiled app to a MATLAB web app server you’ve set up, which is also provided with MATLAB Compiler. This results in a URL that can be accessed in a web browser by anyone who has access to the server. The benefit is anyone can run the app in a browser, even if they aren’t MATLAB users. This approach is ideal for sharing apps on-premise, for co-workers to access via a web browser.

How do users decide which app building platform is right for them?

DG: We recommend users start with App Designer for all new apps unless the app needs to run in a version of MATLAB prior to R2016a. It is the platform we are continuously enhancing and expanding with each release. We also think many users will benefit from migrating their GUIDE apps to App Designer using the migration tool that Chris mentioned. Migration will give your app a more modern look and will make it possible to deploy your app to the Web.

CP: Users might consider continuing to use GUIDE for the following reasons:

  • The migration tool highlights a limitation that is critical to the app’s workflow and cannot be worked around.
  • The app needs to run in older releases of MATLAB that predate App Designer’s release in R2016a.
  • The app relies on the use of undocumented Java functionality that is not supported in App Designer.

LS: Well, I think that's about it. Thank you both for sharing this valuable information with my readers.

How are you building apps in MATLAB?

Have you tried App Designer? Let us know here.

Get the MATLAB code

Published with MATLAB® R2018a


Comments are closed.

23 CommentsOldest to Newest

Brad Stiritz replied on : 1 of 23
Thank you for the interesting comments and perspective. I am working on my first AppDesigner project, using R2018a. My app will be a productivity-enhancement tool. Before starting the app layout, I prototyped the back end using Live Editor. Things have gone very smoothly so far. I'm excited and looking forward to having the end product, it will be a huge help in my daily routine. Thanks to Mathworks for developing these new platforms.
Tyler Cumby replied on : 2 of 23
Given that all new development is occurring in the App Designer framework, what are the prospects of transitioning javacomponent() over to being a fully documented and supported function?
Royi Avital replied on : 3 of 23
Hi, I didn't understand your answer to the question: What about users who create their apps programmatically? How can I embed AppDesigner elements into a figure? Could you show example how to build programmatically application based on the new AppDesigner? Thank You.
Chris Portal replied on : 4 of 23
Brad, Great to hear about your experience using App Designer. Appreciate the feedback! Chris Portal
Chris Portal replied on : 5 of 23
Tyler, Thanks for the question. Our goal is to offer documented solutions in MATLAB that satisfy the usage scenarios where javacomponent has been used. I don't expect us to approach it the way that you describe, but exactly how we will support these workflows is something we are still working through. Thanks, Chirs
Chris Portal replied on : 6 of 23
Royi, App Designer components can be placed into a UIFIGURE, which is a new kind of figure that is tailored for app building purposes. For example, to create a dropdown in a figure, you would do: f = uifigure; dd = uidropdown(f); dd.Items = {'Red','Green','Blue'}; You can follow this programmatic approach using any of the app designer components listed here: https://www.mathworks.com/help/matlab/creating_guis/choose-components-for-your-app-designer-app.html
Royi Avital replied on : 7 of 23
Hi Chris, Thank you for the information it is exactly what I was looking for. By the way, is there a way to use other JavaScript based UI Elements in AppDesigner? Let's say I'd like to use sliders form other UI Library (I want Sliders with 3 Knobs for instance).
Adam Eckersley replied on : 8 of 23
I like the concept of AppDesigner a lot, but until or unless it encompasses a few fundamental things I doubt I will use it for anything beyond creating a really simple GUI to test out its behaviour like I did previously. I have created numerous UIs programmatically over the years so the approach is very familiar, but I want to be in control and the editor greying out parts of code so they aren't editable is not acceptable for my way of working. Obviously I realise why - people can mess up their GUI easily if they can edit things, but for expert users it is unnecessary. For example, I always name my class object 'obj'. I've written over 1000 classes and I never name it anything else. It's small, but being forced to call it 'app' just infuriates me as I constantly make mistakes by still using 'obj' in my callbacks. Also I like to order my properties and methods in the way I wish - public ones at the top, private at the bottom and I almost never give public access to the UI components in my classes. My last check of AppDesigner suggested I have no control over any of these. Also the editor still does not conform to my editor settings with respect to inserting spaces for tabs. I never have this set. I want a tab to be a tab, it's how I've always worked. These are individually small things and seemingly petty reasons to reject a whole framework, but it is these small things that recur time after time, every day, just providing annoyances constantly which cause me to quite AppDesigner in a rage! Class-based GUIs are a vast improvement and the layout part is very nice, but I want control over *all* the code in my app. If I mess up the UI because of it then that is my fault. Making it optional to be able to edit all code would be good, to protect more novice users, but not for advanced users.
Chris Portal replied on : 9 of 23
Hi Royi, Happy to help. Regarding your question about using other UI components, there is no way to pull in 3rd party JavaScript libraries at this time. If there are certain libraries you're interested in using, I would be curious to hear what they are. Thanks! Chris
WangZhichuan replied on : 10 of 23
I'm a new guy who builds apps in MATLAB 2016a. There are two tips in my opinion: 1, Adding functionality, which can be used to insert some shapes under Design View and edit shapes like MS Word,( insert->shape->line, arrow, etc). 2. Adding functionality to protect mlapp file, which is similar to the method "Create Protected Model".
Chris Portal replied on : 11 of 23
Adam, Thank you for the generous feedback! To your comment that these are "petty reasons to reject a whole framework", I disagree. There's a lot to be said in enabling users to exercise longstanding muscle memory, or apply basic coding conventions they've developed over the years. I don't see anything unreasonable in the level of control you're looking to have. As you note, a lot of the guardrails are meant to support those who may not be as comfortable building apps, and in particular, users who may not be as familiar with object-oriented programming. At the same time, we want to make the environment more flexible to accommodate the needs of more advanced users such as yourself, which is an area we are exploring. More to come! Thanks, Chris
Chris Portal replied on : 12 of 23
Hi WangZhichuan, Thank you for the feedback. I'm curious to understand your suggestions a little more... 1) Are you referring to adding plot annotations, or something more general? 2) I'm familiar with this request, but would like to hear about your use case. What is prompting the need to protect the app, i.e. is it being shared among peers, or shared publicly? Is the protection to prevent someone from seeing the underlying code, or just to prevent them from editing it? Thanks, Chris
WangZhichuan replied on : 13 of 23
Hi Chris, Thanks for your reply. I'm sorry to confuse you. 1) Are you referring to adding plot annotations, or something more general? Yes, what I want is to add plot annotations. These aided shapes are just used to improve the interface under Design View. For example, I can draw a vertical dash line in Panel Component to divide the panel into two areas from the appearance point of view,. 2) What is prompting the need to protect the app, i.e. is it being shared among peers, or shared publicly? Is the protection to prevent someone from seeing the underlying code, or just to prevent them from editing it? In fact, our team is developing app for ourselves. But the app will be shared with other team. We don't want them to see the underlying code. The included m files called by app have been obfuscated with pcode function. After we share the packaged files (***.mlappinstall and ***.prj) with them. The source file .mlapp can be still fond in the folder below. C:\Users\Administrator\Documents\MATLAB\Add-Ons\Apps\MBDTestTool\code
Chris Miller replied on : 16 of 23
According to the documentation, I can't use App Designer, because it does not allow user interaction with the embedded plots. When will this functionality be added to App Designer?
John McDermid replied on : 17 of 23
The current application I am building uses all three GUI methods. I used the programmatic method to build multi-axis plotting where the number of plot windows is determined at run time. I am forced to use guide (or roll my own) when using the image tools in the image processing toolbox. These are nice tools and it is frustrating that they are not included in the App Designer. I really like using the App Designer when the presentation is simple. I would happily use it for all but the most complicated applications when it becomes less of a toy! One glaring omission is the ability to declare an app to be modal. The function appears to be present in the object but reports that there is no method to implement it yet. This means that you can only have one app in the foreground at a time which greatly limits where it can be applied without asking the user to hunt for hidden windows.
Chris Portal replied on : 18 of 23
Hello Chris M, Thanks for your interest. Yes, plot interactions are an important capability for many apps. In R2017a, we added pan and zoom support. You just have to use an explicit handle to enable these interactions, similar to calling any other graphics function in App Designer. Something like: pan(app.UIAxes, 'on'). As of R2018a, we don't have support for "custom interactions", which require writing callbacks based on mouse and keyboard events, but this is an area of active development for the team and is slated for a release in the near future. Stay tuned! Thanks, Chris P
Chris Portal replied on : 19 of 23
Hi John, Thank you for the feedback. I had wondered whether any users of the Image Processing Toolbox interaction tools had looked at App Designer. There've been a few blockers preventing them from working. First and foremost has been custom interactions (mouse and keyboard events) which all of the image tools rely on (as noted in a previous response, this has been an active area of development). Beyond that, depending on the image tool in question, they may also rely on context menus or uicontrols, which are not supported in App Designer apps yet but are on our roadmap. As for modal support, in R2017b, there is a uiprogressdlg function that allows the app to display an in-modal progress dialog. I suspect though that you may be talking about a more general modal behavior. If so, can you elaborate on your use case and whether you're looking to make all of MATLAB modal, or only a set of windows specific to an app? Thanks, Chris
Ian Andolina replied on : 20 of 23
Sorry, I will rant (I've wasted much of the day fighting with appdesigner refactoring a GUI). The editor in appdesigner is almost unusable. It does not follow my MATLAB keyboard bindings, it does not follow my tab/space preferences, it doesn't follow my colour theme,"smart" indenting is incredibly slow, and incredibly buggy. Please allow us the ability to "open in..." MATLAB editor or use another HTML component — VSCode or Atom are HTML based too and are many many orders of magnitude better. Indeed, if something like VSCode was used to unify both the existing MATLAB editor and appdesigner editor component, that would be even better (as even MATLABs main editor is very middle of the road compared to VSCode/Sublime etc.)
Chris Portal replied on : 21 of 23
Thank you for the feedback Ian. Firstly, if you're using an R2016a or R2016b version of App Designer, I would suggest trying a more recent version. There were editor performance issues in those 2 releases we had to work through. If you're using a more recent version though, and are still seeing performance issues, let me know by posting here and I will connect with you offline to get more specifics so we can try to reproduce/investigate. As for the missing features relative to the MATLAB Editor, I agree with you. I myself sometimes find this impacting my own app building efforts. Out of curiosity, have you tried the new Live Editor in MATLAB? The reason I ask is both the Live Editor and App Designer editors share a common foundation, so as the Live Editor code editing features expand (less so its rich markup features, which are totally cool in their own right), so too will App Designer's. The gaps between these editors and the MATLAB Editor are well known and a big area of focus for the teams involved, so more to come! Thanks, Chris
Martin Lechner replied on : 22 of 23
For serious development a good source code management integration is absolute necessary. So I don't like the new introduced binary file formats for the Live-Editor and the App-Designer. In the standard git clients I can't see the changes in these binary files and the Matlab SCM support is a joke. R2018b introduced the possibility to export the app as Code. This is very useful and contains also the definition of the used GUI elements as text representation. Why it isn't possible to use this as the default storage format and open this file again in Live-Editor? I started to create some small apps as the App Designer appeared, but in the early stages there were so much features missing (like tooltips, icons on buttons, …). With Matlab R2018a I tried to create an app with an "big" table (more than 100 rows) but the rendering is very slow (e.g. if you are scrolling throw the table). Why isn't it possible to change the foreground color in the same way as the background color? E.g. for dark backgrounds mixed with light backgrounds it's necessary to change also the foreground color accordingly Compared to the Java tables a custom cell renderer callback is missing. Generally speaking a good table GUI like Eclipse NatTable (http://www.eclipse.org/nattable) is missing in Matlab. If your app code contains several hundred lines the AppDesigner slows down. Missing features: • Callback and context menu support for graphics objects like line, bar, … • Print function for documentation purposes • On axes created in uifigures I expect to have the same features as on axes in figures (zoom, pan, datatips, context menue to change the line style, …) Generally I don't understand why the different toolboxes has different visualisations and also a different zoom, panning behaviours, different data cursors. E.g. the Signal Analyser App looks like an HTML based GUI, but with a different user interaction as the Matlab plot support and the support in the App-Designer. As user I don't understand why I have to pay the development so much different visualizations which I can't use in an documented way for my own GUI's or visualizations. As user I want the same behaviour in all visualizations of all toolboxes and the used elements must be available in the Matlab so that I can use it for my own development. For example if you are using the Wavelet Analyzer app you get the impression that the developer have no idea how the normal Matlab plots are working. From my point of view that's also a usability nonsense.
Kirthi Devleker replied on : 23 of 23
Hi Martin, Thank you for sending in your comments regarding Wavelet Analyzer. I understand the usability issues you mentioned and I have taken a note of your feedback. Wavelet Analyzer is a legacy app and our developers are working hard to modernize the apps and make them easy to use. We are doing so one step at a time. For example, in R2018b you can use Signal Multiresolution Analyzer to analyze signals at different scales. The App also supports signal analysis using data adaptive techniques like Empirical Mode Decomposition. https://www.mathworks.com/help/wavelet/ref/signalmultiresolutionanalyzer-app.html In R2017b we launched the Wavelet Signal Denoiser App which automatically denoises a signal thereby providing the user with a good starting point. The App also allows you to customize the various parameters involved in denoising and visualize the results immediately. https://www.mathworks.com/help/wavelet/examples/denoise-a-signal-with-the-wavelet-signal-denoiser.html The above mentioned Wavelet Toolbox apps also generate MATLAB code which can be used for automating the analysis We love hearing from customers like you so if you have any feedback, suggestions or other ideas, please reach out to me directly kirthi.devleker@mathworks.com. Sincerely, Kirthi Devleker