Application Development Strategies in MATLAB - MATLAB
Video Player is loading.
Current Time 0:00
Duration 1:10:07
Loaded: 0.24%
Stream Type LIVE
Remaining Time 1:10:07
 
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected
  • en (Main), selected
    Video length is 1:10:07

    Application Development Strategies in MATLAB

    Overview

    MATLAB application developers have built apps using App Designer and the uifigure-based graphics system since these were introduced in the R2016a release. Many developers have already migrated their apps built using GUIDE (the predecessor to App Designer) to the new graphics system. In the R2019b release, MathWorks announced that GUIDE will be removed in a future release.

    In this seminar, we will discuss recommended best practices for migrating GUIDE and figure-based apps to the new graphics system. We will also provide an overview of different strategies for building applications in the web-based graphics system, including the use of App Designer, integrating JavaScript components in apps, and developing larger-scale apps using a programmatic approach.

    Highlights

    • Overview of existing app development technologies in MATLAB
    • The GUIDE to App Designer migration tool
    • Strategies for migrating programmatic figure-based apps
    • Development tools including code compatibility reports and static code analysis
    • Using MATLAB’s testing frameworks for app and regression testing
    • Recommendations for migrating MATLAB apps using Java and ActiveX
    • Including external JavaScript components in MATLAB apps
    • Future development work on the GUI Layout Toolbox
    • Advanced application development strategies
    • Deploying MATLAB apps to the desktop and to the web

    About the Presenters

    Gianluca Carnielli is an application engineer at MathWorks focussing on the MATLAB language and software development workflows. He is passionate about app development and he has supported companies in developing and improving applications with a graphical user interface. Prior to joining MathWorks in 2019, he held a research position in the field of Space Physics at Imperial College London. Gianluca has a master’s degree in Theoretical Physics and a doctoral degree in Space Physics from Imperial College London.

    Ken Deeley is an application engineer at MathWorks. He joined MathWorks in 2011 after a mathematics PhD, focussing on pure mathematics with applications to autonomous guided vehicle robotics. He specializes in technical computing applications, including machine learning and app development, as well as coaching MathWorks customers on the application of MATLAB products.

    Tijana Roehrer is a Training Engineer at MathWorks. She is delivering and designing training solutions with a focus on software and app development in MATLAB.

    Recorded: 6 Jul 2023

    KEN DEELEY: Hello and welcome to this webinar on application development strategies in MATLAB. My name is Ken Deeley. And I'm an application engineer at MathWorks. I've been at MathWorks for 11 years. And my role is to help support our customers with their technical computing applications, including application development and machine learning.

    TIJANA ROHRER: Hello. My name is Tijana Rohrer. And I'm a training engineer at MathWorks. I deliver trainings with a focus on MATLAB programming and application development.

    GIANLUCA CARNIELLI: Hi. My name is Gianluca Carnielli. And I'm an application engineer at MathWorks. I primarily support customers to develop algorithms and applications with MATLAB and later on to deploy these applications to an operational environment.

    KEN DEELEY: Together with my colleagues Gianluca and Tijana, we'll be discussing the current options and strategies for MATLAB application development as well as some upcoming product changes that may affect your existing apps and tools written in MATLAB.

    First, let's take a look at the agenda for this webinar. I'll begin with an overview of the current technologies and frameworks for developing apps in MATLAB including a discussion about some recently added alternative techniques for deploying code to your end users, namely live tasks, charts, and components. Next, I'll focus on some strategies for migrating apps developed in the legacy guide framework to their modern App Designer equivalent.

    Outside of GUIDE, you might have existing MATLAB apps or tools developed programmatically using figures and UI controls so we'll also be discussing strategies for upgrading or migrating this type of app to more modern technologies. Migrating a legacy app or codebase can involve significant time and development effort so Tijana will discuss the efficient use of MATLAB's integrated development tools for updating a codebase.

    Whilst in the process of migrating code, it is important to ensure that all capabilities and features are preserved in the new version. This can be verified by writing tests to guarantee the behavior of the upgraded code by making use of MATLAB's frameworks for automated testing. Specifically, we will discuss the app testing framework for automated app testing as well as the unit testing framework for regression testing. We also recognize that some advanced app developers have made use of custom Java components in their legacy MATLAB apps. As part of upcoming changes to MATLAB, the ability to use the undocumented Java frame figure property as well as the Java component function and the ActiveX control function will be removed.

    Gianluca will discuss strategies for migrating MATLAB apps that use custom Java or the ActiveX technology to their modern equivalents. One approach for this is to include external JavaScript components or code within a MATLAB app, a feature that's been available since the R2019B MATLAB release.

    Advanced developers of figure-based apps often use GUI Layout Toolbox. This is a popular layout management toolbox available on the File Exchange. We will discuss the recent developments in this toolbox and provide a time frame for its compatibility with the web graphics system in MATLAB.

    More sophisticated and complex apps benefit from splitting up the code base into separate classes, each of which has a well-defined role and set of responsibilities. Tiana will describe some strategies for managing the complexity of a large MATLAB application using the model view controller software architecture pattern. Finally, Gianluca will take us through the options for deploying your MATLAB apps to other MATLAB users, either as standalone desktop applications or as web applications.

    So let's get started by walking through an overview of the existing frameworks for app development in MATLAB. We'll start by discussing the legacy GUIDE framework for app development. Guide stands for Graphical User Interface Development Environment. And this is MATLAB's legacy environment for developing apps in an interactive editor. GUIDE creates apps based in a standard MATLAB figure window. This figure window uses Java technology.

    When developing GUIDE apps, you have two files. Firstly, a figure file with the .fig extension. This file contains the app's layout such as the positions and styles of its controls and a function file with the .m extension. And this file contains the app's code and callback functions.

    GUIDE uses a function based programming model with the main app being itself a function and each callback implemented as a local function within the same main file. It's important to know that in R2019b, MathWorks has announced that GUIDE will be removed in a future release of MATLAB. We do not recommend that you develop any new apps using GUIDE.

    In the next section of the webinar, we'll discuss some strategies for migrating your GUIDE apps to the latest technology for app developments in MATLAB. Independently of GUIDE, you might have developed MATLAB apps programmatically in a standard MATLAB figure window, making use of UI controls for the interactive components.

    This approach is more suited to large scale, more complex apps, possibly with dynamic layouts or using a software architecture pattern focused on separation of concerns, such as the model view controller or MVC framework. With this architecture, you would have one or more code files with the .m extension containing the app's code base. Apps written programmatically in this framework make use of a Java figure to host the main app and add interactive controls using the UI control command.

    Graphics are displayed by creating one or more axes within the app and adding the usual MATLAB graphics objects such as line plots, bar charts, histograms, and so on. Either using GUIDE or with this programmatic approach, a small minority of users have historically included custom Java components within their apps. It's important to know that support for this will be removed in a future release of MATLAB. We do not recommend that you develop any new apps that include custom Java components. Later in the webinar, we'll also be discussing some alternative approaches for including highly customized functionality in modern MATLAB apps.

    Looking forwards, let's now discuss App Designer. App Designer was introduced in the R2016a release of MATLAB and is a modern interactive app development environment designed to replace GUIDE. App Designer components are built using JavaScript technology. Apps created in App Designer are based in web figures, also known as UI figures, and use a special file extension, .mlapp, standing for MATLAB app.

    These files contain both the app's layout information as well as the underlying app code and callbacks. Changes made in the Design View of App Designer automatically update the generated code, which can be seen in the code view of App Designer. App Designer uses an object-oriented programming model for app development, providing properties for storing elements of app data and methods for implementing component callbacks and helper functions. App Designer is easy to use. You don't need to have detailed knowledge of object-oriented programming to be effective with App Designer.

    Similar to figure-based apps that we discussed previously, it's also possible to develop applications based in UI figures programmatically. This approach is more suited to large scale apps as mentioned before. With this approach, using layout management as provided by the UI grid layout components is essential for creating apps that resize correctly.

    In this framework, app building components placed in a UI figure or a UI grid layout are created using individual construction functions such as UI button, UI list box, UI tree, and so on, in contrast to the figure-based approach of using UI control as an umbrella function for creating different types of components. Support for the UI control and UI figures was added in the R2022a release of MATLAB. Importantly, this means that apps developed programmatically using figure and UI controls, which do not integrate custom Java components, will continue to work when the top level figure is replaced by a UI figure. We will discuss this migration strategy in more detail in the next section.

    Starting in the R2019b release, app developers can include external JavaScript components in their MATLAB apps by making use of the UI HTML components. This can be useful for including external components such as audio or video players or sophisticated trees and tables developed using HTML and JavaScript.

    Let's summarize the app development frameworks we've discussed so far. Currently, MATLAB ships with both Java and JavaScript app development technologies. GUIDE apps and programmatic figure-based apps are based on Java technology whereas App Designer and programmatic UI figure-based apps are based on JavaScript technology.

    Current development work focuses on planning and testing for the removal of GUIDE and the capability to include custom Java components using the figures Java frame property and the Java component function, which Gianluca will be discussing in more detail later on. MathWorks is transitioning to JavaScript technologies for application developments in MATLAB.

    In a future release of MATLAB, both GUIDE and the ability to include custom Java components in figure-based apps will be removed. Both GUIDE apps and programmatic figure-based apps will continue to work but the layout of GUIDE apps will no longer be editable. We recommend developing new apps using either App Designer or a programmatic UI figure-based app development approach.

    When you're thinking about migrating your GUIDE apps, there are now some alternative methods available to provide your end users with your code. Recent MATLAB releases have introduced live tasks, charts, and components.

    Let's first discuss live tasks. These are interactive user interfaces that can be embedded in a live script. MATLAB ships with some predefined live tasks for operations such as cleaning missing data, identifying outliers, and solving an optimization problem. You can also develop your own custom live tasks. Consider developing a live task if you need to encapsulate one step in a longer or larger workflow rather than developing a large and complex app that tries to combine many steps together. You can also consider developing a live task if you need to provide a user interface to a function, which has a complicated set of inputs and outputs or if you need to generate MATLAB code for your end users. Live tasks are implemented as subclasses of the built-in class matlab.task.LiveTask, which was introduced in R2022a.

    Let's move on to discussing charts. Charts encapsulates a more complex visualization in a MATLAB class, such as a combined scatter plot with marginal box plots. You can consider developing a chart if you need to encapsulate a complex visualization workflow for your end users or create a new visualization built from fundamental MATLAB graphics objects. Another reason to consider developing a chart is to update the graphics dynamically without the need to recreate the graphics objects on each update. You can also use charts to simplify the development of large scale apps with many components.

    Charts can be used in standalone code, such as in scripts or functions, or you can include charts as part of larger apps. Custom charts are implemented as subclasses of the chart container superclass, which was introduced in R2019b, or of the component container superclass which was introduced in our R2020b. Use the component container superclass if your chart needs to contain controls in addition to graphics objects or you want to share your chart as an App Designer add-in.

    Finally, custom components allow you to develop reusable widgets for use in apps, tasks, and charts. You can consider writing a custom component if you need to encapsulate a commonly used widget for your end users such as a folder selector, or IP address input field, or a combined slider and spinner control. You can use components to simplify the development of large scale apps. And components can be shared with other app developers as App Designer add-ins. Custom components are implemented as subclasses of component container.

    Note that we have provided an overview of MATLAB's app development frameworks, let's discuss the strategies for migrating older apps developed using GUIDE. As we mentioned before, GUIDE will be removed in a future MATLAB release. However, existing GUIDE apps will continue to run after a GUIDE is removed but their layout will no longer be editable.

    If you open an existing GUIDE app, you can find a one-stop shop providing the available app migration options. GUIDE apps can be exported to a new MATLAB file or, alternatively, migrated to the App Designer environment. As an example, we have an existing guide app for analyzing audio data.

    This is the audio analyzer app. We can load an audio file into the app, visualize the signal amplitude over time, select a region of interest, and analyze the frequency content within that region of interest. We can also play back the sound. This app was originally written in GUIDE. If we open the app in GUIDE, then we can also open the options for migrating the app.

    Let's explore the options for migrating the app. There are two main options, migrating the app to App Designer and exporting it to MATLAB Code. We might want to export the guide app to a new MATLAB code file if only minor app maintenance is required in the future, for example, if the existing app is stable and unlikely to require large changes.

    Also if the app's layout is fixed and will not require editing in the future, then this option is most efficient. On the other hand, in a lot of cases, you will want to have full control over future changes to the app, either in the layout or the code. In this situation, we recommend migrating the app from guide to App Designer.

    The GUIDE to App Designer Migration tool is available from the File Exchange as a support package. It's a semi-automated tool that converts your GUIDE app into an App Designer app. The tool also generates a report containing any limitations or unsupported functionality that was encountered during the migration process. Let's see how this migration tool works on our audio analyzer app.

    First, the GUIDE app has been migrated to an App Designer file of the form mlapp. Let's review the changes that took place. First, any UI control components that were present in the GUIDE app have been converted to their corresponding App Designer components. For example, a UI control with style pushbutton has been converted to a UI button component in App Designer.

    Next, property values of the App Designer components have been configured to match their corresponding values in the previous GUIDE version of the app. We can inspect the property values in the component browser on the right hand side of App Designer. We can also inspect the generated code by going to the code view in App Designer.

    Names of the App Designer components as listed in the component browser on the right hand side of App Designer now match the tag property values that were used in the GUIDE environment. This makes it convenient for you to navigate your app using the same names that were present in the original GUIDE file.

    The migrated app also contains copies of the callbacks and any utility functions that were present in GUIDE. Please note that App Designer uses different coding conventions than GUIDE. A call to convert to GUIDE callback arguments, a convenience function, has been added to each callback to make your code run in App Designer.

    Finally, let's take a look at the migration report. The migration report describes the outcome of the automated migration process along with a list of any further action required. We also recommend that you validate your migrated app after the migration process has taken place. To do this, first verify the layout of your migrated app. Run your app and verify the initial layout of all components is as expected. If your app dynamically shows, hides, or enables components or options in response to selections made within the app, then confirm that these behave as expected.

    Also, verify the callbacks within your app. Run and close your app to confirm that there are no start up or termination errors. Exercise the workflows specific to your app, starting with the most basic and gradually proceeding to the more complex workflows. If any unexpected errors occur, either within the app or at the MATLAB command line, then address those issues before continuing with the validation. For troubleshooting assistance and additional information, see GUIDE migration strategies within the MATLAB documentation.

    If you're new to App Designer, then we'd recommend our one-day training course on building interactive applications with MATLAB. This provides a comprehensive overview of the App Designer environment.

    We've seen how to migrate GUIDE apps. What about migrating figure-based apps that you've created programmatically? The good news is that most programmatic figure-based apps are expected to work in web graphics with limited changes. The UI control function is supported in web figures from R2022a onwards so you can try replacing the top level figure in your app with a UI figure or a web figure and testing that your apps work as expected.

    From R2023a, you can also try out the beta version of the new MATLAB desktop. This is a technical preview of the new MATLAB desktop environment. Within this environment, all figures are web figures, including the figures created with both the figure function and the UI figure function. You can test your figure-based apps in this environment to verify that they exhibit correct behavior. However, note that any use of the javacomponent function or the figures undocumented JavaFrame property will need to be replaced when you migrate your figure-based app to web graphics.

    In a future MATLAB release, the figures JavaFrame property as well as the javacomponent function and the ActiveX control function will be removed. Gianluca will be discussing this in more detail later in the presentation but notes that you can find a list of the most common use cases for these capabilities online together with the recommended alternatives.

    To summarize, if your app uses javacomponents, JavaFrame, or ActiveX control, then you will need to replace this functionality in order to migrate your app to web graphics. GUIDE-based apps will also need to be migrated unless the layout will not change in the future. We recommend using the GUIDE to App Designer Migration tool to help with the transition.

    Programmatic figure-based apps will continue to work. These can be tested in web graphics starting from R2022a and in the JavaScript desktop from R2023a. If you need some additional help migrating your legacy MATLAB apps and tools, then we are here to offer support and help. Our consulting services team can work with you to help transition your apps to web graphics. Please contact your account representative if you're interested in this service.

    TIJANA ROHRER: Thanks, Ken, for the overview of the app development frameworks and the migration strategies. My name is Tijana Rohrer. And I'm a training engineer at MathWorks. I'd like to show you some development tools that can help you organize your MATLAB app projects no matter whether you're starting to write a new app or migrating one of the existing ones.

    So if you're developing apps, we recommend that you switch to the latest MATLAB release as it will give you the access to the newest functionality. However, as Ken told us, there have been some changes in the app development frameworks over the past few years. So when you install a new release, you might be wondering whether your old code will still work. And the Code Compatibility Analyzer app will run compatibility checks over your code. And it will inform you of any unsupported or removed functionality or any other kind of incompatibility that might be present.

    So as you're writing your app, MATLAB will highlight any syntax errors or code lines that could be improved by, for example, adopting one of the best practices or switching to a new R function. Now as of 2022p, you can actually get a list of all such issues. And MATLAB will do that by using the Code Analyzer app. And this app is going to group the issues by severity. And it will also give you a link pointing towards the exact line of code that contains the issue.

    So to organize your code together with other resources and also to work together with colleagues more easily, you can use MATLAB Projects, which were introduced in 2019a. Projects like to configure your environment by, for example, setting the path or setting the start up and shutdown functionality. You can also analyze dependencies between different files and use source control to track changes to your app made over time. And finally, packaging and sharing the code is just a matter of a few clicks.

    So let's take a look at this in MATLAB. So over here, I have a .prj file which contains the project. So when I double click it, this starts the project. And notice how this added the folders to the path. It also opened a new tab containing patterns that are related to the project. So for example, we can see that it's possible to create a list of dependencies or a class diagram over here.

    So let's take a look at these tools in more detail. So to explore file dependencies, you can use the dependency analyzer. And the idea here is that when you have a large codebase, making a change to one of the functions can actually impact a lot of other functions. And keeping these dependencies in mind can be challenging. So this dependency analyzer tool will create a graph of the different files and dependencies between them.

    And you can, if we zoom in here, see one of the files. And if you click on the arrow, you can see which other files are used by it. And over here you can see a list of impacted files that need to be changed, for example, if you make a change to this data source . So you can generate a list of these dependencies. And you can also import it or export it as an image.

    Now similarly to that, if you program in the object oriented manner, you can use the class diagram viewer to explore how the project is designed. You can visualize the hierarchy of your code together with properties and functions associated with each class where a class is the fundamental structure in object-oriented program.

    For example, over here we have the class diagram for the object-oriented version of the app that we will look at later. And if you click on this arrow to expand this region controller class, you can see a list of properties that are contained by it. If you click on the property, you can see more information about it such as access permissions. And something similar happens if you click on one of the methods.

    Now if you want to work on your code together with colleagues, it's a good idea to use source control to manage changes made over time. So some common tools for this are gits and svn or subversion. You can use these tools directly from MATLAB either through projects or through a right click context menu in the current folder browser.

    Now projects make this workflow easier by providing buttons. And here you can send your changes to the repository, get the changes created by the colleagues, as well as compare different versions of the file and merge these different versions into one. Now this also works for App Designer files starting from 2023.

    Now if you'd like to learn more about these different development tools, we recommend that you attend a two-day course called MATLAB programming techniques. In addition to you learning more about development tools, you will also learn how to efficiently manage data, how to structure your code, and how to make your applications more robust.

    Next, we are going to talk about how you can test your apps. So as already mentioned, making a change to the code can have an impact on several functions. The larger the code base and the more developers working on it, the more difficult it becomes to grasp the potential consequences.

    Not taking care of these dependencies can lead to bugs. And the later the bug is discovered, the more expensive it becomes to fix it. This is because, in the meantime, perhaps you wrote a bunch of code on top of that bug. And fixing the bug now requires you to rewrite all of that code.

    Now, of course, you strive to make as few errors as possible. But you should also strive to find them and fix them as quickly as possible. And a tool that helps you with that is automated testing. Here the idea is to get a collection of tests for all functions inside of your code. And then when you make a change to a function, you not only test that function. You test the entire code.

    Now in MATLAB, the unit testing framework allows you to develop tests in the form of scripts, functions, or classes. And no matter which approach you choose, after you run the test, MATLAB will mark each test as either passed or failed.

    Now the class-based testing framework is the most powerful one but you can also use it for a purely procedural codebase. There are even templates for test classes that you can use so that it's possible to write these class-based tests even if you don't know much about object-oriented programming. So once you're done testing, you can generate a coverage report that tells you the percentage of lines and the percentage of functions that were covered by your tests. And also this testing framework integrates with continuous integration service.

    So let's take a look at this in MATLAB. So over here, I have a folder Tests. And I have a file TestModel.m. So this contains tests for the programmatic part of the app. To run the tests, we simply click on the Run Test button. Each battle will mark each of our tests as either pass or failed.

    So in addition to that, we can also generate a coverage report. We need to enable it and add the file or folder that contains the code so that MATLAB knows for which files it needs to report the coverage. And then after we rerun it, we also get this report telling us that 100% of functions and statements have been covered by our tests.

    Now when you work with apps, you don't want to spend hours manually clicking things in your app in the correct in order to perform your tests. So the app testing framework can actually take over this clicking for you. So it can press on checkboxes, type in edit fields, or drag sliders and so on. So you just need to call one of these gesture functions and pass the appropriate data that is necessary for the test.

    So let's take a look at this in MATLAB. Over here, there is a file testapp.m that contains the tests for the app written App Designer. And let's see what happens when we click on Run Tests. Now I'm going to go and lift my hands up. But notice how there is this blue dot in MATLAB that is clicking around. So that's not me doing it. That's the MATLAB testing framework.

    And again once we are done, we get the coverage report. So if you'd like to get started writing unit tests, you can learn more about the testing frameworks in one of the training courses. In the course mentioned before, MATLAB Programming Techniques, you will learn how to write script and function-based tests, whereas in the course on object-oriented programming, you'll learn how to write class-based tests.

    Now if you're interested in some more advanced topics, such as performance testing, app testing, or testing in the presence of some software or hardware dependencies, you can contact us to organize a class-based unit testing training where we can configure the list of topics together with you. And finally, if you'd like to set up a continuous integration workflow, you can contact our consulting services. They can help you get started.

    GIANLUCA CARNIELLI: Thank you, Tijana, for this comprehensive overview on software development tools available in MATLAB, especially the testing framework which I reckon to be a key one. And hello, everyone. My name is Gianluca Carnielli. And I'm an application engineer at MathWorks.

    As Ken mentioned at the beginning, with me, you're going to hear some recommendations regarding how to migrate your MATLAB apps which make use of Java technology and ActiveX, which by now you knnow are going to be removed soon. But first let's do a full recap of what these technologies are and why they exist. For Java, there are two technologies that have been used over the years, javacomponent and JavaFrame. javacomponent is an API that allows to insert into MATLAB figures components developed with Java. For example, a table, a combo box, a spinner, and so on.

    While JavaFrame is a property of the figure object in MATLAB, and it is an entry point for several low level customizations of the figure properties and functionalities, for example, the JavaFrame property would allow to customize the figure colors, the icons, the toolbar, minimization and maximization of the window, and this would be done in ways that are not be natively possible in MATLAB.

    So why do javacomponent and JavaFrame exist? Unsurprisingly, to allow developers exploit the power of Java that is not natively present in MATLAB. ActiveX controls are incorporated into apps for the same reason, supply the figure with functionalities that are not available in MATLAB. Through the actxcontrol API, one would be able to add, for example, cages and media players directly inside the application.

    On our website, you can find a list of several UI capabilities that were previously available only with Java and ActiveX and that are now available in MATLAB using the new JavaScript-based technology. By scrolling this list, you will see that many gaps have been filled. For example, in relation to the use case for javacomponent and ActiveX that I mentioned before, in MATLAB you have now the possibility of including built-in spinners, customizable tables, and dropdown menus.

    The list is quite long so I won't go through each element in detail. If your use of Java in your MATLAB app is not replaceable with any of the components that are listed here, then I would recommend you taking the survey that is linked in this page and letting us know so that we can consider your requests for our future development plans.

    But what do you do if there's a component that you need which is currently unavailable in MATLAB? Let's take, for example, the case of a range slider. A range slider is one with two flexible ends which allow you to select a range. Now chances are that Java components have also an implementation in JavaScript and range sliders are an example. In this case, you would be able to incorporate the JavaScript version of the range slider directly into your MATLAB app. And I'll soon show you how.

    And what if you simply want to customize a UI component in ways that is not possible to do in MATLAB? Consider a button, for example. Let's say that you want to play with its borders, its shape, or change the color when you hover with the mouse. That's not something that you can do in MATLAB, right? So how do you do it? Again, the answer is by using JavaScript. And again, for this case, I'm going to show you how to do it with an example.

    In these cases, what you need to do is to create a custom component that incorporates JavaScript code. And this is going to be the next topic of our agenda. It's going to be very technical so brace yourself. Let's step back and consider the app that Ken, Tijana have showed you before. I'm now going to show you a new version of this app which implements a couple of custom components developed using HTML and JavaScript. And here it is. So can you see where these components are? I'll give you a couple of seconds.

    So I'm talking about the range slider on the bottom left and the buttons on the left of the app and the bottom right. So you might have realized that these components are not present in the App Designer component library by default. So let's see how they work here. It's pretty straightforward. The range slider and the button allows me to select portions of the audio signal which I would like to focus my analysis on. So let's take, for example, these portions of the audio file and let's play it with the play sound button, which is one of my custom components.

    [CHIRPING]

    Then the buttons on the left enable me to select which plots I want to visualize into the signal views panel to provide more flexibility. Perhaps I want to focus on one of the two plots only. And to provide even more flexibility, I've enabled the possibility to display these buttons above the axis in order to maximize the horizontal space for the plots in here in the signal views panel.

    So how did I get to this new version? Let's start by discussing the range slider. Here's a schematic view of the actors involved. The application creates an instance of rSlider, which is our custom component defined as a MATLAB class. This class is the interface to our external component, which is defined in an external HTML file that is also connected to a CSS file to customize the graphics and a JavaScript file to define the behavior. Note that MATLAB connects directly only to the HTML file and the CSS and the JavaScript parts could be incorporated directly inside the HTML file. In here, I've separated them just for clarity. And now let's understand this structure in more details.

    Starting from the final implementation in App Designer, let's go to the code view to check the startup function, which is the function that gets executed when we start the application. Inside of startup function, we create an object of rSlider and we store it as a property of the user interface like we do with any other UI component that is created inside App Designer apps. So rSlider takes as input argument the parent container which in this case is a UI grid layout object. And we also specify some optional name value arguments which define the color of the range slider, so the color of the handles and the color of the bar, which we both set to be some shade of blue by specifying the RGB values. And we also specify the callback that gets executed in MATLAB when we operate with the range slider, so when we shift the two values.

    And the point I would like to make is that this is a standalone component so rSlider is a standalone object that lives outside of App Designer and is not intimately linked to the graphical user interface that we have created here so I could also create an rSlider object from the command window. And I want to show you an example of this case.

    So in the My Command window, I could create a UI figure and a grid layout object inside the figure. And then I create an instance of rSlider, specifying the grid layout object as the parent of my slider. And here I leave the semicolon out of the game in order to let you appreciate that this is an object in MATLAB with some public properties which allow me to specify, as I mentioned before, the color of the handle and the bar, the values of the slider, as well as the range. And what I create is this sort of component which you can see now I'm playing with. And again, this is a standalone component which I can place directly inside my apps.

    So let's take a closer look now at the class definition of rSlider. So rSlider, again, is a class defined in MATLAB. And in particular, it is a subclass of the component container class, which is what you should use when you create custom components in MATLAB. So by subclassing the component container class, you simplify the management of the lifecycle of this UI component. And you will also be able to add it to the component library of App Designer. So this class has some properties, some public properties, which enable you, for example, again to customize the colors, and the values, and the range of this range slider, and then by subclassing the component container class, this forces you to define two methods of this object. So one is the setup method and the other one is the update method.

    So let's have a look at the setup method. This is a function that gets executed when we create an instance of rSlider. And inside here, we create all the UI components that create our custom component. So in this case, we create a UI grid layout object, which will be the host for another object that is the UI HTML object, which will be our link to the externally defined component. So for those of you who are not familiar with UI HTML, let's have a look at the documentation for this component.

    So UI HTML again is a UI component which essentially displays some HTML content. So this could be some fancy text, as shown in this example, which is specified as a text inside the HTML source property of our UI HTML object, or it can be some more complicated HTML code that you define in some external file.

    So here, for example, in this other example of UI HTML, we have a video player and an audio player which are defined inside an HTML file. And the idea is that inside this HTML file, you can also link or include some JavaScript code to define the behavior of these HTML components as well as some CSS code to customize the graphics, so the appearance of our custom component.

    So inside my rSlider component, I have created a UI HTML object which links to an HTML source file, which is called our rSlider.html, which contains the actual code for creating the slider. And the HTML component has also a callback associated to it. So when it receives an event from the range slider component that is defined in JavaScript, then I can act on it inside MATLAB.

    So to say it again, the JavaScript part of the range slider component defines the behavior so it can notify, for example, when-- it can notify MATLAB when I operate with the slider so when I shift the values of the slider, and I get notified in MATLAB, and I can take action on it. So in this case, I want to execute a callback function that is defined inside this class definition. The callback function is called onSliderShift. And it is defined right here.

    All it does is to notify any listeners of this class of this object about the event that has a cure. So when I change the selection of my slider, I trigger a callback that runs in the JavaScript file and which then notifies MATLAB about the event. And MATLAB in turn from this class definition notifies anyone who is listening to the range slider that this event has occurred. And we also store the new selected range as a property of this class.

    So let's take a closer look now at the HTML file. So this is pretty concise. We create the range slider, so they're the components, with HTML code. And then we reference a CSS file, again, where we define some graphics properties of this range slider. And most importantly, we'll link a JavaScript file, which again is where we define the behavior of the range slider.

    So for example, when I shift the values of the slider, I update the numeric values on the left and the right. I don't know if you noticed that. So this is something that is managed inside the JavaScript file. And inside this JavaScript file, again, we define a set of functions, which takes as input the UI HTML component that we created in MATLAB. And inside the setup function, we are able to connect with MATLAB by, for example, noticing about specific events that occurred.

    So for example, this is a custom-- this is a callback function defined in JavaScript that is triggered when we change the slider values. And inside here, we send a notification to MATLAB about this event that has occurred. So this is the event that I was talking about which was received by the UI HTML component in MATLAB.

    And just to complete the picture about this class definition, the update method is a function that gets executed every time I change the value of a public property that is defined in this class. So for example, the color, the values, or the range of the slider. So when I do that, every time I will go back to my HTML component, which is connected to the range slider and the JavaScript portion of the component. And in that way, I'm able to notify the external component about changes that are made in MATLAB. So for example, when I change the range from MATLAB, I will have to act on the external components through JavaScript.

    So this is how you create a range slider using HTML, CSS, and JavaScript and incorporate it inside your MATLAB app as a custom component. In summary, you first create a range slider, again using HTML, CSS, and JavaScript, independently of MATLAB. And then you proceed by modifying the JavaScript code to implement the interaction with MATLAB. And this involves creating a set of function inside which you add event listeners for stuff happening in MATLAB, like updating the color properties, to which your component can respond and vice versa send data to MATLAB through events, for example when the selected range is interactively changed.

    After that, in MATLAB, you define a class that inherits properties and methods from the component container class. And in here, you create a UI HTML object which provides an interface with the HTML source. This means that through the UI HTML component, I can send data from MATLAB to the HTML object as well as receive data and act accordingly with a callback function. Finally, you create an instance of this class inside a UI figure-based application to implement this custom component.

    There's an additional step that I haven't showed to you. And this is how to include this custom component inside an App Designer component library. I'm going to show you this with our next example. And our next example is that of the custom button that I mentioned before. In this case, the idea is that we want a button that is customizable in several additional ways with respect to the built-in UI button in MATLAB. For example, we want to be able to modify its shape, so make it circular, play with its borders, highlight the color, et cetera, so let's first see the final implementation and then deep dive into the technical details to understand how it was created.

    I find myself again inside App Designer. But what I would like you to focus your attention now on is the component library on the left. In particular, in here I have my custom component, so that's the HTML button, which I can simply drag and drop inside my application. On the right in the component browser, I have all the public properties that have been exposed and which allow me to customize the appearance of this button.

    So for example, I can play with the border radius. I can set it to a very high value, which will make the button circular in this case. And then for another example, I can play with the color of the borders. So for example, I would like to make the button border red so I can do that. And I can also customize the thickness of this button border so I can make it to 30. And this is just to give you a flavor of the ways in which we can customize a UI button with respect to MATLAB. So there are many more additional ways with this custom component.

    Considering the app that we have showed you so far, me, Ken, and Tijana, there are a few instances of this HTML button inside the application. Again, this is the play sound button on the bottom right as well as the buttons to manage the appearance of the signal view's plots. So how were these created?

    Considering the application inside App Designer and switching to the code view, we see that, in the startup function, I have created an instance of HTML button and have leveraged all the public properties to customize the button in the way I've wanted.

    Let's look again the class definition of this custom component. So here HTML button inherits again from the component container class. And it has a list of public properties which enable us to customize the graphics appearance of the button. And since it inherits from the component container class, it must define a setup method and an update method.

    So the setup method gets executed whenever we instantiate a new object of this class. And essentially, it contains the code that creates the graphical components which make up this custom component. So these include the UI grid layout object as well as the UI HTML object that now links to a different source file. So now the UI HTML object links to the button.html source file, which simply creates the button using some HTML code. And it also links to an external JavaScript file that defines the behavior of the button as well as another CSS file to define some additional customizations.

    In the update method-- so this gets triggered whenever we update the value of one of these public properties. So what we do in this case is we collect all these values and we create a structure which we then pass on to the UI HTML object which then transfers it to the HTML source file that is connected to the JavaScript file.

    So essentially, we are passing all the information that is contained in the public properties to the external component. The way we do this is through the UI HTML object and the data property. So we create a structure which contains all the updated values of our properties. And then inside the JavaScript file, we execute the Update button callback function, which gets executed whenever there is a change in the data property of the UI HTML component defined in MATLAB.

    So here we added a listener for that event. And essentially, in this function, we leverage all the information contained in the structure, which contains all the values of My Public Properties in the HTML button component in MATLAB. And inside here, essentially, we proceed by customizing the appearance of the button.

    So this is where it gets done in practice inside the JavaScript file. To add this component to the component library inside App Designer, I can simply call the App Designer.customcompenent.configureMetadata function and providing as input the name of the class definition file. So that's HTMLbutton.m. What I will get is a small user interface which enables me to provide some information about the component, so a description, the author's name, the email. And then by clicking OK, I will eventually add it to the component library inside App Designer. And I can also add it to the path so that, next time, I will find it there right away.

    Using this custom component, one can then go on and develop more complex structures like a Customize Tab group. The one I showed you in the app is an example but here are a couple of more examples. This customizable HTML button is available for download from the File Exchange so you can right away play with it and incorporate it into your MATLAB apps if you wish. You can also use it as an example to learn how to implement the interaction between MATLAB and an external JavaScript and HTML component. Now back to you, Ken, to discuss the future of another tool that we have on the File Exchange and that is the GUI Layout Toolbox.

    KEN DEELEY: Thanks. Many advanced MATLAB app developers use the GUI Layout Toolbox within their apps. This is a layout management toolbox for MATLAB app development. For example, you might want to create a grid layout with flexible dividers. Here is a version of the audio analyzer application with a flexible divider separating the time and frequency views. As you can see, we can drag the flexible divider to separate the time view on the left-hand side from the frequency view on the right-hand side.

    Components in the GUI Layout Toolbox started to support web graphics from the R2020b release. Most simple layouts worked in this version. Flexible layouts started working in web graphics in R2022a with the addition of UI control supports in web figures. In R2022b, most layout toolbox features are compatible with web graphics. And in 2023, a new release of the Toolbox is planned for a full compatibility with web graphics.

    Next, back to you, Tijana, to discuss the model view controller software architecture pattern for app development.

    TIJANA ROHRER: Hello again. Next, we will take a look at some more advanced app development strategies. So far, we've seen how to create apps in App Designer. So if you want to create a large app, which you will maintain over time together with some colleagues, it might be better to develop it programmatically using the object-oriented from.

    The model-view-controller, or MVC for short, is a design pattern that helps you create code that is modular, easily extensible, and maintainable. So it provides a set of recipes telling you how to split your code into modules with clearly defined responsibilities and few dependencies between them. Now having few dependencies ensures that when you make a change or implement a new feature, you do not have to edit a large number of files and functions as this typically leads to bugs and mistakes.

    Now in model-view-controller, you split your app into three types of modules. You have a model which contains the data and the functions you perform on that data. So this is basically the programmatic backend, the code that you would have even if you were to not have any graphical interface at all. And then you have the modules for the graphical part. So one of them is the view.

    So the view deals with the representation of the data. So for example, the view will contain graphs or tables that show the data to the user. So the user can see the view but they can't really interact with it. Now for interaction, we have the controller module. So it contains the kind of graphical parts with which the user can interact such as sliders, buttons, or edit boxes.

    So let's take a look at this in MATLAB. Over here, I have a new version of the app that we have seen before built programmatically using model-view-controller. In this app, is the arrow pointing to the currently played moment of the signal. And the other one is this that is flashing while the signal is being played. We can see the code over here in the folder MVC.

    Now this contains the time domain view, frequency domain view, and region controller. Those are the three of the main classes. So the time domain view is responsible for the view at the left, the frequency domain view for the view on the right, and then the controller for these controls shown at the bottom of the screen.

    Now to add these arrows showing which time is currently being played, it is only necessary to edit the time domain view file. So there is no need, for example, to link this directly to the button, which would, for example, be necessary when you use app design. And on the other hand, to add that [CHIRPING] that is flashing here while the signal is playing, you only need to edit the region controller file so the views remain completely unaffected. And this makes the code more maintainable and it makes it easier to split the code between different developers.

    To learn more about MVC, you can read the technical article co-authored by Ken or visit the two-day training. Here we will teach you using a similar sound app to the one you have seen before how to split up your code into these easy to maintain MVC modules.

    GIANLUCA CARNIELLI: Thank you, Tijana. Up until now, you've learned about the tools and techniques that you can use in MATLAB to develop professional applications. Now let's discuss how to operationalize these apps. So you could build an app for yourself to streamline your workflow. But more often you need to deploy it. Let's understand why engineers are looking to deploy their apps.

    There are really four main reasons. In the first case, you want to share your MATLAB programs with users who do not have or use MATLAB on a daily basis. This could be your team colleagues, partners, clients, suppliers, collaborators. Another very popular reason is to integrate your MATLAB programs, either in the form of standalone executables or web apps, with your other programs that have been developed using Java, Python, C++, .NET, et cetera.

    You also want to distribute the generated artifacts without having to worry about licensing requirements, so royalty free. And finally, you want to ensure that the shared application is encrypted to protect your intellectual property. The options here are to create a standalone executable or a web app. Let's take a closer look at the deployment process.

    For standalone executables, you can either generate a program to be installed on the end user machine or you can generate a Docker image which contains everything that is needed to run the application. And the second option is currently supported only on Linux platforms. The executable is encrypted and so the intellectual property is protected.

    One key aspect about the deployed application is that it will require the MATLAB runtime to run. So the MATLAB runtime is a set of shared libraries that the app relies on to operate. And it can be included directly inside the application at the deployment stage or it can be downloaded when installing the application on the user's machine. This deployment procedure involves the developer generating the standalone executable, hand it over to the end user or the person who holds the admins right on the end user's machine, and install it together with the MATLAB runtime.

    For web apps, the workflow is similar. First, you create the application using MATLAB and App Designer. And one note I would like to make here is that you can also include Simulink models in your application. So for example, you can create simulation dashboards. The application is then compiled using MATLAB Compiler and handed over to the IT system administrator who puts it on a server.

    The server hosts the MATLAB Web App server that is the infrastructure needed to run the application and to handle the user sessions. And it has the MATLAB runtime as well as all the apps developed with MATLAB so you don't need to install any software on the end user's machine. The end user will simply run the app via a web browser. Here's how it looks like for the case of the application that we've seen so far.

    Here I've connected to a remote server via a web browser. And the server hosts a bunch of MATLAB apps, including the one that we have seen, the signal browser app. So the idea is that the app looks the same like it does in App Designer. So here I can use the app in exactly the same way as on my desktop. So for example, I can play the sound.

    I am able to load data if I want so the experience should be the same. One clear advantage of deploying to a web app is that no installation is required on the end user's machine, plus all end users are automatically using the latest version of the application. So managing the updates is easier.

    One final note I'd like to make about web apps is that you can already test out this workflow if you're using MATLAB Compiler to generate standalone executables. Indeed, the MATLAB compilers comes with what is called the development version of the web app server which has limited functionalities compared to different product and is recommended for prototyping and testing web apps. In the slide, I've included a link to our documentation, which provides more details and installation guidelines.

    So that is all I wanted to say regarding the deployment of apps and it brings me towards the end of this seminar. So I'll take this occasion to summarize everything that me, Ken, Tijana have showed you today. We started by looking with Ken at the different frameworks available in MATLAB for developing applications with a graphical user interface. This includes MATLAB itself, which enables a programmatic approach, GUIDE, which is soon going away, and App Designer, which we can consider to be the web-enabled evolution of GUIDE with a significant number of improvements.

    Apps that have been developed with GUIDE will continue working in future releases but it will not be possible to further develop them. And for this reason, you should consider migrating them to App Designer or to MATLAB files. To help you with this, we recommend using the migration tool that we've made available. That is the tool that Ken has mentioned and demonstrated through an example in today's webinar. We have then moved on sharing some tips and giving some advice in terms of how to migrate complex applications. For example, using object-oriented programming.

    In this context, Tijana has presented some of the tools that are available in MATLAB for effectively managing your code base like MATLAB projects, the code analyzer, report tools, source control integration, and the testing framework. My advice is to use these tools regardless of the complexity of your application. They work great and they are very helpful to help you manage your software development process. Together with me, we've looked at some strategies for migrating Java based and com-based components in your MATLAB applications to the new JavaScript framework.

    MathWorks has now implemented several UI capabilities that were once available only through javacomponent, JavaFrame, and ActiveX so hopefully the migration shouldn't be a big deal. But in the case where the capability is still missing, please let us through the survey that you can take on our website. If you're looking to incorporate any external component that is not available in MATLAB but is available through HTML and JavaScript, then you have a way to incorporate it into your app through the UI HTML component and wrap it in a custom component in the way that I've showed you. As a reminder, an example of this procedure is available for download from the File Exchange.

    After that, Tijana took over my application and put the cherry on the cake. What she did is she rewrote the application by applying the model-view-controller design pattern which separates the model the view and the controller parts of the application from a code perspective. This is the state of the art for graphical applications and it is the way forward for developing scalable, maintainable, and robust code. Towards the end, I showed you how to operationalize MATLAB applications, in particular how you can deploy them to standalone executables or web applications, enabling you to share your application with other people while preserving the intellectual property.

    And last but not least, throughout the webinar, we've presented additional tools and resources that you can leverage to help yourself ramp up and get practice on this subject and get the support that you need. These include our training courses and our consulting services who have managed several migration products and are the real technical experts on the subject. With that, on behalf of myself, Ken, and Tijana, I would like to thank you very much for your attention. And I would invite you to ask any questions that you may have in the Q&A panel. Thank you again.

    View more related videos