JavaFX技巧12：在CSS中定义图标

当您是像我这样来自Swing的UI开发人员时，您很有可能仍在代码中直接设置图像/图标。 最可能是这样的：

import javafx.scene.control.Label;
import javafx.scene.image.ImageView;

public class MyLabel extends Label {

    public MyLabel() {
        setGraphic(new ImageView(MyLabel.class.
            getResource("image.gif").toExternalForm()));
    }
}

在此示例中，通过Class.getResource（）查找图像文件，将URL传递到ImageView节点的构造函数，并且将该节点设置为标签上的“ graphic”属性。

这种方法效果很好，但是使用JavaFX则有更优雅的方法。 您可以将图像定义放入CSS文件中，以便您和/或其他人轻松替换它（营销部门已决定再次更改公司标识）。

可以通过以下方式获得与上述相同的结果：

import javafx.scene.control.Label;

public class CSSLabel extends Label {

    public CSSLabel() {
        getStyleClass().add("folder-icon");
    }
}

现在您显然也需要一个CSS文件：

.folder-icon {
	-fx-graphic: url("image.gif");
}

并且在您的应用程序中，您需要将样式表添加到场景图。 在这里，我们将其添加到场景中。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MyApplication extends Application {

	public void start(Stage primaryStage) throws 
		                             Exception {
		CSSLabel label = new CSSLabel();
		label.setText("Folder");
		label.setAlignment(Pos.CENTER);
		
		Scene scene = new Scene(label);
		scene.getStylesheets().add(MyApplication.class.
		      getResource("test.css").toExternalForm());
		
		primaryStage.setScene(scene);
		
		primaryStage.setTitle("Image Example");
		primaryStage.setWidth(250);
		primaryStage.setHeight(100);
		primaryStage.show();
	}

	public static void main(String[] args) {
		launch(args);
	}
}

使用这种方法，您可以将控件及其外观完全分开，并且还可以轻松进行自定义。

翻译自: https://www.javacodegeeks.com/2014/07/javafx-tip-12-define-icons-in-css.html