In an earlier post, I mentioned that most Matlab uicontrols support HTML strings. Unfortunately, HTML is not supported in multi-line editbox contents. Today I will show how this limitation can be removed for a multi-line editbox, thereby enabling rich contents (enabling HTML for a single-line editbox needs a different solution).
We first need to get the editbox’s underlying Java object, as explained in my previous article about the findjobj utility. Since a multi-line editbox is contained within a scroll-pane, we need to dig within the scrollpane container to find the actual editable area object:
% Create a multi-line (Max>1) editbox uicontrol hEditbox = uicontrol('style','edit', 'max',5, ...); % Get the Java scroll-pane container reference jScrollPane = findjobj(hEditbox); % List the scroll-pane's contents: >> jScrollPane.list com.mathworks.hg.peer.utils.UIScrollPane[,0,0,100x50,...] javax.swing.JViewport[,1,1,81x48,...] com.mathworks.hg.peer.EditTextPeer$hgTextEditMultiline[,0,0,81x48,...,kit=javax.swing.text.StyledEditorKit@ce05fc,...] com.mathworks.hg.peer.utils.UIScrollPane$1[,82,1,17x48,...] com.sun.java.swing.plaf.windows.WindowsScrollBarUI$WindowsArrowButton[,0,31,17x17,...] com.sun.java.swing.plaf.windows.WindowsScrollBarUI$WindowsArrowButton[,0,0,17x17,...] com.mathworks.hg.peer.utils.UIScrollPane$2[,0,0,0x0,...] com.sun.java.swing.plaf.windows.WindowsScrollBarUI$WindowsArrowButton[,0,0,0x0,...] com.sun.java.swing.plaf.windows.WindowsScrollBarUI$WindowsArrowButton[,0,0,0x0,...]
In this listing, we see that jScrollPane contains a JViewport and two scrollbars (horizontal and vertical), as expected from standard Java scroll-panes. We need the internal hgTextEditMultiline object:
jViewPort = jScrollPane.getViewport; jEditbox = jViewPort.getComponent(0);
The retrieved jEditbox reference, is an object of class com.mathworks.hg.peer.EditTextPeer$hgTextEditMultiline, which indirectly extends the standard javax.swing.JTextPane. The default Matlab implementation of the editbox uicontrol simply enables a multi-line vertical-scrollable text area using the system font. However, the underlying JTextPane object enables many important customizations, including the ability to specify different font attributes (size/color/bold/italic etc.) and paragraph attributes (alignment etc.) for text segments (called style runs) and the ability to embed images, HTML and other controls.
Setting rich contents can be done in several alternative ways. From easiest to hardest:
Setting page URL
Use the setPage(url) method to load a text page from the specified URL (any pre-existing editbox content will be erased). The page contents may be plain text, HTML or RTF. The content type will automatically be determined and the relevant StyledEditorKit and StyledDocument will be chosen for that content. Additional StyledEditorKit content parsers can be registered to handle additional content types. Here’s an example loading an HTML page:
jEditbox.setPage('http://tinyurl.com/c27zpt');
where the URL’s contents are:
<html><body> <img src="images/dukeWaveRed.gif" width="64" height="64"> This is an uneditable <code>JEditorPane</code>, which was <em>initialized</em> with <strong>HTML</strong> text <font size=-2>from</font> a <font size=+2">URL</font>. <p>An editor pane uses specialized editor kits to read, write, display, and edit text of different formats. The Swing text package includes editor kits for plain text, HTML, and RTF. You can also develop custom editor kits for other formats. <script language="JavaScript" src="/js/omi/jsc/s_code_remote.js"></script> </body></html>

Matlab editbox initialized from an HTML webpage URL
Setting the EditorKit and ContentType
Set the requested StyledEditorKit (via setEditorKit()) or ContentType properties and then use setText() to set the text, which should be of the appropriate content type. Note that setting EditorKit or ContentType clears any existing text and left-aligns the contents (hgTextEditMultiline is center aligned by default). Also note that HTML <div>s get their own separate lines and that <html> and <body> opening and closing tags are accepted but unnecessary. For example:
jEditbox.setEditorKit(javax.swing.text.html.HTMLEditorKit); % alternative: jEditbox.setContentType('text/html'); htmlStr = ['<b><div style="font-family:impact;color:green">'... 'Matlab</div></b> GUI is <i>' ... '<font color="red">highly</font></i> customizable']; jEditbox.setText(htmlStr)

