Transparent JTree over gradient background

[bebbo duce]

Greetings everyone,
I'm having a lot of trouble with transparent JTrees,
I've extracted the portion of code that gives problems in a simple executable class:

package launch;

import java.awt.Color;
import java.awt.Container;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTree;
import javax.swing.SwingUtilities;

public class Test {
	public static void main(String[] args) {

		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				JFrame frame = new JFrame();

				JTree tree =  new JTree();
				tree.setBackground(new Color(0,0,0,0));

				GradientPane gradient = new GradientPane();
				gradient.add(tree);
				
				Container contentPane = frame.getContentPane();
				contentPane.add(gradient);
				
				frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
				frame.pack();
				frame.setLocationRelativeTo(null);
				frame.setVisible(true);
			}
		});
	}


	@SuppressWarnings("serial")
	public static class GradientPane extends JPanel {

		@Override
		protected void paintComponent( Graphics g )
		{
			super.paintComponent(g);
			int h = getHeight();
			int w = getWidth();

			GradientPaint gradientPaint = new GradientPaint(0, 0, Color.WHITE, 0, h, Color.LIGHT_GRAY);

			Graphics2D graphics2D = (Graphics2D)g;
			graphics2D.setPaint(gradientPaint);
			graphics2D.fillRect(0, 0, w, h);
		}
	}
}

The real piece of code inside my application is a little (a lot) more complicated, but i found out that a simple class like this one above presents similar problems to mine.
If you play a little with the tree (open and close various nodes several times) you will notice that the nodes tend to overlap one with another, giving an awful visual effect.
Please notice that this does not depend on the GradientPane that contains the tree, because it does the same with a normal JPane.
However, i found a workaround in the case of a non-gradient background, but that's not the thing i'm interested in.
The problem gets even worse if you put the GradientPane into a scrollPane and/or if you use a custom cellRenderer, you will get a real mess as you move around the scroll bars.
It's really important to me to have a gradient background under that tree, but it seems that my experience with swing is really not enough.

P.S.
If that could matter, i'm running on windows.
I don't know if the problem can be reproduced on other systems.
Thanks to everyone kind enough to help.

[bebbo duce]

(I'm very sorry about posting again but I cant' find a way to edit the previous post)

I found a dirty way to partially solve the issue, it seems to work ok if you add super.updateUI() at line 54.
The problem is, this solution doesn't work anymore if the tree is contained inside a scroll panel like this:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Container;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTree;
import javax.swing.SwingUtilities;

public class Test {
	public static void main(String[] args) {

		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				JFrame frame = new JFrame();

				JTree tree =  new JTree();
				tree.setBackground(new Color(0,0,0,0));

				GradientPane gradient = new GradientPane();
				gradient.setLayout(new BorderLayout());
				gradient.add(tree, BorderLayout.LINE_START);
				
				JScrollPane scroll = new JScrollPane(gradient);
				
				Container contentPane = frame.getContentPane();
				contentPane.add(scroll);
				
				frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
				frame.pack();
				frame.setLocationRelativeTo(null);
				frame.setVisible(true);
			}
		});
	}


	@SuppressWarnings("serial")
	public static class GradientPane extends JPanel {

		@Override
		protected void paintComponent(Graphics g)
		{
			int h = getHeight();
			int w = getWidth();

			GradientPaint gradientPaint = new GradientPaint(0, 0, Color.WHITE, 0, h, Color.LIGHT_GRAY);

			Graphics2D g2D = (Graphics2D)g;
			g2D.setPaint(gradientPaint);
			g2D.fillRect(0, 0, w, h);
			
			this.setOpaque(false);
			super.paintComponent(g);
			this.setOpaque(true);
		}
	}
}

Here's a list of the graphical issues this piece of code has:
1) sometimes, expanding and/or collapsing the nodes does not properly repaint the tree;
2) when the horizzontal scroll bar appears, the tree seems to lose it's transparent background in favour of a default grey one (this is courious beacuse in another piece of code, very similar to this one, this strange behaviour belongs to the vertical scroll bar instead);
3) scrolling the panel leaves awful after-images of the tree;
I am pretty sure that all of these have a common solution...

I apologize again for bothering, not being able to update the other post.
I'll be grateful to everyone able to help me.

[Gregg Bolinger]

