Styling Java - FX vs Swing

6. September 2014 Code Monkey Java , JavaFX , Programming Comments (0)

How much of a difference is there in styling FX over Swing? Taking a particular look and feel and implementing it in one over the other, which one would be faster? 

I had to do some exercises for work to show some information on these topics. I thought I would share a snippet of that here to demonstrate the difference. I had a specific look and feel to implement, and so chose some of those components to show. Here is one example, a button with rounded corners (all names and colors have been changed to protect the innocent)




JavaFX - Button Style

/**
 *
 * @author Patricia Bradford, www.CodeMonkeyCorner.com
 */
.root {
    -gradientColor:rgb(205, 250, 7); 
    -forecolor:rgb(200,200,200);
    -backcolor:rgb(85,85,85);
}
.button{
    -fx-background-color:-backcolor;
    -fx-text-fill:-forecolor;
    -fx-background-radius: 8;
    -fx-background-insets: 1;
    -fx-border-color:-forecolor;
    -fx-border-radius: 8;
    -fx-border-width:1;
    -fx-padding: 3 15 3 15;
}
.button:hover{
    -fx-background-color: linear-gradient(from 0% 0% to 100% 100%, -gradientColor, derive(-gradientColor, 90%));
}
.button:pressed{
    -fx-text-fill:-backcolor;
    -fx-background-color:-forecolor;
    -fx-border-color:-backcolor;
}

Swing - ButtonUI

/**
 *
 * @author Patricia Bradford, www.CodeMonkeyCorner.com
 */
public class RoundedButtonUI extends BasicButtonUI {

    private static final float arcwidth = 16.0f;
    private static final float archeight = 16.0f;

    protected final Color fc = new Color(205, 250, 7);
    protected final Color ac = new Color(150, 229, 76);

    protected Shape shape;
    protected Shape border;
    protected Shape base;

    @Override
    protected void installDefaults(AbstractButton b) {
    UIManager.put("Button.background", new Color(85,85,85));
    UIManager.put("Button.foreground", new Color(200,200,200));
        super.installDefaults(b);
        b.setContentAreaFilled(false);
        b.setOpaque(false);
        b.setBorderPainted(false);
        initShape(b);
    }
    
    @Override
    public void paint(Graphics g, JComponent c) {
        Graphics2D g2 = (Graphics2D) g;
        AbstractButton b = (AbstractButton) c;
        ButtonModel model = b.getModel();
        initShape(b);
    //ContentArea
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_OFF);
        if (model.isArmed()) {
            g2.setColor(c.getBackground());
            g2.fill(shape);
        } else if (b.isRolloverEnabled() && model.isRollover()) {
            paintFocusAndRollover(g2, c, fc);
        } else if (b.hasFocus()) {
            paintFocusAndRollover(g2, c, fc);
        } else {
            g2.setColor(c.getBackground());
            g2.fill(shape);
        }
    //Border
        g2.setPaint(c.getForeground());
        g2.draw(shape);
        g2.setColor(c.getBackground());
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_OFF);
        super.paint(g2, c);
    }

    private void initShape(JComponent c) {
        if (!c.getBounds().equals(base)) {
            base = c.getBounds();
            shape = new RoundRectangle2D.Float(0, 0, c.getWidth() - 1, c.getHeight() - 1,
                    arcwidth, archeight);
        }
    }

    private void paintFocusAndRollover(Graphics2D g2, JComponent c, Color color) {
        g2.setPaint(new GradientPaint(0, 0, color, c.getWidth() - 1, c.getHeight() - 1,
                color.brighter(), true));
        g2.fill(shape);
    }

    @Override
    protected void paintText(Graphics g, AbstractButton b, Rectangle textRect, String text) {
        ButtonModel model = b.getModel();
        FontMetrics fm = SwingUtilities2.getFontMetrics(b, g);
        int mnemonicIndex = b.getDisplayedMnemonicIndex();

        /* Draw the Text */
        if(model.isEnabled()) {
            /*** paint the text normally */
            if(model.isPressed())
                g.setColor(b.getBackground());
            else
                g.setColor(b.getForeground());
            SwingUtilities2.drawStringUnderlineCharAt(b, g,text, mnemonicIndex,
                                          textRect.x + getTextShiftOffset(),
                                          textRect.y + fm.getAscent() + getTextShiftOffset());
        }
        else {
            /*** paint the text disabled ***/
            g.setColor(b.getBackground().brighter());
            SwingUtilities2.drawStringUnderlineCharAt(b, g,text, mnemonicIndex,
                                          textRect.x, textRect.y + fm.getAscent());
            g.setColor(b.getBackground().darker());
            SwingUtilities2.drawStringUnderlineCharAt(b, g,text, mnemonicIndex,
                                          textRect.x - 1, textRect.y + fm.getAscent() - 1);
        }
    }

    @Override
    protected void paintButtonPressed(Graphics g, AbstractButton c) {
        Graphics2D g2 = (Graphics2D) g;
        ButtonModel model = c.getModel();
    //ContentArea
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_OFF);
        g2.setColor(c.getForeground());
        g2.fill(shape);
    //Border
        g2.setPaint(c.getBackground());
        g2.draw(shape);
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_OFF);

    }
}


I could spend a few paragraphs talking about how the FX version is simple and clear; easy to see what is going on. I could tell you that the swing version is not; that it requires either knowledge of Swings 2D rendering/painting/utilties or digging through the base UI element code to determine how its done. However, I think anyone who looks at the two versions can determine all they need to know all by themselves.....