JSlider

[Dawid Skrzypczynski]

Hi,
At the beginning I paste simple image.


My question is there a chance to change these three elements ?

I want to add main own paintTrack and the element marked number one in this image.

[Rob Spoor]

Those are part of the UI. You can create a new SliderUI class and install that for the JSlider. It's not going to be easy though.

[Dawid Skrzypczynski]

Maybe somebody has some example ?

[Dawid Skrzypczynski]

What do you think about to create panel which background imitating paintTrack and adding to it some custom for example circle Graphics. Next i can add to my Graphics the mouseListener and write code to move this graphics this will imitate JSlider behavior.

but i don't know how this solutions will affect the application performance.

What do you think about this ?

[Darryl Burke]

No, don't reinvent JSlider. Extend the UI delegate of your chosen L&F and override paintThumb and paintTrack. Start with the JDK code, eliminate or substitute any private variables and/or method calls that aren't available in a subclass and then tweak it from there.

For example, for the default Metal L&F tou would extend MetalSliderUI. In case you didn't know, you can find the JDK source in the file src.zip in your JDK directory.

Why do you need to do this anyways?

[Dawid Skrzypczynski]

I just want to create Slider with my own graphics. I write this but the slider doesn't displayed. I really don't know how i should to started with this UI.

class frame extends JFrame {
	public frame() {
		setSize(500, 500);
		JSlider s = new JSlider();
		MSlider m = new MSlider();
		
		s.setUI(m);
		add(s);
	}
	
}
class MSlider extends MetalSliderUI {
	
	public void paintThumb(Graphics g) {
		Graphics2D g2d = (Graphics2D)g;
		g2d.setBackground(Color.RED);
	}
	public void paintTrack(Graphics g) {
		Graphics2D g2d = (Graphics2D)g;
		g2d.setBackground(Color.GREEN);
	}
}

[Darryl Burke]

Setting properties of a Graphics reference doesn't paint anything. Did you go through the code in the same methods of MetlaSliderUI?

Time for a couple of tutorials:
http://download.oracle.com/javase/tutorial/uiswing/painting/index.html
http://download.oracle.com/javase/tutorial/2d/index.html

For the thumb Icon, you can create an Icon and set it using

UIManager.put("Slider.horizontalThumbIcon", thumbIcon);
UIManager.put("Slider.verticalThumbIcon", thumbIcon);

See the Icon interface for the three methods you have to implement.

You didn't answer this:

Why do you need to do this anyways?

[Dawid Skrzypczynski]

Darryl look at this photo, i want to create something like this so i need t change those three elements but question is how ?

1. Standard JSlider
2. look who i wants to achieve

[Rob Camick]

I believe you need to add code like the following to your MSlider class:

    public static ComponentUI createUI(JComponent c)
    {
   	return new MSlider();
    }

Then you can add System.out.println(...) statements to your paintThumb() and paintTracks() methods to make sure they are being invoked.

[Darryl Burke]

Good luck developing this further for flexibility of usage. Oh, and you owe me a beer.

import java.awt.*;
import javax.swing.*;
import javax.swing.plaf.*;
import javax.swing.plaf.metal.MetalSliderUI;

public class SpecialSliderUI extends MetalSliderUI {

