Styjun

For a GUI I'm making the minimize, maximize, close buttons similar to that of Spotify by using an anchorpane for each 'button'. I created the buttons via scenebuilder and they are loaded to the class via fxml. I can't figure out how to call a particular instance of an anchorpane in the controller class to change its background color when the mouse enters or exits.

public static Stage primaryStage;

@Override

public void start(Stage primaryStage) throws Exception
{

 Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));

 primaryStage.setScene(new Scene(root, 1280, 800));

 ...

 this.primaryStage = primaryStage;

 etc. 

is how the UI class is set up

I expect the color of the anchorpane to change when the mouse enters the bounds, but as of now I have no idea how to call it.

Solved it, had to set an fxid to the anchorpane and then initiate it in the controller class after an @FXML.

Kinda like this:

@FXML
Anchorpane someButton;

@FXML
public void makeButtonWhite(MouseEvent event)

 someButton.setStyle("-fx-background-color: #ffffff");

The most convenient way of doing this imho is using a stylesheet to assign the background.

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" stylesheets="@style.css">
 <children>
 <AnchorPane prefWidth="30" prefHeight="20" styleClass="my-button"/>
 </children>
</AnchorPane>

style.css (same directory as fxml)

/* default style */
.my-button 
 -fx-background-color: blue;


/* style when mouse is inside the region */
.my-button:hover 
 -fx-background-color: red;

This allows you to easily add the style to multiple Regions; you simply need to add the style class it (styleClass="my-button").

the code you need for starting this must be the starting class

public class Class extends Application 

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


@Override
public void start(Stage primaryStage) 
 try 
 // Load root layout from fxml file.
 FXMLLoader loader = new FXMLLoader();

 loader.setLocation(this.getClass().getResource("/Folder/File.fxml"));
 loader.setController(yourControllerClass());
 //only if you do something with the controller class afterwards
 YourControllerClass controller = loader.setController();

 Parent parent = loader.load();

 // Show the scene containing the root layout.
 Scene scene = new Scene(parent);
 primaryStage.setScene(scene);
 primaryStage.show();
 catch (IOException e) 
 e.printStackTrace();
 

you know the code method in scenebuilder there you can set on mouse entered and exited for a button, a label etc. then if for example the button with the id "closeButton" and the OnMouseEntered "closeButtonOnEntered" and the OnMouseExited "closeButtonOnExited"
this will be the code you need

public yourcontrollerclass 
 @FXML
 Button closeButton;

 @FXML
 private void closeButtonOnEntered() 
 //sets button red
 button.setStyle("-fx-background-color: #ff0000");
 

 @FXML
 private void closeButtonOnExited() 
 //sets button your first color
 button.setStyle("-fx-background-color: transparent");
 

this can be done with nearly every thing in sceneBuilder

I hope i could help you(sorry for my bad english)