【问题标题】:CSS3 to style Java?CSS3 来设置 Java 样式?
【发布时间】:2012-10-29 06:55:14
【问题描述】:

我即将开始一个 Java 项目,我实际上是在制作一个简单的 iTunes 克隆。我将使用 Swing 来制作 GUI,但我想知道以类似于 iTunes 的方式对其进行样式设置的最佳方式,而不仅仅是更改颜色/字体/边框。我已经研究过将 CSS 与 Java Swing 一起使用,但我发现的任何资源都已过时。有什么新方法可以解决这个问题吗?还是我应该研究 CSS 以外的东西?

这是我希望通过 Swing 实现的设计(至少是基础):

【问题讨论】:

  • 屏幕截图少,仅根据您的描述,我建议看一下可插拔的外观和感觉。
  • @AndrewThompson 我添加了我要实现的设计的屏幕截图。
  • 有一大堆用于 Java 的 LaF,甚至内置的也是可换肤的。如果你真的需要自定义外观,我建议你只选择一个你喜欢的,或者编写一个皮肤。
  • 我也认为 JavaFX somewhere 使用了 CSS,但我无法告诉你更详细的信息。这可能值得研究,尤其是看到 JavaFX 是一种新的、闪亮的 Java UI 方式。

标签: java html swing css javafx-2


【解决方案1】:

Swing 没有 CSS 样式。但是,如果您使用的是 Swing 的继承者 JavaFx2,您确实可以使用 CSS 样式。

如果您对 Swing 还不是很熟悉,我建议您考虑使用 JavaFX。最新的 1.7 版本的 Java 内置了 JavaFX 2.2。它支持 CSS 和 Media Player

当然也可以在 Swing 中进行。您可以使用许多不同的方法,但为了给您一个起点,以下是我将如何创建按钮。这种方法需要 Java 7,但如果您改用 JXLayer,您也可以在以前的 Java 版本中运行它。这些按钮是 2D 绘画和​​我可以访问的一些图标的组合。只需使用您拥有的图标进行更改即可。圆圈的大小会自行调整大小,具体取决于您使用的图像。

当您单击按钮时,您会在此处发出哔声,并将相应的文本打印到控制台。一般来说,JLayer 对 Swing 应用程序的样式非常有用。

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Rectangle2D;
import java.net.URL;
import java.util.logging.Logger;

import javax.swing.*;
import javax.swing.plaf.LayerUI;

/**
 */
public class MediaPlayer {

