无法将CSS应用于以编程方式在MouseEvent上创建Pane

时间:2018-06-06 16:07:13

标签: java css javafx javafx-8

我有一个堆栈窗格,当鼠标进入时,我会创建一个窗格,在其中粘贴一些文本,并将其显示在鼠标附近。

StatisticsController.java

 stackPane.setOnMouseEntered(event -> {
            Pane pane = new Pane();
            Text text = new Text("Example Text");

            //Add the text to the pane and set it near the mouse
            pane.getChildren().add(text);
            pane.setLayoutY(event.getSceneY() - 50);
            pane.setLayoutX(event.getSceneX() - 100);

            //add the  style class to give it a blueBG background
            pane.getStyleClass().add("blueBG");

            // add it too our root
            getRoot().getChildren().add(pane);
});

正如您在下面看到的那样,当我翻过stackPane(图像中的黑色圆圈和问号)时出现了窗格和文本。

enter image description here

然而,它没有我正在寻找的蓝色背景。

我觉得奇怪的是,如果不是将其添加到根目录并将其添加到现有的Vbox中,它的样式正确(我在这里滚动相同的stackPane):

enter image description here

所以:

 //Styles Correctly
 getInfoBox().getChildren().add(pane);

// Adds but does not style
getRoot().getChildren().add(pane);

可能值得注意的一些事情:

1)getInfoBox()是一个静态getter。我有多个控制器,它们扩展了一个MasterController,它将静态实例变量扩展到所有控制器希望能够访问的东西 - 比如infoBox,以显示信息。

2)root是在Main类中创建的BorderPane:

Main.java

//Create the root
BorderPane root = new BorderPane();

// I've cut it out to save space but this repeats 4 times to set 
//an .fxml file for the top, left, right and bottom of the borderPane ///
FXMLLoader headerLoader = new FXMLLoader(getClass().getResource("/view/header.fxml"));
Parent headerRoot = headerLoader.load();
root.setTop(headerRoot);
//------------------------------------------//

//Set the static reference in the MasterController
MasterController.setRoot(root);

Scene scene = new Scene(root,1366,768);
primaryStage.setScene(scene);
primaryStage.show();

3)使用Scene Builder在.fxml文件中声明css文件。 top,bottom,left,right .fxml文件都具有相同的css(main.css)。那么在按钮上加载的statistic.fxml点击进入中心(你可以在图片中看到)

建议:可能是因为CSS没有为Scene或BorderPane本身定义,它只适用于添加到borderPane部分的节点?如果是这样,我将如何让输入场景/舞台使用相同的CSS并且否定将css添加到每个.fxml?

编辑:

将此代码添加到main时,将CSS应用于场景:

Scene scene = new Scene(root,1366,768);
        scene.getStylesheets().add(getClass().getResource("/css/main.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();

我明白了:

enter image description here

因此,文本的CSS现在正在运行,但不适用于Pane?我不知道为什么会这样。

// ---- REPRODUCTION - //

Main.java

package sample;

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

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        BorderPane bp = new BorderPane();

        MasterController.setRoot(bp);

        Parent left = FXMLLoader.load(getClass().getResource("left.fxml"));
        Parent right = FXMLLoader.load(getClass().getResource("right.fxml"));

        bp.setLeft(left);
        bp.setRight(right);

        Scene scene = new Scene(bp, 600, 400);
        scene.getStylesheets().add(getClass().getResource("main.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }


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

MasterController.java

package sample;

import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;

public class MasterController {

    private static VBox rightBox;
    private static BorderPane root;

    public static VBox getRightBox() {
        return rightBox;
    }

    public static void setRightBox(VBox rightBox) {
        MasterController.rightBox = rightBox;
    }

    public static BorderPane getRoot() {
        return root;
    }

    public static void setRoot(BorderPane root) {
        MasterController.root = root;
    }
}

LeftController.java。

package sample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;

import java.io.IOException;

public class LeftController extends MasterController {

    @FXML
    public void loadCenter(ActionEvent event) {
        try {
                FXMLLoader loader = new FXMLLoader(getClass().getResource("center.fxml"));
                Parent center = loader.load();
            getRoot().setCenter(center);
        } catch (IOException e){
            e.printStackTrace();
        }
    }
}

CenterController.java

package sample;

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;

public class CenterController extends MasterController {

@FXML
private VBox center;
    public void initialize() {
        Platform.runLater(this::build);

    }

    public void build() {
        center.getChildren().add(new Text("loaded"));

        StackPane stackPane = new StackPane();
        Text text = new Text("ROLL OVER");

        stackPane.getChildren().add(text);
        center.getChildren().add(stackPane);

        stackPane.setOnMouseEntered(event -> {
            getRightBox().getChildren().clear();

            Pane pane1 = new Pane();
            Text exampleText1 = new Text("Example Text");
            pane1.getStyleClass().add("blueBG");

            Pane pane2 = new Pane();
            Text exampleText2 = new Text("Example Text");
            pane2.getStyleClass().add("blueBG");

            pane1.getChildren().add(exampleText1);
            pane2.getChildren().add(exampleText2);

            pane1.setLayoutY(event.getSceneY() + 40);
            pane1.setLayoutX(event.getSceneX() - 40);

            getRoot().getChildren().add(pane1);
            getRightBox().getChildren().add(pane2);
        });
    }
}

RightController.java     包装样品;

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.layout.VBox;

public class RightController extends MasterController {

@FXML
private VBox rightBox;

    public void initialize() {
        setRightBox(rightBox);

    }
}

left.fxml

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

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

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.LeftController">
   <children>
      <Button mnemonicParsing="false" onAction="#loadCenter" prefHeight="38.0" prefWidth="200.0" text="Click me to load center" />
   </children>
</VBox>

center.fxml

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

<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>

<VBox fx:id="center" alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" stylesheets="@main.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.CenterController">
   <children>
      <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Center" />
   </children>
</VBox>

right.fxml

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

<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>

<VBox fx:id="rightBox" alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" stylesheets="@main.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.RightController">
   <children>
      <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Right Box" />
   </children>
</VBox>

的main.css

.blueBG {
    -fx-background-color: aqua;
}

您应该得到以下结果。添加到右侧时,您可以看到正确设置了窗格样式,但是当添加到根目录时也没有。

enter image description here

1 个答案:

答案 0 :(得分:3)

BorderPane仅对centerleftrighttopbottom子项应用布局。然而,它是布局的父级(或根的情况下的场景)在布局过程中设置Region的大小(或者不是,就像在这种情况下一样)。

结果是该样式应用于Pane,但Pane的大小仍为0。您可以通过添加

来验证这一点
pane1.resize(100, 100);

到事件处理程序以设置窗格的大小。

您需要使用不同类型的布局作为pane1大小的父级,以使其变为非空或自行调整大小。