JavaFX: Table Row Multi-Color Border Style

Question

I'd like to draw a custom border around certain Table Rows using JavaFX. In the following picture you can see the current state.

What I need to do is fill the blanks between the yellow lines with black lines.

My first idea was to define two styles and add both of them:

.tableRowStyle1{
    -fx-border-width: 3;
    -fx-border-style: solid;
    -fx-border-color: black;
}

.tableRowStyle2{
    -fx-border-color: yellow;
    -fx-border-style: segments(12, 12, 12, 12);
    -fx-border-width: 3;
}

Unfortunately, I always end up with the yellow-transparent dashed line, the order in which the styles are added to the TableRow's style class does not matter.

Another idea was to play around with linear and radial gradients. Linear gradients don't produce a dashed line. Radial gradients seem to do this, but the length of the dashes is not even, since they're meant to work for circles and not rectangles.

Any help on this topic is greatly appreciated!

score 3 · Accepted Answer · answered Dec 09 '16 at 09:40

If you use different style rules, one will replace the other.

You need to specify the different border styles in the same rule as comma seperated values. phase can be used to modify the initial offset.

Example

@Override
public void start(Stage primaryStage) {
    Region region = new Region();
    region.getStyleClass().add("border-region");

    Scene scene = new Scene(region, 300, 300);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();
}

style.css

.border-region {
    -fx-background-color: red;
    -fx-border-color: yellow, black;
    -fx-border-style: segments(12, 12), segments(12, 12) phase 12;
    -fx-border-width: 3;
}

BTW: Consider using PseudoClass instead of a style class, since the style seems to be something that can be turned on/off, which s easier using PseudoClass, since you don't need to worry about adding the style class more than once.

JavaFX: Table Row Multi-Color Border Style

1 Answers1