JavaFX：如何保持VBox背景色持久？

Question

I've asked this question before but I couldn't offer a preferably a Minimal, Complete, and Verifiable example. So I made another sample which is correctly working and completely minimal. By the way, I want to change the color of a menu box which I click one of those, and it would be remain persistent whenever I click another item such as a button. Here's a sample below and please help me..again..

FXMLDocumentController.java

package javafxapplication1;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;

/**
 *
 * @author James
 */
public class FXMLDocumentController implements Initializable {
    @FXML
    private VBox menuVBox1 = new VBox();
    @FXML
    private VBox menuVBox2 = new VBox();
    @FXML
    private VBox menuVBox3 = new VBox();
    @FXML
    private VBox parentMenuVBox = new VBox(menuVBox1, menuVBox2, menuVBox3);

    private final Background focusBackground = new Background(new BackgroundFill(Color.web("#000000"), CornerRadii.EMPTY, Insets.EMPTY));
    private final Background unfocusBackground = new Background(new BackgroundFill(Color.web("#F4F4F4"), CornerRadii.EMPTY, Insets.EMPTY));

    private void setMenuBoxColor (VBox menu) {
        VBox menuVBox = menu;
        menuVBox.requestFocus();
        for (Node child : parentMenuVBox.getChildren()) {
            VBox vb = (VBox) child;
            vb.backgroundProperty().bind(Bindings
                    .when(vb.focusedProperty())
                    .then(focusBackground)
                    .otherwise(unfocusBackground)
            );
        }
    }

    @FXML
    private void handleSelectMenus(MouseEvent event) {
        //Change the color of clicked VBox
        setMenuBoxColor((VBox)event.getSource());

        System.out.println("Menu clicked");
    }

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

}

FXMLDocument.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="132.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication1.FXMLDocumentController">
   <left>
      <VBox fx:id="parentMenuVBox" prefHeight="200.0" prefWidth="100.0" spacing="10.0" BorderPane.alignment="CENTER">
         <children>
            <VBox fx:id="menuVBox1" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
               <children>
                  <Label text="MENU1" />
               </children>
            </VBox>
            <VBox fx:id="menuVBox2" layoutX="10.0" layoutY="10.0" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
               <children>
                  <Label text="MENU2" />
               </children>
            </VBox>
            <VBox fx:id="menuVBox3" layoutX="10.0" layoutY="160.0" onMouseClicked="#handleSelectMenus" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: #000000;">
               <children>
                  <Label text="MENU3" />
               </children>
            </VBox>
         </children>
         <padding>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
         </padding>
      </VBox>
   </left>
   <bottom>
      <HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <Button mnemonicParsing="false" text="Next" />
         </children>
      </HBox>
   </bottom>
</BorderPane>

javaFXApplication1.java

package javafxapplication1;

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

/**
 *
 * @author James
 */
public class JavaFXApplication1 extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Answer 1

First set the unfocusBackground for all child vboxes, and then set focusBackground for only selected one.

public class FXMLDocumentController implements Initializable
{
    @FXML
    private VBox parentMenuVBox;

    private final Background focusBackground = new Background( new BackgroundFill( Color.web( "#000000" ), CornerRadii.EMPTY, Insets.EMPTY ) );
    private final Background unfocusBackground = new Background( new BackgroundFill( Color.web( "#F4F4F4" ), CornerRadii.EMPTY, Insets.EMPTY ) );

    @FXML
    private void handleSelectMenus( MouseEvent event )
    {
        // Set unfocusBackground for all child vboxes
        for ( Node child : parentMenuVBox.getChildren() )
        {
            VBox vb = ( VBox ) child;
            vb.setBackground( unfocusBackground );
        }

        // and set focusBackground for only selected one
        VBox selected = ( VBox ) event.getSource();
        selected.setBackground( focusBackground );

        System.out.println( "Menu clicked" );
    }

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

}

I changed only the fxml controller from the code in the question.