Customization hacks reported on this blog last year (part 1, part 2) may fail in some cases due to the changing nature of the undocumented internals. Some examples are the way by which we can extract the uifigure’s URL (which changed in R2017a), the ability to display and debug uifigures in a standard webbrowser with associated dev tools (which seems to have stopped working in R2017b), and the way by which we can extract the Dijit reference of displayed uicontrols.
Greatly assisting in this respect is Iliya Romm, who was the guest blogger for part 2 of this series last year. Iliya co-authored the open-source (GitHub) mlapptools toolbox, which enables accessing and customizing uifigure components using standard CSS, without users having to bother about the ugly hacks discussed in the previous parts of the series. This toolbox is really just a single Matlab class (
mlapptools), contained within a single m-file (mlapptools.m). In addition to this class, the toolbox includes a README.md mark-down usage documentation, and two demo functions, DOMdemoGUI.m and TableDemo.m.
Here is the effect of using TableDemo, that shows how we can customize individual uitable cells (each uitable cell is a separate Dijit widget that can be customized individually):
The mlapptools class contains several static methods that can be used individually:
- textAlign(uielement, alignment) – Modify text horizontal alignment (
- fontWeight(uielement, weight) – Modify font weight (
'initial'), depending on availability in the font-face used
- fontColor(uielement, color) – Modify font color (e.g.
'rgb(255,0,0)'or other variants)
- setStyle(uielement, styleAttr, styleValue) – Modify a specified CSS style attribute
- aboutDojo() – Return version information about the Dojo toolkit
- getHTML(hFig) – Return the full HTML code of a uifigure
- getWebWindow(hFig) – Return a webwindow handle from a uifigure handle
- getWebElements (hControl) – Return a webwindow handle and a widget ID for the specified uicontrol handle
- getWidgetList(hFig, verboseFlag) – Return a cell-array of structs containing information about all widgets in the uifigure
- getWidgetInfo(hWebwindow, widgetId, verboseFlag) – Return information about a specific dijit widget
- setTimeout(hFig, seconds) – Override the default timeout (=5 secs) for dojo commands, for a specific uifigure
A few simple usage examples:
mlapptools.fontColor(hButton,'red') % set red text color mlapptools.fontWeight(hButton,'bold') % set bold text font mlapptools.setStyle(hButton,'border','2px solid blue') % add a 2-pixel solid blue border mlapptools.setStyle(hButton,'background-image','url(https://www.mathworks.com/etc/designs/mathworks/img/pic-header-mathworks-logo.svg)') % add background image
Once you download mlapptools and add its location to the Matlab path, you can use it in any web-based GUI that you create, either programmatically or with Add-Designer.
<span> that are the control’s visual representation on the webpage. An explanation of the underlying mechanism can be found in part 2 of this series of articles on uifigure customizations. Note that the mlapptools code is newer than the article and contains some new concepts that were not covered in that article, for example searching through Dijit’s registry of displayed widgets.
Note: web-based GUI is often referred to as “App-Designed” (AD) GUI, because using the Matlab App Designer is the typical way to create and customize such GUIs. However, just as great-looking GUIs could be created programmatically rather than with GUIDE, so too can web-based GUIS be created programmatically, using regular built-in Matlab commands such as uifigure, uibutton and uitable (an example of such programmatic GUI creation can be found in Iliya’s TableDemo.m, discussed above). For this reason, I believe that the new GUIs should be referred to as “uifigures” or “web GUIs”, and not as “AD GUIs”.
If you have any feature requests or bugs related to mlapptools, please report them on its GitHub issues page. For anything else, please add a comment below.
Very useful resource. Once again the user community is way ahead of MathWorks developers. It’s about time they sorted out the ability to customise the appearance of individual cells in a table.
Is there a way to import and use other JS UI libraries in MATLAB App Designer?