HTML contents in a Matlab editbox
Let’s show another usage example, of an event log file, spiced with icons and colored text based on event severity. First, define the logging utility function (the icon filenames may need to be changed based on your Matlab release):
function logMessage(jEditbox,text,severity) % Ensure we have an HTML-ready editbox HTMLclassname = 'javax.swing.text.html.HTMLEditorKit'; if ~isa(jEditbox.getEditorKit,HTMLclassname) jEditbox.setContentType('text/html'); end % Parse the severity and prepare the HTML message segment if nargin<3, severity='info'; end switch lower(severity(1)) case 'i', icon = 'greenarrowicon.gif'; color='gray'; case 'w', icon = 'demoicon.gif'; color='black'; otherwise, icon = 'warning.gif'; color='red'; end icon = fullfile(matlabroot,'toolbox/matlab/icons',icon); iconTxt =['<img src="file:///',icon,'" height=16 width=16>']; msgTxt = [' <font color=',color,'>',text,'</font>']; newText = [iconTxt,msgTxt]; endPosition = jEditbox.getDocument.getLength; if endPosition>0, newText=['<br/>' newText]; end % Place the HTML message segment at the bottom of the editbox currentHTML = char(jEditbox.getText); jEditbox.setText(strrep(currentHTML,'</body>',newText)); endPosition = jEditbox.getDocument.getLength; jEditbox.setCaretPosition(endPosition); % end of content end
Now, let’s use this logging utility function to log some messages:
logMessage(jEditbox, 'a regular info message...'); logMessage(jEditbox, 'a warning message...', 'warn'); logMessage(jEditbox, 'an error message!!!', 'error'); logMessage(jEditbox, 'a regular message again...', 'info');

Rich editbox contents (a log file)
HTML editboxes are normally editable, images included. In actual applications, we may wish to prevent editing the display log. To do this, simply call jEditbox.setEditable(false).
Setting a hyperlink handler is easy: first we need to ensure that we’re using an HTML content-type document. Next, set the editbox to be uneditable (hyperlinks display correctly when the editbox is editable, but are unclickable), using jEditbox.setEditable(false). Finally, set the callback function in the editbox’s HyperlinkUpdateCallback property:
jEditbox.setContentType('text/html'); jEditbox.setText('link: <a href= "http://UndocumentedMatlab.com">UndocumentedMatlab.com</a>'); jEditbox.setEditable(false); hjEditbox = handle(jEditbox,'CallbackProperties'); set(hjEditbox,'HyperlinkUpdateCallback',@linkCallbackFcn); function linkCallbackFcn(src,eventData) url = eventData.getURL; % a java.net.URL object description = eventData.getDescription; % URL string jEditbox = eventData.getSource; switch char(eventData.getEventType) case char(eventData.getEventType.ENTERED) disp('link hover enter'); case char(eventData.getEventType.EXITED) disp('link hover exit'); case char(eventData.getEventType.ACTIVATED) jEditbox.setPage(url); end end

Hyperlink in editbox
Setting the style runs programmatically
Setting the styles programmatically, one style run after another, can be done via the text-pane’s Document property object. Individual character ranges can be set using the Document’s setCharacterAttributes method, or entire style runs can be inserted via insertString. Attributes are updated using the static methods available in javax.swing.text.StyleConstants. These methods include setting character attributes (font/size/bold/italic/strike-through/underline/subscript/superscript and foreground/background colors), paragraph attributes (indentation/spacing/tab-stops/bidi), image icons and any Swing Component (buttons etc.). Here is the end result:

Rich editbox contents: images, controls & font styles
Note that if a styled multi-line editbox is converted to a single-line editbox (by setting hEditbox’s Max property to 1), it loses all style information, embedded images and components. Returning to multi-line mode will therefore show only the plain-text.
Related posts:
- Customizing listbox & editbox scrollbars Matlab listbox and multi-line editbox uicontrols have pre-configured scrollbars. This article shows how they can be customized....
- Customizing help popup contents The built-in HelpPopup, available since Matlab R2007b, has a back-door that enables displaying arbitrary text, HTML and URL web-pages....
- Customizing Matlab labels Matlab's text uicontrol is not very customizable, and does not support HTML or Tex formatting. This article shows how to display HTML labels in Matlab and some undocumented customizations...
- FindJObj - find a Matlab component’s underlying Java object The FindJObj utility can be used to access and display the internal components of Matlab controls and containers. This article explains its uses and inner mechanism....
- HTML support in Matlab uicomponents Matlab uicomponents support HTML and CSS, enabling colored items, superscript/subscript, fonts, bold/italic/underline and many other modifications...
- Spicing up Matlab uicontrol tooltips Matlab uicontrol tooltips can be spiced-up using HTML and CSS, including fonts, colors, tables and images...
Tags: FindJObj, GUI, Java, uicontrol
Print
|


[...] The timing is particularly opportune, after I have recently described how the Matlab Editbox can be customized by accessing its underlying Java object [...]