レイアウトクラスとして HBox 、コントロールとしてButtonのクラスの継承構造を示す。

JavaFxレイアウトの実験

下のプログラムは、ej1021A.jarを ダインロードして実行を確かめることができます。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.TilePane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class JavaFxLayout extends Application {

	Button []btns = {
			new Button("MyVBox"),
			new Button("MyHBox"),
			new Button("VHBox"),
			new Button("MyBorderPane"),
			new Button("MyPane"),
			new Button("MyGridPane"),
			new Button("MyFlowPane"),
			new Button("MyTilePane"),
			new Button("MyAnchorPane"),
	};

	@Override
	public void start(final Stage statge) throws Exception {

		statge.setScene(new Scene(new MyVBox(btns)));
		statge.show();


		btns[0].setOnAction(e->{
			statge.setScene(new Scene(new MyVBox(btns)));
			statge.setTitle("VBox のレイアウト");
		});
		btns[1].setOnAction(e->{
			statge.setScene(new Scene(new MyHBox(btns)));
			statge.setTitle("HBox のレイアウト");
		});
		btns[2].setOnAction(e->{
			statge.setScene(new Scene(new VH_Box(btns)));
			statge.setTitle("HBoxの中でVBoxを２つ配置したレイアウト");
		});
		btns[3].setOnAction(e->{
			statge.setScene(new Scene(new MyBorderPane(btns)));
			statge.setTitle("BorderPane のレイアウト");
		});
		btns[4].setOnAction(e->{
			statge.setScene(new Scene(new MyPane(btns)));
			statge.setTitle("Pane のレイアウト");
		});
		btns[5].setOnAction(e->{
			statge.setScene(new Scene(new MyGridPane(btns)));
			statge.setTitle("GridPane のレイアウト");
		});
		btns[6].setOnAction(e->{
			statge.setScene(new Scene(new MyFlowPane(btns)));
			statge.setTitle("FlowPaneのレイアウト");
		});
		btns[7].setOnAction(e->{
			statge.setScene(new Scene(new MyTilePane(btns)));
			statge.setTitle("TilePane のレイアウト");
		});
		btns[8].setOnAction(e->{
			statge.setScene(new Scene(new MyAnchorPane(btns)));
			statge.setTitle("AnchorPane のレイアウト");
		});
	}

	public static void main(String ...args )throws Exception {
		Application.launch(args);
	}
}

class MyVBox extends VBox {//部品を垂直方向で、並べるペイン
	MyVBox(Button []btns){
		this.getChildren().addAll(btns);
		this.setSpacing(5);
		this.setAlignment(Pos.CENTER);
	}
}
class MyHBox extends HBox {//部品を水平方向で、並べるペイン
	MyHBox(Button []btns){
		this.getChildren().addAll(btns);
	}
}
class VH_Box extends HBox {//2つのVBoxを左右に並べたHBoxのペイン
	VH_Box(Button []btns){
		VBox lBox = new VBox();
		VBox rBox = new VBox();
		this.getChildren().addAll(lBox,rBox);//左右のペインを配置
		lBox.getChildren().addAll(btns[0],btns[1]);//左ペイン内の配置
		rBox.getChildren().addAll(btns[2],btns[3],btns[4]);//右ペイン内の配置
	}
}
class MyBorderPane extends BorderPane {//中央とそれを中心に上下左右の箇所に配置するためのペイン
	MyBorderPane(Button []btns){
		Label label = new Label("試しにラベルを使った");
		BorderStroke borderStroke = new BorderStroke(
			Color.SILVER,
			BorderStrokeStyle.SOLID,
			new CornerRadii(5) ,//半径
			new BorderWidths(3) //太さ
		);
		Border border = new Border(borderStroke);
		label.setBorder( border );
		label.setPrefSize( 500 , 500 );
		label.setStyle("-fx-background-color: #ccccccff;" );
		btns[4].setPrefSize(500, 500);

		this.setCenter(btns[4]);
		//this.setCenter(label);//上記ラベルを試す場合の例
		this.setTop(btns[1]);
		this.setBottom(btns[2]);
		this.setLeft(btns[3]);
		this.setRight(btns[0]);
		btns[0].setPrefSize(50,50);
		this.setAlignment(btns[1], Pos.CENTER);
		this.setPrefSize(300, 300);
	}
}
class MyPane extends Pane {//各部品の位置を指定して並べるためのペイン
	MyPane(Button []btns){
		this.getChildren().addAll(btns);
		for(int n = 0; n < btns.length; n++){
			btns[n].setLayoutX(20*n);//位置指定
			btns[n].setLayoutY(20*n);
		}
	}
}
class MyGridPane extends GridPane {//格子状に部品を並べるためのペイン
	MyGridPane(Button []btns){
		this.setHgap(2);
		this.setVgap(2);
		this.setPadding(new Insets(10, 10, 10, 10));
		this.add(btns[0],0,0);//列と行を指定
		this.add(btns[1],0,1);
		this.add(btns[2],0,2);
		this.add(btns[3],0,3, 2, 1);
		this.add(btns[4],0,4);
		this.add(btns[5],1,1);
		this.add(btns[6],1,2);
		this.add(btns[7],1,4);
		this.add(btns[8],2,0, 1,5);
		btns[3].setPrefWidth(150);
		btns[8].setPrefHeight(150);
	}
}
class MyFlowPane extends FlowPane {//部品を流れる並べるペイン
	MyFlowPane(Button []btns){
		this.getChildren().addAll(btns);
	}
}
class MyTilePane extends TilePane {//タイル状(同じサイズとして)に流れる並べるペイン
	MyTilePane(Button []btns){
		this.getChildren().addAll(btns);
		for(int n = 0; n < btns.length; n++){
			btns[n].setPrefSize(140,20);
		}
	}
}

class MyAnchorPane extends AnchorPane {//Paneの上下左右の端からの位置を指定するペイン
	MyAnchorPane(Button []btns){
		this.getChildren().addAll(btns[0],btns[1]);
		this.setTopAnchor(btns[0], 10.0);
		this.setLeftAnchor(btns[0], 10.0);
		this.setRightAnchor(btns[0], 10.0);

		this.setTopAnchor(btns[1], 50.0);//上端からの位置指定
		this.setBottomAnchor(btns[1], 10.0);//下端からの位置
		this.setLeftAnchor(btns[1], 10.0);
		this.setRightAnchor(btns[1], 10.0);
	}
}