- Undocumented Matlab - https://undocumentedmatlab.com/blog -

Customizing uitree nodes – part 1

Posted By Yair Altman On August 25, 2010 | 21 Comments

In my previous posts, I introduced the semi-documented uitree function [3] that enables displaying data in a hierarchical (tree) control in Matlab GUI, and showed how it can be customized [4]. Today, I will continue by describing how specific uitree nodes can be customized.

To start the discussion, let’s re-create last week’s simple uitree:

% Fruits
fruits = uitreenode('v0', 'Fruits', 'Fruits', [], false);
fruits.add(uitreenode('v0', 'Apple',  'Apple',  [], true));
fruits.add(uitreenode('v0', 'Pear',   'Pear',   [], true));
fruits.add(uitreenode('v0', 'Banana', 'Banana', [], true));
fruits.add(uitreenode('v0', 'Orange', 'Orange', [], true));
 
% Vegetables
veggies = uitreenode('v0', 'Veggies', 'Vegetables', [], false);
veggies.add(uitreenode('v0', 'Potato', 'Potato', [], true));
veggies.add(uitreenode('v0', 'Tomato', 'Tomato', [], true));
veggies.add(uitreenode('v0', 'Carrot', 'Carrot', [], true));
 
% Root node
root = uitreenode('v0', 'Food', 'Food', [], false);
root.add(veggies);
root.add(fruits);
 
% Tree
figure('pos',[300,300,150,150]);
mtree = uitree('v0', 'Root', root);

User-created tree    User-created tree

User-created tree

Labels

Node labels (descriptions) can be set using their Name property (the second uitreenode data argument). Note that the horizontal space allotted for displaying the node name will not change until the node is collapsed or expanded. So, if the new name requires more than the existing space, it will be displayed as something like “abc…”, until the node is expanded or collapsed.

Node names share the same HTML support feature [5] as all Java Swing labels. Therefore, we can specify font size/face/color, bold, italic, underline, super-/sub-script etc.:

txt1 = '<html><b><u><i>abra</i></u>';
txt2 = '<font color="red"><sup>kadabra</html>';
node.setName([txt1,txt2]);

HTML-enriched tree nodes

HTML-enriched tree nodes

Icons

Tree-node icons can be specified during node creation, as the third data argument to uitreenode, which accepts an icon-path (a string):

iconPath = fullfile(matlabroot,'/toolbox/matlab/icons/greenarrowicon.gif');
node = uitreenode('v0',value,name,iconPath,isLeaf);

Tree node icons can also be created or modified programmatically in run-time, using Matlab’s im2java [6] function. Icons can also be loaded from existing files as follows (real-life programs should check and possibly update jImage’s size to 16 pixels, before setting the node icon, otherwise the icon might get badly cropped; also note the tree-refreshing action):

jImage = java.awt.Toolkit.getDefaultToolkit.createImage(iconPath);
veggies.setIcon(jImage);
veggies.setIcon(im2java(imread(iconPath)));  % an alternative
 
% refresh the veggies node (and all its children)
mtree.reloadNode(veggies);

Setting node icon

Setting node icon

Behavior

Nodes can be modified from leaf (non-expandable) to parent behavior (=expandable) by setting their LeafNode property (a related property is AllowsChildren):

set(node,'LeafNode',false);  % =expandable
node.setLeafNode(0);  % an alternative

One of the questions I was asked [7] was how to “disable” a specific tree node. One way would be to modify the tree’s ExpandFcn callback. Another way is to use a combination of HTML rendering and the node’s AllowsChildren property:

label = char(veggies.getName);
veggies.setName(['<html><font color="gray">' label]);
veggies.setAllowsChildren(false);
t.reloadNode(veggies);

Disabled node

Disabled node

Another possible behavioral customization is adding a context-menu to a uitree [8]. We can set node-specific tooltips using similar means.

Answering a reader’s request [9] from last week, tree nodes icons can be used to present checkboxes, radio buttons and other similar node-specific controls. This can actually be done in several ways, that will be explored in next week’s article.

There are numerous other possible customizations – if readers are interested, perhaps I will describe some of them in future articles. If you have any special request, please post a comment below [10].

Categories: GUI, Java, Medium risk of breaking in future versions, Semi-documented feature


21 Comments (Open | Close)

21 Comments To "Customizing uitree nodes – part 1"

