Abby Abby - 1 month ago 21
Java Question

Graphic automatically fill button

I'm using JavaFX, fxml, and css to display buttons with an image. When I change the size of the window, the image of the button nicely moves with the center of the button. I also want the image to scale up to, say, 80% of the button, but I can't figure out how to do that. A Java solution would be fine as well, if it can't be done in just fxml or css. The code is below, but I also made a repo with a MWE on GitHub.

fxml

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane fx:controller="sample.Controller"
xmlns:fx="http://javafx.com/fxml"
alignment="center"
hgap="10"
vgap="10">
<rowConstraints>
<RowConstraints percentHeight="50"/>
<RowConstraints percentHeight="50"/>
</rowConstraints>

<Button
fx:id="buttonUp"
GridPane.columnIndex="0"
GridPane.rowIndex="0"
maxHeight="Infinity"
maxWidth="Infinity"
onMousePressed="#buttonUp"
onMouseReleased="#buttonUp">
</Button>

<Button
fx:id="buttonDown"
GridPane.columnIndex="0"
GridPane.rowIndex="1"
maxHeight="Infinity"
maxWidth="Infinity"
onMousePressed="#buttonUp"
onMouseReleased="#buttonUp">
</Button>
</GridPane>


css

#buttonUp {
-fx-graphic: url('resources/up_small.png');
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-effect: null;
-fx-background-color: transparent;
}

#buttonUp:pressed {
-fx-graphic: url("resources/up_pressed_small.png");
}

#buttonDown {
-fx-graphic: url('resources/down_small.png');
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-effect: null;
-fx-background-color: transparent;
}

#buttonDown:pressed {
-fx-graphic: url("resources/down_pressed_small.png");
}


Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.input.MouseEvent;

public class Controller {

@FXML
protected void buttonUp(MouseEvent event) {
if(event.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
System.out.println("Up button pressed.");
} else { // mouse released
System.out.println("Up button released.");
}
}

@FXML
protected void buttonDown(MouseEvent event) {
if(event.getEventType().equals(MouseEvent.MOUSE_PRESSED)) {
System.out.println("Down button pressed.");
} else { // mouse released
System.out.println("Down button released.");
}
}
}


Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.File;

public class Main extends Application {

@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Resizing");
Scene scene = new Scene(root, 650, 350);
File file = new File("src/sample/stylesheet.css");
scene.getStylesheets().add(file.toURI().toString());
primaryStage.setScene(scene);
primaryStage.show();
}


public static void main(String[] args) {
launch(args);
}
}

Answer

This works!

    @Override
    public void initialize(URL url, ResourceBundle rb) {


        try {
            // TODO
            File selectedFile = new File("splash.png");
            if(selectedFile.exists())
            {
                System.out.println(selectedFile.getAbsolutePath());
            }
            //Image image = new Image(selectedFile.toURI().toURL().toString());
            //Image image = new Image(getClass().getResourceAsStream(selectedFile.getCanonicalPath()));
            Image image = new Image(selectedFile.toURI().toURL().toString());
            ImageView ivMain = new ImageView(image);
            ivMain.fitHeightProperty().bind(apMain.heightProperty());
            ivMain.fitWidthProperty().bind(apMain.widthProperty());
            Button btn2 = new Button("", ivMain);
            apMain.getChildren().add(btn2);
            btn2.setMaxWidth(Double.MAX_VALUE);
            btn2.setMaxHeight(Double.MAX_VALUE);


            apMain.widthProperty().addListener(new ChangeListener<Number>(){
                @Override
                public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                    btn2.setPrefWidth(newValue.intValue());
                }

            });

            apMain.heightProperty().addListener(new ChangeListener<Number>(){
                @Override
                public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                    btn2.setPrefHeight(newValue.intValue());
                }

            });
        } catch (MalformedURLException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        } catch (IOException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        }



    }  

Before:

After: