CODEWITHSUNDEEP
javajavafxjfoenixjfxtras
anupampunith
anupampunith

Reputation: 167

Java Fx arrow buttons

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;
}

enter image description here

Upvotes: 5

Views: 4239

Answers (2)

onlyme
onlyme

Reputation: 4042

Maybe what I have done might help to accomplish this. I have build left and right arrow by adding the bellow css to my buttons left and right:

enter image description here

 .right-arrow-button{
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.25em;
    -fx-background-color:#ff8e31;
    -fx-fill:#ff8e31;
    -fx-shape: "m13.707 11.293-5-5A1 1 0 0 0 7 7v10a1 1 0 0 0 .617.924A.987.987 0 0 0 8 18a1 1 0 0 0 .707-.293l5-5a1 1 0 0 0 0-1.414zM16 18a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v10a1 1 0 0 1-1 1z";
 
   }

.left-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-background-color:#ff8e31;
    -fx-fill:#ff8e31;
    -fx-shape: "M16.383 6.076a.994.994 0 0 0-1.09.217l-5 5a1 1 0 0 0 0 1.414l5 5A1 1 0 0 0 16 18a.987.987 0 0 0 .383-.076A1 1 0 0 0 17 17V7a1 1 0 0 0-.617-.924zM8 6a1 1 0 0 0-1 1v10a1 1 0 0 0 2 0V7a1 1 0 0 0-1-1z";
}

the man thing to play with is -fx-shape which takes svg path.

Upvotes: 0

JKostikiadis
JKostikiadis

Reputation: 2917

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;
}

Upvotes: 4

Related Questions