Set Icon for toggle button - javafx-2

Question

I created Icon with Borderpane, image and text which I want to set as button icon.
#Override
public void start(Stage primaryStage)
{
final VBox vbox = new VBox();
// create 3 toggle buttons and a toogle group for them
ToggleButton tb1 = new ToggleButton();
tb1.setGraphic(newConnectionIcon());
ToggleButton tb2 = new ToggleButton();
ToggleButton tb3 = new ToggleButton();
final ToggleGroup group = new ToggleGroup();
tb1.setToggleGroup(group);
tb2.setToggleGroup(group);
tb3.setToggleGroup(group);
// select the first button to start with
group.selectToggle(tb1);
final Rectangle rect1 = new Rectangle(300, 300);
rect1.setFill(Color.DARKOLIVEGREEN);
final Rectangle rect2 = new Rectangle(300, 300);
rect2.setFill(Color.LAVENDER);
final Rectangle rect3 = new Rectangle(300, 300);
rect3.setFill(Color.LIGHTSLATEGREY);
tb1.setUserData(rect1);
tb2.setUserData(rect2);
tb3.setUserData(rect3);
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>()
{
#Override
public void changed(ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle)
{
if (new_toggle == null)
{
}
else
{
vbox.getChildren().set(1, (Node) group.getSelectedToggle().getUserData());
}
}
});
HBox hBox = new HBox();
hBox.getChildren().addAll(tb1, tb2, tb3);
hBox.setPadding(new Insets(10, 10, 10, 10));
vbox.getChildren().addAll(hBox, (Node) group.getSelectedToggle().getUserData());
StackPane root = new StackPane();
root.getChildren().add(vbox);
Scene scene = new Scene(root, 800, 850);
primaryStage.setScene(scene);
primaryStage.show();
}
private static BorderPane newConnectionIcon() {
// Add background effect
DropShadow ds = new DropShadow();
ds.setOffsetY(2.0);
ds.setOffsetX(2.0);
ds.setColor(Color.GRAY);
// New BorderPane which will hold the components
bpi = new BorderPane();
bpi.setEffect(ds); // Add the effect
bpi.setCache(true);
// Set the size of the BorderPane
bpi.setPrefSize(30, 30);
bpi.setMaxSize(30, 30);
// Add style
bpi.setStyle("-fx-background-color: linear-gradient(#f2f2f2, #d4d4d4);"
+ " -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
+ " -fx-background-radius: 3px, 3px, 2px, 1px;");
// Add Label to the Icon
Text inftx = new Text("New Connection");
inftx.setFont(Font.font ("Verdana", 5)); // Set font and font size
inftx.setFill(Color.WHITE); // Set font color
ncpic.setFitHeight(25); // Set size of the Icon picture
ncpic.setFitWidth(25);
// Internal StackPane which will hold the picture and the Icon Label
StackPane stack = new StackPane();
stack.getChildren().addAll(ncpic, inftx); // Add the picture and the Label
// Add the StackPane to the main BorderPane
bpi.setCenter(stack);
// Change the border of the Icon when the mouse is over the Icon
bpi = mouseOver(bpi);
// Navigate to new Panel when the user clicks on the Icon
bpi.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
}
});
return bpi;
}
How I can remove the default togglebutton and use the my custom icon as a button?

Answer 1

Use Labeled#setGraphic(Node). The ToggleButton is a Labeled and thus has the setGraphic(Node) method defined. Alternatively, you could use a specialized ToogleButton constructor too.
The argument you should pass to setGraphic() is your BorderPane! He is a Node =)
To be uber clear, here is a code snippet for you:
myToogleButton.setGraphic(myBorderPane);