Статьи

JavaFX Совет 12. Определение значков в CSS

Март 27, 2019

Когда вы являетесь разработчиком пользовательского интерфейса из Swing, как я, есть большая вероятность, что вы по-прежнему устанавливаете изображения / значки прямо в своем коде. Скорее всего как то так:

01
02
03
04
05
06
07
08
09
10
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, чтобы вам и / или другим было легко заменить его (отдел маркетинга решил еще раз изменить фирменный стиль).

Тот же результат, что и выше, может быть достигнут следующим образом:

1
2
3
4
5
6
7
8
import javafx.scene.control.Label;
 
public class CSSLabel extends Label {
 
    public CSSLabel() {
        getStyleClass().add("folder-icon");
    }
}

Теперь вам, очевидно, также нужен файл CSS:

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

И в вашем приложении вам нужно добавить таблицу стилей в граф сцены. Здесь мы добавляем его на сцену.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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);
    }
}

При таком подходе у вас есть четкое разделение элементов управления и их внешнего вида, а также простота настройки.

Ссылка: JavaFX Совет 12: Определите иконки в CSS от нашего партнера JCG Дирка Леммермана в блоге Pixel Perfect .
36
Share: