在FXML中使用fx：id作为CSS id [英] Using fx:id as CSS id in FXML

问题描述

似乎在FXML中如果不指定ID（CSS），则默认使用fx：id值。我之前的理解是两个完全不相交，CSS的CSS和只有CSS。 fx：控制器中@FXML绑定的id。

It seems that in FXML if you don't specify a ID (CSS) then the fx:id value is used by default. My previous understanding was the two were completely disjoint, ID for CSS and only CSS. fx:id for @FXML bindings in the controller.

这可以通过一个小测试来证明 - 三个按钮，第一个带ID，第二个带FX：ID，第三个带两种类型的ID。

This can be demonstrated with a small test - three buttons, first with ID, second with FX:ID, third with both types of ID.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button id="cssid0" mnemonicParsing="false" text="Button" />
      <Button fx:id="fxid1" mnemonicParsing="false" text="Button" />
      <Button id="cssid2" fx:id="fxid2" mnemonicParsing="false" text="Button" />
   </children>
</VBox>

使用Node.lookup（cssSelector）允许通过fx选择：id

Using Node.lookup(cssSelector) allows selection by fx:id

@Override
public void start(Stage stage) throws Exception {
    FXMLLoader loader = new FXMLLoader(getClass().getResource("/foo.fxml"));
    Parent p = loader.load();

    System.out.println(p.lookup("#cssid0")); // => Button[id=cssid0, styleClass=button]'Button'
    System.out.println(p.lookup("#fxid1"));  // => Button[id=fxid1, styleClass=button]'Button'

    System.out.println(p.lookup("#fxid2"));  // => null (if there is a CSS ID it takes precedent)
    System.out.println(p.lookup("#cssid2")); // Button[id=cssid2, styleClass=button]'Button'

    stage.setScene(new Scene(p, 200, 200));
    stage.getScene().getStylesheets().add("/foo.css");
    stage.show();
}

此外，CSS允许选择fx：ID

Also CSS allows selection by the fx:ID

#cssid0 {
    -fx-color: red;
}
#fxid1 {
    -fx-color: green;
}
#cssid2 {
    -fx-color: blue;
}

这似乎不包括现有问题 JavaFX中的fx：id和id：有什么区别？，Javadoc for Node.getId（）或者我能找到的任何其他地方。

This does not appear to be covered by existing question What's the difference between fx:id and id: in JavaFX?, Javadoc for Node.getId() or anywhere else I could find.

这个功能非常有用，因为我们只需要指定一个可以用于控制器，CSS和单元的fx：id使用test-FX进行测试。

This feature is really useful as we only need to only specify a single fx:id which can be used for controllers, CSS and unit testing using test-FX.

使用这种方法是否可以，或者我是否建议在未来版本中可能会改变的未记录行为的假设？或者它是否记录在某个我遗漏的地方？

Is it OK to use this approach or am I building assumptions on undocumented behaviour that might change in a later release? Or is it documented somewhere I'm missing?

推荐答案

IMO部分记录在 FXML简介::可变分辨率。但初看起来并不那么明显：

IMO it is partially documented in Introduction to FXML :: Variable Resolution. But not so obvious at first look:

为元素分配fx：id值会在
文档的命名空间中创建一个变量以后可以通过变量
dereference属性来引用...

Assigning an fx:id value to an element creates a variable in the document's namespace that can later be referred to by variable dereference attributes ...

此外，如果对象的类型将
定义为id属性，此值也将传递给对象
setId（）方法。

Additionally, if the object's type defines an "id" property, this value will also be passed to the objects setId() method.

应该用if object定义idProperty并且尚未设置......来完成。基于相关的源代码在 FXMLLoader 在708左右：

It should be completed with "if object defines the idProperty and was not set already ...". Based on the related source code is in FXMLLoader at line around 708:

        // Add the value to the namespace
        if (fx_id != null) {
            namespace.put(fx_id, value);

            // If the value defines an ID property, set it
            IDProperty idProperty = value.getClass().getAnnotation(IDProperty.class);

            if (idProperty != null) {
                Map<String, Object> properties = getProperties();
                // set fx:id property value to Node.id only if Node.id was not
                // already set when processing start element attributes
                if (properties.get(idProperty.value()) == null) {
                    properties.put(idProperty.value(), fx_id);
                }
            }
            ...
        }

我认为可以建立这种行为。

I think it is ok to build on this behavior.

这篇关于在FXML中使用fx：id作为CSS id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！