Java - JSlider customized but when its loaded, it does not show same style, how it was expected

Question

I have this custom JSlider, which will be used in many other forms/windows. But when i use MyJSlider it shows the following style:

Expected output was:

YumYumYum.java:

import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;

public class YumYumYum {

  private JFrame f = new JFrame();

  public YumYumYum() {

    f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

    MyJSlider slider = new MyJSlider();
    JPanel p = new JPanel();
    p.add(slider);    

    f.getContentPane().add(p);
    f.setSize(320, 240);
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }

  public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      @Override
      public void run() {
        new YumYumYum();
      }
    });
  }
}

MyJSlider.java:

import javax.swing.*;
import javax.swing.plaf.synth.SynthLookAndFeel;

public class MyJSlider extends JSlider {

  public MyJSlider() {    
    try {
      SynthLookAndFeel laf = new SynthLookAndFeel();
      laf.load(MyJSlider.class.getResourceAsStream("/demo.xml"), MyJSlider.class);
      UIManager.setLookAndFeel(laf);
    } catch (Exception e) {
      e.printStackTrace();
    } 
    setOrientation(JSlider.VERTICAL);
    setMinimum(-24);
    setMaximum(12);
    setVisible(true); 
  }

}

demo.xml:

<synth>
    <style id="backingStyle">
        <opaque value="TRUE"/>
        <font name="Dialog" size="12"/>
        <state>
            <color value="WHITE" type="BACKGROUND"/>
            <color value="BLACK" type="FOREGROUND"/>
        </state>
    </style>
    <bind style="backingStyle" type="region" key=".*"/>

    <style id="SliderTrackStyle">
        <opaque value="TRUE"/>
        <state>
            <color type="BACKGROUND" value="ORANGE"/>
        </state>
    </style>
    <bind style="SliderTrackStyle" type="region" key="SliderTrack" />

    <style id="SliderThumbStyle">
        <opaque value="TRUE"/>
        <state>
            <color type="BACKGROUND" value="RED"/>
        </state>
        <state value="PRESSED">
            <color type="BACKGROUND" value="GREEN"/>
        </state>

    </style>
    <bind style="SliderThumbStyle" type="region" key="SliderThumb" />
</synth>

Follow up:

final MyJSlider veryFirst= new MyJSlider(); // Hide first one: Style is not showing
final MyJSlider vSlider0 = new MyJSlider(); // Style - starts
final MyJSlider vSlider1 = new MyJSlider();
final MyJSlider vSlider2 = new MyJSlider();
final MyJSlider vSlider3 = new MyJSlider();    
final MyJSlider vSlider4 = new MyJSlider();    
final MyJSlider vSlider5 = new MyJSlider();  
final MyJSlider vSlider6 = new MyJSlider();
final MyJSlider vSlider7 = new MyJSlider();    
final MyJSlider vSlider8 = new MyJSlider(); 
final MyJSlider vSlider9 = new MyJSlider(); // Style - continue....

// JPanel
MyJSliderPanel eqPanel = new MyJSliderPanel();     
// Hide the first one always. As it does not shows the Style
eqPanel.add(veryFirst);    

vSlider0.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider0);

vSlider1.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider1);

vSlider2.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider2);

vSlider3.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider3);

vSlider4.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider4);

vSlider5.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider5);

vSlider6.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider6);

vSlider7.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider7);

vSlider8.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider8);

vSlider9.addChangeListener(new ChangeListener() {
  @Override
  public void stateChanged(ChangeEvent ce) {
    eq();
  }
});
eqPanel.add(vSlider9);
eqPanel.setSize(100, 100);

Answer 1

You need to set the look and feel before creating any GUI components.. E.g: You are calling:

UIManager.setLookAndFeel(laf);

....to late.

---

Example (using your demo.xml):

public class Test {

    public static void main(String[] args) {

        try {
            SynthLookAndFeel laf = new SynthLookAndFeel();
            laf.load(Test.class.getResourceAsStream("demo.xml"), Test.class);
            UIManager.setLookAndFeel(laf);
        } catch (Exception e) {
            e.printStackTrace();
        }

        JFrame f = new JFrame();
        f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        f.add(new JSlider() {{
            setOrientation(JSlider.VERTICAL);
            setMinimum(-24);
            setMaximum(12);
            setVisible(true);
        }});
        f.setSize(320, 240);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
}

Outputs the correct screenshot.