Java Fx arrow buttons

anupampunith :

I am trying to arrange triangular buttons(like 3d arrow keys) around a circle. I tried to do via CSS with code below. but did not work out. It does not apply the settings to the button. I checked Jfxtras and jfoenix but could not find anything useful. Any ideas please?

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

JKostikiadis :

You could use a StackPane to achieve it. Inside add a Circle as a background (or an ImageView) and then add 4 buttons. To align them you need to call :

StackPane.setAlignment(topButton, Pos.TOP_CENTER);
StackPane.setAlignment(rightButton, Pos.CENTER_RIGHT);
StackPane.setAlignment(bottomButton, Pos.BOTTOM_CENTER);
StackPane.setAlignment(leftButton, Pos.CENTER_LEFT);

With the code above, you will place the buttons to the correct location (up, right, down and left) then you will need to change the shape of the button, which can be done very easy with CSS using the -fx-shape for example :

#arrow-button{
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.25em;
    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z"; 
}

Now the above CSS will create an arrow pointing to the right, so you will have to rotate the appropriate buttons by calling:

topButton.setRotate(270);
bottomButton.setRotate(90);
leftButton.setRotate(180);

Lastly, in order to increase the shape of the arrows you just need to set the preferred size of the button. Also in case you need to add a margin to the buttons you can do that as well by calling :

StackPane.setMargin(topButton, new Insets(10, 0, 0, 0));
StackPane.setMargin(rightButton, new Insets(0, 10, 0, 0));
StackPane.setMargin(bottomButton, new Insets(0, 0, 10, 0));
StackPane.setMargin(leftButton, new Insets(0, 0, 0, 10));

Edit:

In order to apply different effect when the buttons are either hovered or pressed you should also add those CSS rules :

#arrow-button:hover{
    /* Example make the arrow yellow if buttos was hovered  */
    -fx-background-color: -fx-mark-highlight-color, yellow;

}

#arrow-button:pressed{
    /* And red if it was pressed, you can apply different effect 
     * like shadow , padding etc inside this rules.
     */
    -fx-background-color: -fx-mark-highlight-color, red;
}