JavaFX: Toolbar with imagebuttons


Question

How can i create a Toolbar like this:

LINK: http://s14.postimg.org/99095jk3l/image.png

I already created a toolbar with the correct background. My only problem are the buttons. I dont know how to style the buttons to be transparant, and how to add the correct on hover and on click effects to match the background.

Thanks in advance

1
2
7/17/2013 8:12:35 PM

Accepted Answer

You'll be working with CSS. You can set the background and border to transparent, then have a hover class for adding a semi-transparent border. It would end up being something like this (Please note, you may have to make some tweaks still)

.button {
    -fx-background-color: transparent, transparent, transparent, transparent;
}

.button:hover{
    -fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), transparent;
}

.button:armed {
    -fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.2);
}

To apply the style sheet you'd use code similar to this:

toolbar.getStylesheets().add("filename.css");

There are lots of good references for this in the "Info" section of the "javafx-2" tag. Here are a few that should prove helpful with this:

5
7/17/2013 8:12:08 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon