使用XML自定义控件（Custom Control Designed by XML（转存））

关键是其中的逻辑结构设计：自定义的控件很简单：

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <?import javafx.scene.control.*?>  
4.   
5. <!-- fx:root is used primarily when creating custom controls -->  
6. <fx:root type="javafx.scene.layout.VBox" xmlns:fx="http://javafx.com/fxml"  
7.     stylesheets="customcontrol/customcontrol.css" styleClass="v-box">  
8.     <TextField fx:id="textField"/>  
9.     <Button fx:id="button" text="Click Me" onAction="#doSomething"/>  
10. </fx:root>  

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <?import javafx.scene.control.*?>  
4.   
5. <!-- fx:root is used primarily when creating custom controls -->  
6. <fx:root type="javafx.scene.layout.VBox" xmlns:fx="http://javafx.com/fxml"  
7.     stylesheets="customcontrol/customcontrol.css" styleClass="v-box">  
8.     <TextField fx:id="textField"/>  
9.     <Button fx:id="button" text="Click Me" onAction="#doSomething"/>  
10. </fx:root>  

其中使用的CSS样式表：

[css]  view plain  copy

1. .v-box {  
2.     -fx-spacing: 5;  
3. }  
4.   
5. .text-field {  
6.     -fx-highlight-fill: linear-gradient(orange, orangered);  
7. }  

[css]  view plain  copy

1. .v-box {  
2.     -fx-spacing: 5;  
3. }  
4.   
5. .text-field {  
6.     -fx-highlight-fill: linear-gradient(orange, orangered);  
7. }  

Package-info：

[java]  view plain  copy

1. /** 
2.  * An implementation of custom control. 
3.  *  
4.  * @author HAN 
5.  */  
6. package customcontrol;  

[java]  view plain  copy

1. /** 
2.  * An implementation of custom control. 
3.  *  
4.  * @author HAN 
5.  */  
6. package customcontrol;  

模型建立（充当Controller和Root）：

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import java.io.IOException;  
4.   
5. import javafx.beans.property.StringProperty;  
6. import javafx.fxml.FXML;  
7. import javafx.fxml.FXMLLoader;  
8. import javafx.scene.control.Button;  
9. import javafx.scene.control.TextField;  
10. import javafx.scene.layout.VBox;  
11.   
12. /** 
13.  * For custom control creation in XML, it is assured by the associated use of 
14.  * <code>fxmlLoader.setController(this);</code> and 
15.  * <code>fxmlLoader.setRoot(this);</code> 
16.  *  
17.  * @author HAN 
18.  *  
19.  */  
20. public class CustomControl extends VBox {  
21.     @FXML  
22.     private TextField textField;  
23.       
24.     @FXML  
25.     private Button button;  
26.   
27.     public CustomControl() {  
28.         FXMLLoader fxmlLoader = new FXMLLoader();  
29.         fxmlLoader.setController(this);  
30.         fxmlLoader.setRoot(this);  
31.         fxmlLoader.setLocation(CustomControl.class.getResource("View.xml"));  
32.         try {  
33.             fxmlLoader.load();  
34.         } catch (IOException e) {  
35.             e.printStackTrace();  
36.         }  
37.     }  
38.   
39.     public final String getTextFieldText() {  
40.         return textFieldTextProperty().get();  
41.     }  
42.   
43.     public final void setTextFieldText(String text) {  
44.         textFieldTextProperty().set(text);  
45.     }  
46.   
47.     public StringProperty textFieldTextProperty() {  
48.         return textField.textProperty();  
49.     }  
50.       
51.     public final String getButtonText() {  
52.         return buttonTextProperty().get();  
53.     }  
54.   
55.     public final void setButtonText(String text) {  
56.         buttonTextProperty().set(text);  
57.     }  
58.   
59.     public StringProperty buttonTextProperty() {  
60.         return button.textProperty();  
61.     }  
62.   
63.     @FXML  
64.     private void doSomething() {  
65.         System.out.println("The button was clicked!");  
66.     }  
67. }  

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import java.io.IOException;  
4.   
5. import javafx.beans.property.StringProperty;  
6. import javafx.fxml.FXML;  
7. import javafx.fxml.FXMLLoader;  
8. import javafx.scene.control.Button;  
9. import javafx.scene.control.TextField;  
10. import javafx.scene.layout.VBox;  
11.   
12. /** 
13.  * For custom control creation in XML, it is assured by the associated use of 
14.  * <code>fxmlLoader.setController(this);</code> and 
15.  * <code>fxmlLoader.setRoot(this);</code> 
16.  *  
17.  * @author HAN 
18.  *  
19.  */  
20. public class CustomControl extends VBox {  
21.     @FXML  
22.     private TextField textField;  
23.       
24.     @FXML  
25.     private Button button;  
26.   
27.     public CustomControl() {  
28.         FXMLLoader fxmlLoader = new FXMLLoader();  
29.         fxmlLoader.setController(this);  
30.         fxmlLoader.setRoot(this);  
31.         fxmlLoader.setLocation(CustomControl.class.getResource("View.xml"));  
32.         try {  
33.             fxmlLoader.load();  
34.         } catch (IOException e) {  
35.             e.printStackTrace();  
36.         }  
37.     }  
38.   
39.     public final String getTextFieldText() {  
40.         return textFieldTextProperty().get();  
41.     }  
42.   
43.     public final void setTextFieldText(String text) {  
44.         textFieldTextProperty().set(text);  
45.     }  
46.   
47.     public StringProperty textFieldTextProperty() {  
48.         return textField.textProperty();  
49.     }  
50.       
51.     public final String getButtonText() {  
52.         return buttonTextProperty().get();  
53.     }  
54.   
55.     public final void setButtonText(String text) {  
56.         buttonTextProperty().set(text);  
57.     }  
58.   
59.     public StringProperty buttonTextProperty() {  
60.         return button.textProperty();  
61.     }  
62.   
63.     @FXML  
64.     private void doSomething() {  
65.         System.out.println("The button was clicked!");  
66.     }  
67. }  

