I would like to create a custom button, that has two states pressed or not, like a toggle button. I have got two images to do this (pressed and not pressed), so how can i create the button and display it with my images ? The button must take the size of the image.
I am not using FXML. Thank you for helping.
Lets start with scenebuilder, open the fxml file. Drag-and-drop ImageView from Scenebuilder library(right panel). Once added, select the ImageView and give it a fx:id "iView" in this case, then goto Code section and add a function name in OnMouseClicked field.
You can create a Button by instantiating the javafx. scene. control. Button class of this package and, you can set text to the button using the setText() method.
The StackPane layout pane places all the nodes into a single stack where every new node gets placed on the top of the previous node. It is represented by javafx.
There are a few different ways to accomplish this, I'll outline my favourites.
Use a ToggleButton and apply a custom style to it. I suggest this because your required control is "like a toggle button" but just looks different from the default toggle button styling.
My preferred method is to define a graphic for the button in css:
.toggle-button { -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png'); } .toggle-button:selected { -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png'); }
OR use the attached css to define a background image.
// file imagetogglebutton.css deployed in the same package as ToggleButtonImage.class .toggle-button { -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png'); -fx-background-repeat: no-repeat; -fx-background-position: center; } .toggle-button:selected { -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png'); }
I prefer the -fx-graphic specification over the -fx-background-* specifications as the rules for styling background images are tricky and setting the background does not automatically size the button to the image, whereas setting the graphic does.
And some sample code:
import javafx.application.Application; import javafx.scene.*; import javafx.scene.control.ToggleButton; import javafx.scene.layout.StackPaneBuilder; import javafx.stage.Stage; public class ToggleButtonImage extends Application { public static void main(String[] args) throws Exception { launch(args); } @Override public void start(final Stage stage) throws Exception { final ToggleButton toggle = new ToggleButton(); toggle.getStylesheets().add(this.getClass().getResource( "imagetogglebutton.css" ).toExternalForm()); toggle.setMinSize(148, 148); toggle.setMaxSize(148, 148); stage.setScene(new Scene( StackPaneBuilder.create() .children(toggle) .style("-fx-padding:10; -fx-background-color: cornsilk;") .build() )); stage.show(); } }
Some advantages of doing this are:
An alternate is to not use css and still use a ToggleButton, but set the image graphic in code:
import javafx.application.Application; import javafx.beans.binding.Bindings; import javafx.scene.*; import javafx.scene.control.ToggleButton; import javafx.scene.image.*; import javafx.scene.layout.StackPaneBuilder; import javafx.stage.Stage; public class ToggleButtonImageViaGraphic extends Application { public static void main(String[] args) throws Exception { launch(args); } @Override public void start(final Stage stage) throws Exception { final ToggleButton toggle = new ToggleButton(); final Image unselected = new Image( "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png" ); final Image selected = new Image( "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png" ); final ImageView toggleImage = new ImageView(); toggle.setGraphic(toggleImage); toggleImage.imageProperty().bind(Bindings .when(toggle.selectedProperty()) .then(selected) .otherwise(unselected) ); stage.setScene(new Scene( StackPaneBuilder.create() .children(toggle) .style("-fx-padding:10; -fx-background-color: cornsilk;") .build() )); stage.show(); } }
The code based approach has the advantage that you don't have to use css if you are unfamilar with it.
For best performance and ease of porting to unsigned applet and webstart sandboxes, bundle the images with your app and reference them by relative path urls rather than downloading them off the net.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With