#1 Comment By Amy On August 29, 2010 @ 1:21 pm

How can you get the path from the node if you are using uitree for a file system? Also very interested in using check boxes on the nodes.

#2 Comment By Yair Altman On August 31, 2010 @ 1:52 pm

@Amy – here’s how to get the file-system path from your tree:

selectedNodes = tree.getSelectedNodes;
nodePath = selectedNodes(1).getPath.cell;
subPathStrs = cellfun(@(p) [p.getName.char,filesep],nodePath,'un',0);
pathStr = strrep([subPathStrs{:}], [filesep,filesep],filesep);

Re checkbox nodes – look at tomorrow’s article…

#3 Comment By Salvatore On December 3, 2013 @ 5:51 am

Hello Yair
I’d like to get back the whole path of a tree’s node in a structure following the classic way to display it:
S.S1.S1(2).signal.sig
while, with the code you suggested before I get instead:

pathStr =
S\S1\S1(2)\signal\sig\

Here’s your code:

selectedNodes = tree.getSelectedNodes;
nodePath = selectedNodes(1).getPath.cell;
subPathStrs = cellfun(@(p) [p.getName.char,filesep],nodePath,'un',0);
pathStr = strrep([subPathStrs{:}], [filesep,filesep],filesep);

Can you please help me?
Salvatore

#4 Comment By kpmandani On September 8, 2014 @ 12:10 pm

Where do we add this small mentioned code to get the uitree file location. Also do we need to have any other file besides the above code of uitree to get this file location of a file. I tried adding the small code mentioned in this comment inside the code of Customizing uitree nodes – part 2. But it didnt give me any output anywhere. Can you suggest me how to go about it?

#5 Comment By kpmandani On September 8, 2014 @ 12:26 pm

I am using example of [17]….’built in classes’ example. I am using it because I want tick as per how it is mentioned in the output of that code. Please suggest

#6 Comment By Prasath On August 29, 2010 @ 9:49 pm

Simply excellent…. This is what I am looking for long. Thanks a bunch.

#7 Comment By J-Gui On November 7, 2010 @ 2:47 pm

Hello Yair,

Thank you very much for all your usefull explanations.

I have to implement node-specific tooltips. As you mention, I try to follow the uitree context menu example, and also look at tree-node’s renderer, but without success.

So I would be very insterested in getting some examples.

Thanks a lot!

#8 Comment By David On April 18, 2014 @ 3:55 am

Hi Yair,

Is it possible to change the background color of the scrollpane where the tree is parented from the default white? Ideally I would like to be able to set the background to an image but a solid colour will suffice as second best.

Thanks a lot for all your good work.

Regards
David

#9 Comment By Yair Altman On April 18, 2014 @ 8:45 am

mtree.getTree.setBackground(java.awt.Color(1,0.5,0))  % orange

#10 Comment By Masoud On July 20, 2014 @ 10:34 am

Hi
how can i define callback to each mode?

#11 Comment By Yair Altman On July 25, 2014 @ 12:01 pm

@Masoud – an example for using a node-selection callback was shown in the [17] of this series.

#12 Comment By Rafael Aésio On September 30, 2014 @ 8:24 am

good Morning
Dear Yair.

For the code developed early in the article, how can I do to clicking with the mouse in a specific table in access (.mat) in the main program directory, where I can enter data.

Very good your articles.

#13 Comment By Yair Altman On September 30, 2014 @ 10:21 pm

@Rafael – I do not know what you mean. I suggest that you get an English speaker to explain better.

No sé lo que quieres decir. Sugiero que usted obtenga un orador Inglés para explicar mejor.

#14 Comment By Eric On January 24, 2017 @ 10:26 am

I know this topic is pretty old, but maybe someone is still watching it.
I have two uitrees and i want to copy Chosen nodes of the first tree to the second.
I tried that for the last two days and still don’t have an answer. If someone had an
idea for this, i would be very thankful.

#15 Comment By Yair Altman On January 26, 2017 @ 10:34 am

@Eric – you (and anyone else who is reading this) are always welcome to contact me by email (altmany at gmail) for a short consultancy.
Spending a bit of money on expert advise that could save you two days of work, could be a very fair bargain…

#16 Comment By Dennis V On March 20, 2017 @ 5:20 pm

Hello Yair!
Many thanks for this explanations!

Is it possible to save the whole tree as a struct?

