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

關鍵是其中的邏輯結構設計：自定義的控件很簡單：

<?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樣式表：

.v-box {
	-fx-spacing: 5;
}

.text-field {
	-fx-highlight-fill: linear-gradient(orange, orangered);
}

Package-info：

/**
 * An implementation of custom control.
 * 
 * @author HAN
 */
package customcontrol;

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

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樣式表，則默認爲開發者定義的風格：

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的風格：

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

.custom-control .button {
	-fx-base: #99bcfd;
}

.custom-control .text-field {
	-fx-highlight-fill: linear-gradient(greenyellow, limegreen);
}