Add this:

private class MyRenderer extends DefaultTreeCellRenderer {

        public Component getTreeCellRendererComponent(
                JTree tree,
                Object value,
                boolean sel,
                boolean expanded,
                boolean leaf,
                int row,
                boolean hasFocus) {

            super.getTreeCellRendererComponent(
                    tree, value, sel,
                    expanded, leaf, row,
                    hasFocus);

            setBackgroundNonSelectionColor(tree.getBackground());

            return this;
        }
    }

(The key is line 17)

And then tree.setCellRenderer(new MyRenderer());

[bebbo duce]

Thank you for your quick reply, however setting a custom renderer fails to solve my issues.
Transparent labels on the tree are very cool, but with them the problem gets even worse!
If you have time to spare, try and run that code i posted so you can understand what I mean.

Thanks anyway for your patience.

[Gregg Bolinger]

Yea, I saw the problem after playing with it a bit more. I don't know the exact cause of the issue, but the problem is that when the scrollpane decides to show up the panel doesn't realize it needs to repaint itself. So you see the distortion in the panel with all the lines and double tree nodes, etc. The fix for this is to simply call repaint() at the end of your paintComponent method. I'm posting my code here because even though your code was just a sample, there were a few little things that I think you can skip over. For example, the way you were adding the scrollpane to the gradient then the gradient to the content pane, etc. Just more than needed to be done. Anyway, here's code that works the way you want.

import javax.swing.*;
import javax.swing.tree.DefaultTreeCellRenderer;
import java.awt.*;

public class Test {

    public Test() {
        JFrame frame = new JFrame();

        JTree tree = new JTree();
        tree.setCellRenderer(new MyRenderer());
        tree.setBackground(new Color(0, 0, 0, 0));

        GradientPane gradient = new GradientPane();
        gradient.setLayout(new BorderLayout());
        frame.setContentPane(gradient);

        JScrollPane scroll = new JScrollPane(tree);
        scroll.setOpaque(false);
        gradient.add(scroll, BorderLayout.CENTER);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);

    }

    public static void main(String[] args) {

        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                new Test();
            }
        });
    }


    @SuppressWarnings("serial")
    public static class GradientPane extends JLayeredPane {

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            
            int h = getHeight();
            int w = getWidth();

            GradientPaint gradientPaint = new GradientPaint(0, 0, Color.WHITE, 0, h, Color.LIGHT_GRAY);

            Graphics2D g2D = (Graphics2D) g;
            g2D.setPaint(gradientPaint);
            g2D.fillRect(0, 0, w, h);
            repaint();
        }
    }

    private class MyRenderer extends DefaultTreeCellRenderer {

        public Component getTreeCellRendererComponent(
                JTree tree,
                Object value,
                boolean sel,
                boolean expanded,
                boolean leaf,
                int row,
                boolean hasFocus) {

            super.getTreeCellRendererComponent(
                    tree, value, sel,
                    expanded, leaf, row,
                    hasFocus);

            setBackgroundNonSelectionColor(tree.getBackground());

            return this;
        }
    }
}

[Gregg Bolinger]

BTW, repaint() is a better choice than updateUI, in case you were wondering. updateUI should only be used when changing the L&F.

[bebbo duce]

That worked perfectly.

Thank you very much, now my tree looks fine.

[bebbo duce]

Sorry to bother again, but your solution has a little problem...
Calling repaint() inside paintComponent() causes an infinite loop, that causes the continuos rapaint of the tree.
You can notice that when your example is running the cpu usage goes over 70-80%.

Any ideas on how to call repaint only once?
Thanks in advance.

[Gregg Bolinger]

bebbo duce wrote:Sorry to bother again, but your solution has a little problem...
Calling repaint() inside paintComponent() causes an infinite loop, that causes the continuos rapaint of the tree.
You can notice that when your example is running the cpu usage goes over 70-80%.

Any ideas on how to call repaint only once?
Thanks in advance.

:rolling: Yea, that makes sense since repaint() would inevitably call paintComponent. Hm, back to the drawing board. I'm afraid I'm at a loss about this one.

[bebbo duce]

I resolved adding an AdjustmentListener to the scroll pane and a TreeSelectionListener to the tree, both of whom call a repaint of the gradient pane.
Hope this will be useful to someone.