Can not create clearable textField using ControlsFX - javafx

Question

I have created TextField using Scene Builder but when I tried it with KeyEvent but it doesn't work.
public class FXMLDocumentController implements Initializable {
#FXML
private TextField searchPatient;
#FXML
void keyTyped(KeyEvent event) {
this.searchPatient = TextFields.createClearableTextField();
}
}
Here is main class:
public class MyFX 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();
}
public static void main(String[] args) {
launch(args);
}
}
Here is FXMLDocument.fxml:
<AnchorPane id="AnchorPane" prefHeight="597.0" prefWidth="726.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.homeo.home.FXMLDocumentController">
<children>
<TextField fx:id="searchPatient" layoutX="14.0" layoutY="109.0" onKeyTyped="#keyTyped" prefHeight="26.0" prefWidth="372.0" promptText="Search" />
</children>
</AnchorPane>
I don't want to relay on code for designing that's why I want to use ControlsFX with IDE generated code.
I'm expecting textfield must show clear icon as I enter few text in a textfield that's called clearableTextFieldf.
But with the all code above doesn't work as I expected.
It does not create ClearableTextField

Answer 1

You're creating the TextField in the KEY_TYPED event handler of a conventional TextField placed in your scene. The newly created TextField is never added to any scene though.
You could use the fx:factory attribute to use the static method for creating the TextField that FXMLLoader adds to the scene:
...
<?import org.controlsfx.control.textfield.TextFields?>
<AnchorPane id="AnchorPane" prefHeight="597.0" prefWidth="726.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.homeo.home.FXMLDocumentController">
<children>
<TextFields fx:factory="createClearableTextField" fx:id="searchPatient" layoutX="14.0" layoutY="109.0" prefHeight="26.0" prefWidth="372.0" promptText="Search" />
</children>
</AnchorPane>
You could alternatively use the initialize method to create&add your TextField instead:
public class FXMLDocumentController implements Initializable {
...
#FXML
private AnchorPane anchorPane;
#Override
public void initialize(URL location, Resources resources)
searchPatient = TextFields.createClearableTextField();
searchPatient.setLayoutX(14.0);
searchPatient.setLayoutY(109.0);
searchPatient.setPrefSize(372.0, 26.0);
searchPatient.setPromptText("Search");
anchorPane.getChildren().add(searchPatient);
...
}
}
<AnchorPane fx:id="anchorPane" id="AnchorPane" prefHeight="597.0" prefWidth="726.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.homeo.home.FXMLDocumentController" />