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

关键是其中的逻辑结构设计：自定义的控件很简单：
 
 
[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>  
 
其中使用的CSS样式表：
 
[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;  
 
模型建立（充当Controller和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.setController(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 void setButtonText(String text) {  
        buttonTextProperty().set(text);  
    }  
  
    public StringProperty buttonTextProperty() {  
        return button.textProperty();  
    }  
  
    @FXML  
    private void doSomething() {  
        System.out.println("The button was clicked!");  
    }  
}  
 
在Java中的使用样例：
1.若此样例不使用自定义的CSS样式表，则默认为开发者定义的风格：
 
[java]  
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();  
    }  
}  
 
 
 
2. 然而强大之处在于用户可以Override开发者定义的控件内部各自Region的风格：
[java]  
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();

补充：web前端 , HTML/CSS  ,