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()));}
}

imageexample

在此示例中，通过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);}
}

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