Volets JavaFX: Créer une bordure de 1 pixel

Voici un exemple de test pour faire une démonstration de certaines façons de créer des bordures en CSS:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TableViewBorderTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        HBox root = new HBox(5);
        TableView<String> table = new TableView<>();
        table.getColumns().add(new TableColumn<String, String>("Data"));

        ScrollPane scroller = new ScrollPane();
        scroller.setMinWidth(200);

        GridPane grid = new GridPane();
        grid.setMinWidth(200);
        grid.getStyleClass().add("grid");

        root.getChildren().addAll(table, scroller, grid);
        // padding so we can easily see borders:
        root.setPadding(new Insets(10));

        Scene scene = new Scene(root);
        scene.getStylesheets().add("border-table.css");
        primaryStage.setScene(scene);
        primaryStage.show();

        // remove focus from tables
        root.requestFocus();

    }

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

Vous pouvez l'exécuter avec juste un fichier border-table.css vide. La première chose à remarquer est que la vue de table et le volet de défilement ont déjà une bordure de 1 pixel dans un gris moyen (légèrement plus sombre que l'arrière-plan par défaut):

Cette bordure est définie (voir comment plus tard) dans la feuille de style par défaut, modena.css, et est défini sur une "couleur recherchée" appelée -fx-box-border. Juste pour à des fins de démonstration, pour faciliter la visualisation de la bordure, vous pouvez réaffecter cette couleur avec ce qui suit dans border-table.css:

.root {
    -fx-box-border: red ;
}

Cela donne

Notez que l'en-tête de table et les en-têtes de colonne utilisent la même couleur qu'une bordure. Si vous comparez à la première image, vous pouvez probablement y voir les bordures plus clairement.

Pour remplacer la bordure dans la vue de table et le volet de défilement, vous pouvez définir des bordures dans le fichier CSS. Le plus simple, mais pas nécessairement le meilleur moyen est de définir un -fx-border-color. Remplacer le border-table.css par le texte suivant:

.table-view, .scroll-pane {
    -fx-border-color: green ;
}

La valeur par défaut de -fx-border-width est 1, ce qui donne une bordure verte d'un pixel:

Pour le GridPane, notez qu'il n'a pas de bordure par défaut et n'a pas non plus de classe de style (voir les documents CSS ). Dans le code Java, j'ai défini une classe de style pour cela:

grid.getStyleClass().add("grid");

Nous pouvons donc ajouter la même bordure simplement en ajoutant cette classe de style à la sélecteur:

.table-view, .scroll-pane, .grid {
    -fx-border-color: green ;
}

, Il est intéressant de noter que la feuille de style par défaut, modène.css n'utilise pas du tout les propriétés -fx-border-.... Au lieu de cela, il crée des bordures en créant deux (ou plus) "arrière-plans imbriqués". Par exemple, il a:

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view, 
.tree-table-view,
.html-editor {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

On définit, pour TableView, ScrollPane, et d'autres contrôles similaires, deux couleurs d'arrière-plan. Le premier (donc peint en premier, c'est-à-dire en dessous) est un fond solide remplissant la couleur recherchée -fx-box-border, et le second (peint sur le dessus) est un fond plein remplir la couleur recherchée -fx-control-inner-background. Le premier remplissage d'arrière-plan a 0 encarts, et le second a un encart de 1 pixel, ce qui signifie que le remplissage d'arrière-plan inférieur sera visible sur une largeur de 1 pixel autour du bord du contrôle. (Le rembourrage garantit que rien n'est placé sur cette bordure efficace de 1 pixel.)

Je n'ai pas du tout testé cela, mais on prétend que l'approche d'arrière-plan imbriqué est plus efficace que de dessiner des bordures (je suppose que les graphiques natifs est vey rapide à fond rectangulaire remplit).

Vous pouvez donc utiliser la même approche et remplacer border-table.css par

.table-view, .scroll-pane {
    -fx-background-color: blue, -fx-control-inner-background ;
    -fx-background-insets: 0, 1 ;
}

.grid {
    -fx-background-color: blue, -fx-background ;
    -fx-background-insets: 0, 1 ;
    -fx-padding : 1 ;
}

Et vous pouvez même introduire une couleur recherchée pour faciliter la modification du style de l'application:

.root {
    -my-border: blue ;
}

.table-view, .scroll-pane {
    -fx-background-color: -my-border, -fx-control-inner-background ;
    -fx-background-insets: 0, 1 ;
}

.grid {
    -fx-background-color: -my-border, -fx-background ;
    -fx-background-insets: 0, 1 ;
    -fx-padding : 1 ;
}

(cela a exactement le même effet que le précédent, mais il n'y a qu'un seul endroit pour changer la définition de couleur au lieu de deux).

Notez que ces deux dernières versions remplacent la bordure de mise au point par défaut, qui est implémenté dans la feuille de style par défaut en définissant un ensemble différent de couleurs d'arrière-plan lorsque les contrôles sont focalisés. Vous pouvez les restaurer avec:

.root {
    -my-border: blue ;
}

.table-view, .scroll-pane {
    -fx-background-color: -my-border, -fx-control-inner-background ;
    -fx-background-insets: 0, 1 ;
}

.table-view:focused, .scroll-pane:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
    -fx-background-insets: -1.4, -0.3, 1;
    -fx-background-radius: 2, 0, 0;
}

.grid {
    -fx-background-color: -my-border, -fx-background ;
    -fx-background-insets: 0, 1 ;
    -fx-padding : 1 ;
}

Qui fait référence à deux autres couleurs recherchées, -fx-faint-focus-color et -fx-focus-color (la première n'est qu'une version partiellement transparente de la seconde); bien sûr, vous pouvez les redéfinir pour vos propres couleurs de mise au point si vous choisissez.