Question

in my Java application, I have a JTabbedPane and a synth look&feel. The l&f is defined by a xml file. This works very fine for me.

Now the challenge: I want the text in the tabs of the JTabbedPane to be written vertically, not horizontally. For this, I subclassed the SynthGraphicsUtils and overwrote the method paintText(SynthContext ss, Graphics g, String text, int x, int y, int mnemonicIndex). This works also.

Now the problem: the text in the different tabs is shown vertically, but the size of every tab seems to be misscalculated. The tabs are not separated correctly. Unfortunatly I’m not allowed to post images… The tabs overlay each other.

I don’t know how to fix this problem 🙁 Here’s my code:

SwingTest.java

public SwingTest(JFrame owner) {

    super(null);

    setOpaque(true);
    setSize(WIDTH, HEIGHT);
    owner.setSize(WIDTH, HEIGHT);

    JTabbedPane pane = new JTabbedPane(JTabbedPane.LEFT);
    pane.setName("MyPane");
    pane.setSize(WIDTH, HEIGHT);

    // Add a tab
    JPanel p1 = new JPanel();
    p1.setSize(300, 300);

    JPanel p2 = new JPanel();
    p2.setSize(500, 500);

    JPanel p3 = new JPanel();
    p3.setSize(300, 300);

    p3.add(new JLabel("HALLO"));

    JPanel p4 = new JPanel();
    p4.setSize(300, 300);

    JButton roundedButton = new JButton("Halloi Button");
    roundedButton.setName("roundedButton");

    p2.add(roundedButton);

    pane.addTab(EFFORT_CARD, p1);
    pane.addTab(EMOTION_CARD, p2);
    pane.addTab(COMFORT_CARD, p3);      
    pane.addTab(DRIVING_CARD, p4);

    add(pane);

    pane.updateUI();

laf.xml

<!-- 
TABNAVIGATION
 -->
<style id="tabNavigationStyle">
    <!-- Angabe ist wichtig, da die Hintergrundfarben sonst nicht angezeigt
    werden. -->
    <!-- <object id="verticalTextWriterClass" class="VerticalTextWriter" />
    <painter method="text" idref="verticalTextWriterClass"/> -->
    <opaque value="TRUE" />
    <state>
        <font name="Verdana" size="12" />
        <color value="WHITE" type="BACKGROUND" />
        <color value="BLACK" type="FOREGROUND" />
        <color value="BLUE" type="TEXT_FOREGROUND" />
        <object id="myGraphicsUtils" class="MySynthGraphicsUtils" />
        <graphicsUtils idref="myGraphicsUtils" />
    </state>
    <!-- Fuer den Zustand "SELECTED" einen anderen Style definieren. -->
    <state value="SELECTED">
        <!-- Auf weiter oben definierte Farbe beziehen. -->
        <color value="WHITE" type="BACKGROUND" />
        <color idref="magentaForegroundColor" type="TEXT_FOREGROUND" />
    </state>
    <state value="FOCUSED">
        <!-- Auf weiter oben definierte Farbe beziehen. -->
        <color value="WHITE" type="BACKGROUND" />
        <color idref="magentaForegroundColor" type="TEXT_FOREGROUND" />
    </state>
    <state value="PRESSED">
        <!-- Auf weiter oben definierte Farbe beziehen. -->
        <color value="WHITE" type="BACKGROUND" />
        <color idref="magentaForegroundColor" type="TEXT_FOREGROUND" />
    </state>
</style>
<!-- Den Style fuer die Tabnavigation an die Tabnavigation mit dem Namen (type="name")
"MyPane" binden. Der Name wird in Java ueber component.setName() festgelegt. -->
<bind style="tabNavigationStyle" type="region" key="TabbedPaneTab" />

MySynthGraphicsUtils.java

public class MySynthGraphicsUtils extends SynthGraphicsUtils {
public void paintText(SynthContext ss, Graphics g, String text, int x, int y, int mnemonicIndex) {

    Graphics2D g2 = (Graphics2D) g;

    System.out.println(ss.getComponent().getClass().getName());

    Object oldAAValue = g2.getRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING);
    g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);

    g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_LCD_HRGB);

    g2.setFont(ss.getStyle().getFont(ss));
    AffineTransform tx = new AffineTransform();
    tx.rotate(90 * Math.PI / 180, x, y);
    g2.setTransform(tx);

    g2.drawString(text, x, y);

    // get metrics from the graphics
    FontMetrics metrics = g2.getFontMetrics(ss.getStyle().getFont(ss));
    // get the height of a line of text in this font and render context
    int hgt = metrics.getHeight();
    // get the advance of my text in this font and render context
    int adv = metrics.stringWidth(text);
    // calculate the size of a box to hold the text with some padding.
    Dimension size = new Dimension(adv + 2, hgt + 2);

    //g2.setClip(0, 0, size.width, size.height);

    g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, oldAAValue);
}

}

Thank you very much!!

Answer 1

As a workaround, I use an image border with an sourceInset on the Left side to seperate Tabs. I make the image the same colour as the background of the app:

        <state>
                <opaque value="true"/>
                <color value="black" type="BACKGROUND" />
                <color value="white" type="TEXT_FOREGROUND" />
                <imagePainter method="tabbedPaneTabBorder" path="relative/path/to/white_border.png"
             sourceInsets="0 1 0 0" paintCenter="false"/>
                <insets top="3" bottom="3" right="3" left="3"/>
        </state>