GridPane avec la bordure de titre

Question

Donc Im essayant d'avoir la bordure intitulée autour de mon GridPane et Im ayant le problème avec la frontière étant sur le titre supérieur. Aussi je me demande quel containeur sera le meilleur dans mon problème. GridPane semble problématique ici, un moyen plus facile de le faire?

Résultat courant: https://i.imgur.com/XAwhHQB.png

public void start(Stage primaryStage) { 
     try { 
       primaryStage.setTitle("GridPane"); 

       BorderPane root = new BorderPane(); 
       Scene scene = new Scene(root, 300, 210); 

       GridPane grd =new GridPane(); 
       ColumnConstraints column1width = new ColumnConstraints(50); 
       ColumnConstraints column2width = new ColumnConstraints(70); 
       ColumnConstraints column3width = new ColumnConstraints(70); 
       RowConstraints row1Height = new RowConstraints(30); 
       grd.getColumnConstraints().addAll(column1width, column2width, column3width); 
       grd.getRowConstraints().add(row1Height); 


       Label source = new Label("Source"); 
       Label report = new Label("Report"); 
       TextField text1 = new TextField(); 
       TextField text2 = new TextField("report.txt"); 
       Button browse1 = new Button("Browse..."); 
       Button browse2 = new Button("Browse..."); 
       grd.setVgap(10); 
       grd.setHgap(10); 
       grd.setPadding(new Insets(10, 10, 10, 10)); 

       text1.setPrefSize(80, 20); 
       text2.setPrefSize(80, 20); 
       browse1.setPrefSize(80, 20); 
       browse2.setPrefSize(80, 20); 


       Label textIO = new Label("Text IO zone"); 
       textIO.getStyleClass().add("title"); 
       textIO.setPadding(new Insets(-40, -20, 0, 0)); 

       textIO.setPrefWidth(120);  
       grd.add(textIO, 0, 0); 
       grd.add(source, 0, 0); 
       grd.add(text1, 1, 0); 
       grd.add(browse1, 2, 0); 
       grd.add(report, 0, 1); 
       grd.add(text2, 1, 1); 
       grd.add(browse2, 2, 1); 

       grd.getStyleClass().add("border"); 

       grd.prefHeightProperty().bind(root.heightProperty()); 

       root.getStyleClass().add("color"); 
       root.setLeft(grd); 

       scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 
       primaryStage.setScene(scene); 
       primaryStage.setMinHeight(250); 
       primaryStage.setMinWidth(410); 
       primaryStage.show(); 
     } catch(Exception e) { 
      e.printStackTrace(); 
     } 
    } 

et styles CSS /* JavaFX CSS - Laissez ce commentaire jusqu'à ce que vous avez au moins créer une règle qui utilise -fx-Propriété */

.title { 
    -fx-background-color: aliceblue; 
    -fx-translate-y: -5; 
    -fx-content-display: bottom; 
} 
.border { 
    -fx-border-insets: 5; 
    -fx-border-color: black; 
} 
.color{ 
    -fx-background-color: aliceblue; 
} 

Answer 1

Il y a peu de temps, il y avait une question à ce sujet, mais je ne peux pas le trouver. La touche définit tous les arrière-plans à la même couleur.

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.geometry.Insets?> 
<?import javafx.scene.control.Button?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.control.TextField?> 
<?import javafx.scene.layout.AnchorPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.StackPane?> 
<?import javafx.scene.layout.VBox?> 

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <StackPane layoutX="150.0" layoutY="115.0" prefHeight="200.0" prefWidth="300.0" style="-fx-border-color: black; -fx-background-color: white;"> 
     <children> 
      <VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0"> 
       <children> 
        <HBox spacing="10.0"> 
        <children> 
         <Label maxHeight="1.7976931348623157E308" text="Source" /> 
         <TextField prefWidth="125.0" /> 
         <Button mnemonicParsing="false" text="Browse.." /> 
        </children> 
        </HBox> 
        <HBox spacing="10.0"> 
        <children> 
         <Label maxHeight="1.7976931348623157E308" text="Report" /> 
         <TextField maxWidth="125.0" /> 
         <Button mnemonicParsing="false" text="Browse.." /> 
        </children> 
        </HBox> 
       </children> 
       <StackPane.margin> 
        <Insets left="5.0" right="5.0" top="20.0" /> 
       </StackPane.margin> 
      </VBox> 
     </children></StackPane> 
     <Label layoutX="164.0" layoutY="105.0" style="-fx-background-color: white;" text="Text IO Zone" /> 
    </children> 
</AnchorPane>