在Java中的使用样例：
1.若此样例不使用自定义的CSS样式表，则默认为开发者定义的风格：

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import javafx.application.Application;  
4. import javafx.scene.Scene;  
5. import javafx.stage.Stage;  
6.   
7. public class UseInJava extends Application {  
8.     public static void main(String[] args) {  
9.         launch(args);  
10.     }  
11.   
12.     @Override  
13.     public void start(Stage stage) throws Exception {  
14.         CustomControl customControl = new CustomControl();  
15.         customControl.setTextFieldText("Hello!");  
16.         customControl.setButtonText("MyButton");  
17.         customControl.getStyleClass().add("custom-control");  
18.   
19.         Scene scene = new Scene(customControl);  
20. //      scene.getStylesheets().add(  
21. //              UseInJava.class.getResource("useinjava.css").toExternalForm());  
22.         stage.setScene(scene);  
23.         stage.setTitle("Custom Control");  
24.         stage.setWidth(300);  
25.         stage.setHeight(200);  
26.         stage.show();  
27.     }  
28. }  

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import javafx.application.Application;  
4. import javafx.scene.Scene;  
5. import javafx.stage.Stage;  
6.   
7. public class UseInJava extends Application {  
8.     public static void main(String[] args) {  
9.         launch(args);  
10.     }  
11.   
12.     @Override  
13.     public void start(Stage stage) throws Exception {  
14.         CustomControl customControl = new CustomControl();  
15.         customControl.setTextFieldText("Hello!");  
16.         customControl.setButtonText("MyButton");  
17.         customControl.getStyleClass().add("custom-control");  
18.   
19.         Scene scene = new Scene(customControl);  
20. //      scene.getStylesheets().add(  
21. //              UseInJava.class.getResource("useinjava.css").toExternalForm());  
22.         stage.setScene(scene);  
23.         stage.setTitle("Custom Control");  
24.         stage.setWidth(300);  
25.         stage.setHeight(200);  
26.         stage.show();  
27.     }  
28. }  

2. 然而强大之处在于用户可以Override开发者定义的控件内部各自Region的风格：

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import javafx.application.Application;  
4. import javafx.scene.Scene;  
5. import javafx.stage.Stage;  
6.   
7. public class UseInJava extends Application {  
8.     public static void main(String[] args) {  
9.         launch(args);  
10.     }  
11.   
12.     @Override  
13.     public void start(Stage stage) throws Exception {  
14.         CustomControl customControl = new CustomControl();  
15.         customControl.setTextFieldText("Hello!");  
16.         customControl.setButtonText("MyButton");  
17.         customControl.getStyleClass().add("custom-control");  
18.   
19.         Scene scene = new Scene(customControl);  
20.         scene.getStylesheets().add(  
21.                 UseInJava.class.getResource("useinjava.css").toExternalForm());  
22.         stage.setScene(scene);  
23.         stage.setTitle("Custom Control");  
24.         stage.setWidth(300);  
25.         stage.setHeight(200);  
26.         stage.show();  
27.     }  
28. }  

[java]  view plain  copy

1. package customcontrol;  
2.   
3. import javafx.application.Application;  
4. import javafx.scene.Scene;  
5. import javafx.stage.Stage;  
6.   
7. public class UseInJava extends Application {  
8.     public static void main(String[] args) {  
9.         launch(args);  
10.     }  
11.   
12.     @Override  
13.     public void start(Stage stage) throws Exception {  
14.         CustomControl customControl = new CustomControl();  
15.         customControl.setTextFieldText("Hello!");  
16.         customControl.setButtonText("MyButton");  
17.         customControl.getStyleClass().add("custom-control");  
18.   
19.         Scene scene = new Scene(customControl);  
20.         scene.getStylesheets().add(  
21.                 UseInJava.class.getResource("useinjava.css").toExternalForm());  
22.         stage.setScene(scene);  
23.         stage.setTitle("Custom Control");  
24.         stage.setWidth(300);  
25.         stage.setHeight(200);  
26.         stage.show();  
27.     }  
28. }  

[css]  view plain  copy

1. .custom-control .button {  
2.     -fx-base: #99bcfd;  
3. }  
4.   
5. .custom-control .text-field {  
6.     -fx-highlight-fill: linear-gradient(greenyellow, limegreen);  
7. }  

[css]  view plain  copy

1. .custom-control .button {  
2.     -fx-base: #99bcfd;  
3. }  
4.   
5. .custom-control .text-field {  
6.     -fx-highlight-fill: linear-gradient(greenyellow, limegreen);  
7. }