Loren on the Art of MATLAB

Turn ideas into MATLAB

This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English version of the page.

The State of App Building in MATLAB 16

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.

Contents

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

16 CommentsOldest to Newest

Brad Stiritz replied on : 1 of 16

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 16

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 16

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 16

Brad,

Great to hear about your experience using App Designer. Appreciate the feedback!

Chris Portal

Chris Portal replied on : 5 of 16

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 16

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 16

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 16

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 16

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 16

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 16

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 16

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 16

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 16

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?

Add A Comment

Your email address will not be published. Required fields are marked *

Preview: hide