Customizing uitree nodes – part 1

In my previous posts, I introduced the semi-documented uitree function that enables displaying data in a hierarchical (tree) control in Matlab GUI, and showed how it can be customized. 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);
% Tree
mtree = uitree('v0', 'Root', root);

User-created tree    User-created tree

User-created tree


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 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>';

HTML-enriched tree nodes

HTML-enriched tree nodes


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 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(im2java(imread(iconPath)));  % an alternative
% refresh the veggies node (and all its children)

Setting node icon

Setting node icon


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 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]);

Disabled node

Disabled node

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

Answering a reader’s request 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.

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

Tags: , , , , ,

Bookmark and SharePrint Print

13 Responses to Customizing uitree nodes – part 1

  1. Amy says:

    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.

    • @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…

    • Salvatore says:

      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:
      while, with the code you suggested before I get instead:

      pathStr =

      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?

    • kpmandani says:

      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?

    • kpmandani says:

      I am using example of….’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

  2. Prasath says:

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

  3. J-Gui says:

    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!

  4. David says:

    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.


  5. Masoud says:

    how can i define callback to each mode?

  6. Rafael Aésio says:

    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.

    • @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.

Leave a Reply

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