java - 为 SceneBuilder (JavaFX) 构建自定义组件

Question

我关注了这个博客Adding a Custom JavaFX Component to Scene Builder 2.0 ，并构建了我自己的自定义组件。

FXML 文件:

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

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

<fx:root id="AnchorPane" maxHeight="-Infinity" prefHeight="25.0" prefWidth="400.0" styleClass="mainFxmlClass" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@style.css" />
    </stylesheets>
   <children>
      <HBox fx:id="border" prefHeight="25.0" prefWidth="400.0" styleClass="textbox-container" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <children>
            <Label fx:id="label" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="25.0" prefWidth="200.0" styleClass="textbox-label" text="Label" HBox.hgrow="ALWAYS" />
            <HBox minWidth="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
               <children>
                  <TextField fx:id="textbox" prefWidth="176.0" styleClass="textbox" HBox.hgrow="ALWAYS" />
                  <Button fx:id="clear" focusTraversable="false" mnemonicParsing="false" styleClass="button-controller" text="X" />
               </children>
            </HBox>
         </children>
      </HBox>
   </children>
</fx:root>

Controller 类:

public class CellTextFieldClear extends AnchorPane {

    @FXML
    private HBox border;
    @FXML
    private Label label;
    @FXML
    private TextField textbox;
    @FXML
    private Button clear;

    public CellTextFieldClear(){
        FXMLLoader loader = new FXMLLoader(getClass().getResource("/celltextfieldclear/CellTextFieldClear.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        try{
            loader.load();
        }catch(IOException exception){
            throw new RuntimeException(exception);
        }
    }

    public void setOnActionHandlerForClear(EventHandler<ActionEvent> event){
        clear.setOnAction(event);
    }

    public void setEditable(boolean value){
        textbox.setEditable(value);
    }

    public String getTextFromTextBox(){
        return textbox.getText();
    }

    public void setTextBoxText(String text){
        textbox.setText(text);
    }

    public void setLableText(String text){
        label.setText(text);
    }

    public String getTextFromLabel(){
        return label.getText();
    }
}

样式表:

.textbox {
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-background-color:  white;
}

.textbox-label {
    -fx-background-color:  #b0c4de;
    -fx-padding: 0 0 0 5;
}

.textbox-container {
    -fx-border-color: #191970;
    -fx-border-width: 0.5;
}

.button-controller {
    -fx-background-radius: 0; 
    -fx-background-insets: 0; 
    -fx-background-color: white;
}

.button-controller:hover {
    -fx-background-color:
        #ecebe9,
        rgba(0,0,0,0.05),
        linear-gradient(#dcca8a, #c7a740),
        linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
        linear-gradient(#f6ebbe, #e6c34d);
    -fx-background-insets: 0 0 -1 0; 
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}

.button-controller:pressed {
    -fx-background-color:
        #ecebe9,
        rgba(0,0,0,0.05),
        linear-gradient(#dac980, #c6a530),
        linear-gradient(#f8f0d4 0%, #f3e4ba 20%, #e0c050 80%, #e3c440 100%),
        linear-gradient(#f5fbae, #e7c94f);
    -fx-background-insets: 0 0 -1 0; 
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}

输出:

现在我的问题是我无法更改场景生成器中标签的值。我们可以创建一个将出现在场景生成器上并有助于更改标签文本的自定义字段吗？

Answer 1

为了在场景生成器上拥有可编辑字段，您应该使用属性。否则，将使用 ReadOnlyStringWrapper。

例如这些:

private final BooleanProperty editable = new SimpleBooleanProperty();

public boolean isEditable() {
    return editable.get();
}

public void setEditable(boolean value) {
    editable.set(value);
}

public final BooleanProperty editableProperty() {
    return editable;
}

private final StringProperty textFromTextBox = new SimpleStringProperty();

public String getTextFromTextBox() {
    return textFromTextBox.get();
}

public void setTextFromTextBox(String value) {
    textFromTextBox.set(value);
}

public final StringProperty textFromTextBoxProperty() {
    return textFromTextBox;
}

private final StringProperty labelText = new SimpleStringProperty();

public String getLabelText() {
    return labelText.get();
}

public void setLabelText(String value) {
    labelText.set(value);
}

public final StringProperty labelTextProperty() {
    return labelText;
}

然后将控件绑定(bind)到这些属性:

public CellTextFieldClear(){
    ...

    textbox.editableProperty().bind(editableProperty());
    textbox.textProperty().bind(textFromTextBoxProperty());
    label.textProperty().bind(labelTextProperty());
}