Use the XML Custom Control (Custom Control Designed by XML)

The key is the logical structure design: the custom control is very simple: [html] <? Xml version = "1.0" encoding = "UTF-8"?> <? Import javafx. scene. control. *?> <! -- Fx: root is used primarily when creating custom controls --> <fx: root type = "javafx. scene. layout. VBox" xmlns: fx =" http://javafx.com/fxml "Stylesheets =" customcontrol/customcontrol.css "styleClass =" v-box "> <TextField fx: id =" textField "/> <Button fx: id = "button" text = "Click Me" onAction = "# doSomething"/> </fx: root> the CSS style sheet used: [css]. v-box {-fx-spacing: 5 ;}. text-field {-fx-highlight-fill: linear-gradient (orange, orangered);} Package-info: [java]/*** An implementation of custom control. ** @ author HAN */package customcontrol; Model Create (Act as Controller and Root): [java] package customcontrol; import java. io. IOException; import javafx. beans. property. stringProperty; import javafx. fxml. FXML; import javafx. fxml. FXMLLoader; import javafx. scene. control. button; import javafx. scene. control. textField; import javafx. scene. layout. VBox;/*** For custom control creation in XML, it is assured by the associated use of * <code> fxmlLoader. setControl Ler (this); </code> and * <code> fxmlLoader. setRoot (this); </code> ** @ author HAN **/public class CustomControl extends VBox {@ FXML private TextField textField; @ FXML private Button button; public CustomControl () {FXMLLoader fxmlLoader = new FXMLLoader (); fxmlLoader. setController (this); fxmlLoader. setRoot (this); fxmlLoader. setLocation (CustomControl. class. getResource ("View. xml "); try {fxmlLoader. Load ();} catch (IOException e) {e. printStackTrace () ;}} public final String getTextFieldText () {return textFieldTextProperty (). get ();} public final void setTextFieldText (String text) {textFieldTextProperty (). set (text);} public StringProperty textFieldTextProperty () {return textField. textProperty ();} public final String getButtonText () {return buttonTextProperty (). get ();} public final v Oid setButtonText (String text) {buttonTextProperty (). set (text);} public StringProperty buttonTextProperty () {return button. textProperty () ;}@ FXML private void doSomething () {System. out. println ("The button was clicked! ") ;}} Example in Java: 1. if this example does not use a custom CSS style table, the developer-defined style is [java] package customcontrol; import javafx by default. application. application; import javafx. scene. scene; import javafx. stage. stage; public class UseInJava extends Application {public static void main (String [] args) {launch (args) ;}@ Override public void start (Stage stage) throws Exception {CustomControl customControl = new CustomControl (); customContr Ol. setTextFieldText ("Hello! "); CustomControl. setButtonText ("MyButton"); customControl. getStyleClass (). add ("custom-control"); Scene scene = new Scene (customControl); // scene. getStylesheets (). add (// UseInJava. class. getResource ("useinjava.css "). toExternalForm (); stage. setScene (scene); stage. setTitle ("Custom Control"); stage. setWidth (300); stage. setHeight (200); stage. show () ;}} 2. however, the strength is that you can Override the internal Region style of the control defined by the developer: [j Ava] package customcontrol; import javafx. application. application; import javafx. scene. scene; import javafx. stage. stage; public class UseInJava extends Application {public static void main (String [] args) {launch (args) ;}@ Override public void start (Stage stage) throws Exception {CustomControl customControl = new CustomControl (); customControl. setTextFieldText ("Hello! "); CustomControl. setButtonText ("MyButton"); customControl. getStyleClass (). add ("custom-control"); Scene scene = new Scene (customControl); scene. getStylesheets (). add (UseInJava. class. getResource ("useinjava.css "). toExternalForm (); stage. setScene (scene); stage. setTitle ("Custom Control"); stage. setWidth (300); stage. setHeight (200); stage. show () ;}} [css]. custom-control. button {-fx-base: #99 bcfd ;}. custom-control. text-field {-fx-highlight-fill: linear-gradient (greenyellow, limegreen );}