Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX - create custom button with image

Tags:

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.

like image 624
jerome Avatar asked May 09 '12 14:05

jerome


People also ask

How do I make an image Javafx clickable?

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.

How do you add a button to a scene in Javafx?

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.

What is a StackPane in Javafx?

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.


1 Answers

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:

  1. You get the default toggle button behavior and don't have to re-implement it yourself by adding your own focus styling, mouse and key handlers etc.
  2. If your app gets ported to different platform such as a mobile device, it will work out of the box responding to touch events rather than mouse events, etc.
  3. Your styling is separated from your application logic so it is easier to restyle your application.

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.

like image 179
jewelsea Avatar answered Nov 10 '22 00:11

jewelsea