  private static final float[] fractions = {0.0f, 0.5f};
  private static final Color[] fillColors = {
    new Color(0x2687AE),
    new Color(0x1658AE)
  };
  private static final Color[] backColors = {
    new Color(0x7C818D),
    new Color(0x575C68)
  };
  private static final Paint hFillGradient = new LinearGradientPaint(0, 0, 0, 11,
          fractions, fillColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
  private static final Paint hBackGradient = new LinearGradientPaint(0, 0, 0, 11,
          fractions, backColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
  private static final Paint vFillGradient = new LinearGradientPaint(0, 0, 11, 0,
          fractions, fillColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
  private static final Paint vBackGradient = new LinearGradientPaint(0, 0, 11, 0,
          fractions, backColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
  private static final Stroke roundEndStroke = new BasicStroke(8,
          BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);

  public static ComponentUI createUI(JComponent c) {
    return new SpecialSliderUI();
  }

  @Override
  public Dimension getPreferredSize(JComponent c) {
    Dimension d = super.getPreferredSize(c);
    if (slider.getOrientation() == JSlider.HORIZONTAL) {
      d.height += 10;
    } else {
      d.width += 10;
    }
    return d;
  }

  @Override
  public void paintTrack(Graphics g) {
    Graphics2D g2 = (Graphics2D) g;
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    if (slider.getOrientation() == JSlider.HORIZONTAL) {
      int cy = (trackRect.height / 2) - 2;
      g.translate(trackRect.x, trackRect.y + cy);

      g2.setStroke(roundEndStroke);
      g2.setPaint(hBackGradient);
      g2.drawLine(thumbRect.x, 2, trackRect.width, 2);
      g2.setPaint(hFillGradient);
      g2.drawLine(0, 2, thumbRect.x, 2);

      g.translate(-trackRect.x, -(trackRect.y + cy));
    } else {
      int cx = (trackRect.width / 2) - 2;
      g.translate(trackRect.x + cx, trackRect.y);

      g2.setStroke(roundEndStroke);
      g2.setPaint(vBackGradient);
      g2.drawLine(2, 0, 2, thumbRect.y);
      g2.setPaint(vFillGradient);
      g2.drawLine(2, thumbRect.y, 2, trackRect.height);

      g.translate(-(trackRect.x + cx), -trackRect.y);
    }
  }
}

class SpecialThumbIcon implements Icon {

  private static final float[] fractions = {0.1f, 0.35f};
  private static final Color[] colors = {
    new Color(0xBFE9FF),
    new Color(0x1658AE)
  };
  private static final Paint thumbGradient = new RadialGradientPaint(5, 3, 15,
          fractions, colors, MultipleGradientPaint.CycleMethod.NO_CYCLE);

  @Override
  public void paintIcon(Component c, Graphics g, int x, int y) {
    Graphics2D g2 = (Graphics2D) g;
    g2.setPaint(thumbGradient);
    g.fillOval(x + 3, y + 3, 11, 11);
  }

  @Override
  public int getIconWidth() {
    return 17;
  }

  @Override
  public int getIconHeight() {
    return 17;
  }
}

class SpecialSliderDemo {

  public static void main(String[] args) throws Exception {

    IconUIResource specialThumbIcon = new IconUIResource(new SpecialThumbIcon());
    UIManager.put("Slider.horizontalThumbIcon", specialThumbIcon);
    UIManager.put("Slider.verticalThumbIcon", specialThumbIcon);
    UIManager.put("Slider.background", new ColorUIResource(Color.BLACK));

    SwingUtilities.invokeLater(new Runnable() {

      @Override
      public void run() {
        new SpecialSliderDemo().makeUI();
      }
    });
  }

  public void makeUI() {
    JSlider hSlider = new JSlider(JSlider.HORIZONTAL);
    hSlider.setUI(new SpecialSliderUI());
    JSlider vSlider = new JSlider(JSlider.VERTICAL);
    vSlider.setUI(new SpecialSliderUI());
    JFrame frame = new JFrame();
    frame.add(hSlider, BorderLayout.NORTH);
    frame.add(vSlider, BorderLayout.WEST);

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(400, 400);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }
}

[Dawid Skrzypczynski]

Thank you very much guys )

[Dawid Skrzypczynski]

Darryl the code that you pasted was created with using some program or you wrote it yourself ?

[Darryl Burke]

I don't know of any program that can generate UI customization code. Here are the steps I followed, so that next time round you can do this yourself.

1. Examined the Slider properties that can be set via the UIManager using Rob Camick's UIManager Defaults.

2. Attempt to customize those properties: succeeded for the 3 properties as in the 3 UIManager.put(...) statements in the code. Failed for Slider.trackWidth (default value: 7).

3. Developed an Icon using the Graphics2D API (Note: except in the earliest versions of Java, all Graphics objects are instances of Graphics2D) and a suitable Paint.

4. Examined the code of MetalSliderUI and BasicSliderUI. Found that trackWidth is read but never used. (!)

5. Examined the paintTrack(...) method in both those classes. Decided the one in BasicSliderUI was adequate for the desired customizing.

6. Utilized the to Graphics2D API to draw the track using a suitable Stroke.

7. Increased the preferredSize to match the size of the posted image.

The colors were taken from the image you posted, using the hex values obtained via the color picker in a graphics editing program. Since your image was a JPEG, some compression artifacts made it impossible to guess the true original color. A PNG might have been better: lossless compression.

You still haven't told me why exactly you required this customization.

[Dawid Skrzypczynski]

Thank you again Darryl. The reason why i need this customization is simple. I create some program and i want to add my own graphics. I couldn't do it with standard JSlider method so render my own JSlider is the only way to do this.