#17 Comment By Yair Altman On March 22, 2017 @ 10:53 am

@Dennis – I am not aware of any method to do this directly. I think you need to parse the entire tree recursively to do this.

You’re welcome to create a utility that does this, and if you upload it to the Matlab File Exchange then I’d be happy to reference it here.

#18 Comment By Christos Oreinos On January 24, 2019 @ 11:38 am

Hello Yair,

Are you aware of any method to format the node text of uitrees created after MATLAB documented the functionality, starting with R2017b? Html tags do not work anymore.

Thanks and regards.

#19 Comment By Yair Altman On January 24, 2019 @ 11:59 am

@Christos – uitree is only documented for uifigures (i.e. HTML figures). As strange as this may sound, MathWorks have prevented the use of HTML customizations in uifigures. So if you want HTML formatting in your figure GUI, you’re forced to use legacy Java-based figures, at least until such time as MathWorks opens up the uifigure components’ underlying HTML/CSS/JS to user customizations in some possible future release.

Alternatively, you can use CSS to customize the appearance of tree nodes in uifigures [18], although this is admittedly much more cumbersome and difficult (not to mention undocumented/unsupported).

#20 Comment By Christos Oreinos On January 25, 2019 @ 9:42 am

Thank you for the prompt reply. It is sad that MathWorks is so slow properly integrating uitrees (and other java elements).

#21 Comment By Yair Altman On January 25, 2019 @ 11:05 am

@Christos – uitree is a Java component only on legacy (Java-based) figures. On the new (HTML-based) uifigures uitree is implemented using a radically different (non-Java) implementation that uses HTML/JavaScript/CSS. It is not possible to integrate Java components in uifigures due to browser limitations outside of MathWorks’ control: It used to be possible to include Java controls in webpages, until the major browsers stopped supporting Java in recent years. Since uifigures are little more than a webpage displayed within a browser (specifically, Chromium-based [19]) window, it is impossible to use Java components within them (caveat: JavaFX is supported, but that entails security restrictions on native end-user browsers and would have required a drastic code rewrite anyway, so MW understandably decided to skip this route and go for a pure HTML/JS/CSS implementation).

The bottom line is that the only possible customization to uifigure contents is via JavaScript/CSS — this is currently blocked in Matlab, but hopefully MW will remove this restriction some day.


Article printed from Undocumented Matlab: https://undocumentedmatlab.com/blog

URL to article: https://undocumentedmatlab.com/blog/customizing-uitree-nodes

URLs in this post:

[1] Image: http://undocumentedmatlab.com/feed/

[2] email feed: http://undocumentedmatlab.com/subscribe_email.html

[3] uitree function: https://undocumentedmatlab.com/blog/uitree/

[4] customized: https://undocumentedmatlab.com/blog/customizing-uitree/

[5] HTML support feature: https://undocumentedmatlab.com/blog/html-support-in-matlab-uicomponents/

[6] im2java: http://www.mathworks.com/access/helpdesk/help/techdoc/ref/im2java.html

[7] asked: https://undocumentedmatlab.com/blog/uicontrol-callbacks/#comment-388

[8] adding a context-menu to a uitree: https://undocumentedmatlab.com/blog/adding-context-menu-to-uitree/

[9] request: https://undocumentedmatlab.com/blog/customizing-uitree/#comment-15781

[10] below: https://undocumentedmatlab.com/blog/customizing-uitree-nodes/#respond

[11] Uitab colors, icons and images : https://undocumentedmatlab.com/blog/uitab-colors-icons-images

[12] Figure toolbar components : https://undocumentedmatlab.com/blog/figure-toolbar-components

[13] Customizing uitree nodes – part 2 : https://undocumentedmatlab.com/blog/customizing-uitree-nodes-2

[14] Customizing uitree : https://undocumentedmatlab.com/blog/customizing-uitree

[15] An interesting uitree utility : https://undocumentedmatlab.com/blog/interesting-uitree-utility

[16] Uitable customization report : https://undocumentedmatlab.com/blog/uitable-customization-report

[17] : http://undocumentedmatlab.com/blog/customizing-uitree-nodes-2

[18] : https://undocumentedmatlab.com/blog/customizing-web-gui-uipanel

[19] : https://www.teamdev.com/jxbrowser

Copyright © Yair Altman - Undocumented Matlab. All rights reserved.