    public static void main(String[] args) {

        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame("Media Clone");
                MediaController mediaController = new MediaController();
                frame.getContentPane().add(new MediaView(mediaController));
                frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
                frame.setMinimumSize(new Dimension(800, 450));
                frame.setLocationRelativeTo(null); // Center
                frame.pack();
                frame.setVisible(true);
            }
        });
    }

    static class MediaView extends JPanel {

        private MediaList mediaList;
        private ButtonView buttonView;
        private MediaController controller;

        MediaView(MediaController controller) {
            this.controller = controller;
            createComponents();
            makeLayout();
        }

        public void createComponents() {
            mediaList = new MediaList();
            buttonView = new ButtonView(controller);
        }

        public void makeLayout() {
            setLayout(new BorderLayout());
            add(mediaList);
            add(new JLayer<>(buttonView, new GradientUI()), BorderLayout.NORTH);
        }
    }

    static class MediaList extends JPanel {

        private JTable mediaTable;

        MediaList() {
            createComponents();
            makeLayout();
        }

        public void createComponents() {
            String[] header = new String[]{"Song", "Artist"};
            String[][] model = new String[2][2];
            model[0][0] = "Hello";
            model[0][1] = "World";
            model[1][0] = "Goodbye";
            model[1][1] = "Sunshine";
            mediaTable = new JTable(model, header);
        }

        public void makeLayout() {
            setLayout(new BorderLayout());
            add(new JScrollPane(mediaTable));
        }
    }

    static class GradientUI extends LayerUI<JComponent> {

        @Override
        public void paint(Graphics g, JComponent c) {
            Graphics2D g2 = (Graphics2D) g.create();
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
            int height = c.getHeight();
            int width = c.getWidth();
            g2.setPaint(new GradientPaint(0, 0, new Color(136, 146, 155), 0, height, new Color(101, 108, 116)));
            Rectangle2D area = new Rectangle(0, 0, width, height);
            g2.fill(area);
            super.paint(g2, c);
        }
    }

    enum MediaAction {
        PLAY, NEXT, PREVIOUS
    }

    static class MediaController {

        private Toolkit toolkit = Toolkit.getDefaultToolkit();

        public void execute(MediaAction mediaAction) {
            toolkit.beep();
            System.out.println(mediaAction.name());
        }
    }

    static class ButtonView extends JPanel {

        private static Logger log = Logger.getLogger(ButtonView.class.getName());

        private JButton play;
        private JButton next;
        private JButton previous;
        private RoundButtonUI playUI;
        private ActionListener playActionListener;
        private ActionListener nextActionListener;
        private ActionListener previousActionListener;
        private MediaController controller;

        ButtonView(MediaController controller) {
            this.controller = controller;
            createComponents();
            makeLayout();
            createHandlers();
            registerHandlers();
            initComponent();
        }

        public void createComponents() {
            play = new JButton();
            next = new JButton();
            previous = new JButton();
            playUI = new RoundButtonUI();
        }

        public void createHandlers() {
            playActionListener = createMediaAction(MediaAction.PLAY);
            nextActionListener = createMediaAction(MediaAction.NEXT);
            previousActionListener = createMediaAction(MediaAction.PREVIOUS);
        }

        private ActionListener createMediaAction(final MediaAction mediaAction) {
            return new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    SwingUtilities.invokeLater(new Runnable() {
                        @Override
                        public void run() {
                            controller.execute(mediaAction);
                        }
                    });
                }
            };
        }

        public void registerHandlers() {
            play.addActionListener(playActionListener);
            next.addActionListener(nextActionListener);
            previous.addActionListener(previousActionListener);
        }

        public void makeLayout() {
            setLayout(new FlowLayout(FlowLayout.LEADING));
            makeButtonRound(previous, "<<", "bullet_triangle_grey_shadow.png", "bullet_triangle_grey.png");
            makeButtonRound(play, ">", "bullet_triangle_glass_grey128x128.png", "bullet_triangle_glass_grey128x128.png");
            makeButtonRound(next, ">>", "bullet_triangle_grey_shadow.png", "bullet_triangle_grey.png");
            add(new JLayer<>(previous, playUI));
            add(new JLayer<>(play, playUI));
            add(new JLayer<>(next, playUI));
        }

        public void initComponent() {
            setOpaque(false);
        }

        private void makeButtonRound(final JButton toBeRounded, String fallback, String imageNormal, String imagePressed) {
            toBeRounded.setOpaque(false);
            toBeRounded.setFocusPainted(false);
            toBeRounded.setBorderPainted(false);
            toBeRounded.setContentAreaFilled(false);
            toBeRounded.setBorder(BorderFactory.createEmptyBorder(5, 10, 5, 5));
            URL normalURL = getClass().getClassLoader().getResource(imageNormal);
            URL pressedURL = getClass().getClassLoader().getResource(imagePressed);
            if (normalURL != null || pressedURL != null) {
                final ImageIcon released = new ImageIcon(normalURL);
                final ImageIcon pressed = new ImageIcon(pressedURL);
                toBeRounded.setIcon(released);
                toBeRounded.addMouseListener(new MouseAdapter() {
                    @Override
                    public void mousePressed(MouseEvent e) {
                        toBeRounded.setIcon(pressed);
                    }

                    @Override
                    public void mouseReleased(MouseEvent e) {
                        toBeRounded.setIcon(released);
                    }
                });
            } else {
                toBeRounded.setText(fallback);
                log.severe("Missing resources: " + imageNormal + " and " + imagePressed);
            }
        }
    }

    /**
     * Shifts the image so it looks pressed down.
     * Creates a circle around the icon, that varies in size depending on the supplied icon.
     */
    static class RoundButtonUI extends LayerUI<JComponent> {

        private static final int STROKE_WIDTH = 5;

        @Override
        public void paint(Graphics g, JComponent c) {
            Graphics2D g2 = (Graphics2D) g.create();
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);

            ButtonModel buttonModel;
            JButton b;

            if (((JLayer) c).getView() instanceof JButton) {
                b = (JButton) ((JLayer) c).getView();
                buttonModel = b.getModel();
            } else {
                super.paint(g, c);
                return;
            }

            int iconHeight = b.getIcon() != null ? b.getIcon().getIconHeight() : 60;
            int iconWidth = b.getIcon() != null ? b.getIcon().getIconWidth() : 60;

            Shape circle = new Ellipse2D.Double(STROKE_WIDTH, STROKE_WIDTH, iconHeight, iconWidth);

            g2.setPaint(new GradientPaint(5, 5, new Color(222, 224, 230), 30, 55, new Color(187, 189, 199)));
            g2.fill(circle);

            g2.setPaint(new GradientPaint(15, 0, new Color(90, 97, 105), 15, 30, new Color(132, 142, 152)));
            g2.setStroke(new BasicStroke(5));
            g2.draw(circle);

            if (buttonModel.isPressed()) {
                g2.translate(1, 1);
            }

            super.paint(g2, c);
            g2.dispose();
        }
    }
}

【讨论】:

  • 深入了解 JavaFX,它可能正是我想要的。我现在正在安装它,我将不得不做更多的研究。谢谢!
  • @MadProgrammer 正确地指出我的“Swing 的继任者”声明可能是错误的,但至少这是 Oracle 在 Q6 上的预测“JavaFX 会取代 Swing.. ?” Res “是的。但是,Swing 将保留……”。见link。 JavaFX 版本 1 是一种脚本语言,因此并没有吸引包括我自己在内的现有 Swing 程序员的广泛用户群。在我看来,JavaFX 2+ 成功的机会要大得多,因为它正在成为 Java 不可或缺的一部分。
  • @Skjalg 并不是说​​这是一种糟糕的技术,它只是另一种选择;)
  • @MadProgrammer 是,所以我添加了一个使用 Swing 的示例。
【解决方案2】:

通过挥杆打造您想要的外观将是一项真正的挑战。可以做到,但不能使用 CSS,也不能不做大量工作。由于 JavaFX 支持 CSS 并具有媒体播放器,因此我将研究这个新框架。你可以get started here.

我最近构建了一个小型 JavaFX 应用程序,并且有机会使用场景构建器,该图形工具现在与 Netbeans 集成以帮助开发人员创建 UI。当您修改 CSS 文件时,UI 会在场景构建器中更新。我们设计的实际元素与我们在 HTML 中使用的元素不同。下面是我用于我的应用程序的 CSS 文件;你可以在mathteamhosting.com查看和运行我的应用程序

请记住,如果您使用的是 32 位浏览器,则需要 32 位版本的 Java 才能将其作为小程序运行。

.root { 
    display: block;
}

.text-input {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
}

.text-field {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
}

.label {
    -fx-font-size: 18px;   
}

.button {
    -fx-font-size: 15px;   
    -fx-font-weight: bold;
    -fx-text-fill: black;
    -fx-background-color: linear-gradient(#0000ff, #ffeeff);
}
#note {
    -fx-font-size: 15px;  
}

#heading {
    -fx-text-fill: #000099;
    -fx-font-size: 18px;
    -fx-font-weight: bold;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-14
    • 1970-01-01
    • 1970-01-01
    • 2012-08-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多