Создание пользовательских компонентов для 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(); 
    } 
} 

StyleSheet:

.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); 
} 

Выход:

Теперь мой д uestion - я не могу изменить значение метки из Scene Builder. Можем ли мы создать настраиваемое поле, которое появится в Scene Builder и которое поможет изменить текст метки?

Answer 1

Чтобы иметь редактируемые поля в Scene Builder, вы должны использовать свойства. В противном случае используется 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; 
} 

А затем связать элементы управления с этими свойствами:

public CellTextFieldClear(){ 